Thank you so much for this reminder of how to structure our design decisions to have them maintainable and ready to upscale! Love how you explain things ❤
Great question! Check some of my more recent vids (Building variable library, dark mode, and multi-brand setup) as these will help answer that question. Please subscribe and share as well if you can :)
There is a page called Design Tokens@@bigpunchline . Happy to refund you if it does not meet your standards just send me an email hello@uicollective.co :)
Thanks! Variables are cool (while generators suck). But I would want to use functions to get colors, so that we could define a base color and get its shades automatically. Odd it's not still there.
Great tutorial. May I ask why do we need layers and layers of collections in variable? I mean .. for button as an example, can't we just link that button's filled colours to "brand - primary blue"?
What level do you apply different modes at? The "lighter/darker" naming convention in 'alias' makes it feel like 'mapped' is the best place to handle modes?
I'm a bit confused. What is the point of going from color -> alias -> map when you could just go from color -> map ? What value does the middle step make?
Hey if i created local color variables in a library file, is it possible to sync/access those color variables in another file in the same project? How would i go about doing this?
Publish the file, and then subscribe to it. In the top bar, hit the arrow next to the file name, and then publish. Then, in another file, hit File>Libraries, and toggle on the library you want :)
Waiting patiently for this reply 💯 but i guess is because sometimes as a designer you may want to change the button/text color without changing the brand color and inline with that, you can also play around with the theme when you want to compare stuff
@@cipeey Yeah it also seemed like an extra step to me too.. And to what you're saying, its because sometime you want to change de button/text color without changing the brand color. But why not linking it to brand color straight away, and when edit needed you change swap or change the brand color? hmm
I've been trying to figure out the answer to this question myself too haha. Have you found a pro to doing so? The main benefit I can think of is having a more clean naming system, example, this would lead to [surface/action-1] -> link to -> [color/primary] vs linking it to [color/purple-500] , but a solution could be to have the brand token display those names instead, so... #??? -> [color/primary-default] -> [surface/action-1]. Would just depend on the size of the design system you're working with I guess, and if you need more advanced control.
Thanks for your insights on Figma variables and design system structure! Much appreciated! Is it necessary to use a complex color system for minor brand color changes when updating the library color values achieves the same result? However, what will happen to the color-named variables if the brand undergoes a complete rebranding? For example, if the new brand style guide doesn't include colors like blue, teal, or purple, creating a new set of color-named variables and reassigning them would require much maintenance. Moreover, rebranding usually entails changing the color scheme and introducing new features and components, potentially resulting in more substantial design system changes. Furthermore, new team members may face a steep learning curve when utilizing and managing the intricate design system color styles. Isn't it better to keep the system simple for big UI projects and use name conventions based on element purpose instead of color-named variables? For example: BG: Primary, Secondary, etc. Base: 50, 100, 200, 300, 400, 500, etc Accent: 50, 100, 200, 300, 400, 500, etc Action: 50, 100, 200, 300, 400, 500, etc Negative: 50, 100, 200, etc Positive: 50, 100, 200, etc Warning: 50, 100, 200, etc Info: 50, 100, 200, etc Plus, some notes on color usage. This approach will provide you with a reusable flat design system across projects of all sizes and unlimited branding options based on my experience. What do you think?
Hey, tbh I don't get it. You organize the theme colours in a theme group however telling in the video "you don't have to write theme"? It feels like you're spreading the colours to specific purposes like theme etc. and while creating buttons, you use the purpose colour which links back to one of the main colours? That's the magic isn't it?
Which part of the video? I may have been referencing that it doesn't need to be the term 'theme' but can also be 'brand' or 'global'. But yes, having a multi-step collection structure that links back to your brand colors! :) Thanks for the dialogue :)
Can you make this template (design tokens section) actually free to download and reuse as you promise in 0:53s? Your Figma file does not allow to copy layers, and they are blurred :(
The blurred file is our design system. This is not free. The design tokens file is a separate template. We had to mark all our content behind a $10 paywall as other creators were recording/taking our content, rebranding it, and uploading it as their own. It was free for several months.
Nice video, thanks. What's the point to create 100 categories with blue colors connected to each other, instead of using one Style "Primary blue" color applied for all 100 elements? and easily change it if you need it
This is a good video, but i still don't understand why you kept in 'mapped' collection for "border" - all the action states ("focus") and the color-level ("primary") in one croup of hierarchy. this is very confusing? because those are different things.. (in the suggested file that i downloaded) Sorry for bad English
Mapped are all the specific 'actions' or 'use-cases' associated with your colors, and they tie back to your primary, as primary is not an 'action' or 'use-case' of a UI. Does that make more sense?
I noticed that in the tutorials you are using darkest to lightest to describe colors, but in the UI collective system it seems to be using numbers instead (25-800 etc). This is also common in other public DS. I’m currently creating a design system for my company and trying to figure out which of these to use. For instance I have 6 brand colors where dark-light would work great, but then I have nearly 12 grays and that naming wouldn’t work. Is it ok to use both naming styles in a system? There is also some tech debt here and I won’t be able to rename some of the colors dev is already using like I would prefer… thoughts?
I'd say choose one method and stick with it as best you can. My second most recent video might help you as well. If you have 12 greys, then maybe use the number scale. If your DS is still under construction, think about why you have 12 greys, and if you need so many. I always like to simplify my colours as much as possible and add others as I need to later on. Let me know if you have other questions :)
@@UICollectiveDesign thanks alot for responding your vids have been insanely helpful! I am trying to find ways to limit the amount of grays. Because my dev team doesn’t want to change the naming and they haven’t been working consistently with their own color variables, 3 elements can be the exact same color (or really close) but have 3 different names. I will reach out to my team and see if we can find a feasible way to work through the tech debt on colors. Thanks!
Do you have recommendations for automatically generating all of these variables to a document that is similar to the one you started out with: All colors with their names, hex codes and swatch?
Hi, i have a question, what if i have blue-default for example for text and also buttons but i only want to change color of buttons. Thanks for response.
Hey, thanks for the tutorial, you named some theme token colors neutral-light for example. How would this work for a dark theme that also uses this token?
Thanks for this! I have a question about opacity in variables. I want to create a variable "White" in my brand colors and in my theme colors i want to use the same "White" but with different opacity. Is it possible to have control over the opacity for the same color token without creating a new one?
We had people recording our content, and reuploading as their own. To protect, we put everything behind a $10 paywall. All content and resources for $10 a month or the template for simply $10.
Previously all our content was free, but then we had some users downloading, adding their own branding, and then selling it. Thus, to prevent that, this content is behind a $10 paywall. Apologies for the confusion & hope you understand!
@@UICollectiveDesign ah ok! yep. totally makes sense. Maybe wrap a disclaimer in parentheses near the decription linkk or something saying you've updated, otherwise it could look falsely advertised. Anyhow, I apprectae the reply as well as the tutorial!
How can you link a design system with other File when creating these Local Variables? i.e. I have a design system and when I am creating a New Project File, I'll published my Design System so whenever I change anything from my Design System, I just need to republish on the same Project File and it will be updated but with these Local Variables do I need to recreate what I have done on my Design System ?
Due to some sources recording our content/lessons and re-uploading to their own sites under their own branding, we have had to put all our Design System content behind a $10 paywall.
@@UICollectiveDesign Ok fair enough , but you should mention that in the description, as UX/UI channel you should know better than others that this counts as bad UX. still thank you for the tutorial.
Typical Figma bug. The original color components don't link anywhere, in the button example I'm forced to change the variable color in the variable panel in order to affect the button, but the component color doesn't link anywhere. When changing the color on the original color components nuthing happens, so that's obviously a huge bug. The original component is supposed to function as the master. That's the concept of components. If this is intended then they sure made a mess of this 😱
This is such overkill. Show me a situation where a system of this magnitude experiences a brand color change that doesn’t involve re-doing the entire paradigm. I’ve worked on some of the biggest brands in the world, and the scenario where we need to prepare for the chance of a brand color changing has NEVER happened. You only add. Or subtract.
This is such an underrated channel and video. I would have easily paid $20-30 dollars for this UI kit and this course. Good work man
Glad it helped! Please share our links and tell your friends!!
Wow, wow, beautiful and beautiful. Super cool hats off to efforts. I am new to DS I so excited to try it asap.
You've come to the right place!
Thank you so much for this reminder of how to structure our design decisions to have them maintainable and ready to upscale! Love how you explain things ❤
This is such a helpful video, thank you very much!
Glad to help!
Brilliant stuff and just what I was looking for, thanks!
😍
Glad it helped!!
Wow, this video was just what I needed. You have gained another subscriber!
Glad it helped!
Thx for the great content. At 11:46 you talking about the right way to build a button. Where is the video you speaking of? Would love to see it.
It's in our learning management system. We're giving our content away for approved members of our community platform :)
Awesome video tutorial, thanks! 🙌🏻
Happy to help! Please share this video where you can!
Simple and straight to the point , thanks for your time !
Nice video and information but my question is,
what is the difference between Brand and Theme Colour?
You don't need to right-click and press "create alias". It automatically creates an alias by picking a color from the 'Libraries' instead of 'Custom'.
Good call out!
Thanks for this video and resources!
Glad to help :) Please subscribe and share our channel!
This is great! How would you combine this with a light and dark theme? (or are we going to have to wait for combo variables?)
Great question! Check some of my more recent vids (Building variable library, dark mode, and multi-brand setup) as these will help answer that question.
Please subscribe and share as well if you can :)
I don't understand, the template does not have a Design Tokens page, I am suppose to create that one?
No, it is there. Which template did you download? The page is called 'Design Tokens'
Yes what shown in the video is not in the file
There is a page called Design Tokens@@bigpunchline . Happy to refund you if it does not meet your standards just send me an email hello@uicollective.co :)
Thanks! Variables are cool (while generators suck). But I would want to use functions to get colors, so that we could define a base color and get its shades automatically. Odd it's not still there.
Totally agree. Figma needs to get a little more technical IMO
Thank you so much, really helpful video.
Glad it helped :) Please subscribe and share where you can :)
Very informative, thank you so much.
Glad it helps!
@@UICollectiveDesign what's better token studio or variables?
Check one of my most recent videos :)@@atharnadeem6947
amazing it really helps me to deploy fast my DS.
Thanks!! Please subscribe and share our channel where you can
Great tutorial. May I ask why do we need layers and layers of collections in variable? I mean .. for button as an example, can't we just link that button's filled colours to "brand - primary blue"?
I would take a look at our token/variale naming and setup guide. It will go more in-depth!
@UICollectiveDesign i see.. can I say it is okay if I use root variable for all my component ?
@@whyzytcg8873 I would highly advise against it. You will end up with issues further down the road
What is inverted in the surface doc? And what is the difference between Dark mode and Inverted?
What level do you apply different modes at? The "lighter/darker" naming convention in 'alias' makes it feel like 'mapped' is the best place to handle modes?
You got it! In the mapped folder. Take a look at my most recent multibrand video! :)
Thank you! 😄
Of course! Please subscribe and share our channel where you can :)@@mikedawson9073
I'm a bit confused. What is the point of going from color -> alias -> map when you could just go from color -> map ? What value does the middle step make?
I would watch our guide to token and variable naming/setup video. It goes in-depth :)
Hey if i created local color variables in a library file, is it possible to sync/access those color variables in another file in the same project? How would i go about doing this?
Publish the file, and then subscribe to it.
In the top bar, hit the arrow next to the file name, and then publish.
Then, in another file, hit File>Libraries, and toggle on the library you want :)
Can anyone provide link of this library? Not able to find in the course.
In the course, click the paperclip icon, and it will dropdown for download.
Great stuff, thank you for sharing this. Quick question...What are the pros of having [ Brand tokens
I was wondering the exact same, so thanks for asking this question. Let's hope he replies. :)
Waiting patiently for this reply 💯 but i guess is because sometimes as a designer you may want to change the button/text color without changing the brand color and inline with that, you can also play around with the theme when you want to compare stuff
I was also wondering about this, it seems like having an extra step of over complication of alias tokens, rather than using component tokens.
@@cipeey Yeah it also seemed like an extra step to me too.. And to what you're saying, its because sometime you want to change de button/text color without changing the brand color. But why not linking it to brand color straight away, and when edit needed you change swap or change the brand color? hmm
I've been trying to figure out the answer to this question myself too haha. Have you found a pro to doing so? The main benefit I can think of is having a more clean naming system, example, this would lead to [surface/action-1] -> link to -> [color/primary] vs linking it to [color/purple-500] , but a solution could be to have the brand token display those names instead, so... #??? -> [color/primary-default] -> [surface/action-1]. Would just depend on the size of the design system you're working with I guess, and if you need more advanced control.
Curious why you didn't do "blue/dark" and "blue/darker" so they are further divided up.
That's an option as well! Naming conventions can change :)
I have different greens, reds, blues... how do I map them correctly in the brand collection until I specify them in the alias and mapped?
Do you mean just different shades of green?
@@UICollectiveDesign like, a green scale for success and another used for graphics, for example. Should I make a larger scale that holds both greens?
@@GustavLopes8 Yup one scale for both greens is idea
Thanks for your insights on Figma variables and design system structure! Much appreciated!
Is it necessary to use a complex color system for minor brand color changes when updating the library color values achieves the same result?
However, what will happen to the color-named variables if the brand undergoes a complete rebranding?
For example, if the new brand style guide doesn't include colors like blue, teal, or purple, creating a new set of color-named variables and reassigning them would require much maintenance.
Moreover, rebranding usually entails changing the color scheme and introducing new features and components, potentially resulting in more substantial design system changes.
Furthermore, new team members may face a steep learning curve when utilizing and managing the intricate design system color styles.
Isn't it better to keep the system simple for big UI projects and use name conventions based on element purpose instead of color-named variables?
For example:
BG: Primary, Secondary, etc.
Base: 50, 100, 200, 300, 400, 500, etc
Accent: 50, 100, 200, 300, 400, 500, etc
Action: 50, 100, 200, 300, 400, 500, etc
Negative: 50, 100, 200, etc
Positive: 50, 100, 200, etc
Warning: 50, 100, 200, etc
Info: 50, 100, 200, etc
Plus, some notes on color usage.
This approach will provide you with a reusable flat design system across projects of all sizes and unlimited branding options based on my experience.
What do you think?
Let me put together a thoughtful reply to this :) Stay tuned
@@UICollectiveDesign Will stay tunned indeed, thank you!
Great. What happens if the blue brand color is update to a purple? Not all the action color will be blue colors.
can you tell me where is this Design token page in the Figma File that you have provided?
Did you download the right file?
The color are added in the Variables but i cannot find the Frames for it
It is the paid file now@@aadichester
Does the mood make it easier?
I mean Instead of using feedback color as a variables
Or that's an old update?
Hey, tbh I don't get it. You organize the theme colours in a theme group however telling in the video "you don't have to write theme"? It feels like you're spreading the colours to specific purposes like theme etc. and while creating buttons, you use the purpose colour which links back to one of the main colours? That's the magic isn't it?
Which part of the video? I may have been referencing that it doesn't need to be the term 'theme' but can also be 'brand' or 'global'. But yes, having a multi-step collection structure that links back to your brand colors! :) Thanks for the dialogue :)
Can you make this template (design tokens section) actually free to download and reuse as you promise in 0:53s? Your Figma file does not allow to copy layers, and they are blurred :(
The blurred file is our design system. This is not free.
The design tokens file is a separate template. We had to mark all our content behind a $10 paywall as other creators were recording/taking our content, rebranding it, and uploading it as their own. It was free for several months.
Great but I still dont get, why I need a theme color? I have 4 brand and with that, 4 brand color sets, why do i need themes?
Nice video, thanks. What's the point to create 100 categories with blue colors connected to each other, instead of using one Style "Primary blue" color applied for all 100 elements? and easily change it if you need it
More granular control. You can change the button color without changing the brand color
@@doity Yes! Thank you
This is a good video, but i still don't understand why you kept in 'mapped' collection for "border" - all the action states ("focus") and the color-level ("primary") in one croup of hierarchy. this is very confusing? because those are different things..
(in the suggested file that i downloaded)
Sorry for bad English
Mapped are all the specific 'actions' or 'use-cases' associated with your colors, and they tie back to your primary, as primary is not an 'action' or 'use-case' of a UI. Does that make more sense?
I noticed that in the tutorials you are using darkest to lightest to describe colors, but in the UI collective system it seems to be using numbers instead (25-800 etc). This is also common in other public DS. I’m currently creating a design system for my company and trying to figure out which of these to use. For instance I have 6 brand colors where dark-light would work great, but then I have nearly 12 grays and that naming wouldn’t work. Is it ok to use both naming styles in a system? There is also some tech debt here and I won’t be able to rename some of the colors dev is already using like I would prefer… thoughts?
I'd say choose one method and stick with it as best you can. My second most recent video might help you as well.
If you have 12 greys, then maybe use the number scale. If your DS is still under construction, think about why you have 12 greys, and if you need so many. I always like to simplify my colours as much as possible and add others as I need to later on.
Let me know if you have other questions :)
@@UICollectiveDesign thanks alot for responding your vids have been insanely helpful!
I am trying to find ways to limit the amount of grays. Because my dev team doesn’t want to change the naming and they haven’t been working consistently with their own color variables, 3 elements can be the exact same color (or really close) but have 3 different names. I will reach out to my team and see if we can find a feasible way to work through the tech debt on colors. Thanks!
Sweet! Join out community and I can help out whayever way I can@@cp3onmtv963
Do you have recommendations for automatically generating all of these variables to a document that is similar to the one you started out with: All colors with their names, hex codes and swatch?
Not right now unfortunately :(
Hi, i have a question, what if i have blue-default for example for text and also buttons but i only want to change color of buttons. Thanks for response.
Did you mention it's available for free? 0:55
Due to some downloading our content, adding their own branding, and re-selling, we have put it behind a $10 paywall
I can't find any template. Please share the link.
In the provided file design tokens page is missing.
What file did you download?
Hey, thanks for the tutorial, you named some theme token colors neutral-light for example. How would this work for a dark theme that also uses this token?
Should be able to inspect our design system in the preview to see how this would work
Thank you, it's amazing feature
You're welcome!
Great video!! However there is no figma file to download.Could you please add that .Thank you
Thanks for this! I have a question about opacity in variables. I want to create a variable "White" in my brand colors and in my theme colors i want to use the same "White" but with different opacity. Is it possible to have control over the opacity for the same color token without creating a new one?
You can create opacity variables in Figma for color, but they wont be linked to another var/ just a raw hex
I guess we are no longer able to download the free template?
We had people recording our content, and reuploading as their own. To protect, we put everything behind a $10 paywall. All content and resources for $10 a month or the template for simply $10.
Super Helpful!
Glad it was helpful!
You've mentioned that the template was available for a free download but when I click the link I am prompted to pay. Am I not doing it right? lol
Previously all our content was free, but then we had some users downloading, adding their own branding, and then selling it. Thus, to prevent that, this content is behind a $10 paywall. Apologies for the confusion & hope you understand!
@@UICollectiveDesign ah ok! yep. totally makes sense. Maybe wrap a disclaimer in parentheses near the decription linkk or something saying you've updated, otherwise it could look falsely advertised. Anyhow, I apprectae the reply as well as the tutorial!
Good call out! Will do @@treyrader
You didn't explain why it's better than styles or even just simply variables without aliases...
How can you link a design system with other File when creating these Local Variables? i.e. I have a design system and when I am creating a New Project File, I'll published my Design System so whenever I change anything from my Design System, I just need to republish on the same Project File and it will be updated but with these Local Variables do I need to recreate what I have done on my Design System ?
Maybe join our slack so we can chat directly about this
Am i the only one struggling to download the template file?
Due to some sources recording our content/lessons and re-uploading to their own sites under their own branding, we have had to put all our Design System content behind a $10 paywall.
@@UICollectiveDesign Ok fair enough , but you should mention that in the description, as UX/UI channel you should know better than others that this counts as bad UX. still thank you for the tutorial.
@@hamzasadouk4741 You're right. Actually just updated the landing page to explain last night. Appreciate the feedback!
Typical Figma bug. The original color components don't link anywhere, in the button example I'm forced to change the variable color in the variable panel in order to affect the button, but the component color doesn't link anywhere. When changing the color on the original color components nuthing happens, so that's obviously a huge bug. The original component is supposed to function as the master. That's the concept of components. If this is intended then they sure made a mess of this 😱
This is such overkill. Show me a situation where a system of this magnitude experiences a brand color change that doesn’t involve re-doing the entire paradigm. I’ve worked on some of the biggest brands in the world, and the scenario where we need to prepare for the chance of a brand color changing has NEVER happened. You only add. Or subtract.
Multi-national brands with different colors in different regions. One brand with multiple design systems internally... many different scenarios.