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 | 3252 installs, 100 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.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)
Export designs to responsive code (React, HTML, Vue, Tailwind, etc) with AI
SkewDat
Skew any layer or group with all layers preserved to edit.