Spillway CMSStructured content like Drupal. Page building like Puck. Setup like Ghost. AI that drafts, people who approve.
Menu

Import a design system from Figma

Bring the colors (dark mode included), fonts, sizes, spacing, radius and content width of a Figma design system into the site's theme tokens, so every page and block picks them up once you publish.

Before you start: a manager account (site.settings) and a Figma file with variables (a color collection with the brand color, text and background colors; a typography collection with the font families). Any of these exports works: the REST API response of GET /v1/files/:key/variables/local, the JSON a variables-export plugin writes, or a W3C design tokens (DTCG) file.

Steps

  1. Export the variables from Figma to a JSON file (plugin or API), or copy the JSON to the clipboard.
  2. Brand → Import brand (Sidebar → Structure → Brand), source Design tokens. Pick the format (Figma variables, or Detect automatically), paste or upload the JSON and choose Read the source. Nothing is saved yet.
  3. Read the review. Each row shows the Spillway setting, the imported value next to the current one and the source token (color/primary → Primary, font/body → Body font, radius/md → Corner radius, container/max → Content max width). A mode named Dark fills the Dark mode rows. Custom tokens lists every other token, kept under its own name (color-neutral-900). Notes names unresolved aliases, composite values that were skipped and Figma modes that were left out (the default, or Light, mode gives the values).
  4. Uncheck any row you do not want. If a heuristic picked the wrong token, rename the variable in Figma (a plain primary beats primary.100) or fix the value by hand after import. Apply to draft writes the checked rows to the brand draft; Preview shows the home page with them, and Publish puts them live.

Check the result

  • The public site uses the new colors and fonts as soon as you publish (the theme stylesheet and the pages are tagged and evicted on publish). Before that, only the preview shows them.
  • GET /api/theme/tokens.css shows the named tokens as --sw-color-primary, --sw-font-body, … and every custom token as --sw-<name> on :root.
  • Brand → Space and shape → Export published tokens downloads the published theme as a DTCG JSON file, which round-trips through the importer unchanged.

Notes

  • Blocks only read the named tokens and the custom tokens you reference in your own CSS; importing two hundred colors does not change what a block looks like until a stylesheet uses them (see using tokens in your own CSS).
  • Tailwind (theme.colors, fontFamily, …) and plain CSS custom properties import the same way.

Going further

  • Theming: the Brand area, the tokens, the mapping heuristics in full, export.
  • Build a theme with an agent to turn tokens, blocks and page templates into an installable theme kit.

Spillway 0.1.0 · Edit this page on GitHub

Was this page helpful?