Introducing the Tokens Studio MCP 🎉

Your design system can now be the source of truth for AI.

Connect AI directly to your tokens, docs, assets and brand data.

No massive prompts. Just your actual system. 👇youtube.com/watch?v=UiyOO9…

Stepping into 2025 with gratitude! 💜

To our team: Your passion and creativity inspire us every day.

To our community: You’re the heartbeat of our mission to revolutionize design systems. 🌍

Excited for the year ahead—new features, collaborations, and breakthroughs await. Let’s make the design world better together. Cheers to 2025! 🥂

#HappyNewYear #DesignInnovation #TokensStudio

Did you know you can visualize your design token connections in Tokens Studio using Token Flow? 🤯

If you're a pro user, you already have access to this awesome feature! Just click the 🔀 icon in the top left of the plugin and see how your design tokens are connected.

Token Flow lets you trace design token connections across different token sets and themes, giving you a clear view of how everything is linked. 🔍

It's a powerful way to manage and understand your design tokens at a glance!

Try out Token Flow with an example token set in this playground file: figma.com/community/file…



Tokens Studio for Figma plugin: tokens.studio/plugin?utm_sou…

Today was new sticker day! 😜 I had the privilege of roasting myself infront of 300 peers then showing the Future Friendly solutions to this problem the @TokensStudio team is working on.

Native Tokens and theme switching in @penpotapp was the big 😍 moment.

🫶 @smashingconf

Creating color gradients in Tokens Studio 🎨

Did you know you can easily create color gradients in Tokens Studio and export them as Figma styles linked to FIgma Variables?

I set up my color gradients in a separate token set, allowing me to export the color scale as Figma variables and the gradients as Figma styles linked to those variables.

Learn more about color gradients here: docs.tokens.studio/token-types/to…



Check out Tokens Studio for Figma plugin: tokens.studio/plugin?utm_sou…

Did you know in Tokens Studio, you can use color modifiers to create a color scale? 🎨



In this example, I demonstrate how to build a custom color scale in Tokens Studio 🧵

Next, I define steps to lighten and darken the colors. Using these steps, I adjust the primary, secondary, and tertiary colors to create a complete color scale. 🌈

I then export this scale as Figma variables, ready to use in any design! 🎨

Explore Tokens Studio for Figma:
tokens.studio/plugin?utm_sou…

Read more about color modifiers here:
docs.tokens.studio/token-types/to…

Did you know you can use math in your design tokens with Tokens Studio? 🤔

Here I take a look at a typescale created by @KrennMarco using some clever math!

Let’s dive into how math makes this possible and how you can apply it to your designs! 🧵

Did you know Tokens Studio supports Font fallbacks in the Plugin for Figma? 🔡

Font fallbacks, a tread🧵↓

Have you tried the color modifier feature in our Figma plugin? You can lighten, darken, or mix colors in your desired color space.
Here I create the hover and active colors by using the darken operation on the default color. Plus, you can export these values to Figma variables!

Learn more: tokens.studio/plugin

Want to hang out with @SamIam_Designs from @TokensStudio and me in #Berlin? 🇩🇪

@intodsconf is coming back to Berlin 🙌

DM me for a spot before we announce the event (usually booked out within 1 hour)