Tokens Studio

[Tokens Studio @TokensStudio]

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. 👇https://t.co/M3BQ8hWOju

[Tokens Studio @TokensStudio]

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

[Tokens Studio @TokensStudio]

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. 🌍

[Tokens Studio @TokensStudio]

Try out Token Flow with an example token set in this playground file: https://t.co/8IE3dREq3p



Tokens Studio for Figma plugin: https://t.co/uVvu33R0qd

[Tokens Studio @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.

[Tokens Studio @TokensStudio]

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!

[Sam I am 🫶 @SamIam_Designs]

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

[Tokens Studio @TokensStudio]

Learn more about color gradients here: https://t.co/VgguxPSFdK



Check out Tokens Studio for Figma plugin: https://t.co/uVvu33RyfL

[Tokens Studio @TokensStudio]

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?

[Tokens Studio @TokensStudio]

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.

[Tokens Studio @TokensStudio]

Explore Tokens Studio for Figma:
https://t.co/uVvu33RyfL

Read more about color modifiers here:
https://t.co/XOg30bMs2Q

[Tokens Studio @TokensStudio]

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 🧵

[Tokens Studio @TokensStudio]

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! 🎨

[Esther Cheran 🌈 @EstherCheran]

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! 🧵

[Esther Cheran 🌈 @EstherCheran]

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

Font fallbacks, a tread🧵↓

[Tokens Studio @TokensStudio]

Learn more: https://t.co/jwXvMivsxK

[Tokens Studio @TokensStudio]

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!

[Tokens Studio @TokensStudio]

@iamsteelen The graph engine is way more advanced, it's modifiers on steroids :)