Тёмный

Design Tokens in Figma: How to get started, today. Jan Six - Live & Q&A- Into Design Systems 

Into Design Systems
Подписаться 10 тыс.
Просмотров 130 тыс.
50% 1

Опубликовано:

 

25 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 113   
@elikemdaniels
@elikemdaniels 2 года назад
"Tokenastically" wonderful. In fact, "yarntastic"! I'm blown away by the power of these plugins, especially Figma Tokens. Thanks a lot for creating this.
@eltontay6367
@eltontay6367 3 года назад
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
@rawmeatsingh
@rawmeatsingh 3 года назад
MVP
@InesDelPapa
@InesDelPapa Год назад
Awesome! Thank you so much Jan!
@rohaan_ahmed_khan
@rohaan_ahmed_khan 2 года назад
AMAZING tutorial! One of the most comprehensive tutorials I've seen for anytNice tutorialng. Thanks so much!
@PapaG-0101
@PapaG-0101 3 года назад
Yes, I just stumbled upon Figma Tokens and was looking for a good video demonstration. Thank you for the great information!
@shubham-cd9lx
@shubham-cd9lx 3 года назад
Jan is the real Gem, thanks for posting here, would love to see more from him :)
@thimotta
@thimotta 2 года назад
You're a god amongst men. Thank you for that!
@jonatzjurats4087
@jonatzjurats4087 2 года назад
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
@PapaG-0101
@PapaG-0101 3 года назад
I enrolled into the course. If the course is anything like this video it will be well worth it. Thank you!
@IntoDesignSystems
@IntoDesignSystems 2 года назад
Thanks! Hope you liked the course as well
@DUVEDITZ
@DUVEDITZ 2 года назад
very talented teacher - cheers
@VladKozlovskiy
@VladKozlovskiy 3 года назад
Thanks Jan, that is beautiful solution for design systems.
@cristinalemus551
@cristinalemus551 2 года назад
Thank you!
@Letsdesign87
@Letsdesign87 3 года назад
This is exactly what I was looking for! Great work
@teresmajor7956
@teresmajor7956 3 года назад
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.
@sergey-tkach
@sergey-tkach 2 года назад
i'm just diving into the plugin. such a time saver! much kudos!
@tailougamer1287
@tailougamer1287 2 года назад
thank you man,you are a legend
@schroepa1981
@schroepa1981 3 года назад
This is so great and answeres so many questions 😍
@MinervaSantamaria
@MinervaSantamaria 3 года назад
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!!!
@IntoDesignSystems
@IntoDesignSystems 2 года назад
Hey, thanks for the feedback! Jan & the team is working on this
@GadgetsGearCoffee
@GadgetsGearCoffee 2 года назад
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
@kieranhazell9326
@kieranhazell9326 Год назад
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)
@DesignPilot
@DesignPilot 3 года назад
What is the name of the font being used in the presentation?
@IntoDesignSystems
@IntoDesignSystems 3 года назад
I think it is "Object Sans"
@nelsonriches
@nelsonriches 2 года назад
amazing bro! excellent work!
@peterkmita
@peterkmita 3 года назад
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.
@IKolpikov
@IKolpikov 3 года назад
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.
@paralysekid
@paralysekid 3 года назад
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.
@smv9982
@smv9982 2 года назад
@@paralysekid so which plugin did you use in the end? because I have the same issue here.
@paralysekid
@paralysekid 2 года назад
@@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.
@Chap4540
@Chap4540 2 года назад
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.
@liamliam1341
@liamliam1341 2 года назад
Verry healpfull tutorial
@BladeStormElectro
@BladeStormElectro 3 года назад
That is insane ! Very nice work
@slowcookcity4792
@slowcookcity4792 2 года назад
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?
@alsose5453
@alsose5453 2 года назад
ty cuz ive been having a hard ti getting started.
@arturobojaca5603
@arturobojaca5603 2 года назад
thanks it was really usefull
@richardgibson807
@richardgibson807 2 года назад
thank you good sir
@huycuongphan1063
@huycuongphan1063 3 года назад
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?
@heena.design1398
@heena.design1398 Год назад
In your opinion, letter spacing should be in Percentage or in Pixel?
@sophiemulders
@sophiemulders 5 месяцев назад
@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.
@aditya.design17
@aditya.design17 Год назад
Loved the font though.
@gosmartcolombia
@gosmartcolombia 2 года назад
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?
@nima.shokouhfar
@nima.shokouhfar Год назад
You are amazing....!!!
@ashleyli5773
@ashleyli5773 2 года назад
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?
@sungjunkim1577
@sungjunkim1577 3 года назад
AMAZING!!!!
@marthaortegadiaz1554
@marthaortegadiaz1554 2 года назад
How I get access to Arcade?
@soobadina
@soobadina 3 года назад
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.
@BryanXDz
@BryanXDz 2 года назад
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
@mranye
@mranye 2 года назад
How do I use this to create Layout grid style? Amazing work!
@vdubplate
@vdubplate 2 года назад
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?
@uioverhaul
@uioverhaul Год назад
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
@megaroeny
@megaroeny Год назад
Yeah I was wondering the same. He never went over that.
@jokosi
@jokosi Год назад
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?
@NaourassDerouichi
@NaourassDerouichi 3 года назад
This is dope. Why only 2k views ?
@towfiqpiash
@towfiqpiash 2 года назад
Being a design system nerd, I shouldn't have missed this. Sadly I came to know about this after about an year :(
@keasone
@keasone 3 года назад
Mind blown!
@heena.design1398
@heena.design1398 Год назад
How did the name of the font changed on the screen from object sans to inter?
@logankees6544
@logankees6544 2 года назад
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.
@warderto
@warderto 2 года назад
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?
@sakaidasan6149
@sakaidasan6149 2 года назад
Try to use plugging and after each alteration plugin is lagging
@marianlucas6212
@marianlucas6212 2 года назад
Great talk! What font are you using in the slide deck?
@morbith138
@morbith138 3 года назад
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
@nbcyt2935
@nbcyt2935 2 года назад
Thank you for uploading tNice tutorials video , so much information!
@christinelancaster6383
@christinelancaster6383 3 года назад
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?
@IntoDesignSystems
@IntoDesignSystems 2 года назад
Hey Christine, Jan is going to show this in his next live workshop: intodesignsystems.gumroad.com/l/opter
@kevinmurphy987
@kevinmurphy987 3 года назад
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.
@Oswee
@Oswee 3 года назад
If I heard somewhere right, then Figma is working on some kind of token feature.
@mefizto.
@mefizto. 2 года назад
Where have you been my whole life? ❤
@PhilipIsaacs
@PhilipIsaacs 3 года назад
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.
@IntoDesignSystems
@IntoDesignSystems 2 года назад
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
@qooqoo2393
@qooqoo2393 3 года назад
Holy Shit! Awesome!!!!
@hoppyjourney
@hoppyjourney 2 года назад
How to syn token with the style figma library ? 18:20
@abinashmohanty
@abinashmohanty 2 года назад
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?
@IntoDesignSystems
@IntoDesignSystems 2 года назад
Hey, yes it is! Jan is going to show how to do this in his next like workshop: intodesignsystems.gumroad.com/l/opter
@danieuropcartests6972
@danieuropcartests6972 Год назад
how to sign up for arcade?
@lostbanana7268
@lostbanana7268 2 года назад
I hear yah mate.
@avashbasnet7886
@avashbasnet7886 2 года назад
send you the link of it
@mikefirkowski4252
@mikefirkowski4252 Год назад
OMG, I just discovered it one year after the video release... this is a lost one year of life.
@MrVivorico
@MrVivorico 3 года назад
8:03 it doesn't work for me. Can anyone help?
@ShelYTGer
@ShelYTGer 3 года назад
Ok ... mind blown ...
@JavinTowers
@JavinTowers 2 года назад
Its like CSS classes for Figma
@keyyaaf
@keyyaaf 2 года назад
I love it Sir can you help to edit
@MsHappydani
@MsHappydani 2 года назад
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.
@IntoDesignSystems
@IntoDesignSystems 2 года назад
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
@chaplessgaming4022
@chaplessgaming4022 2 года назад
❤️
@welsewool
@welsewool 3 года назад
perfect
@creasyman2
@creasyman2 2 года назад
You killed Zeroheight thanks to your documentation :p
@rajeshsatyarthi
@rajeshsatyarthi 3 года назад
at 5:43 how do you get that Sketch Runner type thingy?
@devhive9697
@devhive9697 3 года назад
command + p
@HeroNinja
@HeroNinja 3 года назад
It's the Figma native Quick Actions menu. ⌘ + / or ⌘ + P (on Mac) Ctrl + / or Ctrl + P (on Windows)
@IKolpikov
@IKolpikov 3 года назад
You can call any plugin action there as well. Highly recomend to bind it. I call my most used plugins by macros that way.
@megaroeny
@megaroeny Год назад
I think relying on plugins for work like this is risky though. I think I rather wait for the native feature honestly...
@bpalmer02
@bpalmer02 2 года назад
🤯🤯🤯🤯🤯
@demart
@demart 2 года назад
Nooo extra space between "tools" and "could" words Please nooo )) 1:50 Thank you for the video!
@detsz2157
@detsz2157 2 года назад
I am too sober for tNice tutorials, I'll be back later..
@titismaylani4597
@titismaylani4597 2 года назад
RubidiumHD -Gaming and Blogs! Close
@sojimifilms1035
@sojimifilms1035 2 года назад
I don't understand
@DesignSomething
@DesignSomething 2 года назад
And WHAM! Well you're drunk now!
@cnbanglatube3132
@cnbanglatube3132 2 года назад
fr
@SP-xx7ul
@SP-xx7ul 3 года назад
Too complex for creative designers. needs to be more simplified.
@sahalmakruf6977
@sahalmakruf6977 2 года назад
Who would dislike tNice tutorials video..
@silvatimothybenzcipriano338
@silvatimothybenzcipriano338 2 года назад
U rember to co back? Lmao
@LazieReaper
@LazieReaper 2 года назад
Well it's secretly not free anymore...
@IntoDesignSystems
@IntoDesignSystems 2 года назад
Hey, you can achieve anything shown in the video with the free version of Figma Tokens
@Ushtar05
@Ushtar05 2 года назад
Sa
@hasyirwazir766
@hasyirwazir766 2 года назад
just say no homo then its fine
@elearninghub01
@elearninghub01 2 года назад
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
@ulyanakravets3200
@ulyanakravets3200 2 года назад
Awesome! Thank you so much Jan!
@victorpaulo4342
@victorpaulo4342 2 года назад
Thanks!
Далее
Design Tokens Explained -  Lukas Oppermann Live
49:47
Просмотров 20 тыс.
I poured all the galaxies in the Universe into a pool
15:34
NAH UH
00:17
Просмотров 2,1 млн
Three NEW MAPS in Update 0.31.0 Nightmare | Standoff 2
01:48
новое испытание
00:40
Просмотров 115 тыс.
How to use Figma Styles & Libraries?
1:10:38
Просмотров 82 тыс.
Advanced: Figma tokens Sync with Github
15:31
Просмотров 24 тыс.
The Easiest Way to Build Websites
10:56
Просмотров 573 тыс.
Master Design Tokens - From Basics to Advanced
44:30
Просмотров 27 тыс.