Skip to main content

I am new to Figma and mobile design in general. I’ve just learned about using constraints and layout grids to create a responsive design. I’ve created a design on an iPhone 11 Pro Max frame, and when I resize the frame to the iPhone SE resolution, the elements successfully slide into their rightful place, i.e. the design is responsive. However, when I go to view my prototype on my phone (an SE) in Figma Mirror, the prototype is not responsive, and the frame remains at the 11 Pro Max size, spilling off the sides of my screen.


Is there a workaround for this? Say I design an entire app for the iPhone SE size (since that’s the one that displays correctly on my phone), but then I want to share the finished product with someone else so that they can interact with the prototype—if they have a different size screen, am I SOL?


If there is no way to make your prototype responsive in Figma Mirror, what is your workaround for this problem? Is there a better way to share your prototype? Do you copy/paste your entire project onto a different set of frames, and develop concurrent prototypes to account for the most popular screen sizes? What would those be, i.e. what screen sizes should I be designing for at the start if I ultimately want to put my prototype in the hands of a bunch of different people with devices of various sizes?


Any help is appreciated—thanks!

First of all, there is no way to do that in Figma. In Figma prototypes have static size, there is no way to make them responsive based on the device you are viewing them from. It’s possible in apps like Framer. Feel free to vote for this idea: Adaptive/Responsive Preview


Secondly I’ll mention that Figma Mirror isn’t made for sharing, you need to use your own account in it. If you want to share the prototype, you need to share it via a link of the prototype view.



No, nobody does this. You can use one size just fine. It will just have black areas on some screens with different the screen ratios.

Gotcha—thank you, Gleb! I will vote for that idea. So I will just design for one size … and there’s no wrong size to choose, you would say? 😅


Given what you’ve explained to me, would I be correct in assuming that creating a responsive design in Figma is largely for the developer’s benefit, so they have a clear example of how the site/app should behave re:responsiveness?

Yes, there is no wrong size, but you can pick a device that either your prototype viewers or end users are more likely to have.


Yes, you are correct, setting up constraints and auto layouts helps developers know how things should resize, however I see it more as the designer benefit as you can do a lot of useful things with them, such as adapting elements to different screen sizes (e.g. phone, tablet, computer, etc.).

I get it. Thanks so much!

Reply


Terms & ConditionsCookie settings