2 ай бұрын
2 ай бұрын
3 ай бұрын
6 ай бұрын
7 ай бұрын
9 ай бұрын
10 ай бұрын
11 ай бұрын
Жыл бұрын
2 жыл бұрын
3 жыл бұрын
3 жыл бұрын
3 жыл бұрын
4 жыл бұрын
4 жыл бұрын
4 жыл бұрын
4 жыл бұрын
4 жыл бұрын
4 жыл бұрын
4 жыл бұрын
Пікірлер
@nedal_hesham 2 күн бұрын
Thx
@nedal_hesham 2 күн бұрын
Thx dude
@nedal_hesham 2 күн бұрын
Thx
@nedal_hesham 2 күн бұрын
Thx man
@MPowerRSA 6 күн бұрын
I’ve been watching reviews for the past 3 weeks and this is the final and best one!
@user-oi6tp8ti4w 7 күн бұрын
Thank you so much!
@abuframes 8 күн бұрын
What a class! 2025 and this is still solid. Thanks you for every detail you put into this. I learned a lot
@josephofor112 10 күн бұрын
Father of the year ❤❤❤
@evalarumbe 12 күн бұрын
Hi Chris, thank you for the clear concise videos, for the brilliant templates, and for sneaking in a laugh or two :) I would love to see how this type scale could be adapted. Consider the following scenario: We need to replace Inter with a new typeface, with significantly different characteristics (x-height, etc), and we might want to rethink some of the sizes we'd previously defined for Inter (for simplicity's sake, we could leave iOS and Android out of the conversation for now). I saw your comment about waiting for Figma to release child modes, but my question is more about your workflow leading up to this implementation: How would you decide what to change? Which variables are likely to change per typeface? How would you trial-and-error combinations of primitives, on the way to deciding on which values to implement in the new type scale? Thanks for all your hard work and happy new year!
@ChristopherDeane 11 күн бұрын
Hi Eva and Happy new Year! Firstly, just change the type-face and see whether it's character widths, line-heights etc effect the other existing values. Then change each one that's problematic. For every value that needs to be adjusted, just move either up or down the primitive scale, e,g,. Letter spacing could drop from Letter Spacing None (0px) to XS (-1px), which we had to do recently at the organisation that I work for (I lead our DS) where we replaced what was our brand type-face Helvetica Neue with our own custom type-face that has wider characters and slightly different wights. What you should try to avoid is adjusting the primitive values. Hope this helps and a new episode should be out in a few days 🙂.
@kenhbethongminh1 14 күн бұрын
the UI3 so difficult to use
@ChristopherDeane 14 күн бұрын
That’s what I thought in the beginning, but you’ll eventually get used to it, just like I have 🙂.
@taptapninja 15 күн бұрын
First of all, great video! What are your thoughts on having duplicate components for web and app, such as button components, and having to modify them in both platforms? I’m currently in the process of merging similar web and app components because our designers often get confused about which one to use.
@ChristopherDeane 15 күн бұрын
The FDS series is put together with an enterprise level design system in mind, which is why I'm creating different libraries for Web and App. There's also differences between the web and app versions of a component and some components that are platform centric that don't make sense to be in both libraries. For example: In the next episode I'll be removing the "Hover" state on the buttons in the App library before I do the "Button Group" component. You can still merge the libraries, and I've done this myself in my own system called Scale (scaledesignsystem.com), but in this series they'll remain separate libraries 🙂.
@saifulvlog2023 15 күн бұрын
very helpful design system
@manikandan-b7g 17 күн бұрын
baawaaa vera maariiii
@KatarinaResetar 19 күн бұрын
Subscribed immediately! So happy to check out your videos (and music list!)! Greetings!
@carolinafernandez4584 19 күн бұрын
Hi Chris, Thank you so much-this is great! I have a couple of questions regarding the naming conventions and documentation for buttons (or any component essentially): 1. I've noticed that many design systems use names like "contained," "text/link," and "outlined" for buttons, while you’ve opted for "primary," "secondary," etc. Could you explain the reasoning behind choosing this naming convention? Do you find it helps designers and developers better understand and apply the components? 2. Would you consider including a label as part of the table containing all the buttons? I know they’re listed in the right-hand panel, but it might improve documentation clarity. Looking forward to your answer :)
@ChristopherDeane 19 күн бұрын
Hi Carolina. 1. If you use Hierarchy in your buttons, other components and even in the name of you semantic variables, it's easier for designers and engineers to understand how to use them. A primary button is followed by a secondary, primary text is followed by secondary text etc. 2. After I've done a few components I'm going to create their instance tables using the Propstar plugin so that'll happen soon. Thanks for watching and Happy Holidays 🙂.
@carolinafernandez4584 19 күн бұрын
@@ChristopherDeane Thank you so much for your reply & videos. I just had a look at your DS. It looks great. Happy Holidays :)
@subusharma1491 25 күн бұрын
This is soo helpful and exactly what I was looking for to get started with design tokens! Thank you so much for putting this together!! :)
@somarkawkabi5819 26 күн бұрын
Hello Chris, thank you for the amazing tutorial. I have a question, when we create the semantic type, it automatically connect to the style or do we need to do it manually?
@ChristopherDeane 25 күн бұрын
You have to do it manually, which is why I did it for you. Just grab the file from the link in the description 🤘.
@skip1978 26 күн бұрын
one of the best design system tutorials out there. the variable color style guide plugin does not give me the short cuts at the to as in your example. it just gives me a table or grid of the colors. And also it does not give me the color swatch component which I see right of your card table.
@ChristopherDeane 21 күн бұрын
Thanks! Make sure you are using the right plugin, here's the direct community link: www.figma.com/community/plugin/1270740078273146018/variable-color-style-guide
@skip1978 21 күн бұрын
@@ChristopherDeane thanks a lot, you were right, I did indeed use a different plugin, have a nice weekend and I wish health for your wife and family
@Whoisrealism 26 күн бұрын
Your channel is top notch you earned a subscribe! Keep on going all love
@asmaabbas7289 29 күн бұрын
Can you show how to create this with base component
@ChristopherDeane 27 күн бұрын
I cover why I no longer do this, and you shouldn't either in the last video I did about creating a button component. Take a look here: kzbin.info/www/bejne/rZKbgoaoprF1facsi=zNadvuHcWPD-DvJh 🙂
@LOOPFROGMUSIC 29 күн бұрын
May i ask why you moved from Sketch to Figma ?
@ChristopherDeane 27 күн бұрын
At the time, all I wanted to do was switch automatically between light and dark mode with 2 sets of colour variables and 1 set of components. This wasn't possible in Sketch and a plugin engineer and I tried for weeks to create a plugin that would it happen. That's when I gave Figma another go, and within days was able to make it happen with 2 sets of colour styles and the Appearance plugin. So, you can see that the lack of one feature was enough for me to switch. And now I'm a DS specialist in Figma so it worked out OK 👌.
@radojja Ай бұрын
Great tutorial! Where are spacings between text elements defined? For example spacing between two paragrafs or specing below and above title?
@ChristopherDeane 27 күн бұрын
This is up to what works for you and your team, which is why they're not built into the type variables.
@AAAdnane Ай бұрын
amazing tutorial chris! thank you
@oartsoares Ай бұрын
Let's say that when creating Dark Mode, the button in Dark Mode won’t have a border, just a background color. Should I create another set of color variables? For example: Semantic Colors & Component Colors / Button. One way to handle this could be setting the border color variable to 0% opacity in the Dark Mode column. But that might affect how the border color variable is used in other parts of the UI.
@ChristopherDeane Ай бұрын
You could and I've done this before, but for FDS it's not necessary to go into a third level of semantics.
@oartsoares Ай бұрын
@@ChristopherDeane Understood 🫡
@oartsoares Ай бұрын
Shoud I set the prototype flow for the buttons in this Component files? The interactions between states I mean
@ChristopherDeane Ай бұрын
Up to you, I don't as there are times you are prototyping and don't want the button to act like it's going to take you to a destination.
@oartsoares Ай бұрын
@@ChristopherDeane Understood. Thanks!
@oartsoares Ай бұрын
Wouldn't be necessary a Focus state for the buttons?
@ChristopherDeane Ай бұрын
When a few more components are done I'm going to add an A11y focus state to them, which is what you see when you tab to the component or use a screen reader. Adding one when you click on it is up to you.
@oartsoares Ай бұрын
@@ChristopherDeane Makes sense. Thank you!
@oartsoares Ай бұрын
Great touch on decreasing your image's opacity when navigating on the right side panel.
@oartsoares Ай бұрын
Amazing performance on the beginning 🤣. The video is great too, thank you and keep going 🚀🚀🚀🚀 Very interesting this "The component gallery" website. Would appreciate one (or more) video about this topic: interesting and helpful general websites/resources to have as a UI/UX/Product Designer
@ChristopherDeane Ай бұрын
Maybe later down the track, I'm going to get all the main components done fist 🙂,
@Tunasandw1ch Ай бұрын
Amazing, just what I needed to know! I have a question about setting up my design system structure. Let's say I have three different products with unique components but they all use the same primitive tokens with our brand colors and some spacing variables etc. I was going to create a primitive token library that is not used directly in any designs, and then create a product-specific design system library with components and semantic tokens built with primitives. What should I do with icons? I was thinking of creating a separate icon library file that could be used in all the design files since you cant really have 'semantic' icons that are mapped to primitives, but would it be better to just use the primitive library with all the other variables de-scoped so only icons show? Thanks for the help!
@Tunasandw1ch Ай бұрын
nevermind, literally just watched the first video in your series which answers this exact question 🫡
@Rob-o4y Ай бұрын
Thanks for the amazing content mate! Wondering how you put together the semantic table?
@ChristopherDeane Ай бұрын
I use a plugin in the Primitive Color episode that creates the table rows so go watch that one. I modified it from one of the presets it provides and for the table that shows the naming schema, that's in the Tools section of the file as table head and cell components.
@ST-fl5fy Ай бұрын
I don't see or maybe I missed it how do you add the mobile text variables to a mobile design?
@ChristopherDeane Ай бұрын
Once you've applied to style to a text element, you can select it or the frame it's in and change the Semantic: Type mode to "iOS" or "Android".
@tanmaypendse9823 Ай бұрын
holy shit this is awesome, very structured approach and detailed , which i love and search for the most
@Fig-Maa Ай бұрын
That was amazing...
@PopeVisuals Ай бұрын
What do I use instead of Roboto? They don't seem to have it anymore.
@PopeVisuals Ай бұрын
Nevermind. I installed it. Found out how to do it
@ElizabethArostegui 2 ай бұрын
Awesome! thanks!
@kartikeya.m9380 2 ай бұрын
Do you have any plans to be regular on KZbin or you do it as side hustle for now
@ChristopherDeane 2 ай бұрын
I have a lot going on in my personal and professional life, so it comes down to when I have time to create an episode.
@FrameThaiTunes Ай бұрын
awesome content! ur design system tutorial is one of the best i've seen. Please continue making ur amazing content whenever u r free. i will be ur viewers of those future videos! Thankssss
@oartsoares 2 ай бұрын
Why did you create 4 breakpoints but only use 2 in the Semantic: Type? Does this mean I don’t need to change the type scale between desktop breakpoints (following the breakpoints that you used i mean), and that tablet is similar, or what?
@ChristopherDeane 2 ай бұрын
So you have a choice and can extend the responsive modes if you want to suit what your product requires.
@oartsoares 2 ай бұрын
@@ChristopherDeane Understood. Thank you!
@awaises 2 ай бұрын
Could you please advise on the best way to use a design system or UI kit across multiple projects? Option 1: Should I create a separate copy of the design system for each new client and then add any necessary pages? Option 2: Should I start a new file for each project and only copy the components I need from the design system?
@ChristopherDeane 2 ай бұрын
Until Figma releases their "Child collection" feature, which will help with this, we're stuck with either creating a lot of semantic modes or using the DS as a starter for each project. Hopefully they'll focus less on stuff that doesn't really help us scale, and more on what does :)
@ElizabethArostegui 2 ай бұрын
I am struggling with Darkmode design :( I hope you do it later please.
@ChristopherDeane 2 ай бұрын
Once we get past a handful of components, I'll do a video where we use FDS to design something using the semantic colour and type variables, and it's then that you will see that dark mode is automatic 🙂.
@oartsoares 2 ай бұрын
I see some people using a three layers system for colors. Something like Primitives > Semantics > Components (blue-500 > background-primary > button-background-primary). Which is the best system to follow for a solo designer and why you chose this two layer system?
@ChristopherDeane 2 ай бұрын
I use a 2 layer system in FDS, my premium DS called Scale and at work, where we've been able to use the same set of semantic colour variables for 7 different products. After successfully doing so, I've realised you don't need 3 layers, you just need to keep things simple and consistent without too many snowflakes 🙂.
@oartsoares 2 ай бұрын
@@ChristopherDeane First of all, thank you for answering. I'm glad to hear that, as I have been struggling myself to create a good system without much complexity. Knowing that you use a two-layer system and have validated it in real products gives me more confidence. Thank you for your videos; your way of explaining and building the system is very consistent and easy to understand compared to the majority of videos on KZbin.
@myfaq4722 2 ай бұрын
Thanks a lot for your content.
@marakidesigns9175 2 ай бұрын
Figma Evangelist🤩🤩You make better tutorials than Figma itself 😍😍 I would love to see more tutorials. Keep on good work!
@kartikeya.m9380 2 ай бұрын
Loved this variables series ,When you will be teaching advanced prototyping .
@ChristopherDeane 2 ай бұрын
We're about to start components so if I did do any prototyping tutorials they would be after we've covered the main baseline component... a looooooooooooong time from now 🙂.
@fotocube 2 ай бұрын
Happy halloween! 🎃
@FernandoComet 2 ай бұрын
How do you move this system then to Webflow?
@ChristopherDeane 2 ай бұрын
I was going to say the Figma to Webflow plugin from Webflow themselves, but it doesn't support collections with modes which means it doesn't see the Semantic: Color or Semantic: Type variables inside those collections. Until they fix this issue, you'll have to do it manually like I did with my main design system called Scale in Webflow and Figma... one by one, until the job was done 🙂.
@FernandoComet 2 ай бұрын
@@ChristopherDeane Thanks a lot, very interesting knowing your workflow
@hayaletisligiii 2 ай бұрын
I love this series...
@phuonghoang9268 2 ай бұрын
Me too 👍
@hayaletisligiii 2 ай бұрын
Thank you for videos.. Can you add variant and auto layout? you are amazing.
@ChristopherDeane 2 ай бұрын
When we create our components and use FDS for some designs, we will 🙂.
@marakidesigns9175 2 ай бұрын
That was really helpful thank you sir🥰🥰. Can't wait the next epsiode
@paulalopezpintado9056 2 ай бұрын
It is very interesting everything that you are explaning. I would like to ask you how do you choose the dark colors from light colors palette. How do you know the equivalence? any tip? Thanks
@ChristopherDeane 2 ай бұрын
Hi, this has just come from experience over the time I've been a design system lead, I follow industry standard dark mode and elevation principles (levels of the UI) and test A11y contrast ratios and how you generally want the dark mode to look; tweak a few things until it feels right and go from there.
@MrBrunobrunic 3 ай бұрын
Hi Chris, I have a question. Is this episode connected to Episode 4 on typography styles? I noticed a difference in how the styles are organized. Could you explain the steps to create styles and naming conventions, like is shown in this video, after finishing the variables? Sorry, I'm trying to follow along, but I'm stuck at this point. all the best!
@ChristopherDeane 2 ай бұрын
Hi there. This is explained in the naming and variables part of the documentation to the left of the text styles. As for how I came up with the naming conventions, that's happened while I've followed industry standards and evolved my own way of doing so over the years I've been creating and leading design systems. I won'e be doing anymore type episodes as we're about to move onto to scoping and components, so when you get stuck, just download the files in the description which will allow you to move on to the next episode. Thanks for watching 🙂.