Design a WEBSITE IN FIGMA ep.03: The FEATURES SECTION
Vložit
- čas přidán 27. 08. 2024
- Visit my STORE: bit.ly/mavi-de...
Explore Mavi Design COURSES : bit.ly/mavi-de...
Download FIGMA for FREE: bit.ly/get-sta...
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-p...
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
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!
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!
You've actually taught all the professional skills and very eligentaly took it to the advanced levels
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!! (:
same here
Thanks for the great tutorials. Thanks for elaborating on your design decisions and explaining the "why"!
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.
Thank you for detailed video.
So clearly explained, thanks for this content! 🌻
can you do a video on how you layer name and how you organise yours layers panel please
stunning tutorial!
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
great tutorial
thank you sir, thank you so much
i have a problem with making the text area responsive
great
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 ?
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:)
@@mavidesign What about when the screen gets smaller? It doesn't shrink accordingly.
@@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
@@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)
@@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.
5:48
after you placed that features section on the big frame , when i resize the frame , its not resposnsive .. how do you make it responsive ?
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
🔥🔥