3.1 Design Tokens and Principles

Welcome to lesson number four. In this chapter, you'll learn about the first steps you need to take to create a Design System. But before that, there are two concepts you need to be aware of, Design Tokens and Design Principles. Design tokens are elements we use to store design-related variables, for example, a color value, a font family or the value for an animation or a shadow. Actually, the lighting design system by Salesforce, gives us a great definition for these design tokens. It says design tokens are the visual design atoms of the design system. Specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values in order to maintain a scalable and consistent visual system for UI development. Now, if we open that system, we can take a look at the design tokens they're using. They're categorized right here on the right, under colors, background color, text color, fonts opacity, and so on, and so forth. And if we go to font size, we can see that a token is for example, font size 1. It has a short description, it gives you an example, and you can see its properties here. Font size 2, 3, 4, 5 and so on. If we go to spacing we can find spacing large, spacing medium, spacing none. So, instead of using these hard coded values, they're using tokens because in the future, instead of changing one value in 20 different places, all they have to do is change this value in one place. So change the value of the token. Now there are two things I want you to notice about these tokens. Number one, they have meaningful names, they're very descriptive. So this color is called brand accessible. And it tells you what it's for dark variant of brand that is accessible with white. What else? Brand contrast, brand dark, brand header, brand header contrast. So, they're very descriptive with their token names, so that people know exactly what to use them for. That's really, really good. And also, I want you to notice that these options are varied across scales. We saw that here under spacing, we have spacing large, medium, none, small. X large X small, XX large and so on. So they kind of built the system with responsive web design in mind. And when it comes to using different spacing values for different breakpoints, well, it's really easy to reach out for one of these tokens. Now, should you make every single value into a token. No, absolutely not. That's a mistake. You should only consider using tokens on values that are repeating themselves in multiple places. So if you have, for example a border of color that you apply to a lot of different elements, then sure here is a token. But if you're just using a color in one place, don't bother, just use the hard coded value and that's it. Now how you store these values is really up to you, it depends on how you code. The easiest method would be variables for SAS lists or whatever pre processor you're using. Or, if you want a more universally approachable solution, you could use JSON. That's a format that was built specifically for this type of data. And if you're going to use JSON, you make sure that your data is cross platform, which is fantastic. So, if you wanna read more about the design tokens, I've actually included some links in the lesson notes, so go ahead and check those out. Now, let's talk about design principles. These are concepts, they're guidelines that you need to follow. To explain it better, I'm gonna show you a quote from Luke Wroblewski. It says, design principles are the guiding light for any software application. They define and communicate the key characteristics of a product to a wide variety of stakeholders, including clients, colleagues and team members. Design principles articulate the fundamental goals that all decisions can be measured against, and thereby keep the piece of a project moving towards an integrated whole. Now to better explain what a principle is, I'm gonna show you some examples. There are a couple of websites. This is one of them, principles.design. And here if you go to examples, you can filter by the category. Let's go to software. And let's go to HTML design principles. Here, you can see that a compatibility is one principle and you get a description here. Utility. Universal access. Let's go to front end principles. Avoid too much variation. Keep performance in mind. This is a great principle. I think everyone should follow this. Understand source order. Let content determine breakpoints, right? So when you're doing responsive web design, this is a great concept to keep in mind at all times, maintain consistency. So go ahead and check out these principles, there's also another website called design principles ftw.com. That also shows you a bunch of design principles, and you can grab any of these, and use it in your own system. That's totally fine. So in this lesson, you've learned about design tokens and design principles. These are two concepts you should always keep in mind before building a design system. Now, what is the next step? How do you actually build a design system? Well, let's think about it this way, what are the building blocks of any design language. We'll it's color spacing and typography. That's where you should start. And we'll explore this aspect in more detail in the next lesson.