iPhone Duo Adaptive Design Starter Kit

A foldable iPhone means one app, two displays and six device states. Most teams will start by stretching the outer layout onto the inner screen. This kit starts from the other end: what changes when the display unfolds, and what should stay exactly where it was.

It covers the whole path from anatomy to a working screen. Device frames for every state, layout guides for safe areas, the fold and the camera regions, 8 navigation patterns and 9 adaptive patterns, then 7 starter templates you can build on straight away.

Every number is labelled Official, Derived, Recommended or Illustrative, so you can tell what comes from Apple and what is a starting value to verify. iPhone Duo is new, and some values are my own reading of Apple's public guidance until full specifications ship.

What's inside

• Device frames for every state: outer portrait and landscape, inner portrait and landscape, partially folded and tabletop
• Layout guides for safe areas, the side column, the folding region and reserved camera regions
• A Duo System variable collection with one mode per device state, 15 layout tokens
• iOS semantic colours in Light and Dark, plus 21 iOS text styles with Apple's names
• 8 navigation patterns and 9 adaptive patterns, with a Dark Mode check
• Duo layout components: status bar, vertical bar, sidebar column, pane, split view and arrangement views
• 7 starter templates, from Blank to Master Detail, Feed, Map + Panel and Dashboard
• Do and Don't rules, with sources linked to Apple's Human Interface Guidelines

A look inside

How to use it

1. 01Open the file on Figma Community and duplicate it to your drafts.
2. 02Read Device Anatomy first. It explains what each of the six states gives you.
3. 03Pick the starter template closest to your app and place it in a Duo device frame.
4. 04Switch the Duo System variable mode to move the layout between device states.
5. 05Turn on the safe area and hinge guides to check nothing lands in the fold.
6. 06Borrow a navigation or adaptive pattern for the parts your app needs.

Questions