Figma

The same tokens, as Figma Variables.

Every theme here publishes a W3C DTCG token file. The plugin fetches it and creates a variable collection with Light and Dark modes: every colour token, radius and spacing as numbers, font families as strings. Measured role tokens are named color/…; the derived chart and sidebar groups are named derived/…, so the file's honesty survives the import.

Where it stands

The plugin is finished as code and runs from its manifest as a development plugin. It is not yet listed in the Figma Community; that listing needs an account, listing copy and a cover, and is on the owner's list. Until then, anyone can install it in two minutes:

  1. Get figma-plugin/ from the repository (manifest, code.js, dist-ui.html).
  2. In Figma: Plugins → Development → Import plugin from manifest… and pick manifest.json.
  3. Run it, type a theme slug such as deep-ocean, click Fetch and create variables.

The only network request the plugin makes is the tokens file on csscreme.com. No account, no key, no telemetry. Shadows arrive as strings holding the CSS box-shadow, because Figma has no shadow variable type; the plugin says so rather than dropping them.

Why this and not a screenshot paste

Pattern libraries offer "copy to Figma" and paste a picture. A picture cannot become a variable, cannot switch modes, and cannot be checked for contrast. Tokens can. The round trip is the point: the file an agent reads (DESIGN.md), the file a build reads (DTCG), and the file a designer reads (Variables) are the same tokens with the same fingerprint.

Related: DESIGN.md vs design tokens vs Figma vs shadcn registry.