Dev Mode and Handoff

A developer opens Steady’s file for the first time. Without help, they face sixty frames, three explorations of the Today screen and a page called Scratch, and they have to guess which version is real, what happens when a name is too long and whether that teal is a token or a one-off. Every guess becomes a bug, a Slack thread, or both.

Handoff is the work of removing those guesses. Most of it you have already done: named layers, auto layout, components with properties, variables. This lesson adds the last layer.

Organise for the reader

Before anything else, make the file easy to navigate for someone who was not there:

• Move explorations off the Screens page. Developers should only see what will be built.
• Group screens into sections by flow: “Check-in”, “Add habit”, “Habit detail”. Arrange each flow left to right in the order people move through it.
• Include the states, not just the happy path: empty Today (“No habits yet”), a habit with a 1,000-day streak, the text field’s error state, the loading state of Habit detail.
• Give each section a one-line description at the top: what the flow is for and any open questions.

Ready for dev

When a flow is stable, select its section and mark it Ready for dev. At the time of writing, you can do this on sections, frames and components, and it is available on paid plans.

Statuses are a signal, not a lock. If you edit a design after marking it ready, Figma marks it Changed automatically, so developers know to look again, and they can compare the current version with the one that was marked ready. When you have finished changing it, you mark it done with changes and can add a short note. On Organization and Enterprise plans there is also a Completed status for designs that have been built.

What developers see in Dev Mode

Developers switch to Dev Mode with the toggle in the toolbar or Shift+D. It needs a paid plan and a Full or Dev seat at the time of writing. Selecting a layer shows its inspect panel:

• Measurements and layout: sizes, padding and gaps, with auto layout described in terms close to CSS flexbox.
• Variables by name: the check button’s fill appears as color/action/primary with its value, padding as space/4. If you set code syntax on your variables (Lesson 3.3), developers see the exact token name their code uses.
• Components and properties: the instance’s component, its variant and property values, and the component description you wrote in Lesson 3.5.
• Code snippets: generated CSS, iOS and Android code, a starting point rather than production code. On Organization and Enterprise plans, teams can connect real component code with Code Connect so the snippet shows their own component instead.
• Assets: icons and images marked for export, downloadable in the right format.

This is where all the earlier discipline pays off. A component with named layers and bound variables reads like a spec; a detached frame with raw hex codes reads like a puzzle.

Annotate what pixels cannot say

Some things are invisible in a static frame. Annotations put them right on the design. Press Shift+T (or use the annotation tool), select a layer and write a note, or pin a property so it stays visible. At the time of writing, annotations have categories such as Development, Interaction, Accessibility and Content, and developers can filter by them. Measurements (Shift+M) pin spacing on the canvas.

For Steady, annotate:

• Content rules: habit names wrap to two lines, then truncate with an ellipsis; streaks above 999 show “999+”.
• Behaviour: tapping a check button marks the habit done for today; it can be undone until midnight.
• Accessibility: accessible names for icon buttons, the focus order of the New habit sheet, the 44 × 44 hit area, the reduced-motion alternative.
• Data edge cases: what an empty list and a failed load look like, pointing at the frames that show them.

You have designed, systematised, prototyped, checked and handed off Steady. The final lesson is about the two skills that turn this work into a career: running a critique and telling the story in a case study.