Reframer

About this plugin

Reframer lets you quickly resize your device mockups using a top down responsive layout method. When you run Reframer, it will convert your frame to a vertical auto layout and absolutely position your top and bottom fixed elements whilst also applying the appropriate iOS Status Bar and Home Indicator style.

Choose your device:

• iPhone 13 Pro Max
• iPhone 13 / 13 Pro
• iPhone 13 Mini
• iPhone 11 Pro Max
• iPhone 11 Pro / X
• iPhone 8 Plus
• iPhone 8
• iPhone SE (First Gen)

How To Use

1. Ensure your frame has a `Fixed Top` or `Fixed Bottom`

2. Choose the frame you want to reframe

3. Run Reframer > Choose Device...

4. Choose the device you would like to reframe to

5. Profit

Toggle Frame Hugging

Because Reframer converts your frame to a vertical auto layout you can take advantage of this to quickly toggle between device height and the content height of your mockup.

Simply run Reframer > Toggle Frame Hugging

Toggle to content height before previewing your design as a prototype and you will notice the content is not cut off by the Fixed Bottom element.

Vertical Scroll Prototype Ready

Reframer will setup your frame with vertical scrolling, so you can fire up the Figma iOS app on your test devices and really experience what the design feels like with no extra effort.

Top & Bottom Fixed Elements

To allow Reframer to automatically position your top and bottom fixed elements they must be contained within a Frame or Component named `Fixed Top` or `Fixed Bottom` respectively.

Tip: You can add absolutely positioned elements inside of the Fixed Top and Fixed Bottom elements. For example, if you app requires a FAB you can add it inside the Fixed Bottom element.

Status Bars

Reframer will automatically apply the correct iOS status bar style to your mocks providing your Status Bar component has a `Notched` variant property.

Home Indicators

Reframer will toggle your Home Indicator according to the iOS device you have chosen to reframe to.

Absolutely Positioned Children

After you have run Reframer you can add absolutely positioned children to your mocks and when you reframe to a different device, Reframer will respect the absolute position of the new child.

Love Reframer? Buy me a coffee 🤩