The basics 🔤
The fundamental basics of the Stratos Tokens design token framework
Last updated
The fundamental basics of the Stratos Tokens design token framework
Last updated
We have a few essential framework rules to get started using our app with Sketch or Figma. It’s our design tokens 101. After you grasp our framework, you can start learning how you use these together with our built-in markup support for Style Dictionary, and you’ll be auto-translating the raw design token data into more formats than you’ll ever need.
Or you can skip Style Dictionary altogether. This depends solely on how your team wants to implement design tokens into the code base.
When you apply our basic framework rules on layers in Sketch and Figma what you see in our app is the raw design token json data 👇
Direct copy/paste from each design token artboard that you have created
Stand-alone file in the project’s data folder.
Downloadable as NPM-project
The main reason is that many design systems actually use something called theming where you can do lots of magical things with "just" exporting json design tokens. Material-UI is one example and we even built a very simple demo for it.
Also you don't even need a big fancy design system or theme provider to use the design tokens that comes out of Stratos Tokens. Here's a great read about styling React components. Please advice that this article is from 2020 before we introduced our breaking framework change.
That's the whole reason we also have built in support for Style Dictionary.
If you need also to convert the raw design token json data into say for example scss you will need to:
Use our framework rules
Use our built-in Style Dictionary markup support
Install Style Dictionary onto your project folder
Run the build command for Style Dictionary each time you have updated or created new design tokens from Sketch or Figma
This can seem a bit taunting, we truly understand. On the other hand, if you follow all these rules plus use Style Dictionary’s markup you will translate the raw design token data into all these formats by default with one build command:
scss
less
android
iOS
iOS-swift
css
js
json
react-native
sketch-palette
The cool thing with Style Dictionary is that you can add even more so-called Transforms to better fit your current workflow.
The structure of nested Groups in the design document defines the structure of the output JSON data
Rectangles represent a color value based on the rectangle’s fill value
Rectangles without a fill results in border formatting. (you get color, radius, and weight). Pro-tip: Name your rectangle {color}, {radius} or {weight} to get only that value.
Text layers represent text formatting
Text layers with values within { } are evaluated👇
Text nodes with {{ }} values within are considered as Style Dictionary references / shortcuts to be able to reuse values. These are also known as alias tokens.
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 4 above). Kindly note that the layer names need to be camel case (i.e., {fontSize} or {fontFamily})
When creating a new Stratos Tokens project, a project configuration file is created, named nameofmydesignfile.stratosproject.
An identifier, unique to every project
The project name is taken from your design file name
The project's location on your hdd
The path to your Sketch design file on your hdd
The document id of your Figma design file
Can be either SKETCH or FIGMA depending on the design file type
OutputFormat enables the json output to better match popular structures like MaterialUI and Style Dictionary. It can have one of the values (standard or styledictionary). This property can also me omitted from the configuration file - then Stratos Tokens will not apply any special transformation. See examples below:
standard (default)
styledictionary
not specified (property outputFormat is omitted from the configuration file)
All values defined in px such as font size, line height etc in Sketch and Figma is translated into unit-less values (with a default base of 16px). E.g. 72px / 16 = 4.5 This will be translated by Style Dictionary into platform specific units during Style Dictionary's build process.
This prevents Stratos Tokens from converting the designfile's sizes into unit-less sizes. (In case this property is specified Stratos Tokens will ignore property baseFontSizeInPx)
We strongly recommend you reading our articles about how to get started with Style Dictionary and Stratos Tokens. They are based on our experience and are fitted for beginners with a designers' perspective.
When you feel comfortable, you can jump ahead and dive deep into Style Dictionary’s own website. It’s not the easiest thing to grasp, specially if you have no code experience. That's one of the strongest reasons we actually built Stratos Tokens, we felt there is a gap here we can fill.
No worries, we’ll keep writing easy-to-follow articles on all of these topics for a very long time. Keep tuned.
