Visit my STORE: https://bit.ly/mavi-design-store
Explore Mavi Design COURSES : https://bit.ly/mavi-design-courses
Download FIGMA for FREE: https://bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA’s features: https://bit.ly/figma-professional-plan
FREE FIGMA COURSE / SERIES: Design a Website in Figma: https://youtube.com/playlist?list=PLCUPtxXqnWn0AMIjZmNdkrzWVjLHOW2NT
In the fourth episode of “Designing a Website in Figma”, we’re going to create the horizontal cards (image text zig-zag) section for our website. The usual headline + description + button on one side and image on the other side. We will be using components, instances, component properties (both boolean, text and nested instances) and auto layout to create a component that we can reuse across our website ux / ui to maintain consistency.
P.S.: If you’re about to write a comment saying I forgot to use H3 instead of H2 on card names, great catch! I’m going to correct that in the next episode:)
How to design a website in figma: image and text autolayout – horizontal feature cards ux ui design – design a website from scratch in figma – FREE full course
#figma #webdesign #autolayout #freecourse #figmatutorial
————————
© 2023 Mavi Design
source
maybe instead of property name "direction" we could do like "flip horizontally" which would make the value make more sense.
I am trying to break into product design and I am currently working on the first project for my portfolio. I STRUGGLED to find a guide to design a website, but this playlist just saved my life. The project I am working on is basically redesigning a bank website and I will definitely apply all this knowledge. Thank you so much for putting this amazing content together.
11:17
Thanks very thanks
10:30 method not working in March 2024 anymore. i sat auto spacing but the right side is stick to the image. any fix?
thanks
gestalt principles explaination please😀😀
Hi, At 10:15 time on your video – Can you help me with aadvance autolayout – I dont see "spacing mode" option. Where can I find it.
I cant find create boolean property in layout tab. Can you please help me where the feature is now updated to ?
Thank You Very Much I Love this tutorials
Вы просто Прелесть!
i dont have "space between" optio in advanced auto layout setting
what is command+] shortcut for? what's the name of what it does? I can't find it anywhere and when I tro to use it nothing happens. used in the video at 7:29 to reverse place for image and card content
thank you
😍😍😍
Things that you do at 6 in this video is not working for me. Do solve my problem why it is not working for me. Selecting the image combining with the autolayout creating a new auto layout. While resizing the image the auto layout is not working. The whole autolayout is not responding properly
this is really helpful keep up the good work
make video on law and principle
I love your tutorials, I'm learning a lot. I don't speak English well so it's a bit hard to follow them but I'm definitely learning a lot. Thank you.
I'm learning so much about Figma in English, that in my own Spanish xD I mean, is professional and complete
Thanks, bro!
learned a lot as a beginner
This is top-tier content. Theory and practice applied in a simple way. Huge thanks man. Really looking forward to the video about design principles!
u are doing an amazing job, thanks for your free tutorials
Thank you so much for the tutorial
Thank you for your tutorials 🙏🏻
nice tutorial if you could convert this website to webflow it will be better in another course