@vettvangur/design-system

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.

It is not a runtime component library.

What It Does

• 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)

What It Generates

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/<Namespace>/DesignSystem/*.cshtml
• A top-level view at Views/<Namespace>DesignSystem.cshtml that composes the partials

Requirements

Figma access

• FIGMA_TOKEN in the environment (falls back to FIGMA_KEY for older setups)
• The token must have access to the target Figma file

Project config

The CLI reads vettvangur.config.mjs from the current working directory.

requited shape in vettvangur.config.mjs:

{
  ...rest of config
  figma: {
    key: process.env.FIGMA_KEY,
    file: "<figma-file-id>" 
  },
}