According to various research, it was found that people are using more and more devices with various screen sizes making today’s designers design their products for as many screens as possible to make the experience better.

I am also a designer and recently I got a project where I have to design a product with responsive screens so I created all the screen designs for desktop, tablet, and mobile but the problem is my client wants a real-time animation from mobile to desktop..

So I used the plugin breakpoint and in this article, I’ll teach you to use it and impress your clients with a seamless transition of responsive design.

Understanding Auto Layout in Figma

Auto layout is a must if you want to design a responsive design, auto layout as shown in the above picture, helps you expand the elements as the screen size or content size grows, basically, it makes your design more responsive.

In Figma, you can easily do auto-layout by selecting the element and entering Shift+A or adding auto-layout manually.

How to Use Breakpoint Plugin

Breakpoint plugin is one of my favorite plugins that allows users to add different frames and break them according to the screen size. When I first installed it I felt it was hard to use so I watched a video by Floweare.

Install the plugin: https://www.figma.com/community/plugin/Breakpoints

Let’s Make Design Responsive.

Let’s design the responsive design together, to make the design you have to make follow the 3 steps that I use every time I wanted to create a responsive design with the transition from a small screen to the big one. best for designing responsive websites.

1. Create Design For All Of The Screens

To create a responsive design you have to make all the screens you have to design for the app or website, I created 3 screens just for an example. One for mobile I named: iPhone, the Second one is for the tablet I named iPad, the Third one is for desktop or laptop I named: MacBook.

2. Add Their Breakpoints Into The Plugin

Add the breakpoints of your design where you wanted to change the current frame with the frame that suits best, for example after some time the design for mobile is so stretched that it looks bad on the tablet screen adding a tablet design then can be the very best place for the responsive design.

3. Edit and Enjoy the Responsive Design

Edit the end result according to your needs and your client’s need and then enjoy the smooth transaction between the screens. You can add multiple breakpoints and multiple screens which can help you in designing much more complex designs.

Thanks for reading, I hope you enjoyed this short article that explains in brief how to design a responsive design in Figma with smooth animation.