How Do I Add a Device Frame to Figma?

Adding a device frame to Figma is a great way to design user interfaces for multiple platforms. With the device frame, you can easily see how your design looks on different devices and make sure it works for all of them. It also helps you check that all elements are properly aligned and that there are no overlapping elements or too much spacing between them. The device frame also lets you easily adjust the size of the design to fit the specific device you’re designing for.

Adding a device frame to Figma is easy and quick. To do this, first open up your Figma project and select the ‘+’ icon at the top left-hand side of the screen. This will bring up a list of options including ‘Device Frame’. Select this option and then select which device type you want to add – either iOS or Android. You can then choose which specific model you want to add, as well as selecting any other options such as orientation, color, or resolution.

Once you have chosen your desired settings, click on ‘Add Frame’ at the bottom of the window. Your device frame will then be added to your project, displaying the device with its chosen settings applied.

Styling Device Frames:
In addition to adding a device frame, it is also possible to style it so that it looks more realistic in your project. This can be done by selecting it in your project and then clicking on ‘Style’ in the top right-hand corner of the window. Here you can change things such as drop shadows, background color and opacity, and even add an image or text overlay if desired.

These styling features allow you to make sure that your design looks good on all devices – no matter what size they are or what orientation they have – before sending it out for testing or release.


Adding a device frame to Figma is easy and quick with just a few steps needed in order to do so successfully. It allows users to quickly preview how their designs look on different devices with various settings applied, as well as allowing them to easily style their frames so that they look more realistic before sending out for testing or release.