Apple’s first foldable gives designers two screens, one crease and a new set of layout problems. This guide shows how to structure your Figma files, build adaptive components and hand off a design that works closed, open and split.
Key facts: 7.6-inch inner OLED display (4:3), 5.4-inch outer display, iOS 27, starts at $1,999, on sale October 23, 2026.
What the iPhone Duo changes for UX design
Launch coverage describes a device about the size of a passport when closed, with a 7.6-inch internal display and a 5.4-inch external display. When open, the inner screen is roughly 80% larger than the iPhone 18 Pro display and supports split-screen use of two apps. Apple also says the software adjusts as the phone is folded into different positions, and it has published APIs so developers can adapt their apps.
For a UX/UI designer this means one product now has at least three layouts to design, plus the moments between them. The outer screen is a quick-glance phone. The inner screen is closer to a small tablet with a 4:3 shape. Users move between the two mid-task, so state has to survive the fold.
Note: the specs here come from launch reporting. Confirm exact point sizes, safe areas and API names in Apple’s Human Interface Guidelines and developer documentation before you finalize a design.
Design for three postures, not one screen
Treat the device as a set of postures. Each posture gets its own Figma frame and its own priority list.
- Closed: glance, reply, pay, scan. Use a single column, one primary action and thumb-reach controls.
- Open flat: read, compare, create. Use two panes or a sidebar plus content, with denser information.
- Half-folded: watch, capture, video call. Put content on the upper half and controls on the lower half.
- Split screen: multitask across two apps. Each app gets a narrow, phone-like column, so test your minimum width.
Crease safe zones
The fold runs through the middle of the inner display. Apple says reducing the visible crease was a major focus, but any foldable still asks you to treat that strip carefully.
- Never split a control. A button, toggle or text field must sit entirely on one side of the fold.
- Let imagery cross. Photos, maps and video can span the fold. Keep faces and key details off the center line.
- Pick a keep-out width and test it. Start with 24 to 32 points as a working assumption, then adjust once you have Apple’s official guidance or a physical device.
- Keep touch targets at 44 points or larger, the standard iOS minimum, on both screens.
Adaptive layout rules that hold up
Start from content priority. List what the user needs on the closed screen. That list is your base layout. On the open screen, add depth: details beside lists, previews beside editors, secondary tools in a persistent pane.
Use a small set of layout patterns. Most apps need only three: list and detail (messages, files, mail), canvas and inspector (editors, drawing, forms) and media and controls (video, camera, calls). Reuse them everywhere so users learn each pattern once.
Preserve state across the fold. Folding must not reset scroll position, drafts, selected items or playback. In your design file, show the same selected item on the outer and inner frames to make this requirement visible to engineers.
Plan for Apple Pencil. Apple says Pencil support is arriving after launch on both displays. If your product involves notes, sketching, annotation or signing, add a Pencil state to your inner-screen frames now.
Figma setup, step by step
- Create custom frames. Make one frame per posture using the official point dimensions from Apple’s documentation. Name them Duo / Outer, Duo / Inner and Duo / Split.
- Add a crease guide. Draw a vertical rectangle at the fold with a semi-transparent fill, turn it into a component and place it on every inner frame. Hide it for export.
- Define variables. Set up color, spacing and radius variables with light and dark modes. Add a layout variable such as “columns” that changes between compact and regular.
- Build with Auto Layout. Use Hug and Fill on every container and avoid fixed widths. Components should stretch from the 5.4-inch frame to the 7.6-inch frame without manual edits.
- Add variants for size class. Give navigation bars, cards and lists a size property (compact or regular) so one component serves both screens.
- Annotate behavior. Note what happens to scroll position, selection and drafts when the user folds or unfolds.
Prototype the fold
Static frames do not show the hardest moment, the transition. Link the outer and inner frames with a Smart Animate connection so shared elements, such as a photo or a selected row, move to their new position. Set the easing to a gentle ease-in-out of about 300 to 400 ms, then test it with stakeholders on a phone using the Figma mobile app.
Prototype at least these flows: open from the outer screen mid-task, close from the inner screen mid-task, and enter and exit split view.
Developer handoff
- Name states, not sizes. Use compact, regular, tabletop and split. Engineers map these to the platform’s own size classes and fold APIs.
- Ship a behavior table. For each posture, list what is visible, what moves and what is preserved.
- Export tokens, not screenshots. Share variables and component specs through Dev Mode so spacing and color stay in sync.
- Define the fallback. State what the app does on an iPhone that cannot fold, so one design covers the whole iPhone family.
Common mistakes to avoid
- Stretching the phone layout to fill the inner screen, which leaves long lines of text and wasted space.
- Designing only the open state and forgetting that most quick tasks happen on the outer screen.
- Putting a primary button on the fold line.
- Resetting the user’s place when the device folds.
- Skipping split-screen testing, where the app may receive a narrow column.
Frequently asked questions
What is the iPhone Duo screen size?
Launch coverage reports a 7.6-inch inner display and a 5.4-inch outer display. Some early reports listed slightly different inner sizes, so check Apple’s specification page for the final figure.
Can I design for the iPhone Duo in Figma?
Yes. Create frames for each posture, build components with Auto Layout and size variants, and prototype the fold with Smart Animate.
What is a crease safe zone?
It is a strip along the fold where you avoid small text, buttons and fields so nothing is distorted or hard to tap.
Does the iPhone Duo support Apple Pencil?
Apple has said Pencil support will arrive after launch on both the outer and inner displays.
When can I buy the iPhone Duo?
It went on sale on October 23, 2026, starting at $1,999 for the 256GB model in the US.
Sources: Citizen Digital, Irish Examiner, PetaPixel, BGR.
Written by Efrat Al Ahad, UX/UI designer and WordPress developer. This is an independent guide and is not affiliated with Apple. iPhone is a trademark of Apple Inc.