Sketch2react.io Docs
πŸ“—Stay on top, read our blog πŸ˜„πŸ’ͺ
Stratos Tokens
Stratos Tokens
  • Welcome to Stratos Tokens 🏑
  • Develop
    • The basics πŸ”€
    • How it works 🧰
      • Going from demo to licensed product πŸ’΅
      • Migrating from the pre-release πŸ₯
      • Downgrading Style Dictionary πŸ”™
    • Releases ✍️
  • Learn
    • Tutorials & Articles πŸ“˜
    • Join our Slack πŸ‘―β€β™‚οΈ
    • Download Resources 🎁
  • workflow
    • 3rd Party Plugins & Apps βš™οΈ
Powered by GitBook
On this page
  • About Style Dictionary
  • How to create design tokens
  • Getting started with Sketch & Figma
  • For Sketch
  • For Figma
  • Get your Figma Access Token
  • In Stratos Tokens 2021
  • Important thing about Figma files
  • When using Auto Layout
  • So, now what?
  • NPM project? Oooh, tell me more…
  • Downloading
  • Naming your NPM project
  • Uploading & publishing
  • Example usage
  1. Develop

How it works 🧰

Stratos Tokens is a very powerful way of working directly from your design application with design tokens and themes.

PreviousThe basics πŸ”€NextGoing from demo to licensed product πŸ’΅

Last updated 3 years ago

TLDR; Stratos Tokens App reads the raw design file (no plugins) and generates a design token file (JSON-format). This file can then be either stored directly in your codebase or uploaded to repositories like NPMjs to be consumed by any codebase on any platform. And it’s 1:1 with your design file!

You visually represent your Design Tokens in a design tool, and are currently supported and we have macOS and Windows versions of our app.

The Stratos Tokens App reads your design file (without plugins, yupp, just like that) and generates a file with a JSON structure containing your design data. Then you either save the design data file (Design Tokens) or upload it to a repository like NPMjs.

The structure of the output JSON is a direct reflection of the structure in your design document.

πŸ€–πŸ‘‰ It’s up to you to create your own structure.

Please note that above is just an example of how to structure your design tokens & theming. It’s up to you to create your own structure.

About Style Dictionary

How to create design tokens

Basically you use shapes, lines, layer groups & text nodes to output design token data. Here's a few great things to know πŸ€–πŸ‘‡

  1. Design token names must be wrapped in { } – including your design token artboards

  2. The structure of nested Groups (Sidebar = Sketch, Layers Panel = Figma) in the design document defines the structure of the output JSON data

  3. Rectangles represent a color value based of the rectangle’s fill value

  4. Rectangles without a fill results in border formatting

  5. Lines represent width, perfect for defining breakpoints, spacing & padding

  6. Text layers represent text formatting

  7. Text layers with values within { } are evaluated. Perfect for defining things like font families, transitions & animation timing

  8. Text nodes with values within {{ }} are considered as Style Dictionary references / variables to be able to reuse values.

  9. Text layers with names that matches a CSS property will have only that CSS property’s value (as opposed to plain Text layers which will contain all CSS properties; see bullet 6 above)

Getting started with Sketch & Figma

For Sketch

  1. Start Sketch app and Create a New document

  2. Create one artboard, the size does not matter

  3. Give your artboard a simple name, lower case only, no blank spaces between words e.g {great-artboard-name}

  4. Save your Sketch file to your HD

  5. Drag and drop that Sketch file onto our app like in the video below

  6. You are now ready to start creating design tokens straight from inside Sketch app

For Figma

Get your Figma Access Token

  1. Go to your Figma Account Settings

  2. Scroll down to the bit where it says Personal access tokens

  3. Create a new personal access token

  4. Copy the access token to notes or something similar

In Stratos Tokens 2021

  1. Go to Create New Project and select Figma

2. Paste your newly created Figma access token, no worries you only need to do this once, and it can be revoked if needed, more on that later.

  1. Jump back to Figma and create a new file

  2. Copy the URL of that Figma file

3. Paste the Figma file URL in our app πŸ‘‰ Figma project url

Now we are ready to get going! Press Create Figma project

Important thing about Figma files

Figma files work differently than Sketch files in the sense that Figma doesn’t offer so called hot-reloading. Every time you do changes inside Figma you will need to press the little reload icon to update the design token tree.

In a future update, we’ll introduce time-saving shortcuts for this and other semi annoying things. Who doesn’t want extra seconds in life?

When using Auto Layout

If you're using the awesome Auto Layout function in Figma make sure not to break the naming chain or you will break the design token output in Stratos Tokens.

Design token names must be wrapped in { } – including your design token artboards

Do Auto Layout like thisπŸ‘‡

So, now what?

Now you need to learn how our app and design token framework works, what rules you need to follow, how you can set up things, if you’re going to follow our built-in Style Dictionary support or not. We give you the choice.

NPM project? Oooh, tell me more…

Ok, sure. There are a few steps, but stay with us, it’s worth it. In the example below our new design tokens NPM package is named stratos-designtokens-demo. You can name yours whatever you like.πŸ‘πŸ˜„

If you don’t have the time/patience to read through all the steps; here’s the final example package install command:

npm install β€” save stratos-designtokens-demo

Downloading

  1. On the Download tab in Stratos Tokens App, expand the Design tokens NPM project and hit the Download NPM button

  2. Store the project anywhere you like

Naming your NPM project

  1. Open the file package.json in your downloaded NPM project’s folder using your favorite code editor

  2. Enter a name on line 2 (this will be the name of the NPM package)

Uploading & publishing

  1. Open Terminal App

  2. Go to your downloaded NPM project’s folder (we named ours npmDTDemo)

  3. If this is your first time uploading a package to NPMjs you need to login

  4. Enter npm install (a bunch of texts will flash by, no worries, this is ok)

  5. Enter npm run build (more text will flash by, this is also ok)

  6. Enter npm publish (even more ok text)

Your design tokens are now available for any codebase on any platform! And it’s 1:1 with your Design tool’s design document!

Feel free to download and test the design tokens example here:

npm install --save stratos-designtokens-demo

Example usage

React

You can of course use this for other frameworks and platforms as well (i.e. React native, Vue.js, Angular...). And with a little help from our built-in Style Dictionary support you can also use your tokens for Android, Swift… πŸ€–πŸ’ͺ

We support markup which is a great build system for outputting design tokens to a wide range of different formats. Support does not mean you can set this up however you want. You will need to follow Style Dictionary's structure and naming conventions for the auto-translation to do its magic. A great article to get you started understanding Style Dictionary is this one.

A great starting point is reading . If you’re curious about learning how to setup for Style Dictionary we suggest you read .

Enter npm login and enter your credentials (you need an account at )

Style Dictionary
this article
this article
www.npmjs.com
Sketch
Figma
LogoLet’s get practical with design tokens, Sketch2React BlogSketch2React Blog
Generated JSON-structure in Stratos Tokens App
To update the design token tree you will need to press this one
Make sure to never ever break the {designtoken} curly brackets chain or it will stop working
It’s a big button, you can’t miss it. πŸ˜ΊπŸ‘
Your downloaded NPM project’s package.json