Тёмный

Building an automated multi-brand token workflow - Behind the System 

Tokens Studio for Figma (Figma Tokens)
Подписаться 3,3 тыс.
Просмотров 15 тыс.
50% 1

Recording of the first Figma Tokens livestream on the 25th of August 2022.
Behind the Systems: Building an automated multi-brand token workflow by Chris Kerr & Nicole Duncan.
🚀 Subscribe to our channel: www.youtube.com/@TokensStudio...
💡 Install on Figma: www.figma.com/community/plugi...)
💬 Join our Slack: tokens.studio/slack
📄 Docs at: docs.tokens.studio/
ℹ️ More information on www.tokens.studio
Contents
00:00 - Welcome
02:11 - Intro
03:55 - How we started our journey
05:28 - Challenges
07:42 - Next step
09:05 - Figma setup
10:35 - In the (Figma) file
23:32 - A look at our Theme library - The tokens, how we use Figma Tokens and our workflow from Figma to Github
29:30 - How we made icons an integrated part of our tokenised solution
37:00 - Our core components and how we apply non-local styling in the library
47:43 - In the code
49:42 - Transforming Figma Tokens JSON into working CSS
51:48 - Our Icon component and how we turned the icon tokens into rendered icons using Font Awesome
55:41 - Q&A
56:26 - How do you deprecate old tokens? What happens in the design files that referentiate old tokens? How do you manage coexistence of deprecated tokens with current tokens in a system?
58:48 - Very pro setup. How do you onboard / teach other designers? To use or create tokens / components themselves? Do you document how to set something like this up?
01:01:51 - Do you support dark/light color schemes in your system? And if so, how?
01:03:23 - How long did it take you to set this up and how did you convince stakeholders to get budget for it?
01:06:34 - So all styles are in 1 library here. How would you do this if your Brand 1 and Brand 2 each have their own published libraries of styles? How would you link token styles to external libraries?
01:09:10 - Does the design team use the Figma Tokens plug in their workflow? To switch brands
01:11:33 - In the component tokens why do you reference 'color' before 'button' instead of the other way around?
01:14:25 - With a text style being used for fonts, how do you handle unique icons that are not handled by the font?
01:16:52 - Do the seed colours fall into their associated colour ramp?
1:18:14 - Ending

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

 

11 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 11   
@TokensStudio
@TokensStudio Год назад
🚀All of our livestreams 'Behind the System' can be found in the dedicated playlist: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7zWrEJVuP24.html
@danielaakjrsrensen9375
@danielaakjrsrensen9375 Год назад
Thank you so much for doing this. Super helpful! 🙏 Hope to see much more like this 💪
@TokensStudio
@TokensStudio Год назад
More to come!
@gyorgykovesdi
@gyorgykovesdi Год назад
The informations and all of the work you have done is really super, I love it! I know it was a live stream, but next time can you please record it locally too (and upload)? This 1 fps scaling/scrolling is really annoying. I know, it would need some post-production work (cut/render), but I think its could make the presentation way more enjoyable. / sry for my english /
@TokensStudio
@TokensStudio Год назад
Totally agree! This was our first livestream and afterwards we switched over to new tooling, which improved the recording quality. The other livestreams in the playlist mentioned in the pinned comment should have way better quality 🙂
@Jennifer-fk5xi
@Jennifer-fk5xi Год назад
18:22 How's Figma token different from Figma styles: Styles specifies all the unique color, but sometimes they may get applied across attributes. Grey400 can be the .button-secondary-border or it can be .text-disabled. Token can help specify the use case to the next level of detail that offer you the flexibility to make a switch in the future. Let's say next time you want to make your disabled text darker after the accessibility assessment. Directly updating your Grey400 color would cause a global impact, but you can update your Figma token to darken .text-disabled to Grey500. Figma Token serves as a nice bridge between your unique styles and various component instances. Just sharing my 2 cents.
@DaveRino
@DaveRino 11 месяцев назад
How is the specific brand theme specified in the tokens?
@TokensStudio
@TokensStudio 10 месяцев назад
The different Brands in the example are specified as Token sets and also separate as Themes. Since this video the plugin is evolved, so you can best checkout the documentation: docs.tokens.studio/themes/token-sets
@Sanny.V
@Sanny.V Год назад
Is this figma file downloadable somewhere?
@TokensStudio
@TokensStudio Год назад
Hi Sanny, unfortunately this Figma file is not publicly available. However, we have a channel on our Slack dedicated to our livestreams, where you can always post your questions. Join via tokens.studio/slack > Channel: #behind-the-system
@feelerino
@feelerino Месяц назад
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
Далее
Whyyyy? 😭 #shorts by Leisi Crazy
00:16
Просмотров 16 млн
Rare Mbappe Moments 🤯
00:21
Просмотров 2,5 млн
The World's GREATEST Vince Carter Highlight Reel 🤯
10:00
Tokens Studio for Figma Quickstart
1:30:42
Просмотров 29 тыс.
(2020) What the #&%$ are Design Tokens?
6:34
Просмотров 50 тыс.
How LVMH Became A $500 Billion Luxury Powerhouse
19:48