Figma For Beginners: Explore ideas (1/4)

Подписаться 547 тыс.

Просмотров 1,3 млн

50% 1

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...

Наука

Опубликовано:

9 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 212

@Figma 2 года назад

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!

@juliamag1911 3 года назад

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?

@duragaming20 2 года назад

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

@jonathanfang5003 3 года назад

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

@aptovegan9030 2 года назад

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

@CMManjunath Год назад

So good! Excellent tutorial. Thank you!

@raphaelpaulino 3 года назад

It is the perfect guidance! Thanks!

@seansbox 3 года назад

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

@masudakhan4799 3 года назад

This is great. Thank you so much!

@yalnisinfo 11 месяцев назад

love the hand holding at the end

@bonzai0331 3 года назад

Great tutorial! Thanks!

@bennymart95 8 месяцев назад

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

@safiaameen4248 2 года назад

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 месяцев назад

@dakotarecreates3368 2 года назад

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

@MayurCreativeStudio 9 месяцев назад

This is really helpful, thanks for creating this.

@techlead... 3 года назад

Great series 👍🏻👌🏻

@MegaMaleeha 2 года назад

This was super helpful!

@yolandabuthelezi4061 3 года назад

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?

@kirankhan1976 5 месяцев назад

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

@NotSureWhatImDoingHereRightNow Год назад

Excellent video!

@cookwithvaidehi2827 2 года назад

Thank you so much sir for helping us

@TOOLMASTER.JK1 8 месяцев назад

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)

@Nasty1512 Год назад

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!

@divinechimemela9259 21 день назад

I enjoyed learning figma as a beginner

@zakharsoulkeeper1181 3 года назад

That's amazing! thanks!

@Figma 3 года назад

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

@bluecherry-hart4786 2 года назад

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!

@Cyranek 26 дней назад

we out here learning figma

@izzymiller2058 2 года назад

LOL love the high fives at the end :')

@shepherd247 3 года назад

Great job'

@eloditeyemtsa871. 2 года назад

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

@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??

@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 ?

@ECUARANA 3 года назад

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.

@JoolieJulie_ 2 года назад

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

@kui.shorey 2 года назад

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?

@JimKernix Год назад

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

@googlyeyes2758 3 года назад

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.

@navyanjaliverma5777 2 года назад

thanks

@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.

@TaThuy.duidenha 11 месяцев назад

Helpfull

@eftperc Год назад

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

@user-zc4nz1ju8u Год назад

Great👍

@DanKardell 2 года назад

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?

@Digmapratama 3 года назад

Nice

@StevenSmith68828 Год назад

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

@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?

@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?

@kishawnlewis4635 3 года назад

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.

@Apy013 9 месяцев назад

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

@Kwintessential2 3 года назад

New to Figma

@justtesting4089 2 года назад

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!

@narco73 8 месяцев назад

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.

@_tshepiiyy 6 месяцев назад

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 😢

@shienipierce1 11 месяцев назад

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

@renzodandrea6469 3 года назад

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?

@HectorCalleja 3 года назад

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

@Figma 3 года назад

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

@sticksteves7499 3 года назад

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

@coolgamertm7179 2 года назад

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

@aymanhazim4639 Год назад

great

@CuisineTown 3 года назад

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.

@orostu1453 Год назад

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

@sydneeellison99 2 года назад

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

@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 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! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-e-XZZVuxAVk.html

@javijohnsonphotography 9 месяцев назад

hey gang!

@hamon3533 2 года назад

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

@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.

@MohakGrover 2 года назад

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

@Rajdeep-gr2qk 2 года назад

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!

@Kerika 9 месяцев назад

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

@Afdac247 6 месяцев назад

Hey what is the background song called

@RAHULkVLOG Год назад

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

@ecreacher3515 3 месяца назад

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.

@launchday4600 2 месяца назад

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

@taraozekin 5 месяцев назад

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

@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

@RAHULkVLOG Год назад

Hey ,can I operate by android phone?

@Barrijean 3 года назад

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

@Valerie-ws3zr 4 месяца назад

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?

@Acces_Approved 2 месяца назад

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.

@Stolica83 2 года назад

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

@scottbiggs8894 9 месяцев назад

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

@nikhil4yourhelp670 Год назад

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

@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.

@RGNDShubhampal 11 месяцев назад

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

@KamNield 3 месяца назад

~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.

@suruchikumari2360 2 года назад

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

@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 10 месяцев назад

Same here. Did you get any solution?

@Anbajjjj 10 месяцев назад

@@meghapanwar307 No, sorry.

@tridevruidas 8 месяцев назад

Simply copy and paste the components it works perfectly

@dimeolas777 Год назад

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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9wbdK4lMbxg.html

@FranciscoSnydert-ug9yk Год назад

Francisco Snydert sorry I am trying to get set ip

@terranceblakely1398 2 года назад

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

@paintedbooks4416 2 года назад

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

@drishtiratta7826 Год назад

all the buttons are appering really small

@chantellethomas2098 Год назад

Why am I not seeing publish components and styles?

@eien_jpg 9 месяцев назад

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

@PhamVan-iu5hb 10 месяцев назад

@MONARCHF2 11 месяцев назад

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

@aniketwakekar918 Год назад

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..!!😏

@kingardian1 2 года назад

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

@GoksuSirin 11 месяцев назад

5:14

@anavanessaquispe6775 3 года назад

en español por favor

@Figma 3 года назад

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!