Figma Workflow

Overview

DS0 uses a code-first approach to Figma integration. Tokens are defined in code and pushed to Figma — no paid plugins required.

Token Sync

Code → Figma (Primary Direction)

1. Tokens are defined in tokens/*.json (source of truth)
2. scripts/build-tokens.ts runs StyleDictionary
3. scripts/sync-to-figma.ts transforms output to Figma Variables format
4. GitHub Action pushes to Figma via REST API on merge to main
5. Designers see updated tokens instantly in Figma

Figma → Code (Designer-Initiated)

1. Designer changes a variable in Figma
2. scripts/sync-from-figma.ts pulls current Figma Variables
3. Script generates a PR with the token diff
4. Developer reviews and merges

Figma Code Connect

DS0 uses Figma Code Connect (free) to map Figma components to React code:

// figma/button.figma.ts
import { figma } from '@figma/code-connect';
import { Button } from '../components/react/button';

figma.connect(Button, 'https://figma.com/...', {
  props: {
    variant: figma.enum('Variant', { Primary: 'primary', Secondary: 'secondary' }),
    size: figma.enum('Size', { Small: 'sm', Medium: 'md', Large: 'lg' }),
    label: figma.string('Label'),
  },
  example: ({ variant, size, label }) => (
    <Button variant={variant} size={size}>{label}</Button>
  ),
});

When a designer inspects a component in Figma, they see the exact React code to use.

Setup

1. Install the Figma CLI: npm install -g @figma/code-connect
2. Create mappings in figma/[component].figma.ts
3. Publish: figma connect publish