Figma Basics Tutorial for Beginners (Free Design Tool!)

[@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 and follow along⚡cwc.to/figma

[@eunicesamuel5964]

You are such a great teacher. While watching this tutorial, I created something beautiful and I couldn't hide my excitement. Thank you

[@CodeWithChris]

I'm glad this tutorial was able to help you. Thanks for learning with us! :) - Kat

[@1sndct]

Man i really love that you go to the most basic level and give not only the definitions of things, but also possible applications. Really make things sink in. Keep it up big man! Love from Russia

[@CodeWithChris]

Thanks for your feedback, we really appreciate it! :) - Kat

[@zacharydube4890]

Very helpful, got Figma about 30 minutes ago and I feel like I can navigate pretty confidently.

[@CodeWithChris]

Awesome, Zachary! Glad to know that we were able to help you. All the best! :-) -Arthur

[@masoodraja]

Thank you. This is the best tutorial I have found on KZbin!!

[@CodeWithChris]

And you are also simply the best! :) Thanks for learning with us! -Arthur

[@smartydude2157]

Hey Chris ...thank you so much for starting this series just loved the way you had explained so clearly was waiting for a while for this series. But the thing is please start uploading with separate playlist of Figma its so getting tough to search all figma video in any of your playlist. Please take care of that. Thank you.

[@CodeWithChris]

Thanks for your kind words! We'll take note of your suggestion. :-) -Arthur

[@smartydude2157]

Thank you 😊

[@noamif]

Super useful as always, and super relevant. You truly are an amazing help for anyone trying to build their own app

[@CodeWithChris]

Thank you! We really appreciate it. :) - Kat

[@adigunbolaji554]

Thank you for this. First time practicing with your video and I'm easing into it. Will start practicing

[@CodeWithChris]

Awesome, just enjoy the process and you'll achieve progress in no time! :-) -Arthur

[@me_lvin7068]

Great. I didn't realized that Figma has a similar interface with Illustrator until I saw your video. Thanks.

[@CodeWithChris]

You're very welcome! Cheers! - Pat

[@kennyconfidence7567]

Nice job Chris , I love your tutorial . can you do a tutorial on animations with figma

[@CodeWithChris]

Possibly! Stay tuned! 😊 - Kat

[@sahilaujla]

Hey, Chris...Thank You so much...You literally have tutorials on everything...I have been learning from you for quite a while now... I watched all your swift basics tutorials....You are such a great teacher.....I was gonna follow your 14 Days Swift UI course as well...but the only thing stopping me is that I don't have a mac...I compiled the basic swift code using online compilers but I can't compile Swift UI online....I have some app ideas so I thought why not design my apps first and then I will arrange a mac and will get into the development of the app.... Thank You once again...It helped a lot🙏🙏 I would like to meet you someday😊

[@CodeWithChris]

Wow, so grateful for your support! I hope that you'll get to invest in a Mac computer soon because your future looks bright! Keep on persevering! :-)

[@juliusoguntade]

Awesome tutorial! Thank you so much for this this detailed lessons.

[@CodeWithChris]

You're very welcome! - Pat

[@sharoneisenberg2274]

Fantastic tutorial! I use Illustrator, but am now excited to jump into Figma. Thank you!

[@CodeWithChris]

Yay, that's awesome, Sharon! It never hurts to learn multiple design tools! :-) All the best! -Arthur

Looking forward to the next videos of this series. Specially regarding the export of Figma designs into the Swift code. Is it possible to export the whole app page created in figma and use it directly as a view in XCode?

[@CodeWithChris]

Hello, Figma is just used for prototyping, so its not connected to your storyboard and you will have to "re-create" your UI in Xcode - Kat

[@yixe2253]

Thanks Chris, how have design tools like this improved your development process? designing in React and or SwiftUI has become so quick and easy, do you still find tools like this essential?

[@CodeWithChris]

Hello, designing UI layout is still very different from putting background images or styles to "spice" up your UI. as a base design though it is a game changer - Francis

[@abhinavkuruvilajoseph9274]

Thanks for the invitation to figma. Earned a sub bro

[@CodeWithChris]

Thanks for the sub! - Kat

[@abhinavkuruvilajoseph9274]

I am a gamedev but i want to make apps with react native or flutter. Thanks for you guidance

[@lofiscide]

Great Tutorial . I really liked it. Will be helpful for my next project 😃

[@CodeWithChris]

Awesome! Glad we helped you. All the best to your projects! :) -Arthur

[@lofiscide]

@@CodeWithChris :)

[@brandmotivo]

This was well made Chris. Thanks.

[@CodeWithChris]

Thank you for the kind words! :) - Pat

[@Anthonyvo]

For a few minutes I thought, "Wait, I could do a ton of this stuff in Photoshop." Then, you showed the Components and I said, "Oooooh!"

[@CodeWithChris]

That's what I thought at first about Figma 😄 - Kat

[@GladysGrace001]

This was an awesome beginners tutorial. Very easy to follow and was both pleasing auditory and visually. I'm currently enrolled in an extended UI/UX Design course online, where it is mainly Sketch base, but the instructor provided alternatives that can be used to follow along from the design expect and Figma was one of them. A lot of the elements and features are very similar in my opinion after signing up for Figma recently to get acquainted with it. The fact that Figma offers a free version, is awesome for those getting into UI/UX design. However, if you'd like to explore Sketch, it's seems like a great tool as well. You can pay once for the license, so long you don't feel the need to buy a new one every year and keep using the version you have. My final thoughts--go with what is best suited for your design needs and just grow from there.

[@CodeWithChris]

What an amazing comment, Gladys! You're so awesome! Thanks for sharing! :-) -Arthur

[@GladysGrace001]

@@CodeWithChris No. Thank you.🙏🏾 I'm looking forward to learning more from this channel for all my future UI/UX needs. Keep up the great content. 👍🏾👍🏾

[@nileshjdarji]

Thank you so much. I have been waiting for this It helps a lot.

[@CodeWithChris]

Awesome! Thanks for the wait! - Kat

[@rikxmatteo6006]

This tutorial is very helpful and easy to understand. Thank you so much Cher!

[@CodeWithChris]

Thanks for taking time to leave this comment of kindness, Ricks! Keep on having fun, keep on learning. You got this! :-) -Arthur

[@vladimirzaika3594]

Man, you are the gold bar, subscribe and ring the bell.

[@CodeWithChris]

Thank you so much!! - Pat

[@elcasa6587]

Hey Chris, LOVE your videos! You're a great teacher! Clear. Patient. Slow. Detailed. Thanks brother. I am an Industrial / Product Designer. I'm making the transition to UXUI design. I have several questions: * Is there much difference between UX and UI? I want to do more of the creative side (UI) like wireframes and mockups. * How difficult is it learning the UX side?

[@CodeWithChris]

Hello! Our technical support staff can help you in our fourm. Post your question here: codecrew.codewithchris.com. All the best!

[@CodeWithChris]

Hello, if you are working with storyboards (drag and drop) i guess its not that different aside from the constraints you have to set up. for UI its usually just position it whereever you feel like and you can move/edit easily using a few simple clicks, while doing it the Xcode will make it harder to modify because you will need to change the constraints or values in order for the changes to reflect - Francis

[@Hemernyx]

Awesome tutorial, you are calm, and your voice makes all the difference. Thank you. But where are next sessions? 💜

[@CodeWithChris]

Thank you so much! We're working on them. :-) -Arthur

[@elcasa6587]

Chris... Again & as always, Love your videos. You take away the mystery and fears and make it interesting to learn. Here are several topics that I'm interested in or concerned about: * What a UXUI Designers resume should look like (or just UI)? * Can you do a video discussing getting that first job (how to)? * What would our days look like as a UI Designer and what will be expected? Thanks buddy!

[@CodeWithChris]

Thanks for your great topic suggestions! :-) We'll take note of them. -Arthur

[@elcasa6587]

Hey Chris, As always... Love your tutorials. Really appreciate you, your teaching style, and the knowledge. Much success bro!!! *** Questions: After creating a frame, why does ADDING TEXT or a SHAPE to my frame make it (my frame) shrink or disappear? I also DON'T see the "Constraints" option on the right side of my frame? HELP - Thanks ;)

[@PhG1961]

Waw, this is an awesome product. Excellent video, very well explained and entertaining. Well done !

[@CodeWithChris]

Thanks for your compliments! Hope you enjoy our other Figma videos as well. :) - Kat

[@Justinerrw]

Very helpful!

[@CodeWithChris]

Thank you! - Kat

[@CodeWithChris]

Thank you! - Kat

[@successezeh2009]

Thank you for this tutorial.

[@CodeWithChris]

You're so welcome! :-) -Arthur

[@JuswanthTeeb]

Worth watching ♡🤩

[@CodeWithChris]

Thank you very much! - Pat

[@kushaagra098]

Hey Chris, I love your channel but I have a quick question: how exactly does the app creation process work? Are you creating designs in Figma or Sketch and then importing them into your app? If so, are the elements of your design already constrained? Thanks, I'm just a beginner so any help is greatly appreciated.

[@CodeWithChris]

Figma is just used for prototyping, it's not connected to your storyboard so you will have to "re-create" your UI in Xcode. For the complete app process, read this codewithchris.com/how-to-make-iphone-apps-with-no-programming-experience/ - Kat

[@matthewhollywood8454]

Hello there... hope you can answer each one 1. Is there a way that allows visitors download an image? 2. Is there a print option I can use for visitors to print an image? 3. Is there a plugin that allows people to color or paint on one image after its been selected? Thanks for your time

[@CodeWithChris]

Hello, you should be able to "share" your figma file to anyway, you can also choose to make it editable but it might affect your original file so just watch out for a bit - Francis

[@a.b.c12342]

this is perfect ... keep it up

[@CodeWithChris]

Thank you! Cheers! - Pat

[@judy8821]

Cool! I may use it but SwiftUI views are pretty easy to create. I may use the drawing options, though. I did create an app icon with it.

[@CodeWithChris]

Awesome! Hope you enjoy our next Figma tutorials. :) - Kat

[@mercymakagni6563]

Thanks for this video, it just cleared my confusion.

[@CodeWithChris]

You are so welcome, Mercy! Thanks for learning with us! :-) -Arthur

[@SaleemAhmed-hx6pe]

Thanks a lot Sir for this wonderful video.I would be happy if I could know whether I would be able to develop apps for Android using Mac.

[@CodeWithChris]

Yes, just download Android Studio on your Mac. You can then search for Android Studio tutorials to learn how to build Android apps! :) - Kat

[@SaleemAhmed-hx6pe]

@@CodeWithChris Thanks a lot Sir☺️

[@irenedilauro1663]

Very good video. Thank you for sharing your knowledge, you do it very well! :)

[@CodeWithChris]

Your comment made our day, Irene! Thank you! -Arthur

[@Ivan_Maslov]

Thank you for the video!

[@CodeWithChris]

Thanks for watching it! - Kat

[@RedPepper063]

For creating an app icon. After I create my design, how can I export the entire design? I try to export and it just gives me a bunch of shapes that the design is made of. How to "mass export" and keep the design as one graphic?

[@CodeWithChris]

Hello Thomas! I think it's because your assets are not inside the Frame. Make sure that the assets are all inside the Frame so when you export the Frame, they all get to be exported in just one file. :) - Kat

[@RedPepper063]

@@CodeWithChris Thanks, Kat! You had it right on!

[@MrJoneSz]

this looks awesome!! however, i see this is for iOS, but is there also one for android? do you also have a tutorial for android users?

[@CodeWithChris]

Unfortunately we don't. Our channel focuses on iOS apps only. - Pat

[@mjmuftah271]

Thanks

[@CodeWithChris]

Welcome! - Kat

[@sequbeats]

thank you!

[@CodeWithChris]

You're welcome! - Kat

[@chemicallyexplosive2902]

Can you use it on macOS?

[@CodeWithChris]

Yes, definitely! It's browser-based. :) - Kat

[@chemicallyexplosive2902]

Thank you

[@quangtrunghoang4661]

thank you very much teacher

[@CodeWithChris]

You are so welcome! :) -Arthur

[@ruthnwofor7063]

I think I'm using an old version of Figma somehow? It looks a little different from yours lol, and when I tried to do the picture-over-element thing I kept getting a grey background instead of the picture. Unless the Windows version of Figma is different? This was great to watch btw and I learned from it!

[@CodeWithChris]

"Hello. Figma should be a webapp though so it should be the same maybe there where recent changes?, try posting in our forum so we can see a screenshot of your issue maybe we can help, head over to codecrew.codewithchris.com - Francis"

[@puhgeh]

Thank you so much!! I have a question, is it possible to import components from other projects? I was thinking of using some of the components of the Mobile UI kit (Community) to my personal project. If so, how can I do that?

[@CodeWithChris]

Hello, it depends, are you taking about a project on github or something? you can probably use use cocoapods if it exists there, if not maybe you can convert the code to swift and add it to your app - Francis

[@marksmith2738]

So what if you just want to fill the background with a color or a gradient?

[@CodeWithChris]

"Hello, if thats the case then you can simply put a item as big as the screen then have it at the back of everything else - Francis"

[@TheRailfan32]

awesome!

[@CodeWithChris]

You're more awesome, Matt! :-) -Arthur

[@veerpatel6719]

Hey Chris! I just wanted to know why you would use Figma to create a UI rather than xCode storyboard. Can you export your Figma to xCode?

[@CodeWithChris]

No, Figma is just used for prototyping and is not connected to Xcode so you will have to "recreate" your UI design on Xcode. - Kat

[@veerpatel6719]

@@CodeWithChris Thanks!

[@evaaggarwal537]

the way you taught was amazing, but if you could have maybe created something as an example, that would've been great!

[@CodeWithChris]

Thanks for your kind words and feedback, Eva! :-) -Arthur

[@owtf.mo8]

thx bro

[@WyldcardCa]

Thank you for this video. I was able to follow along and practice at the same time. First time using it, and your instructions helped a lot!

[@CodeWithChris]

Awesome, thanks for learning with us! :-) -Arthur

[@miaroelants9300]

hmm the component button in the left bottom is missing for me(?) i looked for it in 'view' but cant seem to find it. can anyone help me out please?

[@miaroelants9300]

hmm i found it in the assets tab. (interface might have changed meanwhile) thanks for the great tutorial btw :)

[@CodeWithChris]

Glad you found it! Thank you! - Kat

[@shaunsithole4192]

Please help me set a background image

[@CodeWithChris]

Hello! We can help you more at codecrew.codewithchris.com. That's our forum community. Our technical support staff will assist you there. See you around! -Arthur

[@technopathkeshav7835]

Thanks a lot ....

[@CodeWithChris]

You're so welcome!

[@hk_build]

How to export high resolution images ...I have selected 4x while exporting but still image quality is poor

[@CodeWithChris]

Hello, maybe your canvas is small? check the dimensions of the original image that you have create and scale it up - Francis

[@calvinraldajo8565]

coding a lot harder than using vector graphics. i did javascript and i dont even understand it. its so complex with lot variables. its reason coder make lot money

[@CodeWithChris]

Yes, but there are also people who are really just enjoying coding. - Kat

[@calvinraldajo8565]

@@CodeWithChris i aint one that for sure

[@chemicallyexplosive2902]

I am 12 years old so l wish that when l get a Macbook l am able to do anything in my Macbook l have not got it yet so l have to wait because of the COVID-19 SO when that ends hopefully l am then I will go with my parents to the Apple Office to buy the Macbook that l wanted so l can do programming at home with my Macbook although my HP Laptop is not properly and l can not access everything on HP Laptop, the laptop is too slow to access everything and it overheats, so we have to sell the laptop to a store or to someone, currently l have started programming in Computing, so l wanted to say that l like technology so thats why l want to do stuff that links with technology and l get excited with technology whatever features it has then l get excited so when l get my Macbook (after the COVID-19 HAS ENDED) then l will do programming and other stuff in my Macbook(my birthday gift) My Birthday: 6th April 2020 (Dont worry about how long paragraphs l typed it in.) Yours Sincerely Shafim Rahman 👍💻

[@CodeWithChris]

Hello Shafim, thanks for your message! It's amazing how you're so interested in iOS app development at a young age. Keep this up! I can't wait to see what apps you'll be creating in the future. I know you'll do great!! Happy birthday in advance! 🎂 - Kat

[@chemicallyexplosive2902]

Thank you 😀👍