StylesBot Sync

About this plugin

Sync your StylesBot style guides directly to Figma collections, variables, color styles, text styles, and button components with one click.

🎨 Features:

• One-click sync from StylesBot to Figma

• Creates organized Variable Collections with hierarchical naming

• Syncs colors, typography, and button components

• Updates existing variables intelligently (no duplicates)

• Creates visual style guide preview with Colors & Shades, Typography, and Buttons sections

• Real-time sync progress with detailed feedback

• Smart error handling with clear messages

🚀 How to use:

1. Enable "Figma Sync" in your StylesBot style guide settings

2. Copy your style guide URL from StylesBot

3. Open this plugin in Figma

4. Paste your style guide URL

5. Choose to create a new collection or update an existing one

6. Click "Push to Figma"

7. Your variables, styles, and components are now in Figma!

✨ What gets synced:

• Color Variables (with shades from -90 to -10)

• Typography Variables (font families, sizes, line heights, letter spacing)

• Button Variables (border radius, padding, font settings)

• Color Styles (Paint Styles) bound to variables

• Text Styles bound to typography variables

• Button Component Sets with variants (Solid/Outline, Default/Hover)

💡 Perfect for:

• Design systems

• Brand guidelines

• Multi-brand projects

• Design token workflows

• Team collaboration

🔒 Privacy & Security:

• No data storage

• No user tracking

• Direct communication with StylesBot only

• Requires explicit enablement in StylesBot

Requires an active StylesBot account. Visit stylesbot.app to create style guides.

Watch Preview Video