Web Design » Figma » How Do I Add an iPhone Screen to Figma?

How Do I Add an iPhone Screen to Figma?

Last updated on April 12, 2023 @ 10:09 am

Adding an iPhone screen to Figma is a quick and easy process that can be done in just a few minutes. Here’s how:

1. First, open Figma and create a new file.

2. Then, go to the top menu and select the “Frame” tool.

3. Go to the Prototype tab on the right panel and here you can find a list of Frame options. Select “Phone” from the Frame options to open up the drop-down menu.

4. Next, you’ll need to select the template that you want to use for your screen. There are four iPhone frame options to choose from:

  • iPhone 8 Model Series: This option will give you two iPhone 8 model frames to choose from.
  • iPhone SE Model: This option will provide you with an iPhone SE model screen.
  • iPhone 13 Model Series: This option will provide you with three options for iPhone 13 model-sized screen frames.
  • iPhone 14 Model Series: This option will provide you with four iPhone 14 model-sized screen frame options.

5. Once you’ve selected the template that you want to use, you’ll be able to start adding content to your screen. To do this, simply click and drag elements onto your canvas.

6. From there, click outside of the frame and go to the Prototype tab. Then, select the iPhone model screen template that you used in the “Device” field.

7. When you’re happy with your design, click on the “Play” icon at the top of the screen to see a preview of your design.

8. Figma will then show a preview of your design within the iPhone screen frame.

That’s all there is to it! With just a few clicks, you can add an iPhone screen to Figma.

PRO TIP: This article is updated and can be used as a reference in adding an iPhone screen frame to your design in Figma. The information and images in this article portray the actual step-by-step procedures of the task.
Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.