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

In project Edit, set Token source to a public URL that returns your design tokens: theme.json (WordPress-style: settings.color.palette, spacing, typography.fontSizes) or a raw Tailwind config (theme.colors / theme.extend.colors). The URL must be HTTP or HTTPS so Blue Painter can fetch it.

Sync tokens

After setting a token source URL, use Sync tokens now in the Designer Dev Stack alert on the same Edit page. Blue Painter fetches the URL, parses colors (and optional spacing/font sizes), and saves them to the project. The next analysis uses this palette to tailor token-related issues (e.g. "Your synced token palette has 12 colors"). Re-run Sync after you update your theme.

Export tokens (JSON / CSS)

After tokens are synced, use Download tokens (JSON), Download CSS variables, or Copy CSS to clipboard on the project Edit page or under Config & analytics. Import JSON into Tokens Studio or similar tools, or paste CSS :root variables as a reference for Figma Variables—aligning with Spec 4.3a token sync from code to design tooling.

Figma Variables (manual handoff)

One-click push to Figma Variables via API is on the roadmap. Today you can keep design and code aligned with this workflow:

Sync tokens in Blue Painter, then download JSON or copy CSS :root variables.
In Figma: open your file → Local variables (or Variables panel).
Create color variables matching your token names (e.g. primary/500) and paste hex values from the export, or use Tokens Studio / a community importer to ingest the JSON.
Bind fills and text styles to variables so future token updates only require re-importing after you re-sync in Blue Painter.

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)

In-Figma designer guidance — Live prompts in the Figma plugin or Live sidecar (e.g. "Replace #hex with $primary-500", one-click apply). Token sync from URL and manual Variables handoff (above) are available now; automated API push to Figma Variables and inline one-click apply are planned for a future release.