In this video, we’re going to taking JC’s design from the previous video (https://youtu.be/VRf8cyeuxoo) 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:
https://cwc.to/figma
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. https://codewithchris.com/plus
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: https://github.com/codewithchris/figmatocode
Figma: https://www.figma.com/file/CLlq2UzMh96j5bFP1Jz03m/Figma-Practice?node-id=5%3A4
Font: https://github.com/rsms/inter
MY FREE ONLINE COURSE:
How to make an app in 8 days – https://cwc.to/start
CWC+ PROGRAM:
All our courses in a learning path – https://cwc.to/plus
WEEKLY UPDATES VIA EMAIL:
️ Every Saturday, receive an email digest of new content – https://cwc.to/newsletter
CONNECT:
Website – https://codewithchris.com
GitHub – https://github.com/codewithchris
Instagram – https://www.instagram.com/codewithchris/
Twitter – https://twitter.com/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! https://cwc.to/reviews
DID THESE LESSONS HELP YOU?
Please let us know! – https://fans.codewithchris.com
#Figma #DesignToCode #FigmaToCode
Source
