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
  • What's the breaking change?
  • Suggested updating workflow
  1. Develop
  2. How it works 🧰

Migrating from the pre-release πŸ₯

Since we introduced breaking changes in Stratos Tokens 2021 this is how you get those pre-release projects up and running again πŸ€–πŸ’ͺ

PreviousGoing from demo to licensed product πŸ’΅NextDowngrading Style Dictionary πŸ”™

Last updated 4 years ago

What's the breaking change?

Design token names must now be wrapped in { } – including design token artboard names. That means that all your previous design tokens and design token structure will not work until you:

  1. Add { } to all your design token artboards/frames names

  2. Add { } to all your design token names on these artboards

The great thing about using { } in artboard, layer and groups names for creating your design tokens is that you can mix them with regular design elements. Your code is clean, only populated by delicous JSON design token data where you need it to be.

You can use this approach to give examples of use of your design tokens connected to your design system components. Great Scott!

Suggested updating workflow

This workflow is only for all of you awesome people that have bought our pre-release of Stratos Tokens.

  1. Make a copy of your design document

  2. Create a new Stratos Tokens project in Stratos Tokens 2021

  3. Do a happy dance πŸ‘―β€β™€οΈ

Select all your design tokens, including your artboards and use something like the great for Sketch and Figma to add { } to each design token

Rename It plugin
Add { } to all your design tokens, including the artboards