Design tokens in sync. Figma, GitHub, and AI in one source of truth.

Bidirectional sync between Figma Variables and your codebase. Built for Tailwind v4. MCP-ready for AI-assisted development.

Get Started Sign In

One source of truth

Figma Variables flow into your repo. Engineers pull tokens with a single command. AI agents read them via MCP.

Figma Variables

color/primary/500
color/gray/100
spacing/4

.vois/system.json

{
  "global": {
    "color": {
      "primary-500": "hsl(220 90% 56%)",
      "gray-100": "hsl(220 14% 96%)"
    },
    "spacing": { "4": "16px" }
  }
}

tailwind.config.ts

@theme {
  --color-primary: hsl(220 90% 56%);
  --spacing-4: 16px;
}

FigmaGitHubCode

Built for modern design systems

Everything you need to keep design and code in perfect harmony.

Figma ↔ GitHub in sync

Import from Figma Variables, push changes back. Auto PRs for designer-initiated updates.

MCP for AI agents

Cursor, Claude, and other AI tools read tokens. Build 3x more consistent UI.

CSS-first config

Generate Tailwind config, CSS variables, TypeScript types. No drift.

Audit your codebase

Validate token usage, catch drift, surface violations.

Beyond basic tokens

Compose typography tokens with font, size, weight, line-height.

How it works

Three steps to a single source of truth.

Step 1

Connect Figma

OAuth, select file and variable collection, import tokens.

Step 2

Connect GitHub

OAuth, select repo, .vois/system.json created.

Step 3

Ship

Edit in web UI or Figma; changes sync. Engineers run npx vois sync.

Start syncing design tokens today

Connect Figma and GitHub in minutes. No credit card required.

Get Started