Generate Figma designs that use your own design system tokens
title: "Generate Figma designs that use your own design system tokens" description: "The plugin now detects your confirmed design system tokens and applies them as shared Figma styles and variables on every subsequent render." publishedAt: "2026-04-15" author: name: "AI To Design" url: "https://ai-to-design.com" tags: [feature, design-system] coverImage: "/figma.png" coverAlt: "A Figma file with generated components using named colour styles, text styles, and variables from a design system." relatedSlugs: [interactive-design-system-creation]
Most AI design tools emit generic Tailwind classes or raw hex literals. That's fine for a one-off mockup, but if you've spent time building a design system — primary/500, spacing/4, type/heading/h1 — those tokens get flattened out the moment an AI renders a new component. You end up with pixel values you have to unpick by hand before the output is usable in a library.
What changed
The plugin now treats your design system as a first-class input. When a design system has been confirmed for a Figma file, every render_html call checks the HTML/CSS it's about to render against your confirmed tokens and wires the result through Figma's shared styles and variables pipeline instead of writing inline values.
Colours become shared paint styles. Typography becomes shared text styles — font family, size, weight, and line height combined, named after your scale. Shadows become shared effect styles. Spacing, radius, font-size, and line-height get bound to Figma variables, not burned in as numbers. The namespace is consistent (ai.to.design/Color/Primary/500, ai.to.design/Type/Heading/H1) so generated artifacts slot cleanly next to styles you've authored yourself.
The pipeline is upsert-safe. Re-rendering the same component doesn't duplicate styles — it reuses the existing ones. Editing a style in Figma propagates to every node the plugin generated against it. That's the whole point: generated output behaves like hand-authored output.
Component variant sets are wired in too. Ask Claude to generate a button with size and state variants and you get a proper ComponentSetNode with inferred variant properties, not four standalone frames you'd have to combine yourself.
How it works
You need to confirm your design system once before this kicks in. Without a confirmed DS, the plugin falls back to its previous behaviour (inline styles, basic token binding). The interactive design system creation flow is the one-time setup — from there on, every render speaks the same language.
The flow is: confirm your DS once → every subsequent render_html call reuses it. No per-prompt configuration, no "remember to use my tokens" reminders. If the tokens exist, the plugin uses them.
