Skip to content

Home
Ask UX

Menu

Home
Reference
Review
UX Practice
Start here
Research
Facilitation
Methods
- Journey Mapping
- Prioritisation
AI + Design
Ask UX

Show guidance forContext

Search Shortcut

esc

Show guidance forContext

These sources do not carry equal weight

Standard requirement.: A testable criterion in a published standard. Whether it is legally required depends on your jurisdiction and contract.
Government control.: A control the issuing government expects its agencies and their partners to apply. It does not bind other organisations.
Design-system convention.: How one design system does it. Binding only on teams that have adopted that system.
Research-based best practice.: Advice drawn from usability research. Persuasive, not mandatory.
Industry convention.: A range many shipping products use. Written by Shortcut; no standard or organisation requires it.
Craft guidance.: Judgement of the kind given in design review. Written by Shortcut; reasonable designers may disagree.

Shortcut links every claim to its source. “Why it matters” and “What to do” are Shortcut’s reading, not the source’s words.

A portfolio prototype.

Dev Mode

Product

The developer's view of a design file.

FigmaVerified 7 Oct 2026Official documentation: Figma, Dev Mode(opens in a new tab)

What it is, in Figma’s terms

Figma describes it as translating designs into code: code snippets, component properties and structured layer data from the canvas.

Craft guidance

Best for

Handing work to developers
Showing what changed since last time
Letting developers inspect without editing

Not really for

Designing
Replacing the handoff conversation

When to use it

When a design is settled enough to build. Mark it ready, annotate what must not be missed, and walk the developer through it.

Example workflow

Clean the file
Mark frames ready for dev
Annotate behaviour
Developer inspects
Compare changes on updates

Key features, as Figma lists them

Ready-for-dev statuses and notifications
Compare changes side by side
Focus view of the frames being built
Component playground for properties and variants
Links to GitHub files, Jira tickets and Storybook stories
Code Connect and the MCP server

What it overlaps with

Developers can open Figma Design, but Dev Mode hides what they do not need and adds what they do.

Related tools

Figma DesignThe main product-design workspace.
Code ConnectLinks Figma components to the real coded ones.
Figma MCP serverLets AI coding agents read and write Figma.