Design systems are interdisciplinary by nature. They are built and consumed by designers and developers, therefore it is important for common terminologies to exist to support the communication between these two disciplines and other related actors. . Note: while some of the concepts are explained in a way that is more related to the context of web development, most of them are applicable to other contexts as well 📖 Glossary In this post we will present some key concepts from design and development, explain their meaning in the context of design systems and point to any ambiguity that may exist. Foundation/Essentials/Principles Example of Material Design foundations Every design system is built on top of a set of fundamental rules which are shared across components or other parts. These rules can relate to visual design (e.g. , , ) or define more abstract principles such as or . animation colors typography brand personality writing style Components Example of Kor UI button component Perhaps the most used term, components are individual units (such as , , ) that have defined appearances and interaction paradigms. Components can have different variations and be customized through APIs (Application Programming Interfaces). buttons inputs tabs Patterns Example of Carbon Design login pattern Patterns define how different components can be combined in a certain way to serve specific user goals that are often repeated across screens or applications. For example, input fields, icons and buttons can be combined in a certain way to serve the goal of signing into an application. Examples of patterns are , and . forms navigation onboarding Note: UX patterns should not be mistaken with ‘design patterns’ in software engineering, which are also common ways of solving problems but specifically related to the context of engineering. Properties Example of Kor UI card properties Components can be modified through the use of properties (or ‘props’, for short). In the example of a button component, the text , and state can all be set through properties and combined to define a variation of that element. label icon disabled Properties have types. For example, label can be set as a string, allowing any character to be entered, while disabled has a boolean type, allowing only true or false as value. Slots Example of Kor UI card slots Components can have slots in which content can be inserted. For example, a card can have a slot for tabs, a slot for text and a slot for buttons. top center bottom Events Example of Kor UI tag events Events are triggered by components in given circumstances. They are used by applications to react to user interactions or changes in the components. In web technologies (HTML), all components fire a set of standard events such as or , but components can define their own custom events such as , or . click mouseover expanded collapsed checked Tokens/Variables Design tokens or CSS variables are sets of values shared across components. For example, the token can be defined as 14px, or the token set to #51AA51 to reduce repetition and increase the ease of customization. body font size accent color Classes Classes can have two meanings. In CSS, classes are used to on top of the standard ones, and this can be a way of theming design systems. add styles On the other hand, in software development classes are objects used for such as the definition of properties and functions. In this sense, components or utilities can be exported as classes. encapsulating data Binding When consuming a design system, one of the tasks performed by front-end developers is called binding (or data-binding), which means stored on a database or application. linking components to variables Binding can happen from the component to the variable (e.g. editing an input field sets a variable to the value of the input) or from the variable to the component (e.g. the label of a button is a translated string coming from the database). Both types of binding can happen simultaneously, configuring a . two-way data-binding Framework Applications are usually built on top of frameworks that take care of tasks such as routing, data-binding or translation. For example, when building web apps, frameworks such as , or are commonly used. While some frameworks can also come with component libraries, they are not intended to replace design systems but rather complement them. Angular React Vue Frameworks can also be used to build the components themselves, but a component built based on a given framework does not always have to be consumed by that same framework. For example, LitElement, Angular or Vue can generate components that can be consumed by any other. ✔️ Conclusion While the explanations and terminologies listed in this post are based on the most common practices, you should be aware that they can defer across teams or institutions. We hope this information will be useful for you and hope to see you soon in our upcoming posts :) Also published here .

Read My Stories

Too Long; Didn't Read

Developers: Build Less. Deliver More. [Learn how]	

Glossary: Design Systems Defined for Developers and Designers

Too Long; Didn't Read

Company Mentioned

Eduardo Ferreira

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Glossary: Design Systems Defined for Developers and Designers

Too Long; Didn't Read

Company Mentioned

Eduardo Ferreira

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES