GitFig
Sync Figma Variables with GitHub
Free Figma plugin for bi-directional design token sync. Pull JSON tokens to Variables, push changes back as commits. Branches and PRs included.
Get notified about new features and updates.
How It Works
Git workflows for design tokens
GitHub → Figma
Pull JSON token files from your GitHub repository to create or update Figma Variables, Color Styles, Text Styles, and Effect Styles.
- Auto-detect W3C, Style Dictionary, Tokens Studio formats
- Map multiple JSON files to different targets
- See commit count badge when repo has updates
- Create new repos with sample tokens included
Figma → GitHub
Push your Figma Variable and Style changes back to GitHub. Stage changes, create commits, and push—just like a developer.
- Real-time change detection (every 3 seconds)
- Stage individual changes or batch with "Stage All"
- Create local commits before pushing
- Open PRs with title and description from Figma
Features
Git workflows, designed for designers
Branches
Create and switch branches from Figma. Experiment with design variations without affecting production.
Pull Requests
Open PRs for design changes. Get code review on design system updates before merging.
Change Detection
See when files update on GitHub. Get notified of new commits and sync with one click.
Conflict Warnings
Know when Figma and GitHub have diverged. Prevent accidental overwrites with clear warnings.
Version History
Every sync is a commit. Roll back to any previous version of your design system.
Secure OAuth
Authenticate securely with GitHub Device Flow. Your tokens stay safe in Figma's encrypted storage.
Use Cases
Built for teams who ship
Design System Teams
Keep design tokens in sync between Figma and code. One source of truth.
Design-Dev Collaboration
Designers propose changes via PR. Developers review and merge.
Multi-Brand Themes
Use branches for different themes or brands. Switch instantly in Figma.
Getting Started
Up and running in minutes
Install the Plugin
Install GitFig from the Figma Community. Works with Figma Desktop and Web.
Connect to GitHub
Authenticate with your GitHub account using secure Device Flow. You'll get a code to enter at github.com/login/device. Your token is stored safely in Figma's encrypted storage.
Connect a Repository
Create a new repo (includes sample tokens that sync automatically) or connect an existing repo. Map JSON files to Figma Variables, Color Styles, Text Styles, or Effect Styles.
Pull & Push
Pull to import tokens from GitHub into Figma. Make changes in Figma, stage them, create commits, and push back to GitHub. Create branches for experiments, open PRs for reviews.
Ready to version your design tokens?
Install GitFig free from the Figma Community.