About
This started as a personal project for me a few years back when I posted to Behance. Until then there has been a series of newer iPhones released, therefore I decided to update this project to include all 5 official models:
- iPhone SE
- iPhone X, Xs, XR
- iPhone 11, 11 Pro
- iPhone 12, 12 Pro
- iPhone 13, 13 Pro
Created in Figma, For Figma users.
📐
These mockups were made from scratch in Figma to support components and variants. Just choose the iPhone model, then pick a color from a list of official color presets in the
variants
menu.
Also, since these mockups are vectorized, you can
resize
it to your heart’s content, as long as you keep the scale ratio.
Not enough phone colors? Make your own instead. 🎨
Looking to paint the phone to a certain color that matches your graphics or background? Got you covered. Just go look for a certain layer name
[Change this color]
and let your creativity runs free.
Placing your screen inside is easy!
📱
Just find the layer named [Place screen here] and replace it with your real design screen. If the screen size of the mockup doesn’t match your real design screen, use the Scale tool (shortcut key is K) and scale it to match the mockup screen.
Don’t forget to get rid of the “Text” layer.
✍️
This layer was only there for one purpose: letting you know which iPhone models this mockup belongs to. So it’d be wise to delete it before/after you placing your designs inside.
Hmm… Black Glass, anyone?
👓
You see, ever since iPhone SE was released, all future iPhone models have Black front glass. I can see why they did it, but personally, I’m not a fan. You can totally tap the toggle in the variants menu and
turn it off
, then the front of your iPhone will have colors too. Bring back the nostalgia!
