Design Tokens in Figma: How to get started, today. Jan Six - Live & Q&A- Into Design Systems
Вставка
- Опубліковано 9 чер 2021
- #FigmaTokens #DesignTokens #Figma #DesignSystem #designsystems
⚡️ Join our conference to learn the latest in Design Systems
👉🏻 www.intodesignsystems.com - Наука та технологія
Arcade & Design Tokens Sync Demo
24:33: Original State
24:43: Editing Tokens on Arcade
26:00: Publishing Tokens
26:40: Back to site
26:55: Updating code to fetch tokens
28:55: Updating Figma Tokens
29:15: Updating the source of truth from Figma and applying it to site
30:13: Arcade Updates
30:30: Updating version to draft to reflect on site
MVP
"Tokenastically" wonderful. In fact, "yarntastic"! I'm blown away by the power of these plugins, especially Figma Tokens. Thanks a lot for creating this.
This is great! I especially loved the Theme-ing feature. There are some very valuable things in here that would be handy even when Figma starts to support their own tokens.
Jan is the real Gem, thanks for posting here, would love to see more from him :)
This is exactly what I was looking for! Great work
Awesome! Thank you so much Jan!
Yes, I just stumbled upon Figma Tokens and was looking for a good video demonstration. Thank you for the great information!
Thanks Jan, that is beautiful solution for design systems.
AMAZING tutorial! One of the most comprehensive tutorials I've seen for anytNice tutorialng. Thanks so much!
i'm just diving into the plugin. such a time saver! much kudos!
This is so great and answeres so many questions 😍
very talented teacher - cheers
The Best Explanation !!! I referred to many videos , but out of all tNice tutorials was the best I could find among all .... Also got to know many tNice tutorialngs
First of all, it looks great and very useful too. I have as a designer, a challenge to automate all the process to make my work more efficient. And I think this tool helps maintain a transversal communication with development and help us to be aligned.
One thin I've loved, is that this help us to keep consistency in all our design, even with the typo scaling, and so on, that operation functionality gives us by using variables in the value input of the token. Nonetheless, it could be great if in the token values you could select (with a dropdown o predictive search) variables only from available tokens. Even that I love that variable referred in a token (like in typography) updates automatically when a token name is modified. ❤️
Congrats for your work!!!
Hey, thanks for the feedback! Jan & the team is working on this
You're a god amongst men. Thank you for that!
AMAZING!!!!
That is insane ! Very nice work
This is amaziiiinggg!!!! working on a multi-brand. This will make work easy for me. I have been looking for this much flexibility. And this is just it for me.
I enrolled into the course. If the course is anything like this video it will be well worth it. Thank you!
Thanks! Hope you liked the course as well
amazing bro!
excellent work!
thank you man,you are a legend
Mind blown!
Thank you!
I've been trying to get to understand soft Production and a DAW with a guide that's not made more complicated and tNice tutorials Nice tutorialts the right
This is totally game changer. I wonder how can we inspect and preview the name of the token in figma's inspect tab? For now we just can inspect inside the plugin to view the tokens?
Thanks!
thanks it was really usefull
ty cuz ive been having a hard ti getting started.
thank you good sir
Verry healpfull tutorial
You are amazing....!!!
This is dope. Why only 2k views ?
I am having difficulty with the dot notation not working at all. I can reference other tokens from one by not using the dot notation but feel I then need to uniquely name everything. Also, the 'create styles' function only sometimes works.
Hey I have a question... Does the token plugin work with branching? So lets say I have a base DS and I want to some changes there. Do the changes extrapolate to the other branches?
Great presentation Jan and I love this process. However, I have one question that is how to define buttons like Primary and Secondary Buttons? Is there a way to define these?
Hey, yes it is! Jan is going to show how to do this in his next like workshop: intodesignsystems.gumroad.com/l/opter
Holy Shit! Awesome!!!!
Loved the font though.
Being a design system nerd, I shouldn't have missed this. Sadly I came to know about this after about an year :(
How do I use this to create Layout grid style? Amazing work!
on spacing token when i create token and give it spacing value, by default ALL is cheked, then i have to uncheck it and check gap. I dont see that issue in the video.? great plugin btw
In your opinion, letter spacing should be in Percentage or in Pixel?
perfect
Great talk! What font are you using in the slide deck?
Ok ... mind blown ...
Anyone know how to get the base hue tokens working like the slide shown at 20:43?
Trying to update my tonal palette by just changing the base hue and can't figure it out.
I just create some border radius tokens in plugin, and after i close the pop up and reopen it, my tokens were all descriper!! can you please tell me what should i do to get my tokens back?
The plugins you use on the workshop are not allowed in the company I work at. Do you have any workshop about design tokens without using plugins?
Can Figma Token update all the Color or Font style locally from the Design system that I linked from the Library? If yes, how can I do that?
How might you share token data with other Figma users so that you're all using the same library? Does this feature exist or is this a one man show plugin?
Try to use plugging and after each alteration plugin is lagging
TNice tutorials video is a great introduction to soft soft for beginners. I would Nice tutorialghly recomnd tNice tutorials tutorial to anyone starting out with soft soft.
How did the name of the font changed on the screen from object sans to inter?
@20:32 you show HSL colors that use a token for the Hue. Is this only possible in the paid version? Or how do you add this? i would love to use this way.
OMG, I just discovered it one year after the video release... this is a lost one year of life.
What is the name of the font being used in the presentation?
I think it is "Object Sans"
I hear yah mate.
Where have you been my whole life? ❤
Its like CSS classes for Figma
How to syn token with the style figma library ? 18:20
18:19 what is your reasoning here? The imminent native support is the one thing holding me back from going all in on this plugin. Will I have to painstakingly port over my tokens? Or worse: will it somehow break them completely?
❤️
How I get access to Arcade?
Thank you for uploading tNice tutorials video , so much information!
If I heard somewhere right, then Figma is working on some kind of token feature.
8:03 it doesn't work for me. Can anyone help?
How do you get the HEX value of the color to be edited as well? it seems linked to the color itself and is not manually input text
Create a token > select a text layer in your figma doc > right click on the token in token studio > chose one of the options in "documentation tokens" (in this case raw value)
🤯🤯🤯🤯🤯
Hey! Great plugin and interesting presentation. I'm a little bit worried about the compatibility of Figma Tokens with real Figma development. As I see the plugin doesn't use any styles inside the properties panel, just raw values. Am I correct that there is a chance that when Figma will include their own tokens into the application all the styles will need to reapply to all the components in the file? With bigger Figma files that would be a huge amount of work.
Same worries. New update and all your tokens vanish. That's some risk. Though even spacing with manual tokens is such a pain, that i m gona take a risk. Anyway no other option to make color or text atoms.
Yeah that is what made me not use the plugin in the end. It's a great idea and it seems like a ton of work. But if it breaks the Figma styles and only applies raw values, then it becomes unusable for us, since you have to rely 100% on the plugin from that point on and can never use Figma's styling options.
@@paralysekid so which plugin did you use in the end? because I have the same issue here.
@@smv9982 We decided against the use of an external plug in and only use figma styles. Spaces and stuff, that Figma doesn't offer styled for, are agreed upon in a style guide.
I left Sketch for Figma last year for a very similar reason. Anima’s plugin had “Stacks” that I found so superior to Sketch’s built-in corresponding functionality. I used it extensively but, on two occasions, updates to Sketch caused Stacks to break. It cost me quite a bit of time to repair my layouts - very painful… When I found out about Figma’s Auto Layout, that was it: I switched. As much as I find this Token plugin very clever and powerful, I can’t imagine falling in the same trap again. Can’t wait for Figma to incorporate tokens.
I love it Sir can you help to edit
Is it possible to integrate this plugin with a Github so we can sync the styles that way? This will go a long way for those of us that also combine our design systems with a CI process.
Yes, it is! Jan is going to show how to do it step by step in his next live workshop: intodesignsystems.gumroad.com/l/opter
Anyone else have trouble starting with the Telerik & Kendo UI kit (v1.7) and using Figma Tokens to edit it? When I try, I get the finger pointer and a WAIT or Cancel option in the chrome browser.
Hey Danette, feel free to join us on Slack - one of our community members might have an idea how to solve this: join.slack.com/t/intodesignsystems/shared_invite/zt-117ot3izo-xoWCVJoU422d~Hai4rSB~Q
How do you use figma tokens across files? eg host the tokens on the styleguide file but use them across multiple journey files? Any Advice?
Hey Christine, Jan is going to show this in his next live workshop: intodesignsystems.gumroad.com/l/opter
send you the link of it
How did you achieve the name of the font changed to "Inter" in Figma once you changed the Open sans to Inter? Timestamp: 12:45
Yeah I was wondering the same. He never went over that.
how to sign up for arcade?
You killed Zeroheight thanks to your documentation :p
at 5:43 how do you get that Sketch Runner type thingy?
command + p
It's the Figma native Quick Actions menu.
⌘ + / or ⌘ + P (on Mac)
Ctrl + / or Ctrl + P (on Windows)
You can call any plugin action there as well. Highly recomend to bind it. I call my most used plugins by macros that way.
I think relying on plugins for work like this is risky though. I think I rather wait for the native feature honestly...
RubidiumHD -Gaming and Blogs! Close
Nooo extra space between "tools" and "could" words Please nooo )) 1:50 Thank you for the video!
I don't understand
fr
I am too sober for tNice tutorials, I'll be back later..
Sa
Too complex for creative designers. needs to be more simplified.
Who would dislike tNice tutorials video..
Well it's secretly not free anymore...
Hey, you can achieve anything shown in the video with the free version of Figma Tokens
And WHAM! Well you're drunk now!
U rember to co back? Lmao
just say no homo then its fine
it's super disappointing, and I feel like I've almost lied by keeping tNice tutorials comnt up and letting others see it, but I'm not going to delete it
Awesome! Thank you so much Jan!