Responsive Design in Figma Using Breakpoints
ฝัง
- เผยแพร่เมื่อ 1 มิ.ย. 2024
- In this video, we are going to create a responsive layout in Figma using a plugin called Breakpoints. It essentially allows you to simulate what happens to your design when it’s rendered in a browser with different screen sizes.
Try Figma for free:
bit.ly/3LiRVEF
👉 Become a UI Designer with my UI Design & Figma Mastery course:
bit.ly/43v79vX
👉 Get my FREE UI/UX Design e-book here:
bit.ly/4aVc7pR
📸 Instagram: / uiux.arash
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):
bit.ly/43v79vX
I do not have money, can I participate in the course? I do not have money, can I participate in the course?
After absorbing the information of two videos I had to take a moment and leave a comment to thank you for the quality of your content and the commitment to your work.
Your way of explaining things is something not many other content creators have and it really shows.
Keep up the good work! New subscriber here, for sure.
Thanks a lot. I really appreciate it. Welcome to the channel.
The plugin is $18. Being able to set responsive breakpoints should be a basic feature of figma, the fact that it is not is rediculous!
I agree with you.
How do I publish a website created with figma, do I still need code to do that?
@@DesignWithArashHow can we generate a code after use breakpoint plugin, is this possible?
*ridiculous
You're so genuine and sincere and no BS with high-quality work. You're awesome dude!
Thank you so much.
There are quite few UI/UX instructor that teach you something new (like Mr Arash) and everything else is same old bullshit
Great videos, Arash! Thanks so much for putting in so much effort.
Thank you so much, Arash! No one else on TH-cam has explained auto layout, constraints and breakpoints as well as you have. I've completed a task for an interview with help from your tutorials. I hope I make it in. Best of luck in your career. You have a new subscriber!
Thank you so much. I’m glad you found my content helpful. I hope you get the job.
@@DesignWithArash Update: I got the job!
@@teno7210 That's awesome. Congratulations.
@@teno7210 bro i need some help in ui design i Learning just now can you help me?
I am a subscriber active in Korea. Tang Xing's explanation is so good that it makes me feel good.
I just watched two videos, and I've learned so much. It's amazingly useful! Thank you!
You are so welcome!
The way you explain things is just amazing, I have learnt so much watching your videos. I am a fan already!🤝❤
Thank you so much 😀 Happy to hear that. Welcome to the channel.
You are a great designer bro your videos are special
I must say, please do post more of this
Thank you, I have been looking around for this exact information, no one made it clear on their videos like you did, keep up the good work : )
No problem. Glad it helped.
you're truly a life-savior 😭 thankyou!!
No problem. Glad it helped.
Really fantastic videos. So clear and easy to understand. Thank you!
Thank you so much. Glad you liked them.
Thanks Arash.. you're indeed a life saver.
No problem. Thanks.
Straight to the point
thanks arash
No problem dear Morteza.
Thank u very much, this is helpful
Thanks, Arash. I am a beginner in UX design and am currently doing UI challenges. This was super helpful.
Glad it was helpful!
Thanks Arash, it is super helpful! I already use it in my work.
No problem.
Came from Jesse's channel, your videos are very well articulated Arash!
Welcome to my channel Sharanya. Thank you so much. I’m glad you think so.
Nice knowledge passing dude. keep up the good work!
Thank you.
Thank you for the great videos. Always learning something new.
No problem.
thank you for your great videos, i learn alot
you are great pal. just what I needed.
Thank you.
I start my working day with a ''Arash Tutorial' 😄 Keep on making these great tutorials!
Thanks a lot. It's a pleasure.
Your videos are a treasure 💎 Thank you so much
So nice of you. Thank you.
Thank you very much for you! super informative and helpful!
Glad it was helpful!
very usefull & practical video for a beginner .. love your videos
Thank you so much.
Great work, thank you for the knowledge
My pleasure!
ah, here we go, this is what im looking for, subbed
Glad you found what you were looking for.
Awsome info! Thank you!!
No problem.
Hi Arash, Thank you for the tutorial, Could you please tell me the process on how to export the code from Figma to Zeplin and it's publishing process..?
It will be more helpful for Designers who have less knowledge in coding..
great tutorial, can any one view permission resize artboards and see this result? or it just work for people with edit permission like normal resize
You're genius mate!
Thank you.
Thank u so much u just saved my life
You are most welcome. Always happy to help.
Video is very helpful !
Glad it helped.
@@DesignWithArash Brother your tutorial is very helpful i am watching many videos but your tutorial is very nice and outclass thanks a lot broTHER
what plugins did you use in converting to code?
Hi, i have watched all your videos and they are really helpful. I'm struggling with response design and auto layout. I have make a complete website design in figma but i want to make it responsive. I have watched both of your tutorials but it just not working for me. When ever i use auto layout on anything it always mess up everything. Ikd why. And can u also share a free way to make design responsive. And what am i doing wrong in auto layout.
Thank you so much, I'm probably being hired because of you
No problem. Wow, that's great to hear. Congratulations. It made my day.
really useful information
Glad it was helpful!
Very useful video. thanks
No problem.
Thank you. 😀
No problem.
How does delivering this screen to developers work? Do they access your project on figma? Do you deliver links with different screen sizes depending on the breakpoints, so they can see them?
ممنونم بابت این آموزش 🙏
🙏خواهش میکنم
Because of the Quality Content I must Thank You..
No problem. Thank you.
Great video. Does the breakpoint feature show when a dev is viewing in inspect mode?
Thanks. No it doesn't but as long as they see it in the Editor they can understand how your design should be converted to code. That's the whole point of making this preview.
Why keep the different size as components? Would it not be more efficient to make each new screen size a variable?
Such an underrated channel 🤌🏻
Thanks.
Thank you a lot!!!
No problem.
hey can you tell me which camera model do you use for your videos?
It's Sony ZV-E10.
Thank you so much.
You are most welcome.
You're so awesome thank you for your Contant. I'm curious is there a way to do this now in another way because of their recent updates at Config 🤠 it seems like there might be.
Thank you so much.
Unfortunately, not because if you use the new Wrap Auto Layout option if you have one element in a row it will take up the whole available space within its parent container. You can check out my latest video to learn more.
i see u picked the dimensions in your plug in based on the size of your artboards. would you say that the dimensions you picked are the most advisable?? im worries about making the wrong decision? am i over thinking? so long as theres a monitor, a tablet and a phone i should be good to go?
For most projects, those three frames (Desktop, Tablet, Mobile) would be sufficient. When it comes to dimension, that's what I use and I know that many other designers prefer them too but there is no standard. You can add a larger breakpoint (1920) as well.
Hi thanks for this.. questions will the prototype show the responsiveness?
Hi. No problem. Nope.
Useful video🤩
Thank you 🙂
Thanks so much! I am new to FIGMA - May I ask a question please - if I need the number of items displayed to change with screen size for computer / table / phone - I will need to design the same page in three different frames like you had here yes ? Auto layout will just make it flexible to stretch but to change the # of items displayed across the screen, that will have to be done via breakpoints ? If you have extra time, any chance you can make a video on when breakpoints are needed (i.e. auto-layouts will not suffice)
No problem. Yes, that's correct.
thank you!
1. Great video bro
2. You made 3 screens here. It's just a landing page what if we want to see entire project
3. If in coding world this breakpoint works then can we use different font sizes and different fonts for different screens?
4. What are rem and ems and how make a text scalable?
1- Thank you so much.
2- In that case you should use this plugin for other pages as well. Please keep in mind that this plugin just lets you switch between different breakpoints and nothing more.
3- Yes, you can and in most cases, you should because on mobile screens we usually use smaller headings.
4- EM is a CSS unit relative to the parent element's font size. If you want to scale the element's size based on its parent's size, use EM. REM is relative to the root font size, so if you want to scale the element's size based on the root size, no matter what the parent size is, use REM. Unfortunately, in Figma, we cannot use these units but in development, it's always good to use them for responsiveness.
Great!
Thanks,
Hi
I created 3 designs for site
1 for desktop ,1 for iPad and 1 for iPhone but whenever I applied breakpoints only the phone version is coming as empty frame in breakpoints layout..could you please tell me the possible reason why iPhone frame content is empty and rest designs are fine
Hi. I'm not sure why. It's hard to tell without seeing your project.
Arash here, Arash there, Arash everywhere ... hahaaa. eshghe mayy
Hahaha. Ghorboonet.
You are awsome🤩
Thank you so much.
thanks!
No problem.
It's work well with frames with equal height. I don't understand how use this plugin when I have frame with different heights of frames. expample: frame width 320px. It's height 10000p, but there is frame width 992px in my project and height 8000. And how can I use plugin when frames with different height?
It works well in this situation as well. Once you created the breakpoints it will turn all your frames into components so within each rang you can modify the height of your frame.
a perfect video
Thank you.
Hello Arash, the plugin you mention in your video does not seem to ba available anymore on Figma. Is there an other free version of these plugins you could recommend ? Thanks a lot for a very instructive video !
Hi Kian. It's available, I just checked it out. Could you please take a look once again?
@@DesignWithArash All done! Thanks a lot!
@@kianhabibian9641 isn't it paid now?
I have a question, In figma, are we doing responsiveness for the sake of showing the client how the website will look on different devices to see if they like it and then the developer goes ahead and codes our design?
Yes, and also when you hand off the project to the developer, he/she will know how your layout should adapt to different screen sizes.
@@DesignWithArash Thanks
Hi, I thank you for the valuable information shared. I am able to create my design responsive. Can you guide me how can I export the responsive HTML layouts from a figma file. Or it is that a developer have to code it all from scratch?
Hi. No problem. The should turn the design to code but you can also use the Framers plugin to create responsive web pages.
Hi how it will work with height? They must not have the same height as well??
Hi. Nope, the height doesn't matter. Because as the width decreases the height increases since you have less room to fit all your content horizontally.
I'm trying to locate the cost for this plug-in. Any have pricing for individual/org? Thanks
You should head over to their Gumroad page I believe.
How can we do this on the component level like container queries?
You should just use Auto Layout.
@@DesignWithArash I do, but I'm looking for a way to completely change the layout structure of the component based on it's own width/height. Imagine a "Services" component that could transform from list items to a swipeable carousel (controlled by the size at the component level!)
Great
Thanks.
so using this plugin and after i want to export the site to webflow or framer it wouldn't work because there is no autolayout?
This plugin is not useful for that purpose. It's useful when you want to hand off the project to the developer so they can see how your design should adapt to different screen sizes.
@@DesignWithArash Thanks for the reply, I have problems using auto layout, do you have a video that explains well how to create an entire site with auto layout? Thanks again.
Are there any other plugins similar to breakpoints where you don't have to pay?
Not that I'm aware of.
You showed how to use it with simple screens. How it use if you have full design mockup ?🤔
That's the same, you just need to make each screen responsive using Auto Layout and Constraints. I have a comprehensive video on it. Please check it out.
Hi ..is it possible that responsive layout can be exported in html using any figma plugin?
Hi. Yes, but I don't recommend it. You can use the Anima plugin.
Hi arash
Could you please tell if not anima, what plugin we can use?
@@varshakumari1061 You can use Locofy plugin to convert your layout in HTML+CSS code
🤩👌💫
Thank you! its an amazing plugin..but it seems like paid. Happy to be the 600th person to hit a Like button!
Awesome, thank you! It has a free trial though.
Is there any alternative for this breakpoints as its not free
As far as I know, no.
There are tools that export Figma designs directly to HTML and CSS. How can I export my figma design with breakpoints to working HTML & CSS code?
Unfortunately, it's not possible. At least not now.
Thanks a lot. Is that only possible while using a plug in? The plugin takes more the 10 Minutes to render, Figma goes down 🙈
Hi. Yes. It shouldn't, please check out another browser.
There is something that I am unable to recreate. Is there any to download the file? Thank you for the video
You can go to Figma community and search for Breakpoints. You will find some templates to test this plugin easily.
please tell me the free alternative of breakpoints plugin ?
As far as I know, there is no other free alternatives at the moment.
nice
Thanks.
to use this breakpoint the design must be in responsive website ha ???????????
hey arash, i think you’re cool ❤
Hi Shabazui,
Thank you so much. That's very nice of you.❤
You are the Johnny Sins of Figma
i think we have to purchase breakpoints now, its not free. How can I access it for free?
Is there a Free plugin for breakpoints ?
Not that I'm aware of.
and how can I export this to html after this?
You cannot. This plugin is not going to replace coding. It's just useful for design hand off and for presentation purposes.
@@DesignWithArash oh got it, i just realized web designer and web developer aren't the same job, its the dev's job right? by the way thank you
Is this plugin free
The plugin isnt free :
Одназначно лайкос тебе летит
Isn’t it actually the other way around? Anything between 478 and 991 will be shown on mobiles, between 991 and 1440 is tablet, and everything above is desktop. That is how I understood it..
No he is right about the breakpoint
However I like to add an extra breakpoint at 600-700 range that show the landscape view of the design for mobile
It is 2023 and I still can't figure out perfect x3 breakpoint sizes, that would be universal for mobile first design, mac users, up to about 1600.. =_=
How to turn this into a html css code file
You can use Webflow, Framer, Wix Studio, etc.
all 3 design were responsive before you used breakpoint?
Yes.
Thank you for mentioning it automatically doesn't make for responsive design
No problem.
Its curious that when I search for a bit more advanced stuff (figma instead elementor, etc), I always see Indians. Always into the game
I'm not Indian.
I'm confused about the purpose of this as somebody new to figma. This doesn't work in present or preview... so what's the point? I figured it would be best in those modes to show to clients who don't understand web design/development.
Also it seems pretty useless as someone who has developed websites many times without figma. Better off just having multiple layouts next to each other.
You have to pay for it now. Thank you for the video, but I don't think it is worth the money just for prototyping. You can imagine it yourself
It is paid now. sad
You can still try it out for a few days for free.