Use Sketch or Figma to create, update and distribute your design tokens & theming code
A single place to create and edit your styles
Reads the raw design file (Sketch) and generates a JSON-structure based on your design data (design tokens)
You can use any setup you want, you have 100% control over your design token & theming structure
Use Stratos Tokens app to output your code
Supports Sketch & Figma files natively, no plugins are needed
Support for Sketch Shared Libraries & Sketch Symbols — manage several brands remotely for your clients
Support for Figma's Auto Layout
Export to NPM
Export to iOS, Android, CSS via our built-in Style Dictionary support*
Requires you to structure your design tokens in your design application as Style Dictionary needs them to be, or the conversion will not work
Here’s a basic yet educational example of how you could set up for following Style Dictionary’s conventions.
Design tokens are design decisions. With our app, you create real code design decisions directly inside your design application, where most of these are actually made.
Here's an example of how you could document your design system with design tokens.
Sketch v68–77 or latest Figma
Stratos Tokens App
Our Sketch assistant (not required but nice to have)
macOS Catalina or Big Sur | Windows 10
NPM & Node.js
Use your preferred external code editor
Stratos Tokens 2021.7.0 — Designed and developed in Stockholm with 💗 by Team Sketch2React ©2021