Mockup in 2 minutes: draw faster than download

Time is the only irreplaceable resource. Therefore, you need to spend it on interesting tasks and loved ones, but not on searching and downloading the next mockup in Google.

Therefore, now I will teach you how to draw it in 2 minutes!
You can use any graphics editor, personally I will draw in Figma.

Don t worry if you don t succeed the first time, which is why I prepared a Figma file that you can download on my Telegram channel and see how it works!

Go!

Step 1.
Draw a rectangle.
Size: 375х812
Corner radius: 40
Color: F0F4FA

This will be our screen, where in the future we can insert any screen

Step 2.
Duplicate the resulting rectangle 2 more times.
Change the parameters of two new rectangles (do not touch the first)

Size: 395×832
Radius: 48
Color: DCE4F5

Size: 425×862
Radius: 60

Mockup in 2 minutes: draw faster than download

Step 3.
We superimpose the rectangles on top of each other like a nesting doll:
large at first, medium at it, small at it

Upcoming Workshops

Mockup in 2 minutes: draw faster than download

Step 4.

Select the smallest one and add 5 points in the center on its top edge.

Mockup in 2 minutes: draw faster than download

Step 5.
We form a “monobrow”:
Just pull the three center points down.
In principle, you can do without it, then skip four and five Steps.

Mockup in 2 minutes: draw faster than download

6 step.
Select the largest rectangle and apply 3 shadows to it:
1) Drop Shadow
Blur: 80
X: 40
Y: 40
Color: B8C2D9
2) Inner Shadow:
Blur: 10
X: -4
Y: -4
Color: C3CDE7
3) Inner Shadow:
Blur: 10
X: 4
Y: 4
Color: ffffff

Mockup in 2 minutes: draw faster than download
Magic, isn t it?

Last step.
Don t be afraid to experiment! You can add speaker, camera or change colors.

Mockup in 2 minutes: draw faster than download

Outcome:

Many things seem complicated only at first glance, and in a few minutes you managed to make your first mockup!
But if you have any difficulties, or you want to see the devices in other colors, then download the Figma source in my cart

Mockup in 2 minutes: draw faster than download

Leave a Reply

Your email address will not be published. Required fields are marked *