Skip to content
This repository has been archived by the owner on Feb 3, 2021. It is now read-only.
/ DesignToken2Code Public archive

Convert design tokens to SCSS variables as code

License

Notifications You must be signed in to change notification settings

m-yoshiro/DesignToken2Code

Repository files navigation

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.

image

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