Creating multiple devices sizes in Fig

Let’s say you want to create an entire mobile flow layout (ex. 24 app screens) for a Mobile App. You did all the art and it’s looking great. Requirements are: two mobile sizes /Android and iOS (as an example).

Q: ( If I wanted to do this - all in the same project document) Would you layout/design one size first (Ex: iOs13/Pro), essentially do all the design of App screens(flow) in one Size Device, AND THEN make a “new page” (i.e. duplicate all artwork) – then resize frames for Andriod (while also adjusting artwork to fit new Android size)?? OR…is there a better way to accomplish this in Fig. ?? I figured there has GOT to be a better way. I tried the one mentioned here but since there maybe tons of Artboards (just for the one iOs device alone)… this could be extremely time consuming to adjust for another device size. Any suggestions, please. Much appreciated!

2 Likes

try using auto layout

Has anyone created a mobile flow like the OP has described that works (correctly) on different mobile screen sizes?

Would be great to see example. I have same problem.

Hey everyone, I’d recommend working with variables. You can switch a frame between different device sizes and have spacing immediately update, according to a defined spatial system.

You can check out our Help Center articles:

Guide to variables in Figma

Create and manage variables

Use variables in prototypes

Also, feel free to check out this Intro to variables tutorial on YouTube.

Please let me know if you have specific questions regarding variables, happy to help further!