Adding a Device Frame to your prototype

Sometimes you may be looking to add a layer of realism to your prototype, to really get your ideas across. Adding a device frame to your prototype can help a lot, and Framer offers various ways to do so.

Adding a device using the Device component

To add a device to your prototype, you can use the built-in Device component.

The Device component can be inserted directly onto your canvas by searching for it in the Insert menu, which is found with the + icon in the toolbar or by pressing i.

Connecting the device to your prototype

Once placed on the canvas, you can use the connector on the right-side of the component frame to hook it up to your preferred (starting) screen.

Tip: if you highlight the screen you want to preview with a Device frame and then add a Device component from the Insert menu, it will automatically connect to your selected frame.

If you have no frame selected on the canvas, the Device component automatically connects to your home screen. Your home screen can be determined by right-clicking a layer in the Layers panel and choosing the Set Home Screen option.

Changing the appearance of your Device component

You can alter many properties of the Device component to your liking. After selecting the Device component on the canvas, you’ll see all the available properties to tweak on the right-hand side of the Framer interface.

The Device component allows you to choose between a collection of different clay models, add shadow, or change the background color of the area around the device.

Adding a device using other components from packages

There are also other ways to add a device frame to your project, each with varying unique properties. These device frames also come in the form of components, and are added and connected in a similar fashion as the above Device component.

You can add these packages with their device components by searching for them from the Insert menu.

Specific device packages

Certain device frames are available as packages. For instance, the iPhone 11 Pro package contains a realistic iPhone 11 Pro device frame.

You can even choose among the differerent Space Grey, Midnight Green, Silver, and Gold frames.

Mockmatic package

The Mockmatic package by Dave Fumberger allows you to add realistic 3D device frames around your prototype. It comes with many different features, including light, shadow, environment, and rotation controls.

Previewing

When you are ready to present your prototype, select the device component of choice on the canvas and click the Share button in the top-right.

This allows you to create a Prototype view, which prepares a unique hosted version of just your prototype fully interactive and ready to be shared with anyone else.