Foldable design

Designing for the iPhone Duo Inner and Outer Displays

A foldable phone is really two surfaces: a small outer display used closed, and a large inner display used open. Fleck gives you both as first-class canvases, in portrait or landscape, with a fold guide on the inner display, so one project can hold both states of the same screen.

Start designing

Two surfaces, one product

The outer display is for glanceable, one-handed moments: a status, a control, a quick reply. The inner display is for the full task. Designing only one of them leaves a gap users feel immediately, because the same app has to work in both states.

  • Inner and outer canvases with their own sizes and orientation
  • Portrait by default, landscape when the task needs it
  • A fold guide on the inner display so nothing critical sits across the crease
  • Both states live in the same project and share one design system

The same design system across every device

Screens you generate for a foldable use the project's locked design system: the same palette, type scale, radii, components and logo as your phone, tablet and desktop screens. Switching device does not restart the visual language.

Practical rules that hold up

Keep primary actions reachable with one thumb on the outer display. Do not put a control, a form field or key text under the fold on the inner display. Treat the inner display as more room for content and context, not as a reason to spread the same UI thinner. Design the transition: what the user sees when they open or close the device should feel continuous.

What Fleck does not simulate

Fleck designs the two flat surfaces. It does not render a 3D device, animate the hinge or fake a physical gap between halves, because none of those help you make layout decisions.

How to design a foldable screen in Fleck

  1. 1

    Add a screen

    Choose iPhone Duo as the device in the Design section. The inner display is the default.

  2. 2

    Pick the state

    Switch between Inner and Outer, and portrait or landscape, from the canvas controls.

  3. 3

    Turn on the fold guide

    The guide shows where the crease falls on the inner display so you can keep it clear.

  4. 4

    Generate and audit

    Generate the screen, then run a UX audit that knows which display state it is looking at.

  5. 5

    Hand off

    Export the screens with both states, so developers see the closed and open layouts together.

Frequently asked questions

What is the difference between the inner and outer display?
The outer display is the smaller screen used while the device is closed, suited to short, glanceable interactions. The inner display is the larger screen used while open, suited to the full task.
Which display should I design first?
Start with the inner display, because it carries the complete task, then decide what the outer display genuinely needs. Fleck defaults to the inner display for that reason.
Where should I avoid placing controls?
Avoid the fold line on the inner display. Fleck's fold guide marks it so you can keep controls, inputs and key text away from the crease.
Do foldable screens share the design system with my other screens?
Yes. Every device in a Fleck project generates against the same locked project design system, so components, colours, type and logo stay consistent.
Is Fleck affiliated with Apple?
No. Fleck is an independent design platform and is not affiliated with, endorsed by or sponsored by Apple.

Design both states of your screen

Add an iPhone Duo screen to a project and see the inner and outer layouts side by side.

Start designing