Colors → Code

Export Colors as organized Stylesheets for Android, CSS, Less, SCSS, Sass, React, ReactNative, Stylus, PostCSS and CSS Crush.

v0.0.1 is compatible with Sketch 3.0.0

Figma Banner

Colors → Code by

The Design System Middleware that allows you to manage, import, convert and sync colors directly from Sketch into your application code.

Export options

• CSS (.css)
• Less (.less)
• SCSS (.scss)
• SASS (.scss)
• Stylus (.styl)
• PostCSS (.css)
• CSS Crush (.css)
• React (.js)
• ReactNative (.js)
• Android (.xml)


Download the plugin
• Un-zip
• Double-click on colorstocode.sketchplugin

How to use the plugin

• Simply run the plugin and select all colors you would like to export. You can then choose an export option and generate your files.

Build and export custom components (with subscription)

Upload custom code and set a file type of choice to then be able to export icons based on your template.

Subscription info

• Export up to 50 icons for free - no subscription required
• Get a 30 day trial period with unlimited exports and full feature set here
• Get more information about here

Good to know

• Choose your file naming-convention wisely as these names might carry over to your codebase.

More Sketch plugins from

Sketch Icons → Code

Thanks, and enjoy it! Your Sugarcode Team

Join the discussion

Download v0.0.1
Usage Activity

No Sketchpacks Relay integration found

  • 43 downloads all–time
  • 4 downloads this week
  • 26 downloads this month
About this plugin

Sugarcode-Team published this plugin 2mos ago.

v0.0.1 is the latest version.

Native updates are supported within