วีดีโอ

Are there any developers, or are there only designers here? How do you create SCSS variables for dark and light theme?

Thanks for this free plugin, it really does the job.

omg when will it be?

I am a big fan of just having Tokens if I were using them (PenPot) and using styles if I wanted to break outside of the framework.

I wonder if it would be useful to see the value of the tokens on hover... also on the drop down - right click - maybe using a divider line before the options to edit the tokens - separating them from the property application options could enhance user experience. :) great work! Can wait to have this available and try to move from figma!!

Can we create mesh gradients in tokens?

would much rather just have variable or just one sync workflow. I

Great stuff!!!

Great stuff guys! I am really looking forward to trying out the graph engine. One question I have is, that from what I have seen so far, I could not really see any visualization of the token layers within the graph? Would something like this be possible? Further I really liked your thoughts on separating the units from the token values (1:28:10), in order to easier support advanced calculations. In fact this would result in the possibilty to elaborate more design system logic in the semantic token layer, which in turn would scale much better when implementing and tokenizing all component specific tokens, cause there is less to cover there then. Probably this makes sense starting with a design system having 60+ components or so!? This also actually goes hand in hand with the ideas to think about different kinds of Style-Dictionary transforms, ones that actually transform a token value and ones that just do value formatting for specific platform output files: github.com/amzn/style-dictionary/issues/1298#issuecomment-2274461279 Unfortunately one thing I dislike about the new DTCG token standard, is the "$" prefix. In times in which everyone should know about clean code craftmanship and speakable code, this is really the best we could come up with for a token standard? Sry for being very opinionated here, but it just reminds me too much on the old jQuery times. I have already been pretty alone with this opinion, when they started using "$" for RxJS observables. But I guess I am too late to the party with this?

I would wish to have in the graph engine generate a color ramp not based on the linear scale, but more on the zigzak or little a bit rotated angle that we can’t achieve by using linear approach

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?

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

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

Is there a video where you create the tokens from scratch to better understand this

I cannot find the Variables Playground file mentioned in this video. Can you provide a link?

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?

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?

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.

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

Nice Tutorial! Do you have any pre configurations examples or advices to do the transformations regarding the Material Design 3 Token schema?