User Guide

What is Design System Sync?

Design System Sync is a Figma plugin that automatically exports your design tokens (variables) and components to GitHub or Bitbucket, keeping your code and design perfectly in sync.

Getting Started

GitHub Setup

Create a Personal Access Token

1. Go to GitHub Settings → Tokens
2. Click "Generate new token (classic)"
3. Name it: Design System Sync
4. Select scopes:
   • ✅ repo (Full control of private repositories)
   • ✅ workflow (Update GitHub Actions workflows)
5. Click "Generate token"
6. Copy the token (you won't see it again!)

Configure in Plugin

1. Go to GitHub Tab
2. Paste your Personal Access Token
3. Enter repository: username/repo-name
4. Choose base branch (usually main or master)
5. Click "Export to GitHub"

Bitbucket Setup

Create an API Token

1. Go to Atlassian Account → Security → API Tokens
2. Click "Create API token"
3. Name it: Design System Sync
4. Click "Create"
5. Copy the token (you won't see it again!)
6. Note: This token has full access to Bitbucket

Configure in Plugin

1. Go to Bitbucket Tab
2. Enter your Bitbucket username
3. Paste your API Token
4. Enter workspace name
5. Enter repository name
6. Choose base branch
7. Click "Export to Bitbucket"

Export Formats

Variables (Design Tokens)

Exported as JSON with multiple format options:

• JSON: Raw token data
• CSS Variables: --color-primary: #0066ff;
• Style Dictionary: DTCG-compliant format for design tokens
• React Code Copy: Copy component code for React

Components

Exported as structured JSON with:

• Component metadata (name, description, URL)
• All variants and properties
• Style information
• Change history

Subscription Plans

Free Tier

• 5 exports per month
• Access to all features
• Community support

Pro Tier - $8.33/month (billed annually at $100/year - Save 17%)

• ✨ Unlimited exports
• ✨ Priority support
• ✨ Advanced export options
• ✨ Code comparison and review tools
• ✨ React code copy functionality

How to Upgrade

1. Click "Upgrade to Pro" in the plugin
2. Choose monthly or annual plan
3. Complete payment through Stripe
4. Plugin automatically detects upgrade
5. Start using unlimited exports immediately

Manage Subscription

After upgrading, click "My Account" to:

• View subscription status
• Update payment method
• Change plan (monthly ↔ annual)
• Cancel subscription
• View invoices

Troubleshooting

GitHub Token Not Working

Bitbucket Token Not Working

No Variables Detected

Make sure your Figma file has:

• Design variables created (not just styles)
• Variables published in a library (for shared files)
• You have access to view the variables

Export Limit Reached

Free tier allows 5 exports per month. To continue:

• Wait until next month (resets automatically)
• Upgrade to Pro for unlimited exports

Payment Not Processing

Plugin Not Detecting Upgrade

After upgrading:

1. Close and reopen the plugin
2. Wait 10-30 seconds for webhook to process
3. Check "My Account" shows Pro status
4. Contact support if issue persists

Frequently Asked Questions

Is my data secure?

Yes! We use industry-standard encryption. Your design data is only exported to repositories you specify. Payment info is handled securely by Stripe (we never see your credit card).

Can I use this with private repositories?

Absolutely! The plugin works with both public and private repositories. Just ensure your access token/password has the correct permissions.

What happens to my subscription if I cancel?

You keep Pro access until the end of your billing period. After that, you return to the free tier (5 exports/month). Your data is kept for 30 days in case you resubscribe.

Can I export to multiple repositories?

Yes! You can export to different GitHub and Bitbucket repositories. Just update the repository name before each export.

Do I need to review Pull Requests before merging?

Yes! Always review the generated PR before merging. The plugin exports what it detects, but you should verify the changes are correct.

How do I get support?

• Pro users: Priority support via email
• All users: GitHub Issues
• Email: alexanderburgouk82@gmail.com

Can I get a refund?

Yes! We offer a 30-day money-back guarantee. If you're not satisfied, contact us within 30 days of your purchase for a full refund.

Best Practices

Organize Your Variables

• Use consistent naming: color/primary, spacing/md
• Group related variables in collections
• Add descriptions to document purpose

Before Exporting

• Review changes in the Scan tab
• Ensure variable names are production-ready
• Check component variants are correct
• Test in a development branch first

After Exporting

• Review the Pull Request carefully
• Run your CI/CD tests
• Check for breaking changes
• Update documentation if needed

Security

• Never share your access tokens
• Use tokens with minimum required permissions
• Rotate tokens periodically
• Revoke tokens you're not using

Need More Help?

We're here to help you succeed!

• GitHub Issues: Report bugs or request features
• Email Support: alexanderburgouk82@gmail.com
• Documentation: Full documentation