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: https://t.co/8IE3dREq3pβ¨β¨
Tokens Studio for Figma plugin: https://t.co/uVvu33R0qd
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!
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.
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! π¨
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! π§΅
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!