I was calling myself a designer and never knew anything about variable but thanks to this video i gained very meticulous knowledge about it thanks a lot sir for providing this million dollars worth video for free as well as design file ❤️ lots of love
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!🥰
Just starting out on this series, but seeing the other videos in the playlist gives me so much joy. For all the design content out there, it's not so easy finding design system education. Thank you so much.
@47:30 Quick tip! you can do the math within the value input so no need for a calculator. Just write your initial value * 1.6 or 1.2 (e.g - 16*1.6) and figma will do the calculation for you.
I was looking for a playlist to better learn how to create and organize a design system and I was very happy to have found yours, congratulations on the video
you're really genius. I'm very happy for finding this channel in the middle of creating design system for my product. Thanks a lot for these useful informative videos and templates.
Thank you so much for this!!! Taking design and bootcamp courses will teach you all the things about design thinking, but something like this would have been so useful towards the end to get designers on their way and able to push out designs more quickly after familiarizing with the basics of figma. I love the detail with which you discuss things and go through them step by tiny step. My design work has expanded to platforms and dashboards, so having a system like this feels invaluable in communicating stuff to my developers. Thanks SO much for helping me create this!! Onto the next video and joining UI Collective. :)
Your work is truly exceptional and has made a significant impact on many people. The only thing I could suggest is adding 4K quality content, which would be the cherry on the top. Nevertheless, I really appreciate your outstanding contributions. 🙌
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.
@@francescof96 I have been asking myself this same question the past few days. I feel like for my purposes, three levels is too deep and unnecessary. Especially if you are theming using modes. Modes really take the place of that third layer.
Very awesome content. Quick question, for the scale, why not just name them 1, 2, 4, 8... etc instead of the 100 system? Not sure I understand the advantage of using 100s
In a nutshell, if the value changes, then you're not having to change the name or introduce a new design token, which can have downstream impacts to developers.
Thanks for sharing the information. I have a question regarding your approach. Do you typically create the design system before moving into the design phase? If so, how do you manage the selection of colors for elements like borders, surfaces, etc.? There's a strong possibility that the colors you choose may not be approved by the client or might not look visually appealing in practice. In such cases, wouldn't that lead to multiple revisions and adjustments of these colors later on? I hope my concern makes sense.
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?
Love your videos!!! They have been so clear and helpful❤ I do have a couple questions: 1. Would the responsive section typically be in the mapped section? If it wasn’t separated in 4 parts 2. How would the responsive section look like in token studio? In one of your previous videos it only had brand, alias, and mapped 3. For the brand scales, would that be considered spacing in token studio? Or is something completely different?
Great video. Question, I've noticed a lot of Design Systems utilizing primitive scales for both size and spacing ... with the new responsive collection, are you suggesting to just create "Scale" which combines size and spacing scales into the one variable group, "Scales"? This means you wouldn't have a primitive "size" scale.
Amazing question... but yes :) That is the approach here. The responsive collection as seen in the video could also pull from the scale. If you're able to also ask this on our forum it's a question I get often so would love to be able to direct designers to that thread in the future :)
Great video. I’ve always wondered if rounding values from the Typescale tool, as I've done, affects its precision or purpose. Given how precise math is, does rounding compromise the design’s consistency or functionality? Just a thought.
Thank you so much for the course. I’ve been trying for weeks to figure out how to name color styles and how to organize them in a way that minimizes the number of styles while covering the maximum number of components. Your videos have been extremely helpful! I also have a silly question: how do you quickly duplicate new styles when creating them in the variants panel? I tried using the "cmd+d" and "cmd+v" shortcuts, but they don’t work there. I have to right-click to make a copy. 😂
Awesome!! Thanks for the kind words! Please share this video and UI Collective on socials where you can :) & I press Shift+Enter to duplicate the last made variable
Thanks for this great video! I'd love to get your advice. My brand includes a green color that's quite similar to the green I picked for the 'success' color. I'm considering using just one green palette and then applying the same palette for both the success and secondary colors. What do you think about this approach?
1:21:25 Hey can you give more explanation about how you tranform size (any size for example like spaces, font, corner or anything variable group on responsive) from desktop into tablet and mobile? Or any resource that i can access? Its very helpful but i would explore the number, or is that number is rigid??
I found out that, you can duplicate your font size group, rename it as line height, and then you can do the calculation which is multiplying 1.6 by the font size, in that way, it makes it faster
Great learning! Thanks. You show that ALIAS handles Themes and MAPPED handles Light and Dark mode. Could that also be vice versa or what's the reason to do it this way? So would ALIAS handles Light and Dark mode and MAPPED handles Themes work as well?
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
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
Question regarding the multiple brands. Say that you have a parent brand and multiple brands underneath. All of the child brands are using all the same parent brand attributes (primary brand colors, typography etc), but they may have their own color shades. Do you create a new brand collection for the child brand, and then in the alias or mapping you link so the different brand collections? I hope i'm making sense here :)
hi! At which collection would you add the dark mode? I have added the different colours on the primitive, but when creating alias it's not possible to select the mode colour. So at which section would i set my different colours? Do they have to be set up as a primitive as well?
Can you ask this on our forum? I get this question a lot so would love to be able to share a link with those who ask directly :) that way the community can contribute and join the convo
@@UICollectiveDesign sure, will do, I have already found your video to dark mode, however. :) I have a very different primary colour but the rest can be shades so I have followed your approach to add the dark mode as mode in the mapped section. I'll post this on the community for you to answer if this is the right approach. Thanks for the quick reply! I haven't come around to use the Figma tokens properly until now, so I'm still learning how to use this in an effective way.
How does one call these variables in a separate file, I have a design system set up and I can call it from the team library. My question is how do I call these variables as well over there or do I need to first create this process in my design system file and republish the entire thing, will that enable me to call these variables as well?
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 )
I’m new to Figma and uncertain about the best way to use the design system. How should I approach this for 10 different clients? (Option 1: Should I create a duplicate of the design system file for each new client and add new pages for them) or (Option 2: Should I create a new file each time and copy components from the design system) ?
Why not use real values when naming elements at the Brand level like spacing values? It seems there is a lot of going back and fort to check what they are when you are mapping them to aliases
I still have a hard time understanding the difference between the alias and the mapped? Could we just have two levels: brand and alias and skip the mapped instead so we skip one layer of variables? Otherwise, what is the benefits when designing? Thanks!!
its a little bit confusing when we reach spacing and scale. i am a beginner so i dont know what it means and where we are using it also really dont know why you picked those values and how you calculated it. But all other parts are extreamly good i grabed a lot of knowledge from it watching this video on the third time. Also i shared it to some of my friends
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.
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.
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.
The opacity technique for colour scales are rather bad, colours get desaturated very easily and quickly. It’s better to generate perception based colour scales.
Agreed - Using opacity is simply to generate a color. Then, color match that color to get the actual hex code without the opacity. If that makes sense... Would never really use opacity in a design system for colors.
A design system should take way less to build. Set up should not take this long or be too complex. If Figma doesn’t change this, the tool won’t last. Some smarter software developers will build a smarter system that does the ground work for you.
I agree and disagree. It's important to lay the foundation for success for your design system. Do you have an example of the system you're referencing?
@@UICollectiveDesign You’re 100% right. A design system plays a key role in determining the success of an execution. What I’m saying is that as designers, we will see these tools evolve over the next years towards a more simplified user experience. Preparing a file is not design. It’s like “programming”. The technical learning curve is there. Perhaps the future is that Figma or Adobe allow smart suggestions, ask questions about what you’re building before you start and throughout the process without the need of plugins. This video is great and super helpful today! It truly helps us. I’m simply talking about how overtime, we tend to simplify how we create. This current set up of design systems will not succeed overtime because it has too many manual sequences and steps. Product developers will eventually find a way to create tools that shorten this process for designers.
I was calling myself a designer and never knew anything about variable but thanks to this video i gained very meticulous knowledge about it thanks a lot sir for providing this million dollars worth video for free as well as design file ❤️ lots of love
Woohoo!! Please share this video where you can!
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 didn't even dream of something this good. Thanks for the series!
I do it for the people! Please share it on your social media where you can :)
Just starting out on this series, but seeing the other videos in the playlist gives me so much joy. For all the design content out there, it's not so easy finding design system education. Thank you so much.
Thank you for the kind words!! Please subscribe and share this series on your social media where you can :)
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 :)
@47:30 Quick tip! you can do the math within the value input so no need for a calculator.
Just write your initial value * 1.6 or 1.2 (e.g - 16*1.6) and figma will do the calculation for you.
Great call out!!
I was looking for a playlist to better learn how to create and organize a design system and I was very happy to have found yours, congratulations on the video
Thanks!! Glad you like it!
That's great to me. I found many videos to explain design systems and how to use variables and tokens but this is the best video I have ever seen.
Thanks! Please share this video :)
you're really genius. I'm very happy for finding this channel in the middle of creating design system for my product. Thanks a lot for these useful informative videos and templates.
Glad to help! Please share this video where you can on social media :)
Thank you so much for this!!! Taking design and bootcamp courses will teach you all the things about design thinking, but something like this would have been so useful towards the end to get designers on their way and able to push out designs more quickly after familiarizing with the basics of figma. I love the detail with which you discuss things and go through them step by tiny step. My design work has expanded to platforms and dashboards, so having a system like this feels invaluable in communicating stuff to my developers. Thanks SO much for helping me create this!! Onto the next video and joining UI Collective. :)
Awesome!! This is great to hear! Please share this video and UI Collective on socials where you can :)
Your work is truly exceptional and has made a significant impact on many people. The only thing I could suggest is adding 4K quality content, which would be the cherry on the top. Nevertheless, I really appreciate your outstanding contributions. 🙌
Thanks for the feedback & kind words! Will work on the 4k :) Please share this video on social media 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!
this video has made us so clear on the concept of variable and token, looking forward to such valuable content in the future, Thank you!
Glad to have helped! Please share this video on social media where you can :)
Color scale tip really got me man, cant believe i never though of it like that, one of many things im about to learn from this video, Thanks man ✌
Glad to help please share this video where you can!
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 :)
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!!
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.
@@francescof96 I have been asking myself this same question the past few days. I feel like for my purposes, three levels is too deep and unnecessary. Especially if you are theming using modes. Modes really take the place of that third layer.
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!!
best stuff i found this year. salute to the team
Thanks! Please share this video where you can :)
Before i keep going on this watch i must say thank you for your work, this will save lives. 🙏
Thanks for the love!! Please share this video on your social media where you can :)
great and educational video. looking forward to episode 2!
Thanks!! Please subscribe and share this video where you can!
Thanks, best UI/UX channel out there, keep up with the videos.
Thank you Dario! Please share this video and our website on social where you can :) Support goes a long way!
Very awesome content. Quick question, for the scale, why not just name them 1, 2, 4, 8... etc instead of the 100 system? Not sure I understand the advantage of using 100s
In a nutshell, if the value changes, then you're not having to change the name or introduce a new design token, which can have downstream impacts to developers.
Thanks for sharing the information. I have a question regarding your approach. Do you typically create the design system before moving into the design phase? If so, how do you manage the selection of colors for elements like borders, surfaces, etc.? There's a strong possibility that the colors you choose may not be approved by the client or might not look visually appealing in practice. In such cases, wouldn't that lead to multiple revisions and adjustments of these colors later on? I hope my concern makes sense.
This is a really great question. Can you ask this on our forum? Would like to be able to share the link to this question in the future
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
You're the goat! we appreciate your work and effort
Thanks!! Please share this video where you can
Swift like and subscribe - thank you so much for this valuable resource! Can't wait to get into this course!
Thanks so much! Please share this video and series on social media where you can :)
Love your videos!!! They have been so clear and helpful❤
I do have a couple questions:
1. Would the responsive section typically be in the mapped section? If it wasn’t separated in 4 parts
2. How would the responsive section look like in token studio? In one of your previous videos it only had brand, alias, and mapped
3. For the brand scales, would that be considered spacing in token studio? Or is something completely different?
Great video. Question, I've noticed a lot of Design Systems utilizing primitive scales for both size and spacing ... with the new responsive collection, are you suggesting to just create "Scale" which combines size and spacing scales into the one variable group, "Scales"? This means you wouldn't have a primitive "size" scale.
Amazing question... but yes :) That is the approach here. The responsive collection as seen in the video could also pull from the scale.
If you're able to also ask this on our forum it's a question I get often so would love to be able to direct designers to that thread in the future :)
@@UICollectiveDesign When you say forum, do you mean the the "question feed", in the "All Resources" link in the description of the video?
@@TGWatkins-m2y Yah the question-feed :) Thanks so much
@@TGWatkins-m2y Yah the question feed :) Thanks so much
Great video. I’ve always wondered if rounding values from the Typescale tool, as I've done, affects its precision or purpose. Given how precise math is, does rounding compromise the design’s consistency or functionality? Just a thought.
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 :)
Thank you so much for the course. I’ve been trying for weeks to figure out how to name color styles and how to organize them in a way that minimizes the number of styles while covering the maximum number of components. Your videos have been extremely helpful!
I also have a silly question: how do you quickly duplicate new styles when creating them in the variants panel? I tried using the "cmd+d" and "cmd+v" shortcuts, but they don’t work there. I have to right-click to make a copy. 😂
Awesome!! Thanks for the kind words! Please share this video and UI Collective on socials where you can :) & I press Shift+Enter to duplicate the last made variable
Thanks for this great video! I'd love to get your advice. My brand includes a green color that's quite similar to the green I picked for the 'success' color. I'm considering using just one green palette and then applying the same palette for both the success and secondary colors. What do you think about this approach?
Check this thread: uicollective.co/question/handling-duplicate-color-scales-for-different-purposes
@@UICollectiveDesign 🙏❤️ Thanks a lot from Tunisia 🇹🇳 !
@@yassine_zidane_yt Happy to help :) Please share this video on social media where you can!
@@UICollectiveDesign Sure
@@yassine_zidane_yt Thank you!!
1:21:25 Hey can you give more explanation about how you tranform size (any size for example like spaces, font, corner or anything variable group on responsive) from desktop into tablet and mobile? Or any resource that i can access? Its very helpful but i would explore the number, or is that number is rigid??
Take a look at our most recent video :)
Hi Kirk, the mapped collection could also be called semantic collection, right?
Yes! It could :)
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 found out that, you can duplicate your font size group, rename it as line height, and then you can do the calculation which is multiplying 1.6 by the font size, in that way, it makes it faster
That’s a great hack! Thanks for sharing
Great learning! Thanks.
You show that
ALIAS handles Themes and MAPPED handles Light and Dark mode.
Could that also be vice versa or what's the reason to do it this way?
So would
ALIAS handles Light and Dark mode and MAPPED handles Themes
work as well?
Great question and one I get often. Can you ask on our forum so I can share the link in the future?
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
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 :)
Question regarding the multiple brands. Say that you have a parent brand and multiple brands underneath. All of the child brands are using all the same parent brand attributes (primary brand colors, typography etc), but they may have their own color shades. Do you create a new brand collection for the child brand, and then in the alias or mapping you link so the different brand collections? I hope i'm making sense here :)
love u bro i was waiting for this series.
Thanks man!! Share this vid where you can
Could you have a variable collection for primitive and tokens/mapping skipping aliasing?
Yeah filming a video on this soon!
Can you for example use the same red-500 on a warning card background, but also use it on a hover state of a warning breadcrumb?
Absolutely!! This would be defined in a mapped collection, but it is best to avoid component specific tokens
@@UICollectiveDesign what do you mean?
And what would be your suggestion?
hi! At which collection would you add the dark mode? I have added the different colours on the primitive, but when creating alias it's not possible to select the mode colour. So at which section would i set my different colours? Do they have to be set up as a primitive as well?
Can you ask this on our forum? I get this question a lot so would love to be able to share a link with those who ask directly :) that way the community can contribute and join the convo
@@UICollectiveDesign sure, will do, I have already found your video to dark mode, however. :) I have a very different primary colour but the rest can be shades so I have followed your approach to add the dark mode as mode in the mapped section. I'll post this on the community for you to answer if this is the right approach. Thanks for the quick reply! I haven't come around to use the Figma tokens properly until now, so I'm still learning how to use this in an effective way.
Which color group should I publish(brand, alias, or map) the design system for the teams?
Mapped is what designers would pull most from :)
How does one call these variables in a separate file, I have a design system set up and I can call it from the team library. My question is how do I call these variables as well over there or do I need to first create this process in my design system file and republish the entire thing, will that enable me to call these variables as well?
THis is a great question. Are you able to also ask on our website so I can share with the broader community? A question I get often.
@@UICollectiveDesign I can do that, let me put it there
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 :)
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 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 :)
Why do you need to make alias and not directly connect brand tokens to roles?
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 :)
I’m new to Figma and uncertain about the best way to use the design system. How should I approach this for 10 different clients? (Option 1: Should I create a duplicate of the design system file for each new client and add new pages for them) or (Option 2: Should I create a new file each time and copy components from the design system) ?
No need to set values for linehight. when you create values for h1,h2,h3.. etc you can also set line hight values in that text properties.
Why not use real values when naming elements at the Brand level like spacing values? It seems there is a lot of going back and fort to check what they are when you are mapping them to aliases
Can i use this design system in my work ?
Yup! Absolutely! Not available for download though...
I still have a hard time understanding the difference between the alias and the mapped? Could we just have two levels: brand and alias and skip the mapped instead so we skip one layer of variables? Otherwise, what is the benefits when designing? Thanks!!
Why are typography number tokens not using scale tokens?
its a little bit confusing when we reach spacing and scale. i am a beginner so i dont know what it means and where we are using it also really dont know why you picked those values and how you calculated it. But all other parts are extreamly good i grabed a lot of knowledge from it watching this video on the third time. Also i shared it to some of my friends
very needed much
Awesome! Part 2 launches this week. Be sure to subscribe and share!
do you have discount code for student in africa
Everything is just about free
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 :)
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
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
This is money
Thanks!! Please share this video where you can
In this course, we will not be creating:
Titles or headlines
Paragraphs
Body text
Subtitles
Small text
In future video
The opacity technique for colour scales are rather bad, colours get desaturated very easily and quickly. It’s better to generate perception based colour scales.
Agreed - Using opacity is simply to generate a color. Then, color match that color to get the actual hex code without the opacity. If that makes sense... Would never really use opacity in a design system for colors.
A design system should take way less to build. Set up should not take this long or be too complex. If Figma doesn’t change this, the tool won’t last. Some smarter software developers will build a smarter system that does the ground work for you.
I agree and disagree. It's important to lay the foundation for success for your design system. Do you have an example of the system you're referencing?
@@UICollectiveDesign You’re 100% right. A design system plays a key role in determining the success of an execution. What I’m saying is that as designers, we will see these tools evolve over the next years towards a more simplified user experience. Preparing a file is not design. It’s like “programming”. The technical learning curve is there. Perhaps the future is that Figma or Adobe allow smart suggestions, ask questions about what you’re building before you start and throughout the process without the need of plugins. This video is great and super helpful today! It truly helps us. I’m simply talking about how overtime, we tend to simplify how we create. This current set up of design systems will not succeed overtime because it has too many manual sequences and steps. Product developers will eventually find a way to create tools that shorten this process for designers.