Design a WEBSITE IN FIGMA ep.03: The FEATURES SECTION

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

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

50% 1

Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Download FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
SERIES: Design a Website in Figma: • FREE Figma Web Design ...
In today's video, we're going to continue designing our website and are going to work on "Features" section with features cards. We will be using components, instances, auto layout and other features to design this section of the website. Stay tuned for ep.04!
How to design a features cards website design / webdesign section in figma - step-by-step explanation and UX / UI tutorial - design a website from scratch in Figma
--------
© 2023 Mavi Design

Хобби

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

24 янв 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

I was so dumb when someone talked about the auto-responsive layout but now I'm able to understand the whole concept and method finally... Thank you so much for this detailed video!

@girishsalunkhe857 10 дней назад

I've just started to learn figma, As I had covered all the theoretical part, practical implication of the information was the only way i could've grasped the understanding of the tool. Somehow, I stumbled upon your playlist and man; this was the best thing ever happened to me. All the theory in use on a real project I'm able to follow and learn a lot. Thanks a lot mate, really appreciate it!

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

You've actually taught all the professional skills and very eligentaly took it to the advanced levels

@IySokphol 4 дня назад

Thank you for detailed video.

@tayloradams9320 Год назад

Thanks for the great tutorials. Thanks for elaborating on your design decisions and explaining the "why"!

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

I discovered your channel couple of days ago and I am addicted! You have such a nice style of teaching things! Everything is becoming more clear the more I watch. Thank you. I really appreciate!! (:

@user-mw8iq1oc3m 4 месяца назад

same here

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

stunning tutorial!

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

So clearly explained, thanks for this content! 🌻

@Anas-Ben88 Год назад

great tutorial

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

thank you sir, thank you so much

@guillermocast01 Год назад

Nice tutorials buddy, I'm transitioning from Sketch and your videos has been really helpful. Quick comment: in minute 10:22 I would leave the padding just for accessibility purposes since the clickable area would be quite small.

@linkonsarkar7550 Год назад

great

@smilli6415 Год назад

can you do a video on how you layer name and how you organise yours layers panel please

@j33t78 Год назад

🔥🔥

@afrinpathan8474 Месяц назад

overall i have made but i stuck on while scrolling my second page title "features" goes up slighty to my first page what should i do to correct

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

i have a problem with making the text area responsive

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

5:48

@smilli6415 Год назад

after you placed that features section on the big frame , when i resize the frame , its not resposnsive .. how do you make it responsive ?

@mavidesign Год назад

You most likely need to make sure that the features section is an auto layout that is placed either within an autolayout and set to "fill container" or placed within a regular frame with "left and right" constraints. To be 100% certain I'd have to see your file

@_MasDwi Год назад

Thank for tutorial, i wanna ask something, why you auto layout twice in feature countainer ? Why not set 1152px and use padding horizontal into margin ?

@mavidesign Год назад

Using a centered autolayout (where the inner one has a fixed with) enables you to easily take that entire section and increase its width (if necessary for larger screens) without manually adjusting fixed horizontal padding pixel values:)

@artistad8109 Год назад

@@mavidesign What about when the screen gets smaller? It doesn't shrink accordingly.

@mavidesign Год назад

@@artistad8109 yes this is optimized for desktop only, in upcoming episodes we’ll go over how you can create a mobile design. Figma doesn’t support responsiveness (yet), you have to design these states separately

@artistad8109 Год назад

@@mavidesign I'm saying about autolayout title text not responding, when desktop frame is reduced. But it responds if we do not use centred layout as mentioned. (But doesn't stay within grid)

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

@@artistad8109 I know what you're saying. Desktop size isn't a single size like 1440px, it's a range like 1040-1440, so this design should be able to shrink to at least the minimum size of what we call desktop.