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.
Breaking News
Since the release of Stratos Tokens 2021 we are now ending our pre-release program. We’re working very hard on implementing Figma support for our totally reworked app but up until then the pre-release version (with Figma support) is 100% free of charge. This does not mean that you will be able to get a free license once we have implemented full Figma support.
Important: Pre-release for this product ends 2021.06.30, after that you will no longer be able to use the app. Make sure to purchase the final version of the app before that.
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…
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.
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 😺👍
7. You can now check the connection to the Figma servers by pressing Check connection in our app. A blue 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 👇
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.
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.
