iPhone Mockup in Figma Tutorial.

With the following step-by-step guide, you will learn
how to create mockup in Figma.

img

Step 1 – Start with Frame.

Add new artboard with color what you like. For exemple:

  • Fill: #E1E3F0
img

Step 2 – Creating Shell.

Draw simple shape with rounded corners:

  • Width: 415
  • Height: 852
  • Corner Radius: 40px
img

Step 3 – Adding Drop Shadow Effect.

Add Drop Shadow to Rectangle:

  • X: -6
  • Y: -6
  • Blur: 24
  • Opacity: 16%
  • Color: #373CAA
img

Step 4 – Adding Inner Shadow Effect.

Add inner shadow to rectangle with the following settings:

  • X: -6
  • Y: -6
  • Blur: 24
  • Opacity: 20%
  • Color: #595DBD
img

Step 5 – Adding Screen Rectangle with Unibrow.

a) – Dublicate first shape and paste upon rectangle with shadow:

Make it:

  • Width: 375px
  • Height: 812px
  • Color: #595DBD
  • Corner Radius: 30px
img

b) – Draw new rectangle for unibrow.

Make it:

  • Width: 189px
  • Height: 42px
  • Corner Radius: 20px
img

c) – Make Subtract Selection with Second Rectangle.

img

Finally – Add Your Design.

img

🖐️ Ciao!


More From iMockups:

11 months ago

Something went wrong with Google services

Gmail, YouTube, Google Docs, and other Google services hit by widespread outage

1 year ago

Daily UI inspiration #01

Your daily selection to enhance your creativity!

1 year ago

Top 10 Free Icons Library You Might Not Know About

Free pack of icons to use in your projects.