Play UI design & app screens

Fitting a desktop design tool onto a phone

Play's whole premise forces an interesting constraint: a layers panel, a component inspector, and a canvas all have to coexist on a screen the width of a thumb. Instead of cramming three panels into view at once the way Figma does on desktop, Play collapses everything into a single working canvas and pulls the tooling up from the bottom as sheets. Tap a layer and the inspector rises as a bottom drawer; dismiss it and the canvas is unobstructed again. It is a deliberate rejection of the persistent-sidebar metaphor most design tools inherited from the desktop.

The layers list itself is worth studying for anyone building a tree view on touch. Nesting is shown with indentation and disclosure carets, but reordering happens by long-pressing a row and dragging — the same gesture iOS users already know from Reminders or the Files app. Play leans on platform muscle memory rather than inventing custom affordances, which is why the editor feels navigable within minutes despite the density of what it exposes.

The inspector as a stack of typed property groups

Select any element and the inspector presents its properties in labeled clusters — layout, appearance, typography, effects — each collapsible so you only expand what you're editing. Numeric fields pair with steppers and, crucially, with the iOS numeric keyboard's own scrubbing behavior, so a designer nudging corner radius or opacity never leaves the sheet. Color controls open the native iOS color picker rather than a bespoke wheel, keeping the interaction fast and familiar.

What makes Play convincing as a 'real' design tool is that these properties map to actual native iOS primitives: it exposes SF Symbols, system materials, and blur effects as first-class options, not approximations. When you toggle a material background you're previewing the same UIVisualEffectView an engineer would ship. That fidelity is the app's core argument, and the inspector is where it's made most visible — every control corresponds to something the platform can genuinely render.

Live preview and the edit-to-runtime loop

Play's preview mode swaps the editing chrome for the actual running interface — you leave the canvas and interact with your design as if it were a shipped app, tapping through the very buttons and sheets you just laid out. The transition is a full-screen mode switch rather than a split view, a sensible call on a phone where a side-by-side preview would starve both halves. A single control returns you to editing, and the state you left is preserved.

This tight loop reframes what prototyping means on mobile. Because the preview runs native components rather than a video-like simulation, interactions such as scroll physics, sheet detents, and keyboard avoidance behave exactly as they would in production. For designers evaluating Play, the preview screens are the most instructive part of the catalog — they reveal how the tool blurs the line between mockup and buildable artifact.

Frequently asked questions