Skip to content
All features
design systempackages/design/design-sync

design-sync package

Provider-agnostic design-tool sync — Figma, Penpot, or git-only. Pulls design-tool tokens to repo and pushes repo to design tool, safely dry-run by default.

Open docs
Stability
Stable
Scope
Global
Boundary
packages/design/design-sync
design-syncpackages/design/design-sync
Design system
Figma
Tokens repo
@nebutra/tokens

Tokens shipped

202

Components

67

Coverage

95%

Sync status

OK

packages/design/design-syncdesign supply chain
Usagedesign-sync.ts
typescript
design-sync.ts
1import { getDesignSync } from "@nebutra/design-sync";
2
3// Auto-detects Figma / Penpot / git-only from env.
4const sync = await getDesignSync();
5
6await sync.healthcheck();
7await sync.pull();                  // design tool → repo (DTCG)
8await sync.push({ dryRun: true });  // repo → design tool (dry-run safe)
More in domain · design system
brandPackage
packages/design/brand

Brand primitives — color definitions, gradient tokens, motion language. Source data; not imported at runtime by apps.

Explore
design-tokensPackage
packages/design/design-tokens

W3C DTCG $value/$type token files + Style Dictionary 4 pipeline. Output CSS variables, JS modules, Figma sync feeds.

Explore
iconsPackage
packages/design/icons

541 Geist icons as tree-shakable TSX components. Single-weight, optical-sized, drop-in for Vercel / v0 visual parity.

Explore
themePackage
packages/design/theme

CSS-only multi-theme engine — six oklch presets toggled by data-theme attribute. No JavaScript on the critical path.

Explore