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...
Пікірлер: 212
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
2 жыл бұрын
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!
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
3 жыл бұрын
thank you!!
@displaymonk
3 жыл бұрын
not all component came but only some ...
@davidmaish1094
3 жыл бұрын
Awesome, thanks!
@ratnaakter8283
3 жыл бұрын
Lá na casa
@luisabaird7860
3 жыл бұрын
I am struggling with that step, now I couldn't find the layers I created, how to save that?
Awesome video!!!!! Love Figma and the beginners tutorial you guys made, very helpful and thoughtful!!
This video is very helpful but should be updated, some of the controls are not the same as they are described in the video.
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
the music is cute but kind of wish there wasn't any because, information overload while trying to learn as fast as possible.
I REALLY LOVE FIGMA!!! GOODBYE SKETCH. THANKS FOR YOUR FRESH PRODUCT!!!
This is great for new beginners to UX and Figma! Love the details of guidance 🙏
@Figma
3 жыл бұрын
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
3 жыл бұрын
I'm actually thinking about pursuing this field. I was wondering if you could give me pros and cons of the job?
@chloe.cordeiro
2 жыл бұрын
@@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
So good! Excellent tutorial. Thank you!
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)
love the hand holding at the end
It is the perfect guidance! Thanks!
Yuppeee I followed the tutorial and I made it .... Enjoying the tutorial 🎉🎉🎉❤
This is great. Thank you so much!
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!
Great tutorial! Thanks!
Great series 👍🏻👌🏻
This is really helpful, thanks for creating this.
Who is here because of google ux certificate !! :D
@mohammedabdulmalik5040
Жыл бұрын
Mee!!!!
@antonioavd
Жыл бұрын
Me. But I don't think it will help /
@lucylu166
9 ай бұрын
Not me😅
@afziashamsi
9 ай бұрын
What Google UX Certificate?
@adityakumarjena2372
9 ай бұрын
Me
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??
This was super helpful!
I enjoyed learning figma as a beginner
Excellent video!
Thank you so much sir for helping us
loved it amazing way of teaching. This is my day 1
@FinazzoCodes
10 ай бұрын
Hope your still sticking with it! I recently started making videos on figma any feedback is appreciated!
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
Thank you for a great tutorial....I really enjoyed it
@cameronjames7104
3 жыл бұрын
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?
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?
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
2 жыл бұрын
I agree with you. I didn't find this to be a beginner video.
are these icon packs and kits can be used on a project and then can i sale the project after some alterations or without ?
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.
For the menu variations at ~ 14:00, did he just duplicate the new frame 5 times?
LOL love the high fives at the end :')
Great job'
That's amazing! thanks!
@Figma
3 жыл бұрын
No problem, Zakhar! Glad you found the Figma for Beginners series helpful!
I must be missing something obvious but how do you change the measurement units to standard??
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?
I’m trying to make a modular website where the user chooses the size widgets is this a good tool for that?
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?
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?
merci beaucoup pour la vidéo😘😘😘😘😘😘😘😘😘😘😘😘
Please let me know where do I get the design crit library?
Why/when would you make a group into a frame? Thank you!
@onowomanoiluezi-ogbaudu3498
2 жыл бұрын
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.
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.
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
2 жыл бұрын
Like a layer mask in the shape of an outline of a T-Shirt? Good question, tbh.
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
3 жыл бұрын
same issue here. pretty weak to do an intro tutorial that a free (first-hour) user can't use unless they upgrade @figma
@kwinnie7358
3 жыл бұрын
same issue here
@Figma
3 жыл бұрын
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
3 жыл бұрын
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
3 жыл бұрын
@@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.
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!
Great👍
Nice
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 😢
we out here learning figma
New to Figma
I don't see duplicate button in community. it only say: open in figma. so i can do do step 2.
Helpfull
Figma when i opened library my to not found mobile wireframe UI kit please reply me figma
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
3 жыл бұрын
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
3 жыл бұрын
@@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?
I'm unable to see any components despite enabling file Library
i can't copy and use the library. i can't understand after 10:24 any help please?
thanks
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.
I have get a copy and not duplicate on the mobile UI Kit. Does anybody knows how this is done ?
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.
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
10 ай бұрын
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! kzread.info/dash/bejne/l2GMvLyPpdunhs4.html
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
2 жыл бұрын
This is why I came to the comment section too.
@alyamandra4323
Жыл бұрын
same
@Sk-fn6uc
7 ай бұрын
Same
@Sk-fn6uc
7 ай бұрын
Do u know now do i have to buy it od what
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!
What’s the difference between using frames vs groups within a design?
@Figma
2 жыл бұрын
Hi Hector, this article has a summary of some differences: www.figma.com/best-practices/groups-versus-frames/. Hope it helps!
Hey, I allowed what it say still I wouldn't sign up . What I do?
Hey ,can I operate by android phone?
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.
Probably should update to include that using teams now costs $12/mo
Whose bright idea was it to have two different music soundtracks playing at the same time in the background?
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
2 жыл бұрын
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
Hey what is the background song called
hey gang!
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
the start of this video is migraine inducing, frames move too fast, so it's too flashy. Could also be problematic for epileptics.
great
The libraries section skips many essential steps. Would have been better if it were a separate video.
Can i please get the background music it's so calming
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?
the constraint is not working for me on the fab icon :/
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.
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
2 жыл бұрын
Hello Joanna, you can change the Figma background color from the properties panel. Check out this help article: bit.ly/36K5DP6
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
8 ай бұрын
The free plan doesn't provide publish library option so simply copy the components from the ui library and paste it on your project
9:13 what if we are not in team and performing solo .
~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.
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
10 ай бұрын
Same here. Did you get any solution?
@Anbajjjj
10 ай бұрын
@@meghapanwar307 No, sorry.
@tridevruidas
8 ай бұрын
Simply copy and paste the components it works perfectly
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
How do you use Instances? Kinda glossed over that.
@FinazzoCodes
10 ай бұрын
If you still use figma i have a video talking about them, and your feedback would mean a lot to me kzread.info/dash/bejne/a6uWxq1tnLDIqMo.html
hey, I don't have" mobile wireframe UI kit" can anyone help me with this, please. I'm very new to this.
@kui.shorey
2 жыл бұрын
you have to go to the figma community page
Why am I not seeing publish components and styles?
@eien_jpg
9 ай бұрын
you are on the free tier? If so you can't publish
Why would you make a tutorial that not everyone as a free beginner getting started can properly follow?
all the buttons are appering really small
Francisco Snydert sorry I am trying to get set ip
the create figma account section was worded so much like a sponsor it fired off my sponsor skipper
Pretty weak Figma doesn't allow community colleges when applying for the education account :/
@Figma
2 жыл бұрын
Hi CD! Community colleges absolutely qualify for the education plan! If you are having trouble verifying, please email us at education@figma.com
Need to improve a Quality (Pixel) of your videos , even 360p looks like 144p what kind of quality you are giving... kindly have a look on it..!!😏
Mac desktop version: Where is google pixel 2 xl in the beginner tutorial?
@robertsherwin1896
Жыл бұрын
Cancel that, found it in the Archive section.
Mouse Users: You can also zoom in and out with 'CTRL + Scroll'
Can anyone tell is it important to learn AI, PS for working on figma.?