Figma For Beginners: Explore ideas (1/4)

Figma is free to use. Sign up here: bit.ly/32ZdMdr
Get a copy of the Petma design file: bit.ly/3qkUR6X
Get a copy of the wireframe kit: www.figma.com/community/file/...
In this series, we walk you through Figma fundamentals while building an app. This video will cover wireframing and exploring ideas.
Learn more on our Help Center: bit.ly/3pH2DI5
#Figma #FigmaTutorial #FigmaForBeginners
Timestamps:
0:00 Figma for Beginners
0:41 Create an Account and Team
1:06 Free Education account
1:14 Teams and Invite members
1:35 Wireframe an app and our app idea, Petma
2:05 The Editor (where you design)
2:30 Frames
3:20 Pan and Zoom
3:56 Creating new Layers
4:30 Layer's panel hierarchy
4:57 Add an avatar
5:45 Stroke and Fill
6:28 Alignment and text
7:15 Placeholder Icons (rectangles)
7:45 Duplicating layers
8:11 Group Layer
9:13 Components and Libraries
10:03 Figma Community
11:38 Instances
12:00 Constraints
12:40 Additional Screens
13:28 Copy and paste between frames
13:48 Iterations and feedback
15:28 In the next video...

[@Figma]

Hey everyone! Thanks for watching the Figma for Beginners series! We realized that we could have done a better job showing and explaining the team library section. The narration mentions that if you are on a starter team, you can just copy and paste the components into your design file and start using them from there. So the steps to use the Community file would be: 1. Go to www.figma.com/community/file/900479694578549256 2. Click "Duplicate" to create a copy of the file in your drafts 3. Find the components you want and copy them using (mac) ⌘C / (windows) Ctrl + C 4. Open your design file where you're building out your app design 5. If you want to keep your file organized, consider making a new page called "Components" 6. Paste the components using (mac) ⌘V / (windows) Ctrl + V 7. Open the Assets panel at the top of the left sidebar 8. Choose your components from the "Local Components section" Thank you for the feedback!

[@rominabodourian8942]

Thank you so much!!!

[@liviodelivio]

not a good job at all..its not working to add that mobile wireframe ..and why u put teams in beginners tutorial..who the fxck is working in team..find someone else to explain...amateurs

[@pn3870]

cant duplicate files when I'm on the free version :(

[@pn3870]

i am unable to duplicate anything - it only lets you copy. cant move anything to your file- help please. does the duplicate option work only for paid version?

[@badsanta7356]

@@pn3870 Poor user experience in a UX tool!

[@juliamag1911]

For everyone who struggles with the "Team library" part because they use the free version: If you open the wireframe components file and simply copy paste one of the bunches (e.g. everything on the iOS hand drawn page) into your file, simply onto the background, the components will show up in your Assets tab as "Local components". This worked for me as a temporary solution to be just able to continue with the tutorial.

[@oksanaagapova1050]

thank you!!

[@displaymonk]

not all component came but only some ...

[@davidmaish1094]

Awesome, thanks!

[@ratnaakter8283]

Lá na casa

[@luisabaird7860]

I am struggling with that step, now I couldn't find the layers I created, how to save that?

[@duragaming20]

I wish I stumbled upon this video first before searching random tips for figma, this feels like there's a proper progression. Thank you for creating this!

[@rohitsalim122]

this is exactly what I did loool, I'm glad I found this before I actually started with figma

[@bennymart95]

This video is very helpful but should be updated, some of the controls are not the same as they are described in the video.

[@aptovegan9030]

I REALLY LOVE FIGMA!!! GOODBYE SKETCH. THANKS FOR YOUR FRESH PRODUCT!!!

[@TOOLMASTER.JK1]

1. Figma for Beginners: Introduction (0:00) 2. Creating an Account and Team (0:41) 3. Setting up a Free Education account (1:06) 4. Teams and inviting members (1:14) 5. Wireframing an app called Petma (1:35) 6. Exploring the Figma editor (2:05) 7. Understanding Frames (2:30) 8. Using Pan and Zoom (3:20) 9. Creating new Layers (3:56) 10. Managing Layer's panel hierarchy (4:30) 11. Adding an avatar (4:57) 12. Working with Stroke and Fill (5:45) 13. Aligning and formatting text (6:28) 14. Using Placeholder Icons (rectangles) (7:15) 15. Duplicating layers (7:45) 16. Grouping layers (8:11) 17. Utilizing Components and Libraries (9:13) 18. Exploring the Figma Community (10:03) 19. Understanding Instances (11:38) 20. Applying Constraints (12:00) 21. Adding Additional Screens (12:40) 22. Copying and pasting between frames (13:28) 23. Iterations and feedback (13:48) 24. Teaser for the next video (15:28)

[@jonathanfang5003]

Awesome video!!!!! Love Figma and the beginners tutorial you guys made, very helpful and thoughtful!!

[@CMManjunath]

So good! Excellent tutorial. Thank you!

[@dakotarecreates3368]

the music is cute but kind of wish there wasn't any because, information overload while trying to learn as fast as possible.

[@raphaelpaulino]

It is the perfect guidance! Thanks!

[@seansbox]

This is great for new beginners to UX and Figma! Love the details of guidance 🙏

[@Figma]

Thanks for the comment, Sean! Happy to hear that you found this new series helpful, and looking forward to what you make with Figma!

[@zarqafatima9380]

I'm actually thinking about pursuing this field. I was wondering if you could give me pros and cons of the job?

[@chloe.cordeiro]

@@zarqafatima9380 replying so I can stay in this thread for the answer 😄 I’m new to the field of UI and UX! It’s great so far and I love it. A lot of research work required tho

[@yalnisinfo]

love the hand holding at the end

[@masudakhan4799]

This is great. Thank you so much!

[@safiaameen4248]

Who is here because of google ux certificate !! :D

[@mohammedabdulmalik5040]

Mee!!!!

[@antonioavd]

Me. But I don't think it will help /

[@lucylu166]

Not me😅

[@afziashamsi]

What Google UX Certificate?

[@adityakumarjena2372]

Me

[@bonzai0331]

Great tutorial! Thanks!

[@kirankhan1976]

Yuppeee I followed the tutorial and I made it .... Enjoying the tutorial 🎉🎉🎉❤

[@techlead...]

Great series 👍🏻👌🏻

[@MayurCreativeStudio]

This is really helpful, thanks for creating this.

[@MegaMaleeha]

This was super helpful!

[@Cyranek]

we out here learning figma

[@cookwithvaidehi2827]

Thank you so much sir for helping us

[@NotSureWhatImDoingHereRightNow]

Excellent video!

[@yolandabuthelezi4061]

Thank you for a great tutorial....I really enjoyed it

[@cameronjames7104]

I'm new to programs other than Adobe suite, but I'm willing to switch. I create figures and basically anything in Illustrator and Photoshop from scratch. Silly question, but I'm assuming I can do the same in Figma?

[@Nasty1512]

loved it amazing way of teaching. This is my day 1

[@FinazzoCodes]

Hope your still sticking with it! I recently started making videos on figma any feedback is appreciated!

[@bluecherry-hart4786]

This a good tutorial but just a heads up it contains features for the paid version (for 'publish styles and components' and having multiple projects). Not a real biggy, as you can copy and paste the components you need to work around it ^_^. Though still a very good video!

[@divinechimemela9259]

I enjoyed learning figma as a beginner

[@JoolieJulie_]

here i am, speedlearning how to use figma for the first time for a project due tomorrow and i cant stop smiling at the little mouse cursors at 15:33

[@daniellejohnson1956]

This is so incredibly helpful. I didn't know Nathan For You was helping out tech companies... the person narrating has to be Nathan, right??

[@izzymiller2058]

LOL love the high fives at the end :')

[@shepherd247]

Great job'

[@eloditeyemtsa871.]

merci beaucoup pour la vidéo😘😘😘😘😘😘😘😘😘😘😘😘

[@zakharsoulkeeper1181]

That's amazing! thanks!

[@Figma]

No problem, Zakhar! Glad you found the Figma for Beginners series helpful!

[@umerfayyaz2554]

are these icon packs and kits can be used on a project and then can i sale the project after some alterations or without ?

[@navyanjaliverma5777]

thanks

[@Digmapratama]

Nice

[@DanKardell]

good tutorial, however for beginners you really need to stick to the free content. You can't use libraries unless you pay for a teams account?

[@ECUARANA]

For someone who never has worked in creative or design team it is a little difficult to use it.The Knowledge curve is not too fast. We need to start with canvas maybe ? ..is it just a question..

[@ShanonSinn]

I agree with you. I didn't find this to be a beginner video.

[@Kwintessential2]

New to Figma

[@JimKernix]

For the menu variations at ~ 14:00, did he just duplicate the new frame 5 times?

[@user-zc4nz1ju8u]

Great👍

[@taraozekin]

Probably should update to include that using teams now costs $12/mo

[@eftperc]

I must be missing something obvious but how do you change the measurement units to standard??

[@TaThuy.duidenha]

Helpfull

[@kui.shorey]

When I make the Menu Item text as instructed at 13:20 my right side bar looks different and I can't find the text size... Anyone know why?

[@StevenSmith68828]

I’m trying to make a modular website where the user chooses the size widgets is this a good tool for that?

[@googlyeyes2758]

Why/when would you make a group into a frame? Thank you!

[@onowomanoiluezi-ogbaudu3498]

It's really a thing of preference, however they both have their advantages. Most times you put objects like icons, avatars within frames. And when you have many objects that you want to be together you use groups. For example, you could put multiple icons within frames in a group. I hope this helps.

[@narco73]

It doesn't seem to align the smaller layer, it seems to align to the layer that has the smallest x value. Although I may be doing something wrong.

[@Apy013]

Please let me know where do I get the design crit library?

[@justtesting4089]

FYI: The Generic Button/Fab that the tutorial asks you to add at 11:38 can no longer be found in Mobile Wireframe UI Kit. If anyone was able to actually able to find it, please let us know. Thanks!

[@mid-sized-sedan]

I found it in the Assets tab under Local Components then under "Buttons / button / android". I did have to copy and paste the whole library into the draft so this might not be all that helpful. Good luck!

[@asdfasjdhfakhdshjfahs8034]

@@mid-sized-sedan ya but its not under generic like in the video... you can just grab the one from the android tab and it will work

[@ankeeta2818]

Thank you so much omg I wasted so much time finding the button, plus I was struggling with the copy page too. It's very confusing not having a published library. Your comment finally made me find the button!

[@Anbajjjj]

Does this video not continue on a 2/4? Or does it just jump to create designs form explore ideas? I kind of needed to take this to the end to be able to understand it thoroughly.

[@DoEverythingOutdoors]

if you want people to use figma , you need to let people learn it easily free . I'm trying but i,ve run out of free files before i can finish the tutorials. The reason the web exists at all is because early learners of software used cracked versions, you included i expect, thats how they became senior devs today. You wont lose much money and you might gain market dominance if you allow free access to learners. It looks good, but i,m not sure if i want to pay £11 a month to learn something i may not use. Let me learn it free. Learning should be free. Great program ! Students are normally poor. You need people who can actually use the software.

[@scottbiggs8894]

The libraries section skips many essential steps. Would have been better if it were a separate video.

[@aymanhazim4639]

great

[@alexlacaze8773]

I'm a little stuck I think I missed a step (9:10) Whenever I duplicate the frame and I move it below, the text, the rectangle and the circle are shown. What do I do to fix that?

[@javijohnsonphotography]

hey gang!

[@Reticuli]

Enabling the imported Mobile Wireframe UI Kit does nothing, and there is no setting actually showing up to turn libraries on in an existing project for teams. I searched for it and the Libraries settings listing is completely blank. All I can do is open the UI kit all by itself. Not enough ability to discover how to do it yourself with either a menu or a right mouse button. Why can't you just copy & paste to duplicate something instead of requiring ctrl+D?

[@CuisineTown]

It was a great tutorial. but it is not for a free user? when I want to publish and style from Figma Community got a message regarding an upgrade. I wish I knew before.

[@davidmmadden]

same issue here. pretty weak to do an intro tutorial that a free (first-hour) user can't use unless they upgrade @figma

[@kwinnie7358]

same issue here

[@Figma]

Hi CuisineTown, publishing to the Figma Community is currently in Beta (not gated behind a paid plan), however you should be able to browse and duplicate files from the Community without needing to upgrade.

[@Figma]

Hi Dave, publishing to the Figma Community is currently in Beta (not gated behind a paid plan), however you should be able to browse and duplicate files from the Community without needing to upgrade.

[@davidmmadden]

@@Figma So the tutorial "For Beginners" tells you to do things (and then use things) that you cannot do (and therefore use) unless you pay. Yes, I know that. That's weak.

[@kishawnlewis4635]

Is it possible to create a photo editing feature, where users; once in the app, can upload a photo (png) and manipulate it on the background of a t-shirt for example, for a T-shirt printing business, where customers can see a custom pre-visual before order.

[@Saint0bi]

Like a layer mask in the shape of an outline of a T-Shirt? Good question, tbh.

[@MohakGrover]

I'm unable to see any components despite enabling file Library

[@Acces_Approved]

I wish you had said the canvas was 65,000 pixels instead of points. I felt stupid getting clarification from ChatGBT. This may be a "duh" moment for someone else who is not Neurodivergent. I did not realize that this was the right way. After now, I understand that Figma is a design app, and I guess "duh" pixels make sense.

[@shienipierce1]

I don't see duplicate button in community. it only say: open in figma. so i can do do step 2.

[@HectorCalleja]

What’s the difference between using frames vs groups within a design?

[@Figma]

Hi Hector, this article has a summary of some differences: www.figma.com/best-practices/groups-versus-frames/. Hope it helps!

[@hamon3533]

i can't copy and use the library. i can't understand after 10:24 any help please?

[@launchday4600]

Can i please get the background music it's so calming

[@Barrijean]

the start of this video is migraine inducing, frames move too fast, so it's too flashy. Could also be problematic for epileptics.

[@coolgamertm7179]

Figma when i opened library my to not found mobile wireframe UI kit please reply me figma

[@Kerika]

Whose bright idea was it to have two different music soundtracks playing at the same time in the background?

[@orostu1453]

I have get a copy and not duplicate on the mobile UI Kit. Does anybody knows how this is done ?

[@Afdac247]

Hey what is the background song called

[@SwetwweQueen-lw9pf]

Good afternoon

[@_tshepiiyy]

Hey, I'm struggling with the library component, how do I find mobile wireframe UI Kit? I've updated to professional mode but still I'm struggling 😢

[@renzodandrea6469]

Thank you very much. Helpful but I lost you at 10 min 45 sec. As I act as individual, not as a team, I am not able to follow the following steps. Any suggestions?

[@Figma]

Hey Renzo, when we refer to "Team" here, it doesn't mean you need to work with other people. Teams are a shared workspace in Figma where you can organize your files into projects. Each of those projects exist within your team. Even if you're working alone, there are many benefits to working in a Team, including those organizational features to keep your files tidy. You can also publish and use Team Libraries in a team (only Styles can be published in a free Starter Team, to publish Components, you'll need to upgrade to a paid professional team).

[@renzodandrea6469]

@@Figma Thank you very much for your answer. Currently, the free starter team suits my need and flow. In my case, as beginner free starter profile, I am struggling to follow the steps of your video training. Until the components part, it is smooth. If I jump in the next part 2/4, it is tricky. Am I missing something?

[@sticksteves7499]

I am stuck at the wireframe components part, not sure how to get them into the assets file, can anyone help? I am using the free version and would like to learn as much as possible! 10:00 Thank you!

[@DamiAdejoro]

This is why I came to the comment section too.

[@alyamandra4323]

same

[@Sk-fn6uc]

Same

[@Sk-fn6uc]

Do u know now do i have to buy it od what

[@RAHULkVLOG]

Hey ,can I operate by android phone?

[@RAHULkVLOG]

Hey, I allowed what it say still I wouldn't sign up . What I do?

[@Rajdeep-gr2qk]

I can't use the libraries, as I'm working by myself and don't have team and can't access the libraries, Please help!

[@niknaksim]

a question please. when you are talking about wireframes you mention the purpose is to map out user flow and structure, but then you also say this shouldnt have any content. How would I map out user flow and structure with no content?

[@FinazzoCodes]

I have a video clearing this up i think it could really help you and your support wpuld be appreciated, but if you dont have the time pretty much you have low fidelity and high fidelity wireframes and a weird in between, where low fidelity is lacking images and overall asthetic and functionality, very barebones, but high fidelity can get more advanced features and can start adding more content, heres a video all about it, hope to see you there! kzbin.info/www/bejne/m167i42Mqt10jM0

[@nikhil4yourhelp670]

9:13 what if we are not in team and performing solo .

[@sydneeellison99]

I'm stuck on the components thing does anyone know how to use components from the community on a free account? I cant publish them to a team since I have a free account but I'm not even seeing where I can use them on my file. Can someone help?

[@kui.shorey]

are you clicking Assets next to Layers on the left side bar? I struggled wit that step a bit too but got there in the end

[@AartiMistry-yb3vq]

Hello, I am not able to see any "duplicate" option on the Figma community side when selecting wireframes. Is it because I am using free version?

[@Figma]

Hello Aarti, we've updated the "Duplicate" button's copy to "Get a copy". You should be able to get a copy of the community file with a free plan.

[@ecreacher3515]

Is it possible to get in UX by learning on your own with tools like this online. Money is short but have the motivation. Just trying to find the right pathway into the career.

[@Valerie-ws3zr]

the constraint is not working for me on the fab icon :/

[@lprakashrajpurohit9563]

I can't see the wireframe UI kit after enabling it in the assets tab. What should I do?

[@Figma]

Hello, can you try refresh the page and publish the components again?

[@FranciscoSnydert-ug9yk]

Francisco Snydert sorry I am trying to get set ip

[@kingardian1]

Mouse Users: You can also zoom in and out with 'CTRL + Scroll'

[@drishtiratta7826]

all the buttons are appering really small

[@Stolica83]

Hi I am struggling wit background in figma - everything is just covered in black... so I cannot create anything. How can I fix it ?

[@Figma]

Hello Joanna, you can change the Figma background color from the properties panel. Check out this help article: bit.ly/36K5DP6

[@marlyndaarnett]

I am trying the free version to see if I like Figma before paying for the pro version. However, this tutorial won't show me how to get started using the free version. I'm very frustrated and rethinking a paid subscription if I can't even get my feet wet with the company's own tutorials. It doesn't even show me how to make a canvas which should be incredibly easy! Very disappointing.

[@dollythomas9428]

I so much agree with you

[@RGNDShubhampal]

i used figma for the first time, but i could not get the option mobile wireframe UI kit in the libraries section at 11:01, pls help

[@tridevruidas]

The free plan doesn't provide publish library option so simply copy the components from the ui library and paste it on your project

[@dimeolas777]

How do you use Instances? Kinda glossed over that.

[@FinazzoCodes]

If you still use figma i have a video talking about them, and your feedback would mean a lot to me kzbin.info/www/bejne/b6jFlX5qobKVrsk

[@terranceblakely1398]

Why would you make a tutorial that not everyone as a free beginner getting started can properly follow?

[@KamNield]

~10m in all of the menus and options, even the website are different. I had to give up. I've paid for figma but see no teams options either.

[@chantellethomas2098]

Why am I not seeing publish components and styles?

[@eien_jpg]

you are on the free tier? If so you can't publish

[@suruchikumari2360]

hey, I don't have" mobile wireframe UI kit" can anyone help me with this, please. I'm very new to this.

[@kui.shorey]

you have to go to the figma community page

[@Anbajjjj]

Why can't I move the components to the Team library? I did all that the video said but I still can't find the components in my library.

[@meghapanwar307]

Same here. Did you get any solution?

[@Anbajjjj]

@@meghapanwar307 No, sorry.

[@tridevruidas]

Simply copy and paste the components it works perfectly

[@paintedbooks4416]

11:03 I clicked the toggle and enabled it, but the assets still don't show up at the left panel :(

[@HeyIvyDo]

It's happening to me too, can someone help?

[@vaishnavisharma3181]

were you able to resolv the issue? coz i'm facing the same

[@paintedbooks4416]

@@vaishnavisharma3181 I don't really remember but I think it was because my file was still a draft and not an actual project in a team.

[@paintedbooks4416]

@@HeyIvyDo I think it's because my file was still a draft and not an actual project in a team

[@anavanessaquispe6775]

en español por favor

[@Figma]

Hi Anavanessa, thanks for the suggestion! Are you asking to have the video audio spoken in Spanish? Or would you like Spanish closed captioning? Thank you!

[@MONARCHF2]

the create figma account section was worded so much like a sponsor it fired off my sponsor skipper

[@GoksuSirin]

5:14

[@PhamVan-iu5hb]

LIKE