Tokens Studio

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

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

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…

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!

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.

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

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

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

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.

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?

Explore Tokens Studio for Figma:
tokens.studio/plugin?utm_sou… Read more about color modifiers here:
docs.tokens.studio/token-types/to…

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

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 🧵

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

Learn more: tokens.studio/plugin

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!

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

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)