![]() Interface inventory is the process of categorizing the components that make up your product. To create tokens, you need to deconstruct pages down to their atomic level, and interface inventory will help you do that. ![]() The tips mentioned in this section are based on recommendations from top design systems advocates such as Brad Frost and Nathan Curtis. Now that you have answers to the questions “What is a design token?” and “How are they used?” it’s time to explore practices that will help you streamline the process of creating tokens. They can use design tokens in code like npm package and receive design updates without changing code. Developers have access to the latest design attributes via design system software. Last but not least, design tokens simplify the development process. For example, when you design a web version of your product, you can use HEX color value from CSS, but when you design iOS applications, you can use RGBA color format. Tokens help keep your design system values in sync across all projects, and you can format them to meet the needs of any platform. The ability to create a unified look across different platforms is another benefit of design tokens. Designers update the value centrally (in one place), and the new change applies automatically to all designs on every platform. Design tokens provide a way for designers to maintain complete control over the values in their design system. Tokens are used in place of hard-coded values and allow designers to create more flexible design solutions. In contrast to these drawbacks of hard-coded values, tokens offer various benefits to the design process. Plus, it’s relatively easy to forget to change a particular value for some element (or elements) and introduce inconsistencies in the design. ![]() However, for real projects, attributes like brand color or typography are used in dozens of different places, and it takes a lot of time to adjust the values manually. Updating a single style value in the design is not time consuming. Design language changes and evolves over time, and when a product team relies on hard-coded values, it has to manually adjust the values every time it modifies a design. There are two ways designers can work with style values-either hardcode them in the design or use tokens. ![]() Illustrating the difference between a variable (blue-400) and a token (button-cta-background-color). ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |