Web Design » Figma » How Do You Use the Phone Mockup in Figma?

How Do You Use the Phone Mockup in Figma?

Last updated on September 29, 2022 @ 12:53 am

A phone mockup is a digital file that allows you to display your app or website in context on a real phone. Figma’s phone mockups are based on real devices and include different screen sizes, orientations, and configurations. You can use phone mockups to:

– Present your app or website in context

– Test how your app or website looks on different devices

– Get feedback from users about the design of your app or website

To use a phone mockup in Figma:

1. Select the Mockups tab from the left sidebar.

2. Click on the Phone Mockups folder.

3. Choose the mockup you want to use from the list of available mockups.

PRO TIP: The Phone Mockup in Figma can be a great way to showcase your app or website on a variety of different devices. However, it is important to keep in mind that the mockups are not always accurate representations of how your app or website will actually look on a real device. Therefore, it is important to test your app or website on actual devices before using the Phone Mockup in Figma to showcase your work.

4.

The selected mockup will be added to your project.

5. To add your app or website to the mockup, drag it from the left sidebar and drop it onto the screen of the mockup.

You can use Figma’s phone mockups to present your app or website in context, test how it looks on different devices, or get feedback from users about the design. To use a phone mockup in Figma, select the Mockups tab from the left sidebar, click on the Phone Mockups folder, choose the mockup you want to use, and add your app or website to the mockup by dragging it from the left sidebar and dropping it onto the screen of the mockup.

Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.