Figma To Code
Вставка
- Опубліковано 27 лип 2024
- 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 UA-cam:
👋 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 UA-cam:
👋 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
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
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!
Thank you so much for the kind words!! - Pat
This was very helpful, would love to see a few more videos like this.
Glad it was helpful! - Pat
Thank you a lot! That is what I've been looking for.
So the steps are very similar when I’m doing the HTML/CSS. Thanks for useful content!
Glad it was helpful! - Pat
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
Glad it was helpful! Enjoy learning SwiftUi :) - Pat
You are a legend. Very helpful. Looking forward for similar videos. THANK YOU!
You're welcome! - Pat
It was exteremely informative!!! I cannot thank you more!!!
You are so welcome! - Pat
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 🔥
Happy to help! - Pat
Great Explenation. Thanks!
You're welcome! :) - Pat
The Figma to code plugin would save you a ton of time. It exports to swiftui
what are the plugins?
It isn't building that much better, everything's clunky
can u advise
Cool story! 😎😎 Ill be teaching people this stuff soon!
Thanks for watching! - Pat
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
Hello Mr Chris! I like work with your channel))
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.
Thanks for sharing, Raj! - Pat
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.
Hi there! You can send your tutorial recommendations here app.productstash.io/codewithchris#/ideas and we'll have our team take a look. :) - Pat
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.)
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 UA-cam 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
Hey @Strawhat, check this out!!
codecrew.codewithchris.com/t/car-listing-app-challenge/19866
@AdrienVillez
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?
is that adaptive for other screens if you use certain values for frames?
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
Thanks for your feedback! I'll let Chris know about it! - Iñaki
thank you so much ~
You're welcome 😊 - Pat
Imagine not being subscribed to the code crew
Thanks for your kind words!! :) - Pat
Amazing.
Thank you! Cheers! - Pat
Thanks a lot!!!
Thanks for watching! - Iñaki
Thanks for this valuable information, one little comment, Icons should be exported as SVG Imo. : )
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
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.
Hello Vijay! We are limited with UA-cam 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
Update: just update your Xcode to support iOS 14; so update your MacOS and XCode to the latest. Worked for me. Thanks Chris.
Parabéns ao Canal
Hey Chris, you planning on doing a video for importing Adobe XD into Xcode?
Same workflow as importing Figma to Xcode, just different interface. You can watch this tutorial ua-cam.com/video/T8spmslPII8/v-deo.html - Pat
Hi can you the same with android?
Why use a white rectangle vs. a white background on the VStack?
Hello! Unfortunately the background modifier doesn’t affect container elements like the VStack.
So gooooood crack
Thank you! - Pat
I downloaded the program but everytNice tutorialng still says trial version on it??
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
goodd!
Glad you think so! Thanks for watching! - Iñaki
svg? SVG files have been added as of Xcode 12
Xcode doesn't support SVG so it is best to use PDF. - Pat
@@CodeWithChris what year do you live in? SVG files have been added as of Xcode 12
Can we use SVG instead of PDF?
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
@@CodeWithChris that is misinformation, SVG files have been added as of Xcode 12
yes you should use SVG
Xcode supports svg
What is Figma？😳
A free version of Sketch or Adobe Illustrator. Works well on the web or with a team (paid)
@AdrienVillez
@@CodeWithChris 3Q !!!❤️
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?
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
Helpful video for aspiring developers! For non-Canadians, ZedStack == ZStack.
Thanks for watching! - Pat