Awesome

alt text

This project is not maintained anymore

Design Token Exporter

Export Design Tokens from your Sketch project.

You can export Design Token file either JSON or YAML format. Token file follow Salesforce Theo spec.
Layers naming format is type/category/tokenname (e.g. color/background-color/bg-light)

Available categories:

Category	Sketch Layer type	Value
`spacing`/`space`/`spacer`	Shape Layer	Layer height
`sizing`/`size`	Shape Layer	Layer height
`font`	Text Layer	Font weight (type=number) / Font Family (type=...)
`font-style`	Text Layer	Font style
`font-weight`	Text Layer	Font weight
`font-size`	Text Layer	Font Size
`line-height`	Text Layer	Line height
`font-family`	Text Layer	Font Family
`border-style`	Shape Layer	Border style
`border-color`	Shape Layer	Border style or Fill color
`radius`	Shape Layer	Radius
`border-radius`	Shape Layer	Radius
`hr-color`	Shape Layer	Fill color
`background-color`	Shape Layer	Fill color
`gradient`	Shape Layer	Fill gradient
`background-gradient`	Shape Layer	Fill gradient
`drop-shadow`	Shape Layer	Shadows
`box-shadow`	Shape Layer	Shadows
`inner-shadow`	Shape Layer	Inner Shadows
`text-color`	Shape Layer or Text Layer	Text color or Fill color
`text-shadow`	Shape Layer or Text Layer	Layer shadow
`time`	Text Layer	Text layer value
`media-query`	Text Layer	Text layer value
`z-index`	Text Layer	Text layer value
`any`	Shape Layer	Fill color (type=color)

Export variables from your Sketch project. You can export colors, text, spacing variables and text styles.

You can choose file format: SCSS, CSS, LESS, JSON, JavaScript (Object/Variables)
You can choose color format: HEX or RGBA
You can choose text value: font family, font size, font weight, line height or letter spacing
You can choose units: Absolute (px) or Relative (rem)
You can choose naming (kebab-case, camelCase or part of layer name)

Features

Export Tokens
Export Color Variables
Export Text Variables
Export Spacing Variables
Export Text Styles

1. Export Tokens

Select layers or one artboard and go to Plugins -> Design Token Exporter -> Export Tokens

alt text

Example output - tokens.yml

props:
  gray_1:
    value: "#fafaf9"
    type: "color"
    category: "gray"
  gradient_background:
    value: "linear-gradient(180deg, #FAFAF9 0%, #F3F2F2 100%)"
    type: "..."
    category: "gradient"
  spacing_m:
    value: "16px"
    type: "number"
    category: "spacing"
  font_size_l:
    value: "24px"
    type: "number"
    category: "font-size"

2. Export Color Variables

Select layers and go to Plugins -> Design Token Exporter -> Export Color Variables

alt text

Example output - colors.scss (SCSS, HEX)

$primary1: #b39ddb;
$primary2: #673ab7;
$primary3: #512da8;
$primary4: #311b92;
$secondary1: #b2dfdb;
$secondary2: #4db6ac;
$secondary3: #009688;
$secondary4: #00796b;
$grey1: #cfd8dc;
$grey2: #90a4ae;
$grey3: #607d8b;
$grey4: #37474f;

3. Export Text Variables

Select layers and go to Plugins -> Design Token Exporter -> Export Text Variables

alt text

Example output - fontsize.json (JSON, Font size, Absolute(px))

{
	"fontSize": {
		"xxl": "64px",
		"xl": "48px",
		"l": "32px",
		"m": "24px",
		"s": "20px",
		"xs": "16px",
		"xxs": "12px"
	}
}

4. Export Spacing Variables

Select layers and go to Plugins -> Design Token Exporter -> Export Spacing Variables

alt text

Example output - spacing.css (CSS, Relative(rem))

:root {
   --spacing-xxs: 0.25rem;
   --spacing-xs: 0.5rem;
   --spacing-s: 1rem;
   --spacing-m: 1.5rem;
   --spacing-l: 3rem;
   --spacing-xl: 4rem;
   --spacing-xxl: 8rem;
}

5. Export Text Styles

Select layers and go to Plugins -> Design Token Exporter -> Export Text Styles

alt text

Example output - textstyles.js (JavaScript Object, Absolute(px))

const textStyles = {
	h1: {
		fontFamily: "Museo Sans",
		fontSize: "64px",
		fontWeight: 300,
		lineHeight: "64px",
		letterSpacing: "normal",
		textTransform: "none",
	},
	h2: {
		fontFamily: "Museo Sans",
		fontSize: "48px",
		fontWeight: 300,
		lineHeight: "48px",
		letterSpacing: "normal",
		textTransform: "none",
	},
	h3: {
		fontFamily: "Museo Sans",
		fontSize: "32px",
		fontWeight: 300,
		lineHeight: "48px",
		letterSpacing: "normal",
		textTransform: "none",
	},
	h4: {
		fontFamily: "Museo Sans",
		fontSize: "24px",
		fontWeight: 500,
		lineHeight: "36px",
		letterSpacing: "normal",
		textTransform: "none",
	},
	title: {
		fontFamily: "Museo Sans",
		fontSize: "20px",
		fontWeight: 700,
		lineHeight: "36px",
		letterSpacing: "1.5px",
		textTransform: "uppercase",
	},
	body: {
		fontFamily: "Museo Sans",
		fontSize: "16px",
		fontWeight: 500,
		lineHeight: "24px",
		letterSpacing: "normal",
		textTransform: "none",
	},
	caption: {
		fontFamily: "Museo Sans",
		fontSize: "12px",
		fontWeight: 500,
		lineHeight: "18px",
		letterSpacing: "normal",
		textTransform: "none",
	},
}

License

This project is licensed under the terms of the MIT license.