Figma Tutorial for Mobile Design (2020)

Learn how to design a mobile app with this Figma tutorial!
Figma is a free web-based design tool used by professionals and indie devs to create app designs, prototypes and mockups:
⚡cwc.to/figma
In this course, our designer, JC, walks through the design to code process. He'll share how he goes from an idea or concept to a full fledged app design in Figma. Then I show how that design translates into code in an Xcode project!
🚨 SPECIAL CWC+ OFFER FOR KZbin:
👋 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:
Hi I’m Chris! I’m dedicated to teaching fundamentals about 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 my 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
#Design #CodeWithChris #Figma

[@CodeWithChris]

👋 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

[@Oooogieboogiee]

THANK YOU for showing what short cuts you're using! I just came here from other Figma tutorial, where they forgot to mention that and it all was so confusing to me. Your tutorial is very clear and easy to follow x

[@CodeWithChris]

You're so welcome! - Kat

[@emfr6558]

Hello Chris, I am a beginner with ux/ui and I can say this tutorial taught me a lot! You are great at teaching and your speaking pace is also great. I can follow everything you say, understand and when I pause the video to apply, I am not anxious to come back to the video so I dont miss anything. I would love to see more videos of you using Figma and creating apps screens as it is very useful to know how to apply techniques and practice them with you. It is very peaceful to listen to you as well. Thanks for sharing your knowledge :) Thanks from Brazil.

[@CodeWithChris]

Hello Emelin! Thank you for your super nice feedback. We have two other Figma videos you also might want to check out: kzbin.info/www/bejne/jZnPf6GcZpxkZ68 kzbin.info/www/bejne/mWq4g3eBaLB8iq8 - Kat

[@nileshjdarji]

I would love to have a figma basics video. Would appreciate if you make one. Thanks.

[@CodeWithChris]

Thanks! We'll add that on our list. Stay tuned! -Kat

[@nileshjdarji]

CodeWithChris Can you design or modify App icon files with Figma?

[@maskman4821]

I want a figma basic video too !!!

[@jasondhindsa6774]

I would love to see one too

[@sahilaujla]

Yes we need a video on the basics of Figma please

[@CodeWithChris]

QOTD ⚡ Do you want to see a Figma tutorial on the basics? Let me know! 👇 Create a free Figma account here: cwc.to/figma

[@CafeNFTs]

That would be great! I just started my journey so I've been watching a bunch of your videos. Thanks a ton for creating these videos. I'd love to learn how to make multiple pages and make them work together. Being able to put the wargame on my phone was exciting. Super basic app but I made it so I'm happy and ready to set the bar higher. Thanks again!

[@maxderuiter9940]

CodeWithChris In the beginning of the video I see a calendar on the screen. Is this a template I can use?

[@dr.craigcurphey4829]

I would appreciate a basic Sigma tutorial, this one is very useful, good work Chris.

[@jasonluong3862]

So am I correct to say that Figma is used in conjunction with Swift? Figma is used to design graphics like pictures and buttons. Then Swift is used to apply action and behavior to those objects? If so, please do a basic introduction to Figma. I would learn to master it first before starting to learn Swift.

[@hishcodes]

Yes

[@JoremiSaada]

Great vid and would love a basic figma tutorial! Cheers for your help Chris, all your videos are so helpful

[@CodeWithChris]

Thanks! We'll add that on our list. Stay tuned! -Kat

[@purswanitarun]

A great 40-minute-start to learning Figma. Covered a lot of tools. Great work Chris!

[@CodeWithChris]

Thank you! 🙌 - Kat

[@purswanitarun]

Is Chris someone else's name :o

[@rocknroli2]

So glad to have found this tutorial. Saved me a ton of time in putzing around! Thank you.

[@CodeWithChris]

Glad it helped! Thanks for watching! - Kat

[@olivermichaeltucker]

I've learned so much following your videos, Thank you for the time you've taken to make them!

[@CodeWithChris]

Great to hear! Thanks for learning with us. :) - Kat

[@robertpeschke7746]

Chris! Thank you so much for your Figma tutorial! I am a new Software Engineer and trying to code new projects, but I have ZERO design experience. This tutorial really helped me think of new ways of creating buttons and styles for React Native Applications. If you are looking for more inspiration, I would love to see a video how you use Figma and translate your apps into code. Or how you might design something in Figma keeping it mind simplicity for implementation in an actual application. That sort of things. Thanks for the great content!

[@CodeWithChris]

Thanks for the suggestion! We're so glad to hear how this has helped you. :) - Kat

[@monikajanickova8336]

Hi Chris, thank you so much for this tutorial. It was my absolutely first try ever to do UX design and thanks you guidance I was able to create very pretty design which I am proud of. Cant wait to try the next one.

[@CodeWithChris]

Glad we helped and thanks for the support. Excited for you! -Arthur

[@OfficialRogersBros]

Dopeness Chris, love ur content! I kinda need a basics vid if your willing. Thanks bro!

[@CodeWithChris]

Thanks! We'll add that on our list. Stay tuned! -Kat

[@Anthonyvo]

14:04 - Another trick to copy and drag is to hold the ALT key and then click and drag the text (or object or group). It will automatically create a new copy that you can drag anywhere plus you get the added benefit of seeing the constraints as you drag. ALT + CLICK/DRAG - it's a common copy/drag shortcut for image editors.

[@CodeWithChris]

Thanks for mentioning that! - Kat

[@michelleg8804]

These are great tips! I knew the basics, but this was still super helpful. Thanks for making this video!

[@CodeWithChris]

Glad it was helpful! - Kat

[@SameenIslam]

I'm looking to learn UI design for the React web app I'm trying to build. Your design tutorial was extremely helpful, thank you!

[@CodeWithChris]

Glad you found it super helpful! Thanks for watching this. - Kat

[@iliciously]

You explained very clear and easy to follow. Love to see more figma videos. Thanks

[@CodeWithChris]

Awesome, thank you! - Kat

[@austinosueke3110]

I learned something new for my job assignment. Thank you!

[@CodeWithChris]

You're very welcome! - Kat

[@lukefrayling6792]

This was so useful - I learnt so many new Figma skills. Thank you for sharing!

[@CodeWithChris]

I have a friend who wanted to get started using Photoshop for design. I directed her to this video and now a week later, she's been digging into Figma daily and loves it! I love using Figma too! @AdrienVillez

[@whatswrong6952]

I appreciate it for this huge information and tips to use figma esaliy :)

[@jenna_t214]

Thank you for this video!! I learned so much from this video and so excited to apply what I learned to building my own designs. You are a great teacher!

[@CodeWithChris]

And you are an awesome student, Jenna! Thanks for learning with us! -Arthur

[@jirijanecek1952]

Definitely yes for the Figma basics video!

[@CodeWithChris]

It's now on our list! Stay tuned. :) -Kat

[@titilayoorhiunu1849]

Thank you so much Chris. This was valuable.

[@CodeWithChris]

You're so welcome, thank you so much! -Arthur

[@GianfrancoYosida]

Hey Chris a mobile developer here! I found your material pretty interesting and well explained! Thanks for that!

[@CodeWithChris]

Awesome, thank you! - Kat

[@vimalbaid]

Great Video and Very Informative in such a short time. Well done !

[@CodeWithChris]

Glad you liked it! Thanks! - Kat

[@editmoments2]

Thank you so much! I got an idea for my first project!!!

[@CodeWithChris]

Awesoooome! Make sure to update us on the progress of your project! You got this! :-) -Arthur

[@timurkul4618]

Thank you for the tutorial, it was very clear!

[@CodeWithChris]

You are welcome! - Kat

[@nileshjdarji]

Love it man. Figma basic would be great to have.

[@CodeWithChris]

Thanks! We'll add that on our list. Stay tuned! -Kat

[@jensluck370]

Very well explained! Thanks a lot!

[@CodeWithChris]

You're so welcome! :-) Keep on having fun! -Arthur

[@fahadgaliwango4502]

Thanks for the basics tut, they really help

[@CodeWithChris]

Awesome! Let us know what you want to see next. - Kat

[@user-tr4ng9gz7w]

Good choice of words it was a very knowledgeable video.I thank you for sharing this 🥳

[@successbuds13]

Thanks a lot. Clear, Crisp, learnt a lot from this tutorial.

[@CodeWithChris]

Great to hear!! 🙌 - Kat

[@lazaroambrosio5646]

Right on time! I was deciding whether sketch or Figma. Figma is free so I decided to choose this.

[@CodeWithChris]

Nice choice! Thanks for watching. -Kat

[@ejeguoejokpe8096]

I really love this tutorial, it really exposed me to alot , thanks

[@CodeWithChris]

Glad to hear that! Thanks for watching! - Kat

[@junaid19929]

He'll Chris , yes we want full figma tutorial from scratch as I am a beginner in this field 😊 .

[@wannaberickistevens]

I found this video super helpful! thank you so much!

[@CodeWithChris]

You're so welcome! - Kat

[@himanshukalra5255]

Thanks man. Really helpful video

[@CodeWithChris]

No problem! - Kat

[@shanidhaneef1950]

Thanks mate, well understood

[@CodeWithChris]

You are so welcome! :-) -Arthur

[@jeanozamora5333]

Great tutorial. I have learned a lot! Thank you!

[@CodeWithChris]

Glad to hear that! Thanks for learning with us. -Kat

[@rafaelguerra43]

I really loved your video really helpful. I appreciate you take the time to make these videos

[@CodeWithChris]

Thank you! Really glad you found the video helpful. -Kat

[@nikitagurbangulyyev9590]

Hi Chris, thanks for the video and for teaching. It will be really great to have more videos about basics of figma. Thabks again.

[@CodeWithChris]

There will be more to come! Stay tuned! - Kat

[@manalm]

Very helpful video thank you so much!

[@CodeWithChris]

You're so welcome! - Kat

[@bozhanaivanova7818]

This is a super helpful tutorial, thank you! Great work!

[@CodeWithChris]

Thank you so much! Keep on having fun learning with us! :-) -Arthur

[@glennadams7047]

+1 Figma basics please

[@CodeWithChris]

Thanks! We'll add that on our list. Stay tuned! -Kat

[@TheBizkit75]

Figma basics tutorial please, I learned so much from this! it was really informative.

[@CodeWithChris]

Awesome! it's already released kzbin.info/www/bejne/jZnPf6GcZpxkZ68 :) - Kat

[@shinichikudo08]

Tks for your video! It help me so much

[@CodeWithChris]

Glad to hear that! Thanks for watching. - Kat

[@user-ss7wh7io9y]

learned a lot! Thanks!

[@CodeWithChris]

Glad it was helpful! Thanks for watching! - Iñaki

[@marthemouthaan5910]

This was honestly such a good video!!!

[@CodeWithChris]

Thank you!🙌 - Kat

[@charith2967]

Absolutely helpful..! Thanks for your video

[@CodeWithChris]

Thank you so, so much! Have fun learning! :-) -Arthur

[@kevinbertrand3731]

Hi Chris, great video. But indeed, for beginners (like me for example), a figma basics video would be great. Thank you a lot for your collection of tutorials.

[@CodeWithChris]

Thanks for the support! Alright, added Figma basics to our list. :) -Kat

[@KING_KING_KING]

I couldn't say "Thank you" more. This is awesome tutorial. I'm lucky to see this ya!

[@CodeWithChris]

Arigato gozaimasu, Kodai-san! Thanks for learning with us! :) -Arthur

[@irfankaya1896]

Figma basics, then advanced! It's pretty cool!

[@CodeWithChris]

Thanks! It's on the list! 👍 -Kat

[@NipunNirmana]

Thank you for the video , clear and easy to follow tutorial

[@CodeWithChris]

Appreciate your support! -Arthur

[@carllangdon5646]

I am in my final year at uni and this video has taught me more than the 3 years I have spent in design...

[@CodeWithChris]

You're welcome :P - Pat

[@gwc8888]

as always, great content!

[@CodeWithChris]

Thanks a lot! 🙌 -Kat

[@DanielAttila]

Very cool tutorial. Thanks.

[@CodeWithChris]

Glad you liked it! - Kat

[@ryana.9821]

Cheers man, great tutorial, saved me tones of time. I've used figma before through trial and error. This showed me a lot of new shortcuts. Much appreciated!

[@CodeWithChris]

Glad you like it! Thanks for watching - Iñaki

[@mayank_upadhyay_19]

Very helpful video, thankyou

[@CodeWithChris]

Glad to know. Thank you so much! :) -Arthur

[@TheEmersoncassio]

For a long time, I was searching for a video that could explain in a simple way the usage of FIGMA. You should to producer more videos about it because your didactic is amazing and I’m really enjoying your videos about figma. I wish you a HAPPY NEW YEAR from Brazil.

[@CodeWithChris]

Obrigado, Emerson! Your support means a lot! Thank you so much for learning with us. :-) -Arthur

[@AP-se2zs]

It is actually a super, spectacular app design!

[@CodeWithChris]

Thank you! -Kat

[@morvaridmeshkini1577]

I didn't know anything about Figma before this video! only one video and I feel so confident and excited to learn more. Wow! Thank you Chris! 💙🙏

[@CodeWithChris]

Yay, thank you so much. Keep on going! -Arthur

[@morvaridmeshkini1577]

@@CodeWithChris Thank you to YOU, I made my first Figma prototype for my course assignment and I love it. It worked great for my user test. The only thing is that the link to share it on my presentation is too long. It wasn't this long when I used in-vision in the past. Any thoughts? or it's a normal thing? Thanks Chris 💙🙏

[@tomb2599]

I love this video ! You're a great teacher it's easy to follow you please share more Figma tutorial

[@CodeWithChris]

Thank you! Will do! - Kat

[@tasyaagnesgoei]

Thank you so much! This is great tutorial :)

[@CodeWithChris]

You're very welcome! - Kat

[@deepshikhagupta9129]

Thanks..it was very helpful ! :)

[@CodeWithChris]

You're welcome! Keep on going! :-) -Arthur

[@reallyfree494]

Super! Thank you so much! :)

[@CodeWithChris]

Awesome! You're welcome!

[@prabhuk4885]

Learned some basic tools and techniques of Figma from this vidoe...Mnay Thanks

[@CodeWithChris]

Glad you learned from us! All the best! :-) -Arthur

[@ChAP-bw3wy]

Chris, this video was really helpful for a beginner like me, thank you! Can audio be added to Figma? Do you have a video explaining that?

[@brentb_]

thank you sir

[@preeet007]

thanks for this video. right on time for me.

[@CodeWithChris]

Cool! Thanks for watching. -Kat

[@Sperius7]

As always, a great video Chris! I can see how easy this design tool is and look forward to giving it a try. The only thing I’m not sure about is how you get this into Xcode so you can utilise the design in an app?

[@CodeWithChris]

Thank you! There's no direct way to import the design to Xcode. You might need to do some googling if you are looking for an automatic solution to do that, however, it might cost money. You can also just follow some simple suggestions like this stackoverflow.com/a/28402348 - Kat

[@koksingooi9301]

I tried figma after watched your video and I was able to finish my app design. Thanks Chris for the great video.

[@CodeWithChris]

Cool! Share your design with us. :) -Kat

[@koksingooi9301]

@@CodeWithChris It seems not able to upload picture in youtube comment. Where can I share my design? Thanks

[@abdouseck4894]

Thank you! If you build an app by yourself its really important to first design the app

[@CodeWithChris]

Absolutely! Welcome. - Kat

[@simranchhabriya9631]

Loved Your video :D thank you!

[@CodeWithChris]

Thanks for watching it! 🙌 -Kat

[@pradeepkumar5359]

Hi Chris great content on your channel I really love the way you teach. Are you going to create an application what you have shown in this video. It would be grateful if you done that and also it would be appreciated doing basic figma tutorials.

[@CodeWithChris]

Thank you! We'll see in the coming weeks, stay tuned! -Kat

[@whyhemant]

Yes, please do that. We're waiting :)

[@benedictodjobo2679]

Hi Chris thank you I am a beginner but really learnt a lot from this video, you are a great teacher

[@CodeWithChris]

Thank you for the kind words! :) - Pat

[@robertosoriano9617]

Very helpful! thanks a lot bro!!

[@CodeWithChris]

Thank you! Glad we could help. 🙌 -Kat

perfect, thank you

[@CodeWithChris]

You are so welcome! Thanks for learning with us! -Arthur

[@devarshranpara9043]

Very very good video. I never thught designing is that easy. Thank you very much.

[@CodeWithChris]

You are welcome! - Kat

[@gayanlakmal2469]

Thank you very much ! :)

[@CodeWithChris]

You are so welcome! Keep on having fun! :-) -Arthur

[@andraebarrett5867]

I would also love if you did a video for Figma basics. I love this video though

[@CodeWithChris]

Thanks! It's on the list! 👍 -Kat

[@abirajrajendran2327]

I had no idea about figma , but this video gave me a point !👏,, wishing for more videos!

[@CodeWithChris]

Figma is so good! I'm using it nearly daily! @AdrienVillez

[@abirajrajendran2327]

@@CodeWithChris Hey, Do you have any idea ,that how can we use those designs in Flutter ??

[@IncorporarMC]

Excelent video! thanks for sharing

[@CodeWithChris]

Thanks for watching! 🙌 -Kat

[@josecobas819]

In just few minutes i could note that it was a really informativ tutorial, Well done.

[@CodeWithChris]

Awesome, thank you so much! Have fun learning! :-) -Arthur

[@pastoresther6324]

Yes I want to see the basics

[@lalolagomez2495]

Thanks !

[@CodeWithChris]

Welcome! - Kat

[@simonasurbonas3292]

basic tutorial will be so nice, can't find a good one on youtube

[@CodeWithChris]

Thanks! It's on our list. :) -Kat

[@amitrai6471]

Hey Chris Figma basics tutorial appreciated!

[@CodeWithChris]

Thanks! We'll add that on our list. Stay tuned! -Kat

[@rodrickee]

thank you very much sir :)

[@CodeWithChris]

You're welcome! - Kat

[@mynenigeethika970]

love to have more figma basics tutorial

[@CodeWithChris]

Thanks! Have you seen this yet? kzbin.info/www/bejne/jZnPf6GcZpxkZ68 - Kat

[@TheRealJayGutta]

Yes figma basic techniques tutorial! I want to make an instructional learning app based on a video clips from a video game I play which would primarily be a multiple choice learning tool "game". Simple is better as I have 0.0 experience.

[@CodeWithChris]

Thanks! We'll add that on our list. Stay tuned! -Kat

[@sanjibsaha8788]

very nice I just did this job, Its excellent brother.

[@CodeWithChris]

Awesome, thanks for dropping by! We appreciate your support! :-) -Arthur

[@Dior3llaxoxo]

Thank you! I love you!!!!!!!

[@CodeWithChris]

You're welcome, Sara (without the H!), haha. Have fun learning! -Arthur

[@Dior3llaxoxo]

@@CodeWithChris ❤️❤️❤️

[@BrandonFlowersATX]

Chris you are a fantastic teacher and the sheer amount of content you provide free of charge is staggering. Nothing but positive vibes and well-wishes for you and your team. I watched your videos in reverse (the beginner one you posted recently, before watching this one) and one thing I am still confused about is: why you would design your app's storyboard on a 3rd party app instead of in xcode in the first place? If you design something here, don't you still have to go recreate it in your storyboard later anyway? Why use another tool instead of just designing within xcode? If you already have another video explaining that that I've missed, please direct me to that - or answer here if that's easier. Thanks in advance!

[@CodeWithChris]

Hello, sometimes it helps just to "design" first without the limitations of coding and connecting elements so you can get a feel of your design/app fast, its quite a hassle to set-up navigation and other codes when doing it in storyboard directly, so its much faster and would give you a better view of your finished product (think of it as a prototype) so you know what to change or improve it will help you export all the assets used anyway so it will be a little bit easier to connect them to xcode later on - Francis

[@mattiasisaksson905]

Basic tutorial would be nice !

[@pipoymatula4951]

Thank you for your tutorial Sir, now I know how to use the tools in figma. 😁

[@CodeWithChris]

Yay, keep on going! :-) -Arthur

[@luismora3698]

thnx for the vid

[@CodeWithChris]

Welcome! - Kat

[@AnitaEsse]

yeah i want more figma tutorials PLSSSSSSS

[@CodeWithChris]

You might like the Figma Basics tutorial as well kzbin.info/www/bejne/jZnPf6GcZpxkZ68 :) - Kat

[@afrazahmadkhokhar]

Hi @chris, thanks for very nice tutorial . Can you please make a video to teach how to convert this design into iOS app screen.

[@CodeWithChris]

Great suggestion! Can you please add this as a tutorial request here? cwc.to/request - Kat

[@lillykeule5416]

Hello Chris thank ou so much for your video it has helped me a lot I just discovered Figma few days ago and I’m really surprised how it can really helps even to start from scratch for me now Indesign is somehow dead 😆. Thank you greetings from Germany

[@CodeWithChris]

Danke schon, Lilly! Thank you so much for your support. Keep on learning and growing... you have an exciting learning journey ahead of you! :-) -Arthur

[@GabeColors]

As a designer, the only thing here I crave is how Figma integrates with XCode-- size 3x, 2x etc, vector images, SwiftUI seems to have so much potential to skip alot of previous design code stuff

[@CodeWithChris]

True! Thanks for watching! -Kat

[@muratcan__22]

very informative

[@CodeWithChris]

Means a lot, thank you so much! -Arthur