Tutorial: How to get started with Figma projects and design tokens

How to setup working with your design tokens & themes from Figma

Everything you need to know about how to get started working with your design tokens & themes straight from inside Figma.

On with the show then

First of all, you should really read these articles first, they are for Sketch, but the setup inside the design application is identical for all our supported apps (Sketch, Figma & even InVision Studio). It’s just the actual setting up before, that differs a bit. Specially with Figma since everything Figma is in the cloud.

Also, most of us are very confused around the whole concept of design tokens altogether. What the heck are they anyway? I did a presentation internally at my company a couple of weeks ago. Here’s some slides from the prez that may or may not help you.

So let’s just assume that you have a good grasp about the total awesomeness of working with design tokens, and how you and your team can benefit from it. So cut the crap now Juan and show us the money man.

Step 0 — Talk to your developers

Yikes, really? Do I really need to talk to them? Why oooh why?!!!!

Here’s why. Working with design tokens is 100% related to working smarter and closer to your developers. If you setup this correctly you’ll be helping them with stuff they actually don’t care about but you, as a designer, hold up there amongst the most important things in this Universe. Things like color, fonts, spacing between items, the correct color and opacity of that drop shadow that makes everything pop so nicely. Stuff like that. Stuff that makes your UI pop like ?

What you’re effectively getting is a single place to create and edit your styles that you connect to your real code components, that are done by your developers. So you get the best of two worlds…

This demo is exactly the same for Sketch, Figma and InVision Studio

Step 1 — Prepare your tokens inside of Figma

Once again, this step is identical inside all of the apps we currently support (Sketch, Figma and InVision Studio)

Since this is an article and not a 1000 page novella I already have my tokens in place, of course. I’m like the TV Chef ta-da.

You can download my very simple .fig file from here, it’s going to be included in our next Stratos WFH Edition Bundle coming out really soon.

Why Material?

We have based our design tokens demo on Material-UI since we found a great playground for testing them. Everything that you can test, show to people in real-time usually is great tutorial material. Also, Material is super popular, heavily documented and has millions of components. All of which you can control the styling of, if you setup everything correctly, straight from Figma. Or Sketch. Or Studio.

Yes, I think you have understood the power of this by now, I’ll stop repeating myself.

Step 2 — Create your tokens project in Stratos Tokens

This is an essential piece of this pussel, it’s now that all the things you have done inside of Figma actually are translated into design data.

Open up Stratos Tokens app
Click on the Figma tab under Create New Project
Give you’re project a great name
Create your project folder
Find your Figma Project ID, easiest is to open up the file in your browser as I did in my tutorial

6. Now it’s time to create your Figma Access Token. No worries, you only need to do this once, our app remembers the token after first use.

Here’s where you create your Access Tokens in Figma

Notice: If you want to unregister the Personal Access Token you go to Help in our app and choose Unregister Figma Access token. But don’t do that right now or this tutorial will be useless to you

Here’s where you unregister the Access Tokens when not in use anymore

7. You can now check the connection to the Figma servers by pressing Check connection in our app. A blueish checkmark should appear.

8. Now you’re ready to hit that beautiful purple button that says “Create New Project” Boom!

If you’ve done your job it should look something like this

Ahhh yeah look at all that sweet JSON design data

Awesome! You now have a live connection between your Figma file and Stratos Tokens, everything that you add and change inside Figma will be reflected here.

Hit that Reload button. Do it. Doooooooo it.

Important note Since Figma files lives on Figmas servers (and not your HD) you will need to refresh manually inside of Stratos Tokens every time that you want to export your tokens, or test them in a theme playground.

Important Note 2 We have hot-reload for Sketch and InVision Studio files.

Same same but in video format

That’s all folks! Stratos Tokens is now available via our Stratos Beta Program for a very low price, so low you can’t afford to miss it.