Welcome back Figma 💪

Figma fans rejoice! When we released the rebuilt from scratch Stratos Tokens 2021, we promised to bring ”back” Figma support. Back because we had it in the pre-release version of our design token companion app.

The cool thing about this update is that we now, for the first time also offer Windows users the whole workflow going from Figma out to code.

Woo hooo! Welcome back Figma fans

Meanwhile, we simplified the way you create Figma design token projects in Stratos Tokens.

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

Go to Create New Project and select Figma

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.

Jump back to Figma and create a new file. ✅

Get Juan Maguid’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Copy the URL of that Figma file👇

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.

Also, worth noticing, we currently don’t support creating shadow tokens in Figma with the built-in Effects panel. Will come in a future update.

To update the design token tree you will need to press this one

We’re looking into introducing time-saving shortcuts in future versions. 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.

Make sure to never ever break the {designtoken} curly brackets chain or it will stop working

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.

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

Well that’s it and it surely feels great to be back… 😺💪