Skip to main content
Nazim_Can_Tunc
January 31, 2021

Multiple Flows Should Have Different Device Frames

  • January 31, 2021
  • 207 replies
  • 35421 views

It would be great if we could select different device frames for each flow. This would give huge benefits to those who design responsive websites side by side.

207 replies

mr.D
November 15, 2023

Yep, it would be nice to see this fixed.

Margot_Gabel
Active Member
November 24, 2023

This idea is from 2021! Still needing it every day.

Using Figma since 2018.
Josiah_Pierce
November 29, 2023

Hi everybody. I haven’t read every comment on this thread but I have found a workaround that I like and have been using for several projects. I still would like devices sizes for each flow… but, try this out!

Figma does let you set prototype devices per “page”. Here’s a screenshot of what I do for each project file now. I set up mobile and desktop pages that contain only those device size prototypes, then I assign the corresponding prototype device for each page. You can setup a master Figma file that you duplicate every time you start a new project if you want. I hope this helps some people!

image

Joseph_Amato
December 14, 2023

Great input, @Josiah_Pierce. Thanks for the input. We appreciate your input!

Margot_Gabel
Active Member
December 15, 2023

We design desktop and mobile screen in the same page and use the Custom Size setting to show our prototype (to overcome the fact that Figma can still not handle different devices for different flows…), the problem is that the Prototype option Fit Width is not available for some obscure reason. Therefore we MANUALLY add &scaling=scale-down-width to the URL to have it working and to have a proper link to share with client.

Would it be possible to just display it in the Option dropdown like for the Presentation setting?

Using Figma since 2018.
Morten_Brix_Falslund
January 5, 2024

We need this! 😭

The_Company_You_Keep
New Member
January 23, 2024

A solution we use:
• Custom device frame for desktop (1440 x 900px)
• Insert a rectangle the same hex value as your prototype background
• Size rectangle to your mobile width and the difference between 900px and your mobile height (900 – 736 = 164px)
• Set rectangle to fixed position
• Extend page frames by 164px at bottom so this rectangle can hide there once scrolled to bottom of page

January 24, 2024

+1 New to Figma and loving it but already running into the need for this feature as my team designs for different viewports on the same page. Also seems like the new variables feature supports this concept by allowing you to assign your variable modes (mobile, desktop, etc) to a specific frames on the same page. Would be great to treat the device prototypes the same way.

February 4, 2024

+1 This would be a superb feature!

Mateusz17
February 10, 2024

Still nothing? 😦