Transcription
Aren't you tired of reviewing products that don't quite match your vision? In my experience, this usually happens because how your design should behave from one screen size to another is a complete mystery for your developers.
In this video, I'll show you how to use a Figma plugin called Breakpoints. You hand off your designs like this. This was a complete game changer for me and my team, and I promise you will like it too.
Without further ado, let's get right into it. We're going to start the tutorial with all the designs ready because the idea is for you to use this plugin right before you hand off these designs to your engineering team.
I decided to use Animals Mocha for landing pages because they have all the elements that change from one screen size to another, and I thought that was a great use case for this tutorial. So, big shout out to Anime! Before anything else, I highly encourage you to go and check out their website. Anime is a platform that helps you go from design to code faster.
So first, we need to check if our constraints are all well set. To do that, just select your frame and start playing around with the width of your frame. We're going to start with desktop. Zoom out a little bit, and as you can see, the constraints are not set. That will probably be your case too if you didn't set your constraints before.
What we're going to do now is go from top to bottom and check each element's constraint. We're going to start with the header. For the header, we want these to expand with the width of my container, so I will change this to left to right.
It's a good practice to check your constraints as soon as you make any changes. Now let's go with the hero section. For this one, I'll do the same; I will change these to left to right. Most of the time, left to right will work.
So let's check it out again. That'll work. Select these two elements; we're going to change this to left to right. Go back, zoom out a little bit, and as you can see, for this component, the left to right is not working because probably these elements are set to fill instead of fixed width.
We can change that, or we can also come here and change this to center, and that will do the job too. So select a frame, and that is working. Now let's check this one. I will put left to right. These two I'll set to center because they probably have the same issue as the other element.
So zoom out a little bit; they're all working well. Let's go to the footer. Set these to left and right, and also for this bottom banner, let's put these two left and right too. Now we zoom out and see that all of our constraints are well set.
Now I will do the same for the other platforms, for my tablet and my mobile version. Thank you, and that's it. Before opening the plugin, I will just check my constraints one more time. The desktop is looking good now, but it's fine, and mobile works too.
So now what I'll do is I'll right-click, go to plugins because I already set this plugin into my Figma account. So, Breakpoints. Unfortunately, they have a paid version, but with the freemium version, you can use basically one breakpoint per file, and that works perfectly well for me.
So I'll continue and create a new adapted layout. I will move it here. From here, you can create your breakpoints. Basically, you can add, and it will automatically add the normal breakpoints. You can edit them if you want.
I'll add two more, and I will delete this one because my tablet frame will go from 600 to 1280. It will work perfectly well, so I will delete this one and add one more that will go to 1920. Then you select the plus icon. This one will remodel from 600 to 1280, which will be tablet, not to 1600, which will be desktop, and the bigger one will be desktop too.
Now we can close this, and here we have our adapted layout. We can, of course, expand this vertically to check all the elements. Now, when you select your file and adjust the width, as soon as you get the breakpoint, it will go to the other frame, and the same thing for mobile.
One more tip: if you want to edit your breakpoints later, just open your plugin again, Breakpoints, and instead of creating a new adapted layout, just select your previous breakpoint. From there, you can adjust your breakpoints, delete one of them, change the frames, and everything you want.
That's all you need to do. Now, instead of just handing off your designs for each frame or for each screen size, you can add one extra file where your engineer can play around with the width and check what happens and how your designs behave from one frame to the other.
I hope this makes your life easier, and if you want to learn more about Figma and if you're passionate about product design, follow me, and see you in my next tutorial. Bye-bye!