A tip regarding variable organization: always limit where variables can be viewed by setting the 'scoping' in Variable > tuning button on the right > In the 'Scoping' tab, you can select whether a specific variable should appear in settings such as lines, effects, font size, etc. This is very useful to avoid getting overwhelmed by a flood of variables when applying them. I hope I’ve been clear. Thank you so much for this video! 🖤
After watching a lot of videos about design systems, I finally found one that explains everything in detail. Thank you so much for your work, and I'm looking forward to the second part!🥰
One thing I would often question is the use of these 3 color levels. Most companies can actually directly link the mapped, which I call "Semantic", to thec primitives, merging the aliases. This is because I find the 3 levels more useful in cases where the DS is used by more than one department in addition to the product department. But if we are only talking about digital product, we can already name the semantics as aliases, e.g. Text/Success linked to primary green in my experience.
@@UICollectiveDesign I use only modes to manage them. A new mode for primitives if I need another brand palette, and another mode in the semantics to switch between light and dark. Actually it's pretty fast.
@@UICollectiveDesign 100%. Mine is only meant to be an invitation to ask ourselves the right questions whenever we build something, and not always follow a method head-on without thinking. The challenge in designing systems is precisely in adapting the system to the needs of the business.
That was a brilliant video - thank you! I’d love to see more content about handling multiple brands. The company I work for frequently reskins designs for other companies, each with their own distinct colour palettes, along with minor tweaks like adjusting the corner radius of CTA buttons, and so on. Regarding the part at the end of the video where it mentions creating another brand collection, is there a way to duplicate the entire main design system and simply replace the colours?
Not something I work with now but as gradients are more styles then something you apply at the variable level (just apply variables inside the style), it could make sense to have another group in brand where you store these, and then apply from there. A lot of different options with this...
@@UICollectiveDesign Thanks I'm currently creating StartColor and EnColor within the border group in the mapped collection. E.g.: secondaryStartColor and secondaryEndColor (cammelCase). Then into the gradient I bind these two Variables. The issue I have now is regarding gradient angles. E.g. If Sprite has a diagonal and Coke has a radial.
@@lcsbrg Start and End color works well I think! & Ah yes that is an issue. I don't have much experience working with gradients unfortunately so can't be much help on gradient direction
I think I would not name the 500 of primary and secondary as default but instead create another group called brand or controls and define "primary-default", "primary-dark", "primary-light" etc. in order to keep it organized.
I am sometimes confused to trace down my neutral / gray color from the brand color , can you suggest me the method to get it ( if three I can apply a tricky way to extract it from my brand color )
Another comment: instead creating one collectio per each brand, what if you create one Variable mode for each one within the brand collection. So each brand might bring their own pallete. The outcome is that you will be able to switch brands in the Right Panel.
As a pro plan user, when you use the 3-tier approach, how do you make it responsive? Since the mapped collection has light mode and dark mode already set. Do I need to create another collection for the responsiveness of each breakpoints?
@@UICollectiveDesign just watched it haha. Thanks man! As a newbie, that 3-tier approach is top-notch and makes it more organized. Another question, in the responsive collection, can i also use it for all the molecules and organisms, or is it only intended for typography?
Shouldn't naming conventions be tied to the type of code that developers use? For example if a codebase is using tailwind, I'd imagine you'd want to understand how the code is implemented to avoid the engineer having to figure out what correlates to what from code to design documentation.
Great vid! A question regarding the 100 scale, can you elaborta on the reason, why not just use the actual value, so a 24 is called a 24 for example. Im pretty sure tweaking the 4px grid isnt something you do often since its the base, wouldnt that just be easier and more intuitive and also not force me to double check?
Great question and one I get often! There are two key benefits to using a 100-point scale instead of actual values: Aliasing for Brand Flexibility: By using a scale, we create an abstraction layer that allows for easier updates as brands evolve. For instance, instead of directly using color names (like “blue”), we use terms like “primary.” This approach means we can update the brand’s color palette without changing variable names throughout the system. Scalability and Interpolation: The 100-point scale offers more flexibility for future adjustments. If we have values at 100 and 200, we can easily introduce a new value at 150 if needed. This scalability is crucial as design systems grow and require more nuanced options. Additionally, we use various scales in our system, including: T-shirt sizing (XS, S, M, L, XL) Intensity scales (lightest, lighter, light, dark, darker, darkest) These scales provide intuitive understanding for designers. For example, “primary lighter” is clearly lighter than “primary light,” giving designers a better sense of the scale’s impact without needing to remember specific numeric values. Although I am choosing to use 100 scales here which might be more abstract, I did it to allow other designers to follow along if their current color scales have more than the 8 colors we are using. A primary or lighter wording might make more sense.
@@UICollectiveDesign thanks for the answer, i was referring to the spacing 100 scale, or "brand scale" not the colors - cause in spacing i can for sure squeeze another spacing in between if i need one, i feel its more intuitive to use my 4/8px spacing rules as names as well, so a 24px spacing is called 24? no?
I have the same question. When we refer to sizes like S/M or terms like "primary light," it's clear what values to expect. But when I see something like the spacing "650," it takes a moment to figure out what it refers to. It feels like this only slows down the design process
A tip regarding variable organization: always limit where variables can be viewed by setting the 'scoping' in Variable > tuning button on the right > In the 'Scoping' tab, you can select whether a specific variable should appear in settings such as lines, effects, font size, etc. This is very useful to avoid getting overwhelmed by a flood of variables when applying them. I hope I’ve been clear.
Thank you so much for this video! 🖤
Hey man!! Great tip! I should have color scoped in this vid but it escaped me. Thanks for the comment and please share this vid where you can!
After watching a lot of videos about design systems, I finally found one that explains everything in detail. Thank you so much for your work, and I'm looking forward to the second part!🥰
Thanks!! Working on second part now. Please subscribe and share this video where you can!
@@UICollectiveDesign Sure! I'm also waiting for the approval of my profile on the uicollective website .😉
I've been looking for a series tutorial on design systems like this for a long time. Thank you so much for doing this!
Of course! Please subscribe and share this video where you can :)
Jesus! everything I was looking for in one video, you're amazing, thanks for this (big) help! I'm Jr and now I understand so much more.
Awesome! Glad to hear! Please subscribe and share this channel where you can :) Part 2 on it's way tomorrow!
@@UICollectiveDesign already done, also the web hehe, thanks!!
4:10 this is such a good tip already i cant wait to see the rest of this video
Thanks!! Please share this video where you can :)
I learned a lot watching this video. I hope see new episodes of this series in the future. Thank you for shared.
Thanks so much! Please subscribe and share this video on your socials where you can!
Mano, você simplesmente fez o tutorial mais fabuloso de design system que eu já assisti. Muito obrigada. Sua voz é ótima, outro detalhe bacana.
Thank you!!
Wow the benefit of building design systems is very great for small to large projetcs. thank you very much🤗
You're welcome! Please subscribe and share this video where you can :)
great and educational video. looking forward to episode 2!
Thanks!! Please subscribe and share this video where you can!
One thing I would often question is the use of these 3 color levels. Most companies can actually directly link the mapped, which I call "Semantic", to thec primitives, merging the aliases. This is because I find the 3 levels more useful in cases where the DS is used by more than one department in addition to the product department. But if we are only talking about digital product, we can already name the semantics as aliases, e.g. Text/Success linked to primary green in my experience.
Great point! What if you need to add another brand/theme? Several common problems can often be solved using the alias :)
@@UICollectiveDesign I use only modes to manage them. A new mode for primitives if I need another brand palette, and another mode in the semantics to switch between light and dark. Actually it's pretty fast.
To each their own! :)
@@UICollectiveDesign 100%. Mine is only meant to be an invitation to ask ourselves the right questions whenever we build something, and not always follow a method head-on without thinking. The challenge in designing systems is precisely in adapting the system to the needs of the business.
That was a brilliant video - thank you! I’d love to see more content about handling multiple brands. The company I work for frequently reskins designs for other companies, each with their own distinct colour palettes, along with minor tweaks like adjusting the corner radius of CTA buttons, and so on. Regarding the part at the end of the video where it mentions creating another brand collection, is there a way to duplicate the entire main design system and simply replace the colours?
Thanks!! Please share this video where you can :) Yup - simply duplicate the file and adjust the brand colors in the brand collection
love u bro i was waiting for this series.
Thanks man!! Share this vid where you can
very needed much
Awesome! Part 2 launches this week. Be sure to subscribe and share!
You're fabulous! Best wishes to you! What if I want to add gradients within a border secondary (purple one)? Any hints?
Not something I work with now but as gradients are more styles then something you apply at the variable level (just apply variables inside the style), it could make sense to have another group in brand where you store these, and then apply from there. A lot of different options with this...
@@UICollectiveDesign Thanks I'm currently creating StartColor and EnColor within the border group in the mapped collection. E.g.: secondaryStartColor and secondaryEndColor (cammelCase). Then into the gradient I bind these two Variables. The issue I have now is regarding gradient angles. E.g. If Sprite has a diagonal and Coke has a radial.
@@lcsbrg Start and End color works well I think! & Ah yes that is an issue. I don't have much experience working with gradients unfortunately so can't be much help on gradient direction
thank you so much. could you please tell how many episodes in this full series of DS build.
Will probably be around 6-10!
I think I would not name the 500 of primary and secondary as default but instead create another group called brand or controls and define "primary-default", "primary-dark", "primary-light" etc. in order to keep it organized.
The 2-tiered approach to setting up variables is also common :)
I am sometimes confused to trace down my neutral / gray color from the brand color , can you suggest me the method to get it ( if three I can apply a tricky way to extract it from my brand color )
This is within the video :)
Another comment: instead creating one collectio per each brand, what if you create one Variable mode for each one within the brand collection. So each brand might bring their own pallete. The outcome is that you will be able to switch brands in the Right Panel.
This could work but not every brand would have the same number of colors in a color scale, or some brands could have more colors than others
As a pro plan user, when you use the 3-tier approach, how do you make it responsive? Since the mapped collection has light mode and dark mode already set. Do I need to create another collection for the responsiveness of each breakpoints?
I touch upon this within the video :) You are correct though!
@@UICollectiveDesign just watched it haha. Thanks man! As a newbie, that 3-tier approach is top-notch and makes it more organized.
Another question, in the responsive collection, can i also use it for all the molecules and organisms, or is it only intended for typography?
Anything responsive can go in there, but try to avoid component specific tokens at all costs
this is great but i just dont get it when you make "alias". you just repeat the primitive process. whats that for?
nevermind, i now see it it's for brand color. and you said you dont have secondary color so just made it pink. the next process seems make sense now.
@@polarbear8188 Awesome! & yes. Alias helps us further define brand colors
what is 'surface' for and why are the colors lighter?
These are our 'background' colors. Take a look at episode 2 and it might make more sense :)
Shouldn't naming conventions be tied to the type of code that developers use? For example if a codebase is using tailwind, I'd imagine you'd want to understand how the code is implemented to avoid the engineer having to figure out what correlates to what from code to design documentation.
Yes! Absolutely
Great vid! A question regarding the 100 scale, can you elaborta on the reason, why not just use the actual value, so a 24 is called a 24 for example. Im pretty sure tweaking the 4px grid isnt something you do often since its the base, wouldnt that just be easier and more intuitive and also not force me to double check?
Great question and one I get often! There are two key benefits to using a 100-point scale instead of actual values:
Aliasing for Brand Flexibility: By using a scale, we create an abstraction layer that allows for easier updates as brands evolve. For instance, instead of directly using color names (like “blue”), we use terms like “primary.” This approach means we can update the brand’s color palette without changing variable names throughout the system.
Scalability and Interpolation: The 100-point scale offers more flexibility for future adjustments. If we have values at 100 and 200, we can easily introduce a new value at 150 if needed. This scalability is crucial as design systems grow and require more nuanced options.
Additionally, we use various scales in our system, including:
T-shirt sizing (XS, S, M, L, XL)
Intensity scales (lightest, lighter, light, dark, darker, darkest)
These scales provide intuitive understanding for designers. For example, “primary lighter” is clearly lighter than “primary light,” giving designers a better sense of the scale’s impact without needing to remember specific numeric values.
Although I am choosing to use 100 scales here which might be more abstract, I did it to allow other designers to follow along if their current color scales have more than the 8 colors we are using. A primary or lighter wording might make more sense.
@@UICollectiveDesign thanks for the answer, i was referring to the spacing 100 scale, or "brand scale" not the colors - cause in spacing i can for sure squeeze another spacing in between if i need one, i feel its more intuitive to use my 4/8px spacing rules as names as well, so a 24px spacing is called 24? no?
I have the same question. When we refer to sizes like S/M or terms like "primary light," it's clear what values to expect. But when I see something like the spacing "650," it takes a moment to figure out what it refers to. It feels like this only slows down the design process
@@inc2000 Great question! Now for the spacing, what if you need to make your 8px value responsive, thus introducing another mode that is not 8px?
@@katerina4035 Using t-shirt sizing for spacing also works! I just used the hundred scale as that's what I like to work with :)
What is your take on using tokens studio plugin?
It's more difficult to use but can offer you more control. + Github integration!
@@UICollectiveDesign would love to see a more advanced video using Tokens Studio as well!
Won't be in this series but I can add it to my list :)