Designer Dev Stack (4.3a)

Design with the same components and tokens as developers.

Designer Dev Stack helps designers work in Figma using the same components, tokens, and frameworks as developers. When design ships, handoff is near 1:1 and buildability increases.

Token source

Add a path or URL to your design tokens: tailwind.config.js, theme.json, Style Dictionary output, or CSS custom properties (e.g. --color-primary). Blue Painter validates that designs use tokens instead of ad-hoc hex codes and flags off-token colors.

Component source

Point to your component library: Storybook URL, Chromatic, or code path (e.g. @/components/ui). Blue Painter maps Figma components to code components and flags custom rectangles styled as buttons or elements not in the design system.

Designer guidance (Figma plugin / Live sidecar)

In v3 Live mode, Blue Painter shows inline guidance: "This layer uses #4A90D9. Your dev stack uses $primary-500. Replace?" or "This looks like a button but isn't a component—use Button / Primary." One-click apply correct token or component when available. Documentation links (e.g. Button docs: [Storybook] [GitHub]) let designers see variants and props.

Output

Per screen: "Design with dev primitives" checklist—tokens used ✓, components mapped ✓, spacing on scale ✓. Pre-handoff confidence: "This screen uses 100% dev-stack primitives."

Coming soon (4.3a roadmap)

Token sync — Import design tokens from your codebase (e.g. tailwind.config.js, theme.json) into Figma Variables so designers use the same values as dev. In-Figma designer guidance — Live prompts in the Figma plugin or Live sidecar (e.g. "Replace #hex with $primary-500", one-click apply). Today, Blue Painter validates against your token/component sources at analysis time; sync and inline guidance are planned for a future release.