All Projects β†’ m-yoshiro β†’ DesignToken2Code

m-yoshiro / DesignToken2Code

Licence: MIT license
Convert design tokens to SCSS variables as code

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to DesignToken2Code

sketch-debugger
πŸ› Debugger Plugin and Utils for Sketch Plugin Developers
Stars: ✭ 16 (+0%)
Mutual labels:  sketch, sketch-plugin
sketch-align-layers-middle-no-bounds
sketch align layers middle no bounds from parent layer
Stars: ✭ 13 (-18.75%)
Mutual labels:  sketch, sketch-plugin
sketchplugin-swift-color
A Sketch Plugin for generating UIColor and NSColor initializer Swift code from fill color of selected layers.
Stars: ✭ 58 (+262.5%)
Mutual labels:  sketch, sketch-plugin
Sketch-Highlighter
Sketch plugin that generates highlights for selected text layers
Stars: ✭ 41 (+156.25%)
Mutual labels:  sketch, sketch-plugin
symbol-namer
A plugin to help you rename symbol instances. Rename symbol instances to their override text values, or set and use a default name.
Stars: ✭ 17 (+6.25%)
Mutual labels:  sketch, sketch-plugin
RemoveAllGuides
Plugin for Sketch App.
Stars: ✭ 21 (+31.25%)
Mutual labels:  sketch, sketch-plugin
Sketch-SelectPlus
Sketch plugin to select different layers of specific types. It basically selects everything!
Stars: ✭ 20 (+25%)
Mutual labels:  sketch, sketch-plugin
library-styles-sync
sync shared styles from a Sketch Library to the current document
Stars: ✭ 70 (+337.5%)
Mutual labels:  sketch, sketch-plugin
sketch-data-faker
A Sketch plugin providing 130+ types of smart placeholder content for your mockups from Faker.js and other sources.
Stars: ✭ 62 (+287.5%)
Mutual labels:  sketch, sketch-plugin
ForeignIpsum
Generate text for your mockups in multiple languages Β―\_(ツ)_/Β―
Stars: ✭ 43 (+168.75%)
Mutual labels:  sketch, sketch-plugin
Sketch-Resize-Commands
A Sketch plugin that lets you resize and reposition objects by using simple arithmetic commands, like `b+20,lr+20`. Multiple objects are supported.
Stars: ✭ 32 (+100%)
Mutual labels:  sketch, sketch-plugin
print-export-sketchplugin
Exports a PDF for printing
Stars: ✭ 85 (+431.25%)
Mutual labels:  sketch, sketch-plugin
Sketch-Navigator
"Sketch Navigator lets you quickly jump to any specific artboard without having to scan the all too easily cluttered Layers List in the app’s left-hand pane." - Khoi Vinh
Stars: ✭ 160 (+900%)
Mutual labels:  sketch, sketch-plugin
context-sketch-plugin
Count character, words, and paragraphs from a text layer easily inside Sketch!
Stars: ✭ 13 (-18.75%)
Mutual labels:  sketch, sketch-plugin
sketch-pages-to-folders
Sketch plugin that exports all the artboards of a Sketch file into folders, which are based on the pages of the Sketch file.
Stars: ✭ 56 (+250%)
Mutual labels:  sketch, sketch-plugin
sketch-flip-size
πŸ” FlipSize is a small Sketch plugin to flip the size of a shape, layer or artboard
Stars: ✭ 16 (+0%)
Mutual labels:  sketch, sketch-plugin
library-replacer-sketchplugin
A Sketch plugin that allows you to replace a library in a Sketch file
Stars: ✭ 19 (+18.75%)
Mutual labels:  sketch, sketch-plugin
uiLogos-sketch-plugin
Sketch plugin to Insert professionally designed dummy logos of companies and 190+ country flag into SketchApp
Stars: ✭ 26 (+62.5%)
Mutual labels:  sketch, sketch-plugin
Sketch-to-Clickthrough-HTML
Sketch plugin for creating a click-through HTML prototype
Stars: ✭ 75 (+368.75%)
Mutual labels:  sketch, sketch-plugin
Smile-Sketch
ζ–‡ζ‘£εΏ«ι€Ÿζ•΄η†ζŽ’εΊοΌŒθ΅„ζΊε―Όε…₯δΈŽε―Όε‡Ί
Stars: ✭ 14 (-12.5%)
Mutual labels:  sketch, sketch-plugin

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].