Figma Support Forum

Device mockups from key screen components?

Hi! I’m looking for the most effective way to create a device mockup library – without plugins. The library would consist of two key objects:

  1. UI screen variants, e.g.
    1125x2436 home view, search view, settings view etc.

  2. Device frames, e.g.
    iPhone X with light, dark and coloured frame

Without using plugins, such as Angle mockups, is there a way to combine these two in an easy-to-resize component? The ideal outcome is to have one mockup (e.g. iPhoneX) with two properties: changeable screens and frames.

Main issues now:

  1. Using plugins like Angle mockups turns screen component into an image background. If the screen gets un update, all device mockups need to be manually updated.

  2. Masking the screen component with the device frame component is an option –but the solution only works if the newly combined screen+frame component is not resized.

For example fonts don’t get bigger, when the component is resized.

Any tips? :blush:

For example fonts don’t get bigger, when the component is resized.

Use Scale tool (hotkey K) to resize them.

1 Like

Magic. Thank you! :heart_eyes:

Ah hmm… This led to another question:

Now, I have a component that includes:

  • screen variant (scaled with hotkey K)
  • device frame

When I swap the screen (let’s say from “Home” to “Settings”), the screen resizes back to the original size. Any way to prevent that?