In this video, I’m going to show you how to make your web design responsive in Figma using Auto Layout and Constraints in just 10 minutes.
Remember to subscribe:
Download the practice file from here:
👉 Become a UI Designer with my UI Design & Figma Mastery course:
👉 Get my FREE UI/UX Design e-book here:
📸 Instagram:
Who is Arash Ahadzadeh? Well, I’m a UI/UX designer and a university instructor with 7+ years of experience, and I teach people how to design great user interfaces and experiences. I’ve helped over 30,000 students become UI/UX designers from scratch worldwide.
👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons):
https://bit.ly/43v79vX
Did you design that dashboard page as well?
cool video)
cool video)
this video is so helpful! way better than what my school provided us! thank you!
Thank you
Hi Arash, great stuff!
A question: I come from a developer background a tend to design the way it's going to be programmed. As an example, at the 8:30 mark you add the hamburger menu, but you only align them instead of wrapping them in an auto layout, which goes against how it's later programmed as you would wrap the top bar in a div and add flex, align-items and justify-content. What's your thoughts about it and have you encountered issues with that when designing?
Also, do you usually go desktop or mobile first when designing?
i don't have the constraints option
This is such an excellent tutorial. Beautiful design by the way
So far, I've only looked at the header. The question is, after making three elements of remponsvv, should they be grouped back or how?
Thank you so much! I’m just starting out in Figma, and this tutorial was extremely helpful! I subscribed to your channel and this will definitely be one of my first stops when I’m looking for excellent tips!
look what happens now, nothing! ☹ I still haven't gotten it. thanks anyways
Thankyou Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreUt enim ad minim veniam, quis nostrud exeon ullamco laboris nisi ut aliquip ex ea commodo conDuis aute irure dolor in reprehenderit in voluptate velit dfgh yuois byuth oiuuio hyyuty erryj
To help you with your teaching: you need to communicate important details such as, whatever image you're working with, you have to place it into the frame with the text that is in the layout. Otherewise, the text will not push the image down on the page.
I don't believe using such a complex image is nessecary for basic teaching either. Just use a regular raster or vector image.
This took me way too long to make it work and it's because I was setting the "scaling" in the height section rather than width section. You definitely need to communicate this. Also, you have to make sure the text is set to auto-height in the type settings.
Very clear but you completely failed to fix how the image behaves. It would have been 100% perfect tutorial. Thanks though!
Hi, thanks for the video!So according to the industry's standard practice, do I need to create several design for each breakpoints (e.g desktop, tablet, smartphone) along with their prototypes, or do I only need to create one responsive design like being taught in this tutorial? It's a website design project which I'll hand out to the developers later
Please do " webiste deisgn " from the scratch once …
So that everybody can learn figma and how to do website…
Do some research on youtube viewers what they are expecting
Arash mer30 damet darm
Hey Arash. Great video! I learn something new every time I watch your videos. I watched this video twice. Does the new wrap feature in figma Autolayout make this plugin unnecessary? If so, have you made a video on making a full website page responsive all the way down to mobile size using autolayout's new wrap feature? Thanks again!
fill container option is missing in my figma please help me
Hi i like you
This might be a silly question, but I've been wondering for the longest time…how is it helpful to make the layout responsive in Figma if you're going to eventually put the design in Webflow or Framer? What am I missing? Is this just an extra step? How is this helpful in the development process?