tokensstudio.bsky.social @tokensstudio.bsky.social · 16/09/2024Learn more about color gradients here: docs.tokens.studio/token-types/... Check out Tokens Studio for Figma plugin: tokens.studio/plugin?utm_s... 000
tokensstudio.bsky.social @tokensstudio.bsky.social · 16/09/2024I 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. 110
tokensstudio.bsky.social @tokensstudio.bsky.social · 16/09/2024In this example, I take the color scale I created and use those as reference to create gradients. 🌈 The format for defining these gradients is: linear-gradient(45deg, color-1 0%, color-2 100%) You can add as many color stops as you want to customize your gradients further 100
tokensstudio.bsky.social @tokensstudio.bsky.social · 16/09/2024Creating color gradients in Tokens Studio 🎨 Did you know you can easily create color gradients in Tokens Studio and export them as Figma styles? 120
tokensstudio.bsky.social @tokensstudio.bsky.social · 12/09/2024Explore Tokens Studio for Figma: tokens.studio/plugin?utm_s... Read more about color modifiers here: docs.tokens.studio/token-types/...tokens.studioTokens StudioWe empower brands and product teams to scale efficiently, enhance collaboration, and innovate with consistency and quality - in design tools and our upcoming platform. Manage your brands at scale - al... 000
tokensstudio.bsky.social @tokensstudio.bsky.social · 12/09/2024Next, 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! 🎨 000
tokensstudio.bsky.social @tokensstudio.bsky.social · 12/09/2024I've organized the brand colors into a token set named 'brand'. 🌟 Then, I create a core/colors token set to define primary, secondary, and tertiary colors. This approach keeps our design tokens structured and adaptable for any project! 🎨 000
tokensstudio.bsky.social @tokensstudio.bsky.social · 12/09/2024Did 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. 400
