Design for the iPhone Duo in 40 seconds.
Design for the iPhone Duo in 40 seconds.
Here's how to set up the base screens in Figma:
Closed state:
Create a frame 466×678.
Add two inner frames.
Content frame: 382 wide.
System control panel: 84 wide.
Apply the grid from the video.
Open state:
Use a frame 890×626.
Everything except the navigation is your main area.
Switch to the wider grid.
Two-app view:
Duplicate the open frame.
Add 8pt space in the middle.
Bonus: animation
Open the ultramock site from the video and pick the iPhone Duo template.
Upload your Figma screens and export. Done.
Save this for when the Duo drops.
Would you design a separate layout for each state, or one that adapts?
Related posts
Your form design is costing you users. 4 fixes that make forms feel effortless:
Alex S.
The first date rule for better apps.
Valeria B.
You're doing your corner radius wrong.Alex S.
Digital product design, before and after.
Reliqio
Almorada's CTO on working with Reliqio.
Ilya Khomko
Airbnb UX: how trust turns into conversion.Valeria B.
- Want to learn how to design for iPhone Duo, animated like this?
- Let me show you.
- For the closed iPhone, create a frame with this size.
- Then add two inner frames, the first one for the main screen and the other one for the system control panel.
- Also, copy these settings.
- For the open iPhone, use this frame size.
- Everything except the navigation is our main area.
- And don't forget to apply a slightly different grid now.
- For the two-app view, copy the previous frame and add an eight-pixel space in the middle.
- That's all.
- And if you want an animation like this, just go to this site and choose the iPhone Duo template.
- You'll get a fully editable canvas, where you upload your screens from Figma.
- Then you can export, and that's it.
- So easy.
A foldable iPhone needs screens for each state. This is a quick Figma setup for the iPhone Duo's base layouts.
Key points:
Closed: a 466×678 frame with a 382-wide content frame and an 84-wide system control panel.
Open: an 890×626 frame on a wider grid, with everything but the navigation as the main area.
Two apps: the open frame duplicated, with 8pt between them.
An ultramock template animates the Figma screens for a preview.
Most useful for designers getting an app ready for foldable phones.