Тёмный

WEB DESIGN IN FIGMA ep.04: Horizontal Text + Image Cards (Free Web Design Course) 

Mavi Design
Подписаться 42 тыс.
Просмотров 16 тыс.
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
FREE FIGMA COURSE / SERIES: Design a Website in Figma: • FREE Figma Web Design ...
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

Хобби

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

 

26 янв 2023

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 37   
@FreightWatchInfo
@FreightWatchInfo 26 дней назад
I love how you constantly go back and explain how and why you do the auto lay out, and re-explain the necessity to do so on multiple elements. You definitely speak in a way where it seems you understand the questions that the audience will have. Great work, I know its not easy to make these videos, but, a year later, it is helping me
@mavidesign
@mavidesign 26 дней назад
❤️❤️❤️
@andreadamico879
@andreadamico879 Год назад
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!
@matthewzone1924
@matthewzone1924 Месяц назад
Thank you so much!! learned a lot !
@RolandosSemiZeu
@RolandosSemiZeu Год назад
u are doing an amazing job, thanks for your free tutorials
@andresretamar4486
@andresretamar4486 Год назад
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.
@AlexandraAgapova
@AlexandraAgapova Год назад
Thank you for your tutorials 🙏🏻
@iloveshawarma93
@iloveshawarma93 2 месяца назад
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.
@ilyasclarkson2556
@ilyasclarkson2556 Год назад
Thank you so much for the tutorial
@islam-hossain
@islam-hossain 5 месяцев назад
Thank You Very Much I Love this tutorials
@irivie888
@irivie888 Год назад
this is really helpful keep up the good work
@salmanmansha4818
@salmanmansha4818 Год назад
learned a lot as a beginner
@tiger-er2wb
@tiger-er2wb 7 дней назад
Very informative and amazing video.....💯
@dariocastillo3595
@dariocastillo3595 Год назад
I'm learning so much about Figma in English, that in my own Spanish xD I mean, is professional and complete Thanks, bro!
@noorahmedpirwani9683
@noorahmedpirwani9683 10 месяцев назад
thank you 😍😍😍
@vamboo8918
@vamboo8918 2 месяца назад
Thanks very thanks
@Anas-Ben88
@Anas-Ben88 Год назад
nice tutorial if you could convert this website to webflow it will be better in another course
@muhammadyusufsuryakusuma8270
@muhammadyusufsuryakusuma8270 3 месяца назад
thanks
@jamesauble8091
@jamesauble8091 2 месяца назад
maybe instead of property name "direction" we could do like "flip horizontally" which would make the value make more sense.
@user-ki7db3rv5i
@user-ki7db3rv5i 7 месяцев назад
Вы просто Прелесть!
@user-mw8iq1oc3m
@user-mw8iq1oc3m 4 месяца назад
gestalt principles explaination please😀😀
@vardhansiravuri
@vardhansiravuri 5 месяцев назад
I cant find create boolean property in layout tab. Can you please help me where the feature is now updated to ?
@mrwaseem1276
@mrwaseem1276 Год назад
make video on law and principle
@AbhishekMishra-kr8vl
@AbhishekMishra-kr8vl 4 месяца назад
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.
@vamboo8918
@vamboo8918 2 месяца назад
figma updated that option i guess. hover over "vertical gap between items" option on auto layout tab then you'll see a arrow. click that and choose "auto"
@ElieSAbboud
@ElieSAbboud 3 месяца назад
10:30 method not working in March 2024 anymore. i sat auto spacing but the right side is stick to the image. any fix?
@girishsalunkhe857
@girishsalunkhe857 10 дней назад
Same
@killham1337
@killham1337 9 месяцев назад
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
@simplytobs
@simplytobs 9 месяцев назад
Same issue i had. I tried googling the windows shortcut. But yet to see any out there. Hopefully we'll get a reply soonest. Thanks @Mavi Design
@CarlosDominguez-ue3kn
@CarlosDominguez-ue3kn 8 месяцев назад
@@simplytobs @killham1337 If you guys are using Windows, you can select the horizontal card container from the layers menu > right-click> select bring to front
@uwaistghozihamad-1661
@uwaistghozihamad-1661 6 месяцев назад
got the same issue
@uwaistghozihamad-1661
@uwaistghozihamad-1661 6 месяцев назад
i got the solution, you can do ctrl+] or ctrl+[ but don't click for the horizontal card container, instead just click the image
@raymondfigoinuhan9504
@raymondfigoinuhan9504 8 месяцев назад
i dont have "space between" optio in advanced auto layout setting
@mavidesign
@mavidesign 7 месяцев назад
auto layout has been updated since then, you might be looking for "auto" in the spacing field (I think). --------- To get more specific help and feedback with your project, please join my free Discord server. You can send me an Instagram DM or reach out to my email (About section of my channel) to get your invite. I'm unable to help everyone over RU-vid - thank you for your understanding! Mavi
@KylerS33n
@KylerS33n 2 месяца назад
11:17
@kaviak3313
@kaviak3313 Год назад
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
@Celebio_KM
@Celebio_KM Год назад
While adding auto layout, click shift A then "Enter"😛
Далее
Should you REALLY Learn Framer?
7:28
Просмотров 67 тыс.
7 Portfolio Websites That Will Make You Jealous
10:07
Просмотров 768 тыс.
STOP doing DROPDOWNS like this - Figma variables 2023
15:35
A New Web Design Trend Going Into 2024?
7:49
Просмотров 244 тыс.
6 UI Hacks I Wish I Knew As A Beginner
11:11
Просмотров 742 тыс.
PRO Vs AMATEUR Website Layouts (With Examples)
23:05
Просмотров 335 тыс.
Website Animations Using ONLY Figma
15:21
Просмотров 270 тыс.
Самая старая пивная в Праге
0:11
making a knife from an old file
0:58
Просмотров 17 млн
Which water gun won??
0:30
Просмотров 73 млн