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! 🖤
@UICollectiveDesign
22 күн бұрын
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!
@guimi
10 күн бұрын
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!🥰
@UICollectiveDesign
10 күн бұрын
Thanks!! Working on second part now. Please subscribe and share this video where you can!
@guimi
10 күн бұрын
@@UICollectiveDesign Sure! I'm also waiting for the approval of my profile on the uicollective website .😉
@DaTruthHurtzzzz
3 күн бұрын
4:10 this is such a good tip already i cant wait to see the rest of this video
@UICollectiveDesign
3 күн бұрын
Thanks!! Please share this video where you can :)
@yusufkhalidmuhammad4948
15 күн бұрын
I've been looking for a series tutorial on design systems like this for a long time. Thank you so much for doing this!
@UICollectiveDesign
15 күн бұрын
Of course! Please subscribe and share this video where you can :)
@stanmx
20 күн бұрын
I learned a lot watching this video. I hope see new episodes of this series in the future. Thank you for shared.
@UICollectiveDesign
19 күн бұрын
Thanks so much! Please subscribe and share this video on your socials where you can!
@manumaranzana1403
9 күн бұрын
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.
@UICollectiveDesign
9 күн бұрын
Awesome! Glad to hear! Please subscribe and share this channel where you can :) Part 2 on it's way tomorrow!
@manumaranzana1403
9 күн бұрын
@@UICollectiveDesign already done, also the web hehe, thanks!!
@KevinJones-l3f
16 күн бұрын
great and educational video. looking forward to episode 2!
@UICollectiveDesign
16 күн бұрын
Thanks!! Please subscribe and share this video where you can!
@BrunaLopesInk
14 күн бұрын
Mano, você simplesmente fez o tutorial mais fabuloso de design system que eu já assisti. Muito obrigada. Sua voz é ótima, outro detalhe bacana.
@UICollectiveDesign
14 күн бұрын
Thank you!!
@DeignFilx
21 күн бұрын
Wow the benefit of building design systems is very great for small to large projetcs. thank you very much🤗
@UICollectiveDesign
21 күн бұрын
You're welcome! Please subscribe and share this video where you can :)
@ytRap007
12 күн бұрын
very needed much
@UICollectiveDesign
12 күн бұрын
Awesome! Part 2 launches this week. Be sure to subscribe and share!
@francescof96
22 күн бұрын
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
22 күн бұрын
Great point! What if you need to add another brand/theme? Several common problems can often be solved using the alias :)
@francescof96
22 күн бұрын
@@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
22 күн бұрын
To each their own! :)
@francescof96
22 күн бұрын
@@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.
@shahzaman4082
22 күн бұрын
love u bro i was waiting for this series.
@UICollectiveDesign
22 күн бұрын
Thanks man!! Share this vid where you can
@ninjarepair
17 күн бұрын
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?
@UICollectiveDesign
14 күн бұрын
Thanks!! Please share this video where you can :) Yup - simply duplicate the file and adjust the brand colors in the brand collection
@lcsbrg
15 күн бұрын
You're fabulous! Best wishes to you! What if I want to add gradients within a border secondary (purple one)? Any hints?
@UICollectiveDesign
15 күн бұрын
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...
@lcsbrg
15 күн бұрын
@@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.
@UICollectiveDesign
14 күн бұрын
@@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
@ahzootube
7 күн бұрын
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.
@UICollectiveDesign
6 күн бұрын
The 2-tiered approach to setting up variables is also common :)
@batman3490
22 күн бұрын
thank you so much. could you please tell how many episodes in this full series of DS build.
@UICollectiveDesign
22 күн бұрын
Will probably be around 6-10!
@polarbear8188
5 күн бұрын
this is great but i just dont get it when you make "alias". you just repeat the primitive process. whats that for?
@polarbear8188
5 күн бұрын
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.
@UICollectiveDesign
4 күн бұрын
@@polarbear8188 Awesome! & yes. Alias helps us further define brand colors
@giancarloranola6010
22 күн бұрын
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
22 күн бұрын
I touch upon this within the video :) You are correct though!
@giancarloranola6010
22 күн бұрын
@@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?
@UICollectiveDesign
22 күн бұрын
Anything responsive can go in there, but try to avoid component specific tokens at all costs
@inc2000
22 күн бұрын
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?
@UICollectiveDesign
18 күн бұрын
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.
@inc2000
18 күн бұрын
@@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?
@katerina4035
18 күн бұрын
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
@UICollectiveDesign
14 күн бұрын
@@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?
@UICollectiveDesign
14 күн бұрын
@@katerina4035 Using t-shirt sizing for spacing also works! I just used the hundred scale as that's what I like to work with :)
@lcsbrg
15 күн бұрын
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.
@UICollectiveDesign
14 күн бұрын
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
@GopalDas-er1fu
22 күн бұрын
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 )
@UICollectiveDesign
22 күн бұрын
This is within the video :)
@chiaza7735
5 күн бұрын
what is 'surface' for and why are the colors lighter?
@UICollectiveDesign
4 күн бұрын
These are our 'background' colors. Take a look at episode 2 and it might make more sense :)
@itsgivingkyle
13 күн бұрын
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.
@UICollectiveDesign
13 күн бұрын
Yes! Absolutely
@santossilva
22 күн бұрын
What is your take on using tokens studio plugin?
@UICollectiveDesign
22 күн бұрын
It's more difficult to use but can offer you more control. + Github integration!
@x1wildangelx
22 күн бұрын
@@UICollectiveDesign would love to see a more advanced video using Tokens Studio as well!
@UICollectiveDesign
18 күн бұрын
Won't be in this series but I can add it to my list :)
Пікірлер: 64