Figma 101: An introduction tutorial

[@jillianbourgeois5523]

The BEST video I've found yet explaining Figma so clearly and in a logical order. Thank you!

[@justinsalamanca2033]

As someone trying to learn how to use Figma coming from Adobe XD, this was probably one of the most simple and straightforward intro tutorials to Figma!

[@charlimarieTV]

this makes me so happy to hear!

[@a.charlie2161]

You're a great inspiration. Thank you for the content. I get such a good vibe from you that I can sit for hours listening and learning from you. I wish you all the best with all you set out to do. I wish you become a CEO of a big network of great creators and problem solvers like yourself. People look to you for help, you are so genuine and explain things with such clarity. I wish I see you in business school. I'm telling you, you have the predisposition to become a super great leader.

[@StefanPoulos]

Side note: I'm really digging this screen layout for your video VS picture in picture. It feels like you're going to reach out and grab something on the screen. 😃

[@charlimarieTV]

Haha thanks!

[@growthhackenginecom]

cool! how to do you get this picture in picture in the video? what software to create the vid? I want to do this :) Thanks!

[@GurpreetSingh-qs3bo]

That's really good introduction to Figma. I had just installed and found this video quite useful. Good effort for creating this

[@DarthTurner]

I love your videos, and I'm so glad you uploaded a primer for those interested in Figma. The audio on this video was very quiet, and I had a hard time hearing without turning the volume way up. Otherwise, the content was fantastic! Keep up the great work!!

[@charlimarieTV]

Yep a few people have said that. Will adjust next time!

[@Kurashuu]

I've been using Figma for nearly two years now, mainly because of you (and Femke, too). I've been spreading the word of Figma to my peers ever since. lol Love this 101 tutorial, by the way! I always thought that images would only 'fill' the object, so I'd have to crop it in another software. Turns out I should've read more tutorials about the basics. The trick for changing the canvas holding the command key is pure gold! Thanks a lot for putting so much effort in everything you make! :3

[@charlimarieTV]

thanks for this kind comment Fernando!!

[@farhanatasneem9433]

3.5mins into the videos and I got my query answered. I love the way how you explain. I am a newbie in figma and I already feel comfortable using it, thanks to your tutorial.

[@omidr.g7409]

I use Figma for ALL of my vector design work, not just UI/UX. And I regret nothing. The software is extraordinary.

[@yichia_wu]

Many thanks! This video is helpful and how you explained is clear and encouraging!

[@Danachew]

I just started really using Figma, so this is indescribably helpful. Thanks Charli!

[@charlimarieTV]

you're welcome!

[@digigoliath]

Me too!!

[@cuffeemia2108]

Your tutorials are awesome! Easier to follow along than many others.

[@charlimarieTV]

thank you Devin that's such kind feedback!

[@kevinmatthes1928]

firstly I would like to wish you well and to say a huge thank you for uploading these videos as they have been an invaluable resource to

[@clarenceaigbuza3479]

It's so great that you cleared the fact that a file is not a project. I have been going back and forth cos I didn't know what that meant

[@charlimarieTV]

Right!? I found it so confusing to start with too!! Glad I could clear it up for you :)

[@ToddNoah]

Hi Charli, Thank you for such a warm explanatory video. Well done and you are very clear, personable, easy to watch and listen to. Grateful.

[@seanarussell]

Really enjoyed your video. It was easy to follow and it gave me a good feel for the program.

[@jameslong5715]

Thanks Charli, you basically answered a handful of concept questions I had in that tutorial - cheers.

[@michellezhu1559]

Thank you Charli for your tutorial, for someone transitioning from Sketch to Figma. Great intro.

[@sh8ma]

The best teacher everrrr 🙌🏻

[@ling143340593]

This is the best Figma tutorials!!

[@charlimarieTV]

Thank you so much!

[@JesusSanchez-cd3ze]

Really well-made video, Charli. Simple, straight-to-the-point, well structured and understandable. Thank you ^^

[@charlimarieTV]

Glad it was helpful!

[@almaestrada4523]

Thank you for this tutorial! It's one of the most straight-forward I've seen on how to even get started on messing around with it. I didn't even know where to start on playing around or creating anything past a frame. Looking forward to using your tips!

[@charlimarieTV]

Happy you found it useful Alma!

[@GiovannaRibeiro3]

Nicely presented content. Thank you for sharing!

[@ciric00]

Fantastic video. Thank you Michael, You have inspired to get into soft editing and videos soft design too.

[@charlimarieTV]

Who is Michael? Lol

[@frozen_tortus]

Marie, this is really grate Figma introduction. I can see you know what you talking about. Some of the things you demonstrated I just recently learned, and some (like how you use pages) I just learn right now. Thanks for this video.

[@junehanabi1756]

1:40 - It's nice having a website as a native Desktop app and it is mostly the same but coming from a developer who used to design Electron based apps, you have to be very careful. When it's in the browser it's in a sandbox, there's not a lot it can do and you control the environment. Most people have ad-blockers and security software and pop-up protection etc... so the web app is highly restricted without any control. When you bring it out into an Electron app all of that goes away, there is no security or ad-blocking, etc... and the sandbox also goes away. No plugins or anything to further restrict the web app. It's completely free-for-all with just about all the rules and security out the window minus the generic security your internet security software may provide. The most common thing with Electron based apps often do now that it's out of the browser is telemetry (Monitoring your usage and reporting back to one or more sites) and leveraging 3rd party services into the website most of which would be blocked if it's in the browser. I don't ever download Electron based apps unless their open source and the ones I made were completely open source so people could see I wasn't doing anything like that, I'm still leery about the open source ones because they can often be shipped with private libraries and it's the reason I don't develop Electron apps anymore because I don't want to continue to use or support it. Electron is a wonderful tool for developers but it's so often misused because it gives devs incredible power to do a myriad of things unnoticed and unrestricted.

[@vaniamartin3074]

Well presented. Allowing enough time for the viewer to execute the task with understanding. All round useful. Thanks so much!

[@catherinemcconalogue8088]

Great video. I'm just getting started with Figma after using Photoshop with too long. Excited to watch the Smart Animate vid!

[@charlimarieTV]

you're gonna love Figma!

[@philshort7341]

This is a great video - soo very informative :-) 😊

[@claudiadances]

Great intro to Figma. Thank you for creating this video!

[@FrenchWithPrapti]

14:22 what key should we consider pressing in a Windows 10 instead of command key for the same function.

[@gelatogirl24]

Very useful tutorial and tips!

[@diabotron4935]

this video was immensely helpful. Thank you!

[@Saturnlatte]

This was a great, easy to understand intro to figma, super helpful! Thank-you :)

[@MacMiggity]

This is a great tutorial. Your setup is also really well done. Thank you for taking the time to make this happen.

[@AadidevSooknananNXS]

Very well-explained and concise!

[@tobiasstrollo]

Thank you so much - brilliant video!

[@marinastanic]

Hey Charli, this video helped me so much wrapping my head around Figma!!! Thank you so much!

[@vlphv2330]

Hey there

[@Brauliocampos2]

This video was very helpful, love your vibe.

[@ogantatlici4357]

Thanks for the vid, great start into figma! :)

[@petez4608]

Great video. Very succinct and worth rewatching. Thanks so much!

[@stephaniech4008]

Could you do more tutorials? And other tools you may use like marvel or such? Thanks

[@tayothomas4155]

tayo thomas.This was a very good tutorial.Your video simplified everything about figma.I think you should consider teaching in the university cos you are so good.thanks

[@chilizablan]

Thank you so much Charli! This is a really helpful introduction to Figma. 🥰

[@chelsea.comedy]

You're awesome, Charli, great tutorial!

[@charlimarieTV]

Thanks Chelsea!

[@FunkyToe369]

Extremely useful video but I just wanna say your hair colour looks awesome, really nice shade of pink/purple!

[@charlimarieTV]

Thank you!

[@philcharles51]

Thank you for the video. It is really well explained

[@mattc9409]

Hi there, I was wondering if anyone with the free version was able to publish their styles like at 4:22. I get a message on my screen that "Team Library is a Professional plan-only feature"

[@realkingmav]

I'm a developer, server admin and devops engineer with over 15 years of experience. I usually just design and develop all morphed into one and it saves me quite some time. I'm trying to branch out to actually start designing with apps like Sketch and Figma. I watched your video, Sketch vs Figma and decided to go with Figma because of you, Lol! How long does it usually take you to complete a design before handing it off to a developer?

[@WORDGASM]

Big thanks for sharing this precious knowledge!

[@anneotieno5495]

Very well put. Thank you

[@CarloFriscia]

Great tutorial, thanks 😃

[@adityashinde3864]

Please make more figma UI design videos.

[@charlimarieTV]

sure thing! Is there something specific you'd like to see?

[@nathanael2814]

@@charlimarieTV, as an aspiring UX designer I really really really enjoyed the video you made about your design process as a whole. I find videos that just go through the whole design process super helpful (from client meetings to wireframing to prototyping).

[@VishnuPadmanabhan]

This is something that as a new Figma user, I was looking for :) Thanks!

[@charlimarieTV]

same!! you're welcome :)

[@simonkincaid3125]

Great video introduction to figma. Cheers!

[@4chelo4]

Thank you very much for this introduction to Figma! It is very helpful.

[@jamieseroogy766]

I recently started a position and we use Sketch - I was using XD so XD to Sketch but my manager said she has a feeling we will move to Figma eventually. I figured since I am new and have some downtime I would research it - I planned on learning it anyways before I was hired where I am so I could be appealing on resumes since it's becoming an industry standard. One thing our Accounts Team likes is for us to take files of our sites into Keynote to create an animated presentation of the site with a display of a Macbook and have the page scroll through. Then we have to export it to a Power Point file so they can use it in presentations with clients since they use pc's and not macs. There HAS to be a better way without so many steps. Does Figma have any other presenting options that you know of? Other than the preview and prototype view like what you shared and sketch has. Does that make sense? lol

[@nicoleschannel2874]

Thank you! Really helpful!! I really enjoy watching your video :)

[@evalee1227]

This video is really useful! Thank you, Charli~😇

[@ganesanganesan1979]

Awesome ! Thank you very much! Is there a full tutorial on how to design something like your main job site - convert kit ? I looks really awesome

[@charlimarieTV]

thank you! there isn't a full tutorial on that, but I do share bits and pieces of the design process in my vlogs. I'll write it on my list to create a separate video!

[@ganesanganesan1979]

@@charlimarieTV thank you!! will be looking forward to that. p/s also really enjoying the hair color :)

[@deniseene6797]

Loooooove the hair!!!

[@charlimarieTV]

always good to see how someone else uses it right? :)

[@Constantincc]

Yup, apar din ce in ce mai multe tutoriale :)

[@eduardbenedic9844]

Really useful and nice video. Thanks a lot!

[@charlimarieTV]

Glad it was helpful!

[@thejasonresnick]

I've only begun using Figma (I'm not a designer, but using it with my designer and have seen the power in being able to use it for things within my process and workflows). Everything I Have though is in the Drafts folder (not sure that's the proper term). I'd like to create other folders but seem to only be able to do that by creating a Team. Most of this will be unshared, so am I missing something?

[@charlimarieTV]

yep! You need to create a Team, but you can create a Starter Team (that's free) and set up 3 folders (projects). My Charli Marie "team" you see in this video is a Starter Team

[@thejasonresnick]

CharliMarieTV got it. Thought maybe I missed something

[@elcasa6587]

Do you have any videos on how to set up a online portfolio site or page?

[@kathy9124]

I want to see more of the smart animations in Figma! :)

[@tsuyoshi4226]

Thank you. This is super helpful.

[@Dcorp412]

Really helpful! Great content, thanks!

[@1233605]

thank you so much!!, you are sooo easy to follow Charli, this is such a great tutorial! :) Can you make one on Figma prototype (animation)

[@jylie_kenner]

You’re amazing, thank you so much

[@lindawisebear]

Awesome intro!

[@michaelfuyala3831]

Great overview thank you!

[@christianOver9000]

Really curious what plugins you like to use. I've found them super useful.

[@charlimarieTV]

I don’t use many! But I’ll do a video about it :)

[@naalamptey-mills7811]

Hey Charli, I so appreciate you doing this tutorial! While watching I ran into a little issue at 3:29. On my Figma desktop I do not have a Layout grid, Layer, or Fill under my design panel, how do I fix this?

[@naalamptey-mills7811]

Lol, nvm I figured it out!

[@jkbullitt8986]

kudos! Another great video :)

[@thaysasilva4841]

this tutorial is so good, thanks for sharing!!

[@hispagamers]

you are super amazing, You are my favorite content creator thank you

[@charlimarieTV]

thank you! That's so kind :)

[@grungemax]

Great video. Clear instructions :)

[@migo33]

Thanks for the intro. We are moving to Figma due to its cross-system support or more accurately, system-agnostic approach. However, being a designer for more than 25 years all these new apps are no more than dynamic layout apps more or less a skim version of InDesign or QuarkExpress. So all those 'cool' features such as components, styles and libraries have been around for decades.

[@charlimarieTV]

The basic idea of compenetra etc may have been around for decades but Indesign and quark we’re not created for digital design, so it’s fantastic that we now have tools like Figma Sketch and Adobe XD that are specifically created for digital design needs!

[@w0mblemania]

Nah, I disagree. Figma and Sketch are focused UI design tools, not page layout, publishing tools. There's no real comparison between those old products, and Sketch/Figma. Yes, these later products copied some elements, but Sketch in particular innovated in many ways, particularly when it came to usability.

[@migo33]

@@w0mblemania Thanks for replying 2 years later. Figma has changed considerably, Sketch is nowhere to be seen and who the hell uses Adobe XD 🙂.... Anyhow, as a multidisciplinary designer I don't differentiate between digital, print or mixed-media. those are all outcomes. UI requires graphic design and layout skills with the added interactivity and fluid layouts.

[@w0mblemania]

@@migo33 I think you're grossly underestimating just how much Sketch is still used. A lot of people want it for its performance and offline capability.

[@migo33]

@@w0mblemania I love Sketch and use it myself but from what I can see within the community, Sketch sales and usage is declining unfortunately.

[@shahedulchowdhury4264]

Hey! Thank you so much for the tutorial.

[@helendonis-keller6830]

This looks like a great way to design quickly

[@yoyoz333]

Being an old video, maybe you won't see this or reply, but do you know if there is a way to do a responsive design in Figma where you have buttons on the desktop layout and when you scale it down to Mobile, the buttons change to a Burger Menu?

[@timetoevolve5519]

thank you! so helpful!

[@CityscapesTheBook]

9:45 shape & vector network 10:46 save elements (paid account)

[@KushanthiHasinika]

Thank you very much. This is really helpful! Keep doing videos like this :D

[@penstarin]

You have a great clear style thank you! However when I go to add a style to the library there is no publish button? I had a look on forums, couldn't find anything. I was just wondering if it was because I have the free version of Figma?

[@charlimarieTV]

Hmm maybe? Perhaps styles by themselves don’t need publishing? Are you able to access them in another file just fine?

[@arttledsoulfindspeace]

Had the same issue. Click on the drop down arrow of the file you named. Then it'll show you the option to publish styles and components.

[@vectorsome3035]

Do you have a video showing how to edit softs????

[@Kevthedev00]

I am pretty experienced with Adobe XD and feel that it lacks a FREE collaborative experience like Figma. I love this intro to it and I have been looking to add it to my bat buckler...lol. I'm going to officially start playing with it over the weekend..

[@danmantena4676]

thanks! great video

[@JediMik]

уже год пользуюсь Figma, делаю в ней презентации и инфографику :)

[@cassandrasampson23]

Hey Charli thanks for the great vid. I also love hearing a fellow kiwi accent :)

[@alexosiichuk9603]

Would be nice to see how to Copy and Paste layer in the the place 1. Between frames 2. Over selected layer

[@daves2275]

Great tutorial this - thanks for posting up. Quick question: I cannot see the 'PUBLISH CHANGE' button (using max desktop version) like you do (assets then library icon). I have to hit the comment button and use the drop down menu in order to publish. Is there something I'm missing?

[@charlimarieTV]

Are you on a free account? I wonder if it’s cos I’m on a team account.

[@morttis6011]

Hello CM, this may be a stupid question: what tool are you using to record this video? I have been tasked to create a training video for our new food safety app and love how you do this. by the way, we just transitioned over to Figma from Adobe XD, love it. M

[@charlimarieTV]

I use Quicktime to record my screen and then Premiere Pro to edit the video (combining screen recording and my camera footage). Best of luck for creating your training! Loom is a good option for an online service to record a video

[@gelatogirl24]

When figma exports the images, does it optimize the images to reduce image file size or do you have to redo this step in something like photoshop and/or tiny.png?

[@markomarcinko1019]

What about importing midi files because most midis freezes my program. What can I do about it? I'm using soft soft Bundle Pack by

[@lianasushko8853]

Thanks for lesson!

[@victormunduruca]

Great tutorial! subscribed

[@charlimarieTV]

thanks Victor! welcome to my channel :)

[@GemCristian]

so sweet of you

[@tellem_]

what's the importance of the grid layout??

[@edsbloggingcom]

Good generic overview. Thx!