Figma Dev Mode: what to copy and what to ignore

Figma Dev Mode is for three things: measurements, tokens and assets. The code it generates is a starting point, not the code you paste. The shortcut to open the mode is Shift D.

What the panel shows

• Layer properties: padding, gap, width, height and position.
• The variables applied, with name and value, not only the final colour.
• Assets: icons are detected automatically and download as SVG.
• A comparison with the previous version of the frame, before you redo the work.

The panel switches between two views: Code, with the snippet in the language you pick, and List, with values you copy one by one. The language menu sits at the top right, and units and syntax change with it.

What to copy, really

• The measurement: a 16px gap is a fact, not an opinion.
• The name of the variable or style, which becomes a token in code.
• The SVG of the icon, to compare with the icon grid already in use.
• The component name and variants, to see which catalogue component matches.

Generated CSS contains absolute values: padding: 16px, color: #111827. In the project those values are tokens and classes. Copy the number to measure the distance, then apply the variable the design system already exposes.

Code Connect: real code in the panel

npm i -D @figma/code-connect
npx figma connect create "https://www.figma.com/design/abc123/Design-System?node-id=1-39"
npx figma connect preview src/components/Button.figma.ts
npx figma connect publish --dry-run

create reads the node and writes a template with property getters; preview shows the snippet as it will appear and validates it; publish --dry-run lists what would be sent without publishing. After a publish, Dev Mode shows your repository component instead of the generated code.

Annotations, status and focus

Designers can mark a frame as ready for development and annotate it with notes and measurements. The Ready for dev view filters those frames, the focus view shows one at a time. Notifications reach you only with a full seat or a dev seat.

Plugins that change the output

Codegen plugins change the language and the style of the snippet, for example towards Tailwind or towards a React component. A third-party plugin runs against your files: check who publishes it and under which licence before installing it, as you would with an npm dependency.

A named limitation

Dev Mode needs a Professional plan or higher and a dev seat. On the Professional plan Code Connect allows one active library and one framework at a time: switching framework deactivates the earlier connections, which stay visible but unused.

Where to continue

To compare an export with the catalogue start from the 12,808 icons, the 1,556 block previews and the shadcn library. The full path is in Figma to React without rebuilding, the files to start from in the best Figma kits. The theme comparison is in free versus premium shadcn themes.