Figma Tips ⚡ - Frames or Rectangles

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

Просмотров 26 тыс.

50% 1

Frames are your best friend in Figma.
Let's learn to master their usage to increase workflow and reduce your file layers.
Time Stamps ⏱️
00:00 Introduction
00:20 Short summary
00:36 A basic overview
06:33 Properties of frames vs rectangles
07:13 Explanation of frame properties
09:45 Placing elements within frames
13:22 Constraining elements within frames
14:58 Let's build something
18:00 Three use cases of rectangles
20:24 Frames vs groups?
22:14 Like, comment, subscribe fam
Frame Perks 🔥
1. Reduce the number of layers in your file
2. Make changing colours simpler
3. Same properties as rectangles but more
4. Frameception - Frames within frames
5. Each frame is a new coordinate system
6. Align elements against frame boundaries
7. Constraints control how elements act when changing frame sizes
Got a question about frames, figma, or the UX/UI industry?
Any suggestions for topics you would like me to cover?
Leave a comment below.
Support my work at:
paypal.me/thejunboy
#ui #userinterface #figma

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

13 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

I think you explain things clearly and understandably. I really love your video. You saved a lot of my time. Thank you so much.

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

Thank you so much! Really appreciate the feedback and glad it was useful for you!

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

I loved this video. I've seen it twice and I get into a zen state when watching it! Claaaaaaaarity!

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

thanks for the feedback!

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

fantastic tutorial mate......learn't so much about Frames v Rectangles.....Just starting out using figma.

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

Really appreciate the feedback! All the best with your design journey!

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

Awesome video, thank you for carefully going over all these features. I learned so much!

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

I feel at the early stages of learning this tutorial really helped, as I was getting confused between the difference between Frames, rectangles and auto-layouts

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

Thank you so much for this content, the step by step explanations were really useful since I'm still getting acclimated to Figma!

@kevinchen1570 Год назад

this was VERY helpful - thank you for sharing your experience with us!

@michaelwong9526 4 месяца назад

Thank you so much! A super clear lesson and you have made it easy for everyone to understand.

@thejunboy 4 месяца назад

I am so glad to hear it was helpful to you! All the best in your Figma journey!

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

trust me I am watching a lot of video about how to use constrains, auto layout and some small things about figma. With your video I found answer to all my questions. Although your main message was for something else and out of curiosity i watched it and now I have really learned a lot of things about it. Thanks a ton.

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

no dramas - really appreciate your comment and glad it was helpful.

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

thank you for sharing...this is very handy for someone like myself who wants to be efficient and organized

@iamsyedashik Год назад

Really one of the best content....love from Bangladesh

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

You are very good at explaining concepts with demonstrations. I couldn't find a better explanation than this regarding Frames, Groups, and Rectangles. Thank you so much for making this video :)

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

You're very welcome! All the best in your design journey!

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

Thanks a lot! Really cleared things up! And good tips too!

@julia_ggg Год назад

Awesome tutorial, thank you :) I wasn't sure how exactly to use frames best, but this put a lot into perspective. Live and learn :)

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

Amazing tutorial, i was literally searching something like this from a long ago and you just cleared my biggest huddle from my ui ux journey...

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

You're welcome! So much more to learn, so keep going 💪

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

Super helpful the way you explain everything really clearly! There's a lot of tips here that I didn't really find on other Figma tutorials

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

Great 👍

@smbdreams786 Год назад

Thank you for making this video and it great helpful for all ❤💛💥

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

very helpful, thank you!

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

Glad it was helpful!

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

Very good video thank you!!

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

Great tutorial thank you!

@shachaha Год назад

Thank you so much , that was helpful. I appreciate that you spoke slowly at the important steps. That made it really easy to follow!

@thejunboy Год назад

Glad it was helpful!

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

The most informative video on this topic I've seen.Thanks. Just subbed... will check out your other vids soon. :)

@aladeyeluzainab6611 Год назад

Thanks so much …very educating

@brucewayne4283 Год назад

This is one of the most informative educative video on Figma

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

Very helpful, good tutorial 👍

@amcds2867 Год назад

Useful lesson.Thank you.

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

very nicely explained. i was very very confused and could not make the auto layout . gotta lots n lots of clarity now from this video. keep posting these kinda small informative videos. Really Helpful

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

Glad it was useful - and appreciate the feedback

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

This is quality tutorial

@westfield90 4 месяца назад

Excellent

@thejunboy 4 месяца назад

Thanks

@irenegeller Год назад

This was SUCH a helpful tutorial, thank you! Do you have any content that goes more into using auto-layout? :)

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

Thank you ❤️

@carlosbruna2092 Год назад

Awesome explanation. Thanks :)

@thejunboy Год назад

You are welcome!

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

Wow man really gr8 vedio , did a course on udemy and learned neww things here awesome

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

perfect 🥰

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

thank you :)

@KT-ue2mx 2 года назад

Thank you. Greate content. Would be grwate to see more ux ui stuff on your channel. 😉😉

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

Awesome! Thanks for the feedback. Will definitely do that :)

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

i will never use rectangles again after this video, thanks ligma! i slapped like as fast as possible

@fakerealex-adeyemi7163 2 года назад

I started with rectangle, glad I stumbled on this video…nice explanation but a bit blurry video

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

glad to hear! not sure how to bump up screen recording quality unfortunately. unless you watch it in HD.

@Nasrin.Designer 11 месяцев назад

if your video sound could be raise a little its more helped to learner

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

thanks for the feedback - had no idea what i was doing at the start, i had notice this and have attempted to fix it in my later videos

@Nasrin.Designer 11 месяцев назад

@@thejunboy thanks for acknowledgement 🙂

@djashawe88923 Год назад

Thanks. Do you use a frame or a rectangle for a placeholder for an image like a profile image or an image of a card element? I usually use a frame but I also see many designers use a rectangle for a placeholder for an image, so I wanted to double check what's considered as a good practice.

@thejunboy Год назад

tl;dr - frame ---- As you can't embed anything into a rectangle - sometimes people use rectangles as images to avoid things accidentally going into frame layers. This is more a personal annoyance thing. I personally always like to use frames because if i want to embed something into it later, like a save/heart icon in the corner, i can place it precisely. I like to keep the options open - and its not any extra effort building it as a frame compared to rectangle so why not?

@djashawe88923 Год назад

@@thejunboy Thanks for the clarification. I had a self doubt moment lol. Keep up the good work! 👍

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

17:39 - Oh!!! After you have changed the frame size and then you are changing the Text position and auto-layout settings... #Xcode auto layout will freak out. 😂

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

Great content, I would recommend to avoid lengthy videos

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

Thanks for the feedback! I will make more short form content

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

Video length for viewers is really personal preference. If you're trying to do well on this platform, the goal is to maximize audience retention and watch time. Personally, I'd gladly watch a long video like this as long as you get straight to the point and offer content that is very interesting/helpful. This video was very helpful to me. My feedback: you do seem to talk more slowly, which is fine. Just be aware that some viewers tend to prefer to listen to things quickly. In my case, I just increase the playback speed :) Great work and great content!

@fakerealex-adeyemi7163 2 года назад

I actually love lengthy videos so?

@spectre3492 Год назад

why do they even have rectangles if you're not supposed to use them?

@thejunboy Год назад

Great question - I would say rectangles are more of a vector element to create shapes. for example if you wanted to create an icon, you would use the rectangle tool. Also if you don't want objects to constantly get 'nested' because you're using frames - for example when you want to quickly make low-fidelity wireframes, you might opt to use rectangles. Totally dependent on your workflow.