This package is a CLI that pulls design tokens and component metadata from a Figma file, then writes generated, framework-specific artifacts into your repo.
npm install @vettvangur/design-systemThis package is a CLI that pulls design tokens and component metadata from a Figma file, then writes generated, framework-specific artifacts into your repo.
It is not a runtime component library.
- Connects to the Figma API and fetches:
- Variables (design tokens)
- Components/component sets (for props/variants)
- Effect styles (shadows/blur) referenced by nodes
- Normalizes + groups tokens (for example colors are grouped by the first segment of the token key)
- Emits deterministic, static output files (no runtime dependency on Figma)
From Figma Variables + Components it generates:
- Tailwind v4 token CSS (via @theme) under styles/config/*.css (colors, typography, fonts, weights, shadows, scales, screens, sources)
- Tailwind core CSS under styles/core/*.css (bodies, headlines, button variants)
- Umbraco/Razor design-system partials under Views/Partials/
- A top-level view at Views/ that composes the partials
- FIGMA_TOKEN in the environment (falls back to FIGMA_KEY for older setups)
- The token must have access to the target Figma file
The CLI reads vettvangur.config.mjs from the current working directory.
requited shape in vettvangur.config.mjs:
``js``
{
...rest of config
figma: {
key: process.env.FIGMA_KEY,
file: "
},
}