Thank you so much for this design system tutorial, I can't express how appreciative I am for this series. As a solo designer at a startup company, sorting out the design system is really a pain for me. Your videos really helped me A LOOOOOT on growing my knowledge of design system as a whole as well as how to build it from scratch.
literally the only tutorial series that made sense. Can't begin to thank you enough after spending hours of listening to other tutorials twisting this topic.
Hey Christopher, fantastic series. Wanted to shared a faster way to get the Primitive Colors renamed with the Rename It plugin. After renaming a row of colors to Red for instance, you can then select the entire row of Red, 100-900, open Rename It again and select Keywords: Layer Name then add a "/" in the Name then select Num. Sequence ASC in the keywords and add a "00" to the name. so the Name field should read {%*/%N00}. This renames all of the tints and shades without having to go vertical row by row for 100, 200 and so on. Not a ton of time but a few minutes, just wanted to share with you, cause you saved me a boat load of time hours on everything else. Thanks again.
Thanks for the tip. It works well for me! Based on what you shared, I helped summarize and simplify the process for everyone here for the renamed it plugin part: 1. Select 9 "cubes" in a row. 2. Open the Rename It plugin. 3.Insert "Color/%N00" in the column. 4.Ensure the sequence starts from "1".
To be honest this is awesome. I really needed a tutorial where someone could really walk me through.The tutorial wasn`t based on showing your skill. But instead how to get it done. It was staright to the point. I feel like I knew what I was doing for the first time. unlike other video. All talk no knowledge pass. Please make more video
How come you're not using Figma's built-in batch rename functionality? Thanks for teaching about all these great plugins in addition to showing your method for creating color variables!
hey christopher, thanx for the content. You should try a color generator plugin called 'Foundation: Color Generator' and skip the all manual process to create styles and naming after creating style iam using 'style to variables' plugin then delete all the styles. Give it a shot
Hi, Your content is highly valuable, and I really appreciate it. May I ask a small question? Why do we need to create multiple shades of a color? I’m concerned that we might not use all of them or could use them inconsistently without a clear purpose. Sometimes, I cannot know when we will use the shade from 100 to 400 or from 700 to 900 Thank you so much
Watch the next episode about Semantic Color Variables, you won’t be using them inconsistently and once you start using them on illustrations and charts as well as UI elements, you’ll soon find that you use most is them 🙂.
One of the best videos on RU-vid. One questions - If I am working on a mobile app (large crypto app) should I create wireframes first or design system?
FDS is setup like a design system inside a single organisation with multiple products, and uses the "Brand" set of tints to change the main brand colour of each product but keeps everything else the same for consistency across the organisation (Like Google, IBM, Atlassian). If you use it for multiple organisations or projects then you can duplicate it, change the colour sets and type-face to their brand guidelines and go from there.
Adding more or less "Lightness" value is the same as adding increments of light in one direction and black in another. And the plugin I use provides the exact same values if you do it manually.
Also, didn’t see the neutral shades in the files you provided so I went to your Scale system to see how they were setup there. Can you explain the logic behind the contrast ratios in part 2? For instance, when I put 8c8c8c into web aim against 000000, it gives me a ratio of 6.24:1. If I change that pure black to 1a1a1a though, I get the ratio you have shown, 5.17:1. I’m aware that we should always steer against using pure black in UI’s, but how did you decide to use 1a1a1a as a baseline instead of pure black, and HOW would you explain WHY this change should be made to a more junior designer or stakeholder who doesn’t see an issue? I (think) this is my last question on color 😂, thank you!!
There are still products that use a black background behind light text (I work in one), and some popular apps do so to turn off the oled cells completely (Saving battery). That's why I test for a base contrast on black and white.
This so clear and concise. Plus these plugins are blowing my mind!! Hoping you can lend some advice though. I’m in the process of creating my companies first design system. The software has been out for years, therefore I’m inheriting a lot of non best practices. For instance with colors, there are so many different names for the same colors and some that are so close in value to other ones it makes no sense to keep them. Your series and many others is building from scratch, but how do you deal with this basic foundation if you have to stick with the names already present in the code? I can’t go back and change what’s there, but trying to find a way to change what we do moving forward, however I’m stuck on color naming. Thoughts?
Audit then consolidate. - Grab all of your the colors from the same set (eg, Blue) - Place them all next to each other from lightest to darkest - Decide on which blue from that set you want to use as your base blue - Run the Color, Tint and Shade Generator plugin to create 9 tints - Move the different blues from your audit next to the ones that they are closest to - Remap them to the one they are closest to, you could do this in a table that has the new color on the left, and the ones it's replacing on the right - Designer and engineers then do a find and replace in Figma and their code-base to update the colors (This could be done as their hex value as well, if it's been used in-line Sounds like another video idea doesn't it? 🙂
YES it does an hopefully very soon!! Dev manager did suggest a find and replace but wasnt confident that it would reveal all of the weird places. I will ask about this again. (PS, currently in the middle of audit). So im clear, you're saying it would NOT be wise to take the current colors we have and simply rename them to 'blue-50, blue-100' etc, but that we should use the correct values given from the plugin? Naturally this sounds like best practice to me, but it isnt solely my decision. Have to get buy in on these changes. Any articles you could link on how to frame conversations to show value in these reworkings? Also, best place to document these changes (for Dev)?@@ChristopherDeane
Yes, the tints and shades with that the plugin provides should be good enough to use, you can always tweak their settings is your brand team can see how doing so would improve the complete scale and how they look in digital and more traditional media.
Question How can I chose the right color for text, border, and surface (Background) from my color palette with it complying with color contrast each complenting one another
It really comes down to a bit of exploration as you design and the refinement of a set of semantic variable (That I go over in episode 3). I start with on-white and on-black, then if there is a gap once you start designing, it can be filled by adding extra semantic variables, without adding too many, if you know what I mean 🙂.
@@ChristopherDeane Scale Design works now, i tried earlier for 5 minutes to access it & i couldn't only the drive link worked that time! Thanks for the resources ❤❤
