Tokens Studio (Figma Tokens)
Tokens Studio (Figma Tokens)
Tokens Studio (Figma Tokens)
Use the power of design tokens in Figma.
Save time, have more control, and effortlessly manage and switch between multiple themes. Control your design tokens from one dashboard, all linked to one source of truth.
Пікірлер
Penpot 🔥🔥🔥
thank you!
very cool! when will it be available in penpot?
Please focus on the tokens studio integration😍 on the main website
Can I try this version this weekend?
Excellent to see the alignment with 3D tools. As UI evolves to more immersive experiences, TS could evolve too from current UIs in Flat design tools to more complex and rich 3D / Augmented experiences.
This is very comprehensive, but I am simply looking for how to set it up and deploy it across different projects. Seems hard to find a simple video walking you through how to use it.
🎯 Key points for quick navigation: 00:15 *🚀 The team finally confirms they are live after some initial technical issues.* 00:57 *🎤 Sam joins the live stream despite being sick and discusses her preference for large amounts of caffeine compared to Europe’s small coffee servings.* 02:07 *🔊 The team is trying a different streaming setup to avoid audio issues and plans to be more streamlined with topics.* 03:11 *🚀 Team members discuss which emoji symbolizes them, highlighting the rocket and a wizard hat.* 04:32 *🧠 The team talks about the importance of imagination and creativity in children, citing how it helps with ideation.* 06:42 *🔗 They encourage community members to provide feedback on Feature Base, particularly on a theme switcher proposal.* 07:36 *🎨 The team discusses a new proposal for supporting various color spaces in design tokens, highlighting its flexibility.* 09:55 *📊 The team highlights the importance of community feedback on the proposed new format for color tokens.* 11:03 *🌈 The new format supports multiple color spaces and allows for more flexibility, aiming to cover diverse use cases.* 13:31 *🔄 They discuss potential challenges and the need for tools to help transition between old and new formats.* 15:16 *🛠 Feedback is requested on the new color token format, especially regarding its practicality and any unsupported use cases.* 16:41 *⚙ Discussions about managing legacy tokens and new formats highlight the need for seamless transitions and possibly automatic upgrades.* 18:05 *🎨 The potential complexities of importing and merging token formats are discussed, emphasizing the importance of tooling to simplify the process.* 20:49 *🖨 The team laments the lack of print media support in design tokens, advocating for inclusion to cover both digital and print needs.* 22:52 *🌿 The team discusses challenges with color vibrancy across different media like print and digital.* 23:20 *📏 Including PPI in dimension tokens is essential for accurate print output.* 23:46 *🧮 Adding units like pixels to numbers in tokens requires stringifying, impacting data handling.* 24:27 *🔄 Combining numbers with strings is problematic, requiring consistent data types in pipelines.* 25:07 *🔍 Using typing in the graph engine ensures data integrity and prevents errors.* 25:53 *🤔 The complexity of math equations in tokens is controversial; better handled outside the token spec.* 27:23 *💡 Future proposals might include utility tokens for computational purposes, separating logic from data.* 29:42 *🧩 Extensions in the token spec allow for additional metadata, aiding in complex calculations.* 31:06 *⚙ A simple token format is preferred for clarity, with complex computations handled separately.* 32:56 *🌐 The graph engine offers a versatile tool for managing design tokens across various platforms.* 34:36 *🌍 The graph engine is not limited to Figma; it aims to support multiple platforms for broader applicability.* 37:06 *🧠 The graph engine captures the decision-making process, helping maintain consistency across projects.* 40:22 *🎨 The harmonic series approach in type scaling allows for more fluid and adaptable typography.* 44:10 *✏ The clamp function in CSS is essential for maintaining legibility in fluid typography.* 45:18 *📐 A more balanced type scale can be achieved with five steps in between each value.* 45:33 *📏 The clamp function considers viewport width, ensuring fluid typography across screen sizes.* 46:13 *📊 The example demonstrates fluid typography scaling with changes in viewport size.* 48:23 *🔄 The current method requires multiple calculations and creates heavy system demands.* 50:28 *🧩 Maintaining a single-source theme is elegant and simplifies maintenance, especially with breakpoint theming.* 52:13 *🎨 The graph engine interface supports creating inputs and outputs for typography scaling.* 53:02 *🔄 Connecting edges between inputs and outputs visualizes data flow and ensures type consistency.* 55:29 *🧠 Typing ensures data integrity, preventing errors by maintaining expected data types.* 57:11 *🛠 The interface allows for adding helper videos and tooltips to assist users in understanding nodes and functions.* 58:52 *🔧 An array map processes each item in an array, creating subgraphs for more complex operations.* 01:00:28 *📦 Subgraphs package multiple operations into a single unit, allowing for organized and nested logic.* 01:06:33 *🧩 Subgraphs allow for organizing complex logic within a graph, simplifying the process.* 01:07:12 *🔠 Design tokens need to be in JSON format, requiring strings instead of numbers.* 01:08:58 *🔧 Converting numbers to strings enables connecting values within the design token node.* 01:10:14 *🧪 Force execution runs the graph through all array items, outputting a list of tokens.* 01:11:44 *💡 Naming tokens effectively, like using "P" for positive and "N" for negative, helps maintain clarity.* 01:13:23 *👀 The new UI allows viewing and working on the main graph and subgraph simultaneously.* 01:15:18 *🔄 Adjusting logic for correct naming ensures tokens are accurately labeled.* 01:18:01 *🔍 Debugging the graph helps refine logic and correct naming issues, like handling "minus zero."* 01:23:24 *🔧 Using an array map and join array functions simplifies combining and naming token components.* 01:26:10 *📱 Introducing fluid calculations for viewport width creates adaptable token values based on screen size.* 01:28:02 *📐 The graph engine supports creating fluid tokens that adapt to different viewports, demonstrating flexibility.* 01:29:23 *🌐 The graph engine allows for dynamic calculation of tokens, which can be pushed into tools like Token Studio.* 01:29:50 *🛠 Future plans include a plugin for direct connection from the graph engine to create Figma variables.* 01:30:37 *🧠 The demonstration shows the potential of the graph engine but also highlights areas for improvement in automation and naming.* 01:31:31 *💬 The team encourages feedback to simplify and improve the tool, aiming to make it more intuitive.* 01:32:12 *🎯 The goal is to make the tool powerful yet user-friendly, accommodating different user personas like designers and engineers.* 01:34:26 *🏗 Future capabilities include building design system architectures and sharing them in a marketplace.* 01:35:26 *🚀 The team is excited about the potential of the graph engine and seeks community input for further development.* 01:36:17 *🔍 The graph engine can be used to generate color palettes dynamically, which is great for data visualization.* 01:37:52 *📦 Subgraphs, or modules, can be reused and shared, enhancing efficiency and collaboration.* 01:38:59 *🛠 The tool supports saving logic flows, allowing users to reuse and share them as modules.* 01:40:14 *🌐 There are multiple ways to export component CSS variables, including through style dictionary or direct integration with a styling engine.* 01:41:27 *🔄 Future features include runtime styling adjustments based on context, enhancing component adaptability.* 01:42:53 *🧩 Reusable subgraphs or modules can be stored and shared, promoting efficient workflows.* 01:45:01 *📦 The future vision includes a marketplace for sharing pre-defined graph modules for various use cases.* 01:45:52 *🔧 V2 of the graph editor is expected to be released in a week, providing a stable exploration experience.* 01:47:01 *🛠 RC7 of Token Studio 2.0 includes fixes for second screen support, although some bugs are still present.* 01:47:55 *💡 Upcoming features in Token Studio include non-local variables and component-level tokens for enhanced design flexibility.* 01:50:53 *📝 The team is working on new documentation and video clips for V2 to help users learn the tool and design concepts.* 01:51:20 *🎓 Token Studio is developing courses focused on design systems and design tokens, with more details to come soon.* 01:52:01 *📚 The courses will likely be cohort-style, allowing for community interaction and feedback on projects.* 01:53:36 *🌍 The team is considering different time slots for sessions to accommodate various time zones.* 01:54:39 *🌐 The discussion includes planning for better time zone coverage for global accessibility.* 01:57:06 *🎥 Feedback on stream quality and suggestions for improvement are welcomed.* 01:58:52 *🖥 The team is working on quality-of-life improvements for the graph engine, such as quick connect for viewports.* 02:00:08 *🎛 Future plans include connecting the graph engine with physical devices like stream decks for enhanced control.* 02:03:56 *🔄 The team is exploring intuitive navigation options within the graph engine, like long-press actions and dedicated physical keyboards.* 02:04:22 *⚙ Long-press actions and physical knobs are being considered for more intuitive graph engine control.* 02:05:01 *🔧 The idea of a physical control box with knobs and levers connected to the graph engine is discussed for a more tactile user experience.*
this would be awseome if it could visual a component
Thank you! this is exactly what was missing in all other videos / articles
You create good content but why so much new-gen people vocal fry? Does it makes you seem smarter or what? Nothing personal I was just wondering. Many people can't stand that speech gimmick.
nice!
Sam is a pro 🙏
is a one hour video the best way we can do to provide guidance on how to set up these token workflows? Come on guys, we can do better, let's make something more objective and concise, I appreciate the time people dedicated to this talk, but still... we can have something shorter and more targeted
This is great! Is there any content out there about creating those "Platform" sets?
Is it just me or this is actually just sooo confusing?
Thank you for this! Can I get an invite for tokens flow? 😭
How to see tokens flow? It says this is invite-only thing. How the get that invite? I desperately need some visualisation
Just guessing but ; are you dutch?? 😅 Q; is this one still relevant? I want to know how to start using figma + token studio 😊
will this work in react native?
Good to see that it's node-based. I love the node-based approach in general and hope you take inspiration from software like Houdini, Unreal's Blueprint, Origami, Blender, Substance Designer, etc. etc.
Great talk. Could you send the link to check the Tailwind issue as asked at 01:08:28 please?
Any way how to reset tokens. I mistakenly clicked on load example and now I don't see any option to reset it or create a new design token system. went to see the documentation and followed it but the console feedback was figma is not defined. anyone?
how to create a referenced color with opacity?
did you find the answer?
I tried same example, I got 2 issues, 1. Width is not matching. 2. There is no mode selection (light - dark) for non-local
Is create variabel is disable now, i cant acess
Hey! You need to be a Pro user to gain access to the create variables feature. Once a pro user, you also need to setup themes to be able to create variables. You can go through our docs page which briefly describes this process: docs.tokens.studio/variables/creating-variables . - Keegan
why now create variables is disabled
Please make a video about creating variables with the plugin
It seems if you don't have the paid version of figma, the themes eg light and dark mode created with the plugins wouldn't show right
The plugin's feature or not dependent on you Figma plan. The only feature that is however dependent on your Figma plan is the amount of variable modes you can create.
Is there a video where you create the tokens from scratch to better understand this
Hey! You can have a look at Eric's quickstart video wherein he showcases a detailed token setup: kzread.info/dash/bejne/aamoz9ynebK9fLg.html&pp=ygURdG9rZW5zIHF1aWNrc3RhcnQ%3D. - Keegan
I cannot find the Variables Playground file mentioned in this video. Can you provide a link?
We are doing some updates to variables which are being released soon so you can expect updated community files and docs for the big release. - Sam
Nice video. This is the first time i hear about tokens studio. I am thinking of using it now as figma still doesn’t have variables for font family and size , etc. However, i was wondering, once Figma updates to support all those things, what would be the difference between tokens studio and figma? Or why would need to keep both?
Figma doesn't offer everything Tokens Studio does. As you mentioned, there are additional token types, and there is also the the ease of getting your tokens synced into a git provider which isn't a native feature Figma has. - Sam
So using this GitLab sync, we can create a token package that is synced to Tokens Studio. Every time token updates and the changes pushed to GitLab, we can make a new release and the consuming apps of this token package can use the new/updated tokens. Is that the whole point? This doesn't mean it removes the necessity of having a dedicated token package and consume straight from the GitLab repo, correct?
If you intend to use this in development I’d still recommend publishing a dedicated token package. In the described flow, a designer can make changes in Figma. These changes can then be created into a merge request (MR), which, when merged, results in a new version of the package being published. - Keegan
@@TokensStudio gotcha. Thanks for the clarification!
The themed section was informational for me. Please my question is, in the example it was a themed folder, what would the settings look like if they are all in a single file and the core, light, dark are parents rather than a separate file of its own. I have similar situation
you just blew my mind. Can't wait to see a generator regarding spacings and dimensions
blood in my ears
Thank you! Nice and informative :) And nice pioneer setup in the background :D
That's interesting! I always thought Variable modes are same as Theme group in token studio, and Collections are equal to Token Sets. I remember seeing quite a few other tutorials map their token that way.
Many people did - thats why we tried to clear things up! - Sam
I wonder how dark and light mode can be done in this multi brand approach. if you setup a collection that is shared by all brands that would also come with a dark and light mode. do we then end up with a dark and light mode and a brand-a-light brand-a-dark mode? I guess this is the life of beta
You could set it up the way you describe, or you can be a bit more tactful to create a multi-dimension theme set up where light/dark mode would reference a brand color. That would give 2 layers of mode switching. - Sam
@@TokensStudio That's what i ended up suggesting to the designer when he came back from vacation. Sadly i had no access to an editor account but he whipped it out in 5 minutes, we tested it and it worked like a charm. We still have the brands inside the same libraray in their own collection so they are treated as modes. It feels like the should be living in their own library or maybe even 1 brand per library so light and dark are resolved in a simpler way but that would mean a lot of context switching for the designer. Curious to see what comes out on top as the best practice approach
Nice Tutorial! Do you have any pre configurations examples or advices to do the transformations regarding the Material Design 3 Token schema?
Thanks @KraasRas > Material Design Tokens have their own Syntax called DSP (Design System Package) and at this moment it is only possible via the VS Code extension, which unfortunately gives a 404. We filed an issue at their side for this issue: github.com/AdobeXD/design-system-package-dsp/issues/36 For more in-dept questions on SD Configurator or Transforms I suggest to take a look in our Slack community: tokens.studio/slack
very complex
At the moment I do not agree that design tokens reduce cognitive load for me personally. Getting this set up, naming everything and make sense of the logic feels difficult. Especially since setting up design systems in figma it always felt like I had to duplicate colors and just renaming them to fit token systems of FE. All the long names and folders still confuse me when working in other design systems, but I guess that's the learning curve. It feels messy although it's organised. Mainly because the amount of colors multiply in figma. I do like global tokens and systemizing everything but naming it in figma and naming it in frontend still has me confused, I lose oversight easily by all the nesting and naming.
I have to admit the explanations are unnecessarily confusing, and really not much about using the studio itself. The Notion links are inaccessible as well. I hope the tool is worth it.
thanks for sharing that the Notion links didn't work > these should now be fixed and accessible again.
I'm trying to figure out what happens when you have a component inside another component (atom in molecule or molecule in orgamism). I looked up the file and as far as I understand in bigger components you might have tokens refering smallar components (for example in the card you have card bg and border, but the button inside keeps its tokens and by changing card tokens you affect only the bg and border), right? I red somewhere that every component should have every single value in it tokenized with its name (that being said having card button tokes) but I can't find the article again. I also have issues with states. Let's say that you have a dropdown and need a bg color for the selected option. That token could be named "dropdown-default-bg-selected" but then the bg of the other options that ate not selected don't have a proper name cuz they keep their color :D They are the same as "dropdown-default-bg-active" but the state of the whole component is "selected" and that buggs me. Anyone with the same issue?
Typically folks using component specific tokens will apply them at the component level. So the button in your example would have button specific tokens. They would remain regardless of any parent elements they live within. So you mentioned a card as a parent with buttons as children elements. The card container and children unique to the card would have card specific token names, and the actions would keep the button component specific tokens. Tokens are expressions of design decisions, so for interaction design of states like hover, you would typically define that at the component level with variants. The hover variant of the component would have specific tokens for that state, like background color for example. In your dropdown example, we could have a component called list-item which would have variants for default and hover. If we decide in our system the default and hover variants have unique background colors, then we would have unique tokens to help express that design design. Hopefully that helps! - Sam
from this video I didn't really understand the added value of exporting your tokens as variables/styles. Doesn't this show that it's better to just keep everything in Tokens Studio?
Thats a personal choice depending on the needs of you, your project and your team. If you want other people to start to use variables or styles that are connected to your tokens, then it makes a lot of sense. If not, then it might not be worth the extra effort to do so. - Sam
@marcochristiankrenn This is impressive! I'd like to incorporate this into our design system. However, the issue is that it appears to be limited to screen size adjustments. In our design workflow, we typically create designs for both desktop and mobile and place them side by side in Figma for development purposes. Unfortunately, it seems that this solution may not accommodate this specific workflow. Do you have any suggestions or alternative solutions for this?
Thanks Sam, great overview of the way Tokens/sets/groups are represented in Figma's variables
I'm going to ask a really dumb question probably, Why use variables over styles? I've googled it and nothing really comes up. They seem to the same to me but clearly they aren't if this is an option. I'm a recent adobe Xd to Figma convert and some of these things seem very odd to me, I'm trying to learn the best practices but it isn't always obvious.
This is a good question actually! If you are comfortable and happy with styles, it might not be the best idea to move to variables. There are some variable types that there aren't styles for, which allow for semantic names for reusable values which can help with consistency, like border radius, size and spacing for example. - Sam
hello, i found a bug about spacing. After define base spacing is 2, i use math to build other tokens. (like spacing4= {spacing.2} * 2, spacing3 = {spacing.2} * 3 etc.) But, it's Not effective when i use it in two shape . And, it's become twice as big, when i ues in two texts . Could you help me?
hi, from your description it's not fully clear what the issue is. The easiest way to get your issue solved is to post it in our Slack channel (tokens.studio/slack) with preferably a screen recording indicating the issue. That usually helps finding a solution more easily :)
Nice one 👌🏽.. I know we're talking more about Token Studio here. But what do you think is missing from Variables?
Variables is still in beta, Figma has lots on their roadmap to be excited about in the near future! - Sam
I mean, if you wanted to say Figma Variables unlock Design tokens, what would you need to say it?