How Do You Use a Device Mockup in Figma?

Using device mockups in Figma is an effective way to present website and mobile designs. Mockups allow designers to communicate their ideas more effectively and create a better user experience. With Figma, designers can easily create realistic device mockups, which can then be used to show how the design will look on different devices.

When creating a mockup in Figma, the first step is to select a device frame. This can be done by clicking on the “Frames” option in the left sidebar.

From here, you can choose from a range of devices, such as an iPhone or iPad. Once you’ve chosen your device, you can start adding your design elements.

To add elements to your mockup, simply drag and drop them onto your canvas. You can also use the “Layers” panel to modify existing elements or add new ones. If you want to add text or images to your mockup, there are several options available as well.

Once you’ve created your mockup, it’s time to present it. To do this, you can use the “Share” feature in Figma.

This allows you to share the mockup with others so they can view it and provide feedback. You can also export your mockup as an image or PDF file for presentation purposes.


Using device mockups in Figma is an effective way for designers to communicate their ideas and create better user experiences. With its easy-to-use drag-and-drop interface and sharing features, Figma makes it simple for designers to create realistic device mockups that they can then use for presentations and other purposes.