Styles to Variables

About this plugin

Styles to Variables is a Figma plugin designed to empower design system creators. It seamlessly converts your existing local styles into Figma's robust design tokens, known as "Variables." This automation simplifies the management and organization of your Figma projects, making your design workflow more dynamic and efficient.

How to Use

1. Run the Plugin: Start the plugin to begin the conversion process.
2. Choose Collection: You have the option to select an existing variable collection or create a new one. If you choose an existing collection, you can also specify a mode.
3. Specify Mode: If you're using an existing collection, you can either update an existing mode or create a new one. Simply type the mode name; the plugin will automatically detect if it should update or create.
4. Execute: Click the "Convert" button to start the conversion. The plugin will convert local styles into variables and place them in the specified collection and mode.
5. Review: After the conversion is complete, review the variable collection and modes to ensure they meet your requirements.

Core Features

• Local Style Conversion: Automatically converts all local styles into Figma Variables.
• Collection Management: Choose to add variables to an existing collection or create a new one.
• Preservation: Maintains the original names, color values and descriptions of your local styles during conversion.

Key Benefits

• Efficiency: Streamline your design process by automating the conversion of local styles to variables.
• Flexibility: Choose between adding to an existing collection or creating a new one, giving you more control over your design tokens.
• Integrity: The plugin preserves the original names and values, ensuring a smooth transition to a token-based system.
• User-Friendly: With its intuitive UI and straightforward options, the plugin is accessible for users of all skill levels.