#1 Breakpoints and responsive design
Hi 👋 I’m Inés! Welcome to Figma Fridays. This is your go-to space for mastering Figma with practical, hands-on lessons. 👩🏼💻
Breakpoints: The word that confused me (but doesn’t have to confuse you!)
‘Breakpoints’ is one of those words that technically explains itself, yet it still left me scratching my head when I first learned about it. If you’ve ever felt the same, you’re not alone!
Why do breakpoints matter?
As UX designers, our goal is to create seamless experiences for users, no matter what device they’re using. Think about it:
Our grandmas prefer phones with big keyboards so they can easily call us.
Moms love iPads to binge-watch their favorite series in bed.
We, designers, need massive monitors to be pixel-perfect with our work.
Each of these devices comes with its particular constraints, and one of the most significant? Screen size.
Phones and tablets tend to have vertical layouts, while laptops and desktops are more horizontal. If we design something for mobile, how do we make sure it doesn’t break on desktop? That the design still looks great and adapts properly?
Enter breakpoints.
What are breakpoints?
Breakpoints are specific screen widths where our design needs to adjust to look good. They’re like checkpoints in a race—at each one, the design adapts to fit a different screen size.
In Figma, we design using pixels (px), which are the smallest unit in a digital display. Everything on your screen is just a bunch of tiny pixels arranged together—pretty cool, right?
Breakpoints are pixel values defined in CSS to make designs responsive. But with so many different device sizes out there, how do we decide which breakpoints to use?
The trick to choosing breakpoints
Let’s hop into Figma.
Open a new file and hit F to bring up the frame options on the right panel.
Look at the different frame sizes—you’ll see digital options (like phones, tablets, and desktops) as well as print sizes (like A4, A5).
Here’s how we pick breakpoints smartly:
✅ For mobile: Choose the largest common phone width. We’ll go with 440px (iPhone 16 Pro Max), since it’s the biggest reasonable size before jumping to an unusually large Android Medium (700px).
✅ For tablets: Avoid mini versions—go for pro models with bigger screens. The iPad Pro 11" (834px) is a solid choice.
✅ For desktops: A MacBook Air (1280px) works well, and for even larger screens, we use 1440px.
What this means in practice
440px – 833px → Mobile design
834px – 1279px → Tablet design
1280px – 1439px → Desktop design
1440px and up → Large screens
And there you have it! Easy, right? 😊
A visual guide to breakpoints
Here’s a visual representation of the breakpoints you should be using in your designs.
In the product world—especially when working with developers—we often use T-shirt sizes to categorize things. It’s a quick and intuitive way to communicate scale.
For example, instead of saying a text size is 16px, we might call it Size S. This trick helps keep internal communication clear and design decisions consistent.
Just a little pro tip to make your workflow smoother! 😉
What happens when we apply breakpoints?
When we implement breakpoints in our designs, each screen size gets a layout that adapts to its constraints. Instead of a design breaking when stretched to a larger screen, it adjusts smoothly, ensuring a seamless experience across devices.
This is the practical magic of responsive design—our layouts remain functional and visually appealing, no matter the screen size.
Try breakpoints in Figma with this plugin
Figma has a super useful Breakpoints plugin that lets you practice and experiment with responsive design. It comes with a 15-day free trial, so you can play around with it before committing.
Here’s how to use it:
Press Command + K to open the quick search bar.
Type "Breakpoints" and select the plugin.
Add a new adaptive layout and set up your breakpoints.
Create mobile, tablet, and laptop frames, then link each breakpoint to its respective frame.
This is a great way to see how designs adapt across different screen sizes in real time.
Making responsive design work
To ensure your responsive design works smoothly, you’ll also need to adjust the position and layout of elements within each frame. This is where tools like Auto Layout and positioning rules come into play.
We’ll dive deeper into these topics in our next post, but in the meantime, I encourage you to explore and experiment. Try adjusting layouts in Figma and see how your designs respond to different screen sizes.
Also, don’t feel like you have to create a fully animated prototype for every design. Simply designing for different screen sizes, even as static frames, is enough to guide your decisions and help developers understand how the layout should adapt.
Let the breakpoints inform your design, only that.
This is everything for today. I hope it solved some doubts about pixels, breakpoints, and responsive design.
Stay curious,
¿Cómo puedo subscribirme? Estoy muy interesada en tu trabajo.