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:

Creating Stunning Mockups for Your Designs: The Best Free Mockup Tools and Resources

Create stunning mockups for your designs with these free mockup tools and resources. Check out Mockup Builder, Mockup World, Placeit, Smartmockups, and iMockups to get started.

Top 5 Instagram cats that have more followers than you!

Cats do rule everything around us, or at least, they act as they do! They captured the human’s biggest treasure - the social media world! ?

Daily UI inspiration #01

Your daily selection to enhance your creativity!