No video
Responsive Design in Figma Using Breakpoints
Рет қаралды 130,021
Күн бұрын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/4fuWnNI
📸 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.
@DesignWithArash 11 ай бұрын
👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons): bit.ly/43v79vX
@Victoriairaq 8 ай бұрын
I do not have money, can I participate in the course? I do not have money, can I participate in the course?
@chris.ar93 Жыл бұрын
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.
@DesignWithArash Жыл бұрын
Thanks a lot. I really appreciate it. Welcome to the channel.
@teno7210 Жыл бұрын
Thank you so much, Arash! No one else on KZfaq 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!
@DesignWithArash Жыл бұрын
Thank you so much. I’m glad you found my content helpful. I hope you get the job.
@teno7210 Жыл бұрын
@@DesignWithArash Update: I got the job!
@DesignWithArash Жыл бұрын
@@teno7210 That's awesome. Congratulations.
@oTiSm786 Жыл бұрын
You're so genuine and sincere and no BS with high-quality work. You're awesome dude!
@DesignWithArash Жыл бұрын
Thank you so much.
@BattleJunkiee Жыл бұрын
There are quite few UI/UX instructor that teach you something new (like Mr Arash) and everything else is same old bullshit
@deecsaunders 9 ай бұрын
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!
@DesignWithArash 9 ай бұрын
I agree with you.
@redtheredhairedlady734 8 ай бұрын
How do I publish a website created with figma, do I still need code to do that?
@mohamedyusuf9873 8 ай бұрын
@@DesignWithArashHow can we generate a code after use breakpoint plugin, is this possible?
@mancerrss 4 ай бұрын
*ridiculous
@jkoblivion4175 Ай бұрын
All UI/UX beginner designers should follow this channel. That's what i say to my students. Thx Arash.
@Aziza-wj7tv Ай бұрын
frrr thats my first youtube course and i have just started it 2 days ago
@ChristianHafner-qv3fm 3 ай бұрын
Great videos, Arash! Thanks so much for putting in so much effort.
@isthatsharanya Жыл бұрын
Came from Jesse's channel, your videos are very well articulated Arash!
@DesignWithArash Жыл бұрын
Welcome to my channel Sharanya. Thank you so much. I’m glad you think so.
@user-ok1wt1yt3q 2 ай бұрын
I am a subscriber active in Korea. Tang Xing's explanation is so good that it makes me feel good.
@dimejipamilerin1770 Жыл бұрын
The way you explain things is just amazing, I have learnt so much watching your videos. I am a fan already!🤝❤
@DesignWithArash Жыл бұрын
Thank you so much 😀 Happy to hear that. Welcome to the channel.
@DubbelDutch1 Жыл бұрын
I start my working day with a ''Arash Tutorial' 😄 Keep on making these great tutorials!
@DesignWithArash Жыл бұрын
Thanks a lot. It's a pleasure.
@Sravani12m 3 ай бұрын
Thanks, Arash. I am a beginner in UX design and am currently doing UI challenges. This was super helpful.
@DesignWithArash 3 ай бұрын
Glad it was helpful!
@abdurrahimsujon7443 4 ай бұрын
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 : )
@DesignWithArash 4 ай бұрын
No problem. Glad it helped.
@Leochuks456 3 ай бұрын
You are a great designer bro your videos are special I must say, please do post more of this
@syifachairannisa9722 8 ай бұрын
you're truly a life-savior 😭 thankyou!!
@DesignWithArash 8 ай бұрын
No problem. Glad it helped.
@shtuchka815 Жыл бұрын
I just watched two videos, and I've learned so much. It's amazingly useful! Thank you!
@DesignWithArash Жыл бұрын
You are so welcome!
@Hustler0109 7 ай бұрын
Such an underrated channel 🤌🏻
@DesignWithArash 7 ай бұрын
Thanks.
@ethnica2622 6 ай бұрын
Thanks Arash, it is super helpful! I already use it in my work.
@DesignWithArash 6 ай бұрын
No problem.
@serbansilviu4215 6 ай бұрын
Nice knowledge passing dude. keep up the good work!
@DesignWithArash 5 ай бұрын
Thank you.
@GraphicDesigners-132 5 ай бұрын
Because of the Quality Content I must Thank You..
@DesignWithArash 5 ай бұрын
No problem. Thank you.
@Martenzzz Жыл бұрын
Thanks Arash.. you're indeed a life saver.
@DesignWithArash Жыл бұрын
No problem. Thanks.
@yvdhruva7326 2 ай бұрын
Hi I am new. to ui / ux and facing few difficulties while designing a sass website, my problem is I have dropdown in my main page for the website I am designing once I click the dropdown its opening and if I select a option its navigating to the required frame but the dropdown isn't closing need to click twice to close it second one is if I add any interaction from the to dropdown option to the required frame the interaction isn't working / gtng deleted automatically can u kindly help me with this, how to connect with you??? Thanks in advance 😊
@mortezaajidanpour9381 Жыл бұрын
Straight to the point thanks arash
@DesignWithArash Жыл бұрын
No problem dear Morteza.
@SenderoSeeker 9 ай бұрын
Really fantastic videos. So clear and easy to understand. Thank you!
@DesignWithArash 9 ай бұрын
Thank you so much. Glad you liked them.
@danielwatson6529 Жыл бұрын
ah, here we go, this is what im looking for, subbed
@DesignWithArash Жыл бұрын
Glad you found what you were looking for.
@artankohan9863 11 ай бұрын
you are great pal. just what I needed.
@DesignWithArash 10 ай бұрын
Thank you.
@behanna413 Жыл бұрын
Thank you for the great videos. Always learning something new.
@DesignWithArash 11 ай бұрын
No problem.
@naaazih Жыл бұрын
Your videos are a treasure 💎 Thank you so much
@DesignWithArash Жыл бұрын
So nice of you. Thank you.
@user-zr4np3wx5w 6 ай бұрын
Why keep the different size as components? Would it not be more efficient to make each new screen size a variable?
@cryptoforliving4833 8 ай бұрын
Arash here, Arash there, Arash everywhere ... hahaaa. eshghe mayy
@DesignWithArash 8 ай бұрын
Hahaha. Ghorboonet.
@mariesheilarodriguez7459 3 ай бұрын
what plugins did you use in converting to code?
@ashwaarnas1252 3 ай бұрын
thank you for your great videos, i learn alot
@rudrachakraborty1942 11 ай бұрын
very usefull & practical video for a beginner .. love your videos
@DesignWithArash 11 ай бұрын
Thank you so much.
@Bushra_Ali 4 ай бұрын
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.
@manavgada3237 4 ай бұрын
Thank you so much, I'm probably being hired because of you
@DesignWithArash 3 ай бұрын
No problem. Wow, that's great to hear. Congratulations. It made my day.
@mateusbistene 8 ай бұрын
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?
@sportyandtechy Жыл бұрын
Great work, thank you for the knowledge
@DesignWithArash Жыл бұрын
My pleasure!
@Asakeblow 4 күн бұрын
Amazing 🎉
@MM-rv5he Жыл бұрын
Thank you very much for you! super informative and helpful!
@DesignWithArash Жыл бұрын
Glad it was helpful!
@hamzakhalid2330 Жыл бұрын
You're genius mate!
@DesignWithArash Жыл бұрын
Thank you.
@dcarter_ux Жыл бұрын
Are there any other plugins similar to breakpoints where you don't have to pay?
@DesignWithArash Жыл бұрын
Not that I'm aware of.
@Canaria_lab 3 ай бұрын
Thank u very much, this is helpful
@massivemotivation 7 ай бұрын
hey can you tell me which camera model do you use for your videos?
@DesignWithArash 7 ай бұрын
It's Sony ZV-E10.
@SisiBisi-zh1cj Ай бұрын
شكرا
@amritanandpathak1112 5 ай бұрын
You are the Johnny Sins of Figma
@Halamus_tafa 11 ай бұрын
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
@zagguprince Жыл бұрын
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..
@MuhammadAliRaza-ls6mr 4 ай бұрын
Video is very helpful !
@DesignWithArash 3 ай бұрын
Glad it helped.
@MuhammadAliRaza-ls6mr 3 ай бұрын
@@DesignWithArash Brother your tutorial is very helpful i am watching many videos but your tutorial is very nice and outclass thanks a lot broTHER
@syedabrar8873 Жыл бұрын
i think we have to purchase breakpoints now, its not free. How can I access it for free?
@01Oddone Жыл бұрын
Thank you! its an amazing plugin..but it seems like paid. Happy to be the 600th person to hit a Like button!
@DesignWithArash Жыл бұрын
Awesome, thank you! It has a free trial though.
@user-kg6cb1vh9x Жыл бұрын
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?
@DesignWithArash Жыл бұрын
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.
@emrebayraktar1 10 ай бұрын
Awsome info! Thank you!!
@DesignWithArash 9 ай бұрын
No problem.
@mischugo 11 ай бұрын
Thanks a lot. Is that only possible while using a plug in? The plugin takes more the 10 Minutes to render, Figma goes down 🙈
@DesignWithArash 11 ай бұрын
Hi. Yes. It shouldn't, please check out another browser.
@akashr4251 Жыл бұрын
to use this breakpoint the design must be in responsive website ha ???????????
@handzum 6 ай бұрын
really useful information
@DesignWithArash 5 ай бұрын
Glad it was helpful!
@varsha.1507 Жыл бұрын
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
@DesignWithArash Жыл бұрын
Hi. I'm not sure why. It's hard to tell without seeing your project.
@alexlisouski4069 Жыл бұрын
You showed how to use it with simple screens. How it use if you have full design mockup ?🤔
@DesignWithArash Жыл бұрын
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.
@tfofficiel8723 Жыл бұрын
Thank u so much u just saved my life
@DesignWithArash Жыл бұрын
You are most welcome. Always happy to help.
@nikhilgoyal007 6 ай бұрын
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)
@DesignWithArash 6 ай бұрын
No problem. Yes, that's correct.
@nikhilgoyal007 6 ай бұрын
thank you!
@markrodriguez5638 Жыл бұрын
Great video. Does the breakpoint feature show when a dev is viewing in inspect mode?
@DesignWithArash Жыл бұрын
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.
@bigpunchline 8 ай бұрын
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.. =_=
@shabazui5469 Жыл бұрын
hey arash, i think you’re cool ❤
@DesignWithArash Жыл бұрын
Hi Shabazui, Thank you so much. That's very nice of you.❤
@marziyeh5571 Жыл бұрын
ممنونم بابت این آموزش 🙏
@DesignWithArash Жыл бұрын
🙏خواهش میکنم
@gxramirez Жыл бұрын
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.
@DesignWithArash Жыл бұрын
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.
@danielwatson6529 Жыл бұрын
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?
@DesignWithArash Жыл бұрын
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.
@SM80FG Жыл бұрын
I'm trying to locate the cost for this plug-in. Any have pricing for individual/org? Thanks
@DesignWithArash Жыл бұрын
You should head over to their Gumroad page I believe.
@proventurkey Жыл бұрын
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?
@DesignWithArash Жыл бұрын
Unfortunately, it's not possible. At least not now.
@Progettiamodivertendoci Жыл бұрын
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?
@DesignWithArash Жыл бұрын
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.
@Progettiamodivertendoci Жыл бұрын
@@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.
@dayannaaguilera6944 Жыл бұрын
Hi thanks for this.. questions will the prototype show the responsiveness?
@DesignWithArash Жыл бұрын
Hi. No problem. Nope.
@adspheel5850 Жыл бұрын
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?
@DesignWithArash Жыл бұрын
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.
@adspheel5850 Жыл бұрын
@@DesignWithArash Thanks
@anitaFerdous1967 9 ай бұрын
Very useful video. thanks
@DesignWithArash 9 ай бұрын
No problem.
@muhammadvirgi870 6 ай бұрын
thanks!
@DesignWithArash 6 ай бұрын
No problem.
@bharathgorental4928 5 ай бұрын
Thank you. 😀
@DesignWithArash 5 ай бұрын
No problem.
@zomeldevera596 Жыл бұрын
Hi how it will work with height? They must not have the same height as well??
@DesignWithArash Жыл бұрын
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.
@intolap9371 Жыл бұрын
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?
@DesignWithArash Жыл бұрын
Hi. No problem. The should turn the design to code but you can also use the Framers plugin to create responsive web pages.
@neginmatin1819 Жыл бұрын
Thank you so much.
@DesignWithArash Жыл бұрын
You are most welcome.
@bertatnetcentric6074 Жыл бұрын
There is something that I am unable to recreate. Is there any to download the file? Thank you for the video
@DesignWithArash Жыл бұрын
You can go to Figma community and search for Breakpoints. You will find some templates to test this plugin easily.
@kianhabibian9641 Жыл бұрын
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 !
@DesignWithArash Жыл бұрын
Hi Kian. It's available, I just checked it out. Could you please take a look once again?
@kianhabibian9641 Жыл бұрын
@@DesignWithArash All done! Thanks a lot!
@ashiqurrahman3680 Жыл бұрын
@@kianhabibian9641 isn't it paid now?
@justinoneill2837 Жыл бұрын
How can we do this on the component level like container queries?
@DesignWithArash Жыл бұрын
You should just use Auto Layout.
@justinoneill2837 Жыл бұрын
@@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!)
@Michael.design 11 ай бұрын
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..
@itstop10bro 9 ай бұрын
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
@dylanbowes 10 ай бұрын
a perfect video
@DesignWithArash 9 ай бұрын
Thank you.
@julietkan Жыл бұрын
Thank you a lot!!!
@DesignWithArash Жыл бұрын
No problem.
@samduss4193 18 күн бұрын
PAID pluggin ?
@justsashank Жыл бұрын
Is there any alternative for this breakpoints as its not free
@DesignWithArash Жыл бұрын
As far as I know, no.
@Leochuks456 3 ай бұрын
Is this plugin free
@zahraaizadi7800 Жыл бұрын
Useful video🤩
@DesignWithArash Жыл бұрын
Thank you 🙂
@hetulshah5352 7 ай бұрын
all 3 design were responsive before you used breakpoint?
@DesignWithArash 6 ай бұрын
Yes.
@varsha.1507 Жыл бұрын
Hi ..is it possible that responsive layout can be exported in html using any figma plugin?
@DesignWithArash Жыл бұрын
Hi. Yes, but I don't recommend it. You can use the Anima plugin.
@varsha.1507 Жыл бұрын
Hi arash Could you please tell if not anima, what plugin we can use?
@pravinmahadik407 Жыл бұрын
@@varsha.1507 You can use Locofy plugin to convert your layout in HTML+CSS code
@user-nh4rr3er2u Жыл бұрын
The plugin isnt free :
@user-dz3fi3ic1x 6 ай бұрын
How to turn this into a html css code file
@DesignWithArash 5 ай бұрын
You can use Webflow, Framer, Wix Studio, etc.
@zeinebblaiech9607 Жыл бұрын
Is there a Free plugin for breakpoints ?
@DesignWithArash Жыл бұрын
Not that I'm aware of.
@zuhaibmaqbool8869 Жыл бұрын
please tell me the free alternative of breakpoints plugin ?
@DesignWithArash Жыл бұрын
As far as I know, there is no other free alternatives at the moment.
@dhanijhu Жыл бұрын
Great!
@DesignWithArash Жыл бұрын
Thanks,
@faateme_fr Жыл бұрын
You are awsome🤩
@DesignWithArash Жыл бұрын
Thank you so much.
@360-no-scopejohnson6 28 күн бұрын
based
@dangaudicos7833 Жыл бұрын
and how can I export this to html after this?
@DesignWithArash Жыл бұрын
You cannot. This plugin is not going to replace coding. It's just useful for design hand off and for presentation purposes.
@dangaudicos7833 Жыл бұрын
@@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
@varavex 8 ай бұрын
🤩👌💫
@joanerhabor3233 Жыл бұрын
Thank you for mentioning it automatically doesn't make for responsive design
@DesignWithArash Жыл бұрын
No problem.
@aayanboss5070 Жыл бұрын
Great
@DesignWithArash Жыл бұрын
Thanks.
@marlondotrafego 7 ай бұрын
Its curious that when I search for a bit more advanced stuff (figma instead elementor, etc), I always see Indians. Always into the game
@DesignWithArash 7 ай бұрын
I'm not Indian.
Jason Derulo
Рет қаралды 34 МЛН