Design Sync Overview

Design Sync mode connects Figma Design files directly to GitHub repositories for bi-directional sync of design tokens, variables, and styles.

What Is Design Sync?

Design Sync allows you to:

• Pull JSON token files from GitHub and create/update Figma Variables
• Push Figma Variables and Styles back to GitHub as JSON
• Branch to work on different design variations
• Create PRs to review design changes before merging

┌─────────────────────────────────────────────────────────────────────┐
│                    DESIGN FILE SYNC                                 │
│                                                                     │
│   GitHub Repository                    Figma Design File            │
│   ─────────────────                    ─────────────────            │
│                                                                     │
│   branches:                            Synced Elements:             │
│   ├── main                             ├── Variables                │
│   ├── feature/new-theme                ├── Color Styles             │
│   └── experiment/bold-colors           ├── Text Styles              │
│                                        └── Effect Styles            │
│   files:                                                            │
│   ├── tokens/colors.json      ←→       Color Variables              │
│   ├── tokens/typography.json  ←→       Text Styles                  │
│   └── tokens/spacing.json     ←→       Number Variables             │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Key Features

Bi-Directional Sync

Direction	What Happens
Pull (GitHub → Figma)	Reads JSON files, creates/updates Variables and Styles
Push (Figma → GitHub)	Exports Variables/Styles to JSON, commits to repository

Token Format Support

GitFig supports multiple token formats:

• W3C Design Tokens (recommended) - Standard format with $value and $type
• Style Dictionary - Amazon's token format
• Tokens Studio - Popular Figma plugin format
• Custom JSON - Any JSON structure with color/number values

Branch Workflows

Work on different design variations using Git branches:

• Switch branches to load different token values
• Create new branches for experiments
• Create Pull Requests for design reviews
• Merge branches when ready

Change Detection

GitFig tracks what's changed:

• See when GitHub has new commits since your last sync
• Get warnings when pushing with unpulled changes
• View commit count badges on the Pull button

When to Use Design Sync

Good for:

• Design token management
• Multi-brand/multi-theme systems
• Design system documentation
• Collaborative design reviews

Not needed for:

• Single-designer projects without developers
• Projects without version control requirements
• Files that don't use Variables or Styles

Comparison with Make Bridge

Feature	Design Sync	Make Bridge
Works with	Figma Design files	Figma Make files
Sync direction	Bi-directional	Primarily Make → Target
What syncs	Variables, Styles	All Make-generated code
Setup	Manual connection	Webhook-based
Use case	Token management	Code deployment

Getting Started

1. Connect a Repository
2. Configure File Mappings
3. Pull Your First Tokens