How Do You Make a Phone Mockup in Figma?

Creating phone mockups in Figma is an easy and effective way to design mobile user interfaces. Mockups are a great way to visualize your ideas on an actual device, and Figma makes it easy to create and style them. Here’s how you can make a phone mockup in Figma:

Step 1: Create a new frame in the canvas. To do this, select the “+” icon from the toolbar, then select the “Frame” option. This will open up a dialog box where you can choose which device you want to use for your mockup.

Step 2: Add any elements that you want to include in your mockup.

You can add text, images, buttons, and more using the toolbar at the top of the page.

Step 3: Once all of your elements are added, you can begin styling them with colors, fonts, shadows, and more. Figma has a wide range of tools that make it easy to customize your design.

Step 4: When you’re happy with how everything looks on your phone mockup, you can export it for use elsewhere. To do this, select “Export” from the menu bar at the top of the page and choose which file type you want to use.


Creating phone mockups in Figma is a simple process that can help designers visualize their ideas on an actual device. With just a few steps, designers can create beautiful mockups that are ready for export and use elsewhere.