Design System Sync

Export design tokens to GitHub automatically with AI code generation

Plugin Preview

Design System Sync helps you export Figma design tokens and components to your codebase automatically.

🚀 KEY FEATURES:

• Export design tokens as JSON, CSS Variables, or Style Dictionary

• Sync directly with GitHub & Bitbucket via Pull Requests

• AI-powered code generation (React/HTML) with accessibility built-in

• Real-time design system updates to your repository

• WCAG 2.1 AA compliant code generation

💎 FREE TIER:

• 5 exports included

• All export formats (JSON, CSS, Style Dictionary)

• GitHub & Bitbucket integration

⭐ PRO TIER ($10/month or $100/year):

• Unlimited exports

• AI Code Generation for components

• Priority support

• 7-day free trial included

📚 SETUP:

1. Install the plugin

2. Select your Figma variables or components

3. Connect your GitHub/Bitbucket repository

4. Export and sync automatically

🔗 Links:

API:1.0.0
UI:dist/ui.html
main:dist/code.js
Document Access:dynamic-page
Network Access:
GitHub and Bitbucket for PR creation; Supabase for subscription management, user tracking, and Stripe checkout creation; Netlify for AI code generation serverless functions; OpenRouter for AI model access; EmailJS for reviewer notifications
Editor Types:
figma
Allowed Domains:
- https://api.bitbucket.org
- https://api.emailjs.com
- https://api.github.com
- https://figma-json-export.netlify.app
- https://openrouter.ai
- https://yhjtvcfjtawarrvoaztg.supabase.co