Reablocks Figma Plugin

About this plugin

Reablocks Figma Plugin

Streamline your design-to-development workflow by converting Figma color variables into Reablocks-compatible format.

🎨 Color Token Generator

1. Extract colors across all token levels (colors tokens, theme level tokens, component-specific tokens)
2. Automatically handle Light and Dark theme variations
3. Generate component-scoped color tokens for consistent theming

🚀 How to Use

1. Run the plugin: Plugins → Reablocks Figma Plugin
2. Choose theme modes: Light, Dark
3. Copy the generated color configuration
4. Paste into your project's token configuration file

Plugin Demo

📋 Prerequisites

1. Organize Figma color variables in a hierarchical structure
2. Set up Light and Dark mode variations for your colors
3. Define component-specific color overrides where needed

For optimal results, structure your design tokens using the Unify Design System methodology

🔗 Perfect for:

1. React developers using Reablocks components
2. Teams maintaining design system consistency
3. Projects requiring Light/Dark theme support
4. Developers using Tailwind CSS

---

Support: GitHub Issues

Docs: Reablocks.dev