Figma To Code

Рет қаралды 44,271

Күн бұрын

In this video, we’re going to taking JC’s design from the previous video ( • Designing an App in Fi... ) and turning it into code inside an Xcode project. You’ll learn how to dissect an app design in Figma into SwiftUI Layout components, export the design assets, colors and fonts and how to apply all of it into your SwiftUI project.
Figma is a free web-based design tool used by professionals and indie devs to create app designs, prototypes and mockups. Create your free account to follow along:
⚡cwc.to/figma
🚨 SPECIAL CWC+ OFFER FOR KZfaq:
👋 Our "Launch Your First App" program will help you build up your iOS skills to publish your very own feature rich app even if you’re a beginner starting from scratch. cwc.to/youtubeoffer
Timestamps:
00:00 Into
01:13 Chapter 1: Dissect
03:16 Chapter 2: Export design assets
10:38 Chapter 3: Add assets to project
25:05 Chapter 4: Set up initial structures
28:50 Chapter 5: Set up nav
27:26 Chapter 6: Set up scrollview and table
50:52 Outro
Links:
Project: github.com/codewithchris/figm...
Figma: www.figma.com/file/CLlq2UzMh9...
Font: github.com/rsms/inter
🚨 SPECIAL CWC+ OFFER FOR KZfaq:
👋 Our "Launch Your First App" program will help you build up your iOS skills to publish your very own feature rich app even if you’re a beginner starting from scratch. cwc.to/youtubeoffer
WEEKLY UPDATES VIA EMAIL:
✉️ Every Saturday, receive an email digest of new content - cwc.to/newsletter
CONNECT:
🌍 Website - codewithchris.com
😺 GitHub - github.com/codewithchris
📸 Instagram - / codewithchris
🐦 Twitter - / codewithchris
ABOUT CODEWITHCHRIS:
We are dedicated to teaching the fundamentals on how to make an app. This is important if you’re trying to land an iOS job, be a freelancer, increase or start a business with an app idea. On this channel and our website, you'll find a ton of free resources and tutorials to aid you on your journey to learn iOS development. Many people have learned to code and build apps on their own! cwc.to/reviews
DID THESE LESSONS HELP YOU?
Please let us know! - fans.codewithchris.com
#Figma #DesignToCode #FigmaToCode

Пікірлер: 76

@CodeWithChris Жыл бұрын

Figma is a free web-based design tool used by professionals and indie devs to create app designs, prototypes and mockups. Create your free account to follow along: ⚡cwc.to/figma

@eman31683 Жыл бұрын

As I'm sure there's have said, this was really helpful and was really good to see. It's taught me a lot about organization aspect, and how you go about creating apps. Appreciate what you do Chris!

@CodeWithChris Жыл бұрын

Thank you so much for the kind words!! - Pat

@welling1 Жыл бұрын

This was very helpful, would love to see a few more videos like this.

@CodeWithChris Жыл бұрын

Glad it was helpful! - Pat

@AHTUCYKA 8 ай бұрын

Thank you a lot! That is what I've been looking for.

@salExpolres Жыл бұрын

You are a legend. Very helpful. Looking forward for similar videos. THANK YOU!

@CodeWithChris Жыл бұрын

You're welcome! - Pat

@luongkhai6435 2 жыл бұрын

So the steps are very similar when I’m doing the HTML/CSS. Thanks for useful content!

@CodeWithChris 2 жыл бұрын

Glad it was helpful! - Pat

@Endar92 Жыл бұрын

Very useful, thanks. I am in the process of switching to SwiftUI from UIKit and I got to say that after 7 years of UIKit, it is going to be an interesting transition

@CodeWithChris Жыл бұрын

Glad it was helpful! Enjoy learning SwiftUi :) - Pat

@Kamranazam53 Жыл бұрын

Hey Chris, Thanks for your video. I am also using one Figma model to move to the code, while my Figma code has lots of screen, so I am quite confused as how to start, whether to start a project in Swift UI or Storyboard

@SedatOnat Жыл бұрын

It was exteremely informative!!! I cannot thank you more!!!

@CodeWithChris Жыл бұрын

You are so welcome! - Pat

@Exaed 2 ай бұрын

Thank you for the amazing guide! For some reason my icon at the bottom associated with the toolbar is slightly below the other icons at the bottom. It's as if the toolbox is shifting the icon downwards... Do you have any idea why this might be happening?

@lofistudywithsayasan912 Жыл бұрын

Hello Mr Chris! I like work with your channel))

@ruslanbalakishiev249 9 ай бұрын

is that adaptive for other screens if you use certain values for frames?

@SedatOnat Жыл бұрын

Great Explenation. Thanks!

@CodeWithChris Жыл бұрын

You're welcome! :) - Pat

@NexusUA 2 жыл бұрын

Just a few minutes ago watched lesson from module 5( swift in 90 days), where you used Figma for Learning app😅 Thanks for your help 🔥

@CodeWithChris 2 жыл бұрын

Happy to help! - Pat

@personalpairprogrammer7915 2 жыл бұрын

Cool story! 😎😎 Ill be teaching people this stuff soon!

@CodeWithChris 2 жыл бұрын

Thanks for watching! - Pat

@rajdhakate617 2 жыл бұрын

Yes pdf actually scales better. I've took this decision in my current organization where we use our icons in pdf formats. That too in single scale and we don't have to work about the different sizes.

@CodeWithChris 2 жыл бұрын

Thanks for sharing, Raj! - Pat

@TheRealBlueBeanie Жыл бұрын

Imagine not being subscribed to the code crew

@CodeWithChris Жыл бұрын

Thanks for your kind words!! :) - Pat

@vijayd8634 Жыл бұрын

Hi Chris, always a clean presentation from you. Stuck at 27:00: when you define the diff. SwiftUI files (TaskListView etc.), in my code, I have an unresolved identifier (TaskListView()) error. Also "TabView {" shows an "Unable to infer complex closure return type; add explicit type to disambiguate" . I am on Xcode 11.3.1. I am hoping to finish my project with your videos. Thank you.

@CodeWithChris Жыл бұрын

Hello Vijay! We are limited with KZfaq comments, so please come to our forum and post your code or a screenshot and we will help you get all this working! codecrew.codewithchris.com/ @AdrienVillez

@vijayd8634 Жыл бұрын

Update: just update your Xcode to support iOS 14; so update your MacOS and XCode to the latest. Worked for me. Thanks Chris.

@rtorcato Жыл бұрын

The Figma to code plugin would save you a ton of time. It exports to swiftui

@brussieux.vision Жыл бұрын

what are the plugins?

@user-cb7rf2sc9p 9 ай бұрын

It isn't building that much better, everything's clunky can u advise

@dirtbagmoto 8 ай бұрын

Hey Chris, thanks for all your videos! I was wondering if you had looked into the new "Dev Mode" feature in figma and if it may be worth sharing that experience in the form of a short video. Cheers

@CodeWithChris 8 ай бұрын

Thanks for your feedback! I'll let Chris know about it! - Iñaki

@dolphinmoto3226 11 ай бұрын

Thanks a lot!!!

@CodeWithChris 11 ай бұрын

Thanks for watching! - Iñaki

@qianqian888 Жыл бұрын

thank you so much ~

@CodeWithChris Жыл бұрын

You're welcome 😊 - Pat

@Lotuszen-Relaxar Жыл бұрын

Parabéns ao Canal

@luyuanqiang 2 жыл бұрын

Amazing.

@CodeWithChris 2 жыл бұрын

Thank you! Cheers! - Pat

@dillonwiesner1851 Жыл бұрын

Why use a white rectangle vs. a white background on the VStack?

@CodeWithChris Жыл бұрын

Hello! Unfortunately the background modifier doesn’t affect container elements like the VStack.

@strawhatsanji4985 2 жыл бұрын

Hey Chris I realized everyone on youtube including yourself always teaches the basic types of apps, weather, calculator etc. Very basic, but no one teaches the more difficult ones which are actually sort after. Examples: Uber rideshare app, Food Delivery, Real Estate, Netflix Movies, Shopping Apps like Amazon, Car Dealer Apps. Trying to find knowledge on how to create these types of apps it next to none.

@CodeWithChris 2 жыл бұрын

Hi there! You can send your tutorial recommendations here app.productstash.io/codewithchris#/ideas and we'll have our team take a look. :) - Pat

@strawhatsanji4985 2 жыл бұрын

Hey Chris I clicked on the link to add the request but it doesn'take sense adding. I scrolled through the request and all the real world use apps what clients actually ask for you all skipped it and went to the very simple ones for youtube. That's no problem but can you recommend a course where I can learn to create these types of apps (Uber Ride Share, Food Dilvery, Netflix, Shopping Apps, Real Estate Apps, Car Dealership Apps.)

@CodeWithChris 2 жыл бұрын

Hello! We are moving to more complex apps. We just released the full "WhatsApp Clone" course which was called The Chat App on www.codewithchris.com. We are working on a ToDo App for Entrepreneur and the next one on the list might be a Reddit like app. We have built a KZfaq app, which, once the video source is switch, could be turned into a Netflix app. We also have video about back ends, pretty advance topic too. It's not that we are skipping complex apps, the thing is that some project take months of preparation between design, practice/research/study and creating a draft app, etc... As of now, Chris works on all those projects, codes every single apps at least once before doing it again in front of the camera. All of this is a lot of work behind the scenes. We are trying to grow the team too to make all this happening faster. Now, apps like Uber, Real Estate, etc.. are apps built by teams of hundreds of developers. So what we can showcase are features of apps, or really great starter apps that anyone else can pick up from and continue on its own. Definitely add your wish in our IDEA's board like Pat mention, we are working hard to make sure to meet the demand. If you have an app idea, I would just recommend to dive right into it and stick to your idea, meet developers online and in your own city, learn from others, grow your skills etc. @AdrienVillez

@CodeWithChris 2 жыл бұрын

Hey @Strawhat, check this out!! codecrew.codewithchris.com/t/car-listing-app-challenge/19866 @AdrienVillez

@adrimuhammad3942 2 жыл бұрын

I downloaded the program but everytNice tutorialng still says trial version on it??

@CodeWithChris 2 жыл бұрын

Hi! We encourage you to post any questions or issues on our CodeCrew forum codecrew.codewithchris.com and have our tech support staff assist you. Thank you! - Pat

@moben5367 10 ай бұрын

Hi can you the same with android?

@carlosreyes6612 Жыл бұрын

Thanks for this valuable information, one little comment, Icons should be exported as SVG Imo. : )

@CodeWithChris Жыл бұрын

If you need to support vector graphics, I would recommend using PDF until Apple fully supports it as part of their SDK. It seems SVG support is still partial as of the moment, but you can try and experience it yourself. developer.apple.com/forums/thread/119331 - Pat

@alimahdavi3141 Жыл бұрын

Hey Chris, you planning on doing a video for importing Adobe XD into Xcode?

@CodeWithChris Жыл бұрын

Same workflow as importing Figma to Xcode, just different interface. You can watch this tutorial kzfaq.info/get/bejne/ip6jo9Ck0bateWw.html - Pat

@user-ox9ue4he1j 8 ай бұрын

goodd!

@CodeWithChris 8 ай бұрын

Glad you think so! Thanks for watching! - Iñaki

@epic565 2 жыл бұрын

So gooooood crack

@CodeWithChris 2 жыл бұрын

Thank you! - Pat

@redhotbits 2 жыл бұрын

svg? SVG files have been added as of Xcode 12

@CodeWithChris 2 жыл бұрын

Xcode doesn't support SVG so it is best to use PDF. - Pat

@redhotbits 2 жыл бұрын

@@CodeWithChris what year do you live in? SVG files have been added as of Xcode 12

@eman31683 Жыл бұрын

Chris, I'm trying to learn how to read the documentation. I looked up navigationBarTitleDisplayMode but it only showed "func navigationBarTitleDisplayMode(_ displayMode: NavigationBarItem.TitleDisplayMode) -> some View" How did you know .inline was an option?

@CodeWithChris Жыл бұрын

Hi Ed! You can post your question on our CodeCrew forum. We have our tech support staff who can help you out, just visit this link codecrew.codewithchris.com - Pat

@luongkhai6435 2 жыл бұрын

Can we use SVG instead of PDF?

@CodeWithChris 2 жыл бұрын

Xcode doesn't support SVG so it is best to use PDF. If you have more questions, you can always post them on our CodeCrew forum codecrew.codewithchris.com and have our tech support staff help you out. - Pat

@redhotbits 2 жыл бұрын

@@CodeWithChris that is misinformation, SVG files have been added as of Xcode 12

@redhotbits 2 жыл бұрын

yes you should use SVG

@sudhakard5273 2 жыл бұрын

Xcode supports svg