Design System CLI
Tooling · DX · 2024
A command-line tool that scaffolds design-system tokens (colors, spacing, typography) from a Figma file URL into ready-to-use CSS custom properties, Tailwind config, and TypeScript constants — in one command.
Usage
Node.js · Figma REST API · Ink (React for CLIs)
bash
# Install once
npm i -g @burakkoc/ds-cli
# Sync tokens from a Figma file
ds-cli sync --figma-url "https://figma.com/file/abc123" \
--out ./src/tokens \
--format css,tailwind,ts
# Output:
# ✓ src/tokens/tokens.css (48 variables)
# ✓ src/tokens/tailwind.js (extended theme)
# ✓ src/tokens/index.ts (typed constants)The CLI reads Figma's local styles via the REST API, maps each color/text style to a semantic token name, and writes three output formats simultaneously. A `--watch` flag re-syncs on every Figma publish event via webhook.
Internals
The token mapper uses a naming heuristic: `Primary/500` → `--color-primary-500`. Aliases (e.g., `Background/Default → Primary/50`) are preserved as CSS `var()` references so changes cascade automatically.
ts
// Token mapper — Figma style → CSS var name
function toVarName(figmaName: string): string {
return "--" + figmaName
.toLowerCase()
.replace(/s+/g, "-")
.replace(///g, "-")
.replace(/[^a-z0-9-]/g, "");
}
// Resolve aliases
function resolveAlias(token: Token, map: Map<string, Token>): string {
if (token.alias) {
const target = map.get(token.alias);
if (target) return `var(${toVarName(target.name)})`;
}
return token.value;
}
Figma style tree → CSS custom property hierarchy