Figma for Developers

What is Dev Mode?

A dedicated view mode in Figma for developers
Shows: dimensions, colors, typography, assets, and code
Purpose: efficient and consistent handoff from design to code

👉 Activate: Bottom canvas toolbar → “Dev Mode”

Area	Content
Left	Layer structure & components
Center	Canvas with the design
Right	Inspector with specs, variants, code

What You Can See

Design Tokens

Design Tokens in Figma mirror the frontend variables used in the yuuvis® design system. They follow a web syntax with the prefix --ymt-*, identical to the tokens available in CSS and the frontend theme layer.

Category	Description	Example Tokens
Spacing & Layout	Defines gaps, paddings, and margins	`--ymt-spacing-xs`
Colors	Defines foreground / background colors	`--ymt-primary`, `--ymt-surface`, `--ymt-on-surface`
Typography	Defines font formats	`--ymt-font-body`
Borders & Radius	Defines shape and corner curvature	`--ymt-corner-m`, `--ymt-outline-width`

Components & Libraries

In Dev Mode, you can also identify which components are used and where they come from, e.g. material, yuuvis components or custom components.

Practical Shortcuts

Action	Shortcut / Method
Activate Dev Mode	`Shift` + `D`
Measure spacing	Hold `Alt` (Mac: `Option`)
Comment on design	Press `C` → click element

Collaboration Tips

Don’t copy pixel-perfect — build semantic & responsive
Always reuse tokens (colors, fonts, spacing) in code instead of raw values
Confirm variants and states before implementation with designer
Always communicate with the designer if something is unclear or doesn’t work as expected in the frontend → Components or tokens may need to be updated or corrected in the design files
Keep design and code aligned — consistent naming and variable use ensure design-system integrity