Figma Responsive Design for Development (Box Model + Auto Layout)

No video

Figma Responsive Design for Development (Box Model + Auto Layout)

Рет қаралды 38,616

Күн бұрын

Work with my design studio → designme.agency
Master UI design for $9 with my new ebook!
👉 howtodesignbet...
In this video, I'm going to show you how to design in Figma with web development in mind and get you prepared for a seamless developer handoff using Auto Layout and the Box Model 📝
Download the free files here👇
www.figma.com/...
Feel free to check out the Figma Mastery video course I mentioned in the video👇
howtodesignbet...
Timestamps:
00:00 - Intro
00:19 - Understanding the box model
02:01 - Layout grid
02:30 - Adding structure
05:13 - Fixing breakpoint issues
07:40 - Left and right columns
09:02 - Setting constraints
11:14 - Explaining the structure
12:54 - Using auto layout
13:27 - Responsive Design (Part II?)
13:44 - Outro (Figma Mastery, eBooks)
----------------------------------------------
P.S. If you're interested in learning UI/UX design feel free to check out my design ebooks - there are free samples available (110+ pages total).
For mobile designers 👇
howtodesignbet...
For website designers & freelancers 👇
howtodesignbet...
My Figma Mastery video course 👇
howtodesignbet...
----------------------------------------------
Connect with me 👋
Instagram - / uiadrian
Twitter - / uiuxadrian
Linkedin - / adrian-kuleszo
Thanks for dropping by my channel - if you enjoy what you see, feel free to subscribe and hit that bell notification, and I promise to bring you a ton of free value every week!

Пікірлер: 61

@kamelsingh8602 Жыл бұрын

This is great content for learning autolayout and understanding the dev side too. We need more videos showing figma to autolayout to development on youtube. Great video man!

@uiadrian Жыл бұрын

Will do! I'll post a figma to framer tutorial soon :)

@joanam.5305 Ай бұрын

You're better then skillshare, straight to the point, good explanations. Love it

@notwaltervilla Жыл бұрын

I found this video EXTREMELY HELPFUL!!! OMG! I am a self-taught designer, and I never learned how to design around using the box-model. I am now trying to learn how to code my designs, and seeing this video really put into perspective how much easier life would be if I designed having this model as a reference. Thank you for this advice! I would love to see more content like this!

@nupursharma3235 Жыл бұрын

Thankyou so much for your videos. M a beginner and I was literally struggling to find a to the point tutorial.

@eprisrichardson678 8 ай бұрын

Finally figured out what was keeping things from being centered. Thank you!!!

@hakimmaghnem6288 11 ай бұрын

This is the best video in 2023 period

@drmelvin25 Жыл бұрын

Part two would be cool! Thank you, Adrian.

@FuriousDesignHQ Жыл бұрын

I would love to see that follow up!

@sksohail67 Жыл бұрын

Me too

@uiadrian Жыл бұрын

Alright! Working on it then :)

@ayobamidele100 Жыл бұрын

Awesome video! And thank you for working on your sound don't have don't strain my ears to hear you. Thanks.

@uiadrian Жыл бұрын

No worries! I'll keep improving the quality ✌

@FlyByWheels Жыл бұрын

now in this video voice quality is very good plz keep the quality maintain in all the tutorials and the video is very useful thankyou very much

@user-wu3xk5gr8i Жыл бұрын

Post that follow up! We love all of your videos adrian, thank you!

@ArminmoTV Жыл бұрын

If you can give a basic prototype tutorial, you've done a great job

@prashantmishra5691 Жыл бұрын

Lets go Adrian, hoping to see you become the best UX content creator on KZfaq as well. Your IG shorts and lessons are amazing bro.

@uiadrian Жыл бұрын

Thank you brother! Appreciate it 🙏🏼

@Nazquii Жыл бұрын

Wow. That was incredibly useful, well explained and easy to understand. I'll check out more videos

@uiadrian Жыл бұрын

Thanks a lot!

@mercee_dev5685 Жыл бұрын

Thank you, Adrian. I love all of your tutorials. I really look forward to learning more from you. Please could you also show Windows users how to use shortcuts 😢

@FoxWebSchool Жыл бұрын

Excellent walk through!

@uiadrian Жыл бұрын

Thanks a lot Rob! 🤝

@oscarmattisson2495 Жыл бұрын

So helpful as always! Love these tutorials more than anything else!!

@ralfsbanders6108 Жыл бұрын

Thanks for this video! 😎

@uiadrian Жыл бұрын

Happy to share :)

@ralfsbanders6108 Жыл бұрын

Thanks for your Books bro 🙌

@rahul_lsh Жыл бұрын

Always the amazing content😌..

@uiadrian Жыл бұрын

Thanks Rahul!

@alono4473 Жыл бұрын

Amazing video! Can you do a similar tutorial but for a dashboard? Thanks!

@uiadrian Жыл бұрын

Thanks! I'll try to think of something, sure!

@alono4473 Жыл бұрын

@@uiadrian thanks so much! 🙏🏼

@IamShashi98 Жыл бұрын

Thanks brother

@uiadrian Жыл бұрын

My pleasure 👋

@chillpill610 Жыл бұрын

another lovee for you - Krishna Gupta(Mech.)

@uiadrian Жыл бұрын

Much love!

@Immanti Жыл бұрын

Awesome!!

@richa_xo446 2 ай бұрын

Hi sir, I am unable to get the ai layers of the labels even after using convertify plug in, also I tried seperating every layer before droping them on figma too, still its coming as jpg image, what to do ?? Please help

@sk8trsurfr Жыл бұрын

Great video, very good explaination. What software do you use that shows your keyboard selection on screen? Thanks.

@user-pl5vu2og6x 6 ай бұрын

great video! just a doubt: is there a specific reason why you frame inside another frame like at 6:10? aren't they just the same? what am I missing? thank you very much

@shehrymirza5615 5 ай бұрын

Why do I have no option for spacing mode in the advanced auto layout panel ??????? 🤔 🤔

@akacemkhadidja3557 11 ай бұрын

We need the second part

@dariopadula7612 Жыл бұрын

Thank u Adrian for the video! I would love to watch the follow up one. I have a question tho, u sometimes used frames instead of autolayout, centering them with constraints; now, while - as u showed - this works when u stretch the design, I guess it wouldn't when compressing it. In that case would it need autolayout and left and right constraints, right? Dario

@uiadrian Жыл бұрын

Hey Dario, if you download the figma file you’ll see the second use case stretching the designs 😊 I didnt want to make the tutorial too long but I’ll cover this in the follow up 🙌

@LilacShen Жыл бұрын

Hi Adrian, thank you for sharing the video and this is super helpful! I have one question regarding the constraints: in your video you set the "Master" frame's (such as 'Hero', 'Logo') constraint as "Left and right" and the Contrainer under it with a "fixed" width. I wonder if it would be different if I set the Master frame's constraint as "Center" and the Container under it with a "fill container" width? The results look the same but I do wonder if you have a specific reason for setting the constraint in that particular way. I hope my question makes sense to you :)

@uxabhishek Жыл бұрын

what about 1920p resolution screen, which column type (centre/stretch) should we use for bigger screen size than 1440p?

@RLNDcaST Жыл бұрын

some new information to think about 😅

@uiadrian Жыл бұрын

Yeah, it is a bit to process 😄

@omariclam Жыл бұрын

Hi, Adrian thanks for the video it's really good. Can you plz explain if you are following an 8px grid then why you did give 20px left-right padding to the left column of the hero section instead of it's could be 16 or 24px?

@abdielpeguerocastro4943 Жыл бұрын

Hi! Hope you are doing great. I think he did that because there’s a 4 point grid system as well. This system is awesome because it helps you place elements a little bit closer to each other (proximity which is one of Gestault’s principals) without breaking your initial 8 point grid. It helps you balance out your design because sometimes there’s too much of a gap in 8px, and 4px will give you that visual balance an space you are looking for. Hopefully you understand a little bit better now. Kind regards!🎉

@lisaovdiyenko2152 11 ай бұрын

I am working on my new Shopify website. Is it possible to at such animation at shopify? And how?

@miodragvulicevic9317 Жыл бұрын

Great video! One question, is it possible to buy only figma files of landing pages from figma mastery course

@uiadrian Жыл бұрын

Hey Miodrag, that's not a possibility as of now. I might record a mini-tutorial about building a landing page in Figma, though. I'll keep you guys posted!

@riyazahmed9625 Жыл бұрын

can you tell me what camera you use for Video ?

@uiadrian Жыл бұрын

Sure, it's Sony A7III with Sigma 2470 GMII lens :)

@dhstrother Жыл бұрын

hi value video , hi hi value

@elaiahgood Жыл бұрын

🚀

@ralfsbanders6108 Жыл бұрын

Highly recommend guys Adrian’s books about web design and mobile ( Android and IOS ) ⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️

@ralfsbanders6108 Жыл бұрын

About Books, they are so well written and explained, and best they are whit practice Figma files. After studying UI Adrian books and practice for 7 months I got job in nice web design Agency in Riga 😎