Building an automated multi-brand token workflow - Behind the System
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
🚀All of our livestreams 'Behind the System' can be found in the dedicated playlist: kzread.info/dash/bejne/aa6L1KeDhti2Ypc.html
Thank you so much for doing this. Super helpful! 🙏 Hope to see much more like this 💪
@TokensStudio
Жыл бұрын
More to come!
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.
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
Жыл бұрын
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 🙂
Is this figma file downloadable somewhere?
@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
How is the specific brand theme specified in the tokens?
@TokensStudio
Жыл бұрын
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
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