m-yoshiro / DesignToken2Code

Convert design tokens to SCSS variables as code

DesignToken2Code

DesignToken2Code is a Sketch Plugin that converts shapes color using as design token to code such as scss variables.

This plugin was created using skpm. For a detailed explanation on how things work, checkout the skpm Readme.

Why?

I want a workflow that make easy to maintain relation between design and code.

More detail (in Japanese): https://note.mu/yoshizukin/n/n7c48af8cdbee

Installation

• Download
• Install with Sketch Runner
  With Sketch Runner, just go to the install command and search for DesignToken2Code. Runner allows you to manage plugins and do much more to speed up your workflow in Sketch. Download Runner here.

Usage

1. Add artboard and name Tokens.
2. Add shapes in Tokens Artboard.
3. Rename shapes $color-xxx.(xxx is specific words which you need)
4. Run DesignToken2Code command.

📦 Sample data

Development

See development.md.

LICENSE

MIT