Colors → Code
Export your color tokens directly into any given format to smoothly integrate them into your stack. ---------------------------------------- Direct export options (Export 50 colors for free - no subscription required) • CSS (.css) • Less (.less) • SCSS (.scss) • SASS (.scss) • Stylus (.styl) • PostCSS (.css) • CSS Crush (.css) • React (.js) • ReactNative (.js) • Android (.xml) • iOS (.swift) ---------------------------------------- How to use the plugin • Select elements, choose an export option and click export. ---------------------------------------- How the plugin works • Color: Fill value of the selected element • Name: Name of the selected element • Case Style: The correct casing automatically applies for each framework through special characters. (e.g. "Primary Color" becomes "primaryColor") ---------------------------------------- Good to know • Choose your file naming-convention wisely as these names carry over to your codebase. ---------------------------------------- About icanicon.io • icanicon.io is a Design System Middleware that allows you to manage, import, convert and sync UI tokens and components directly from the most popular Design Tools into your application code. Check it out here: https://icanicon.io/ Thanks, and enjoy it! Your Sugarcode Team.
Plugin Preview
About this plugin
Export your color tokens directly into any given format to smoothly integrate them into your stack. ---------------------------------------- Direct export options (Export 50 colors for free - no subscription required) • CSS (.css) • Less (.less) • SCSS (.scss) • SASS (.scss) • Stylus (.styl) • PostCSS (.css) • CSS Crush (.css) • React (.js) • ReactNative (.js) • Android (.xml) • iOS (.swift) ---------------------------------------- How to use the plugin • Select elements, choose an export option and click export. ---------------------------------------- How the plugin works • Color: Fill value of the selected element • Name: Name of the selected element • Case Style: The correct casing automatically applies for each framework through special characters. (e.g. "Primary Color" becomes "primaryColor") ---------------------------------------- Good to know • Choose your file naming-convention wisely as these names carry over to your codebase. ---------------------------------------- About icanicon.io • icanicon.io is a Design System Middleware that allows you to manage, import, convert and sync UI tokens and components directly from the most popular Design Tools into your application code. Check it out here: https://icanicon.io/ Thanks, and enjoy it! Your Sugarcode Team.
Plugin Details
| Version | 1 |
|---|---|
| Created | April 22, 2020 |
| Last Updated | April 24, 2020 |
| Category | Software development |
| Creator | Moritz Halfmeyer |
| Stats | 3285 installs, 103 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
More Like This
Discover other plugins in the Software development category.
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
Code Snippet Editor
Translate component variants, properties, and more into dynamic code snippets for your design system
GitHub
Connect Design to Code