What is a Design System?

Design system is a design language in which all the people involved can participate, understand and contribute to the product. With the goal of creating a scalable, consistent, intuitive product.

What is part of a Design System?

- Core (Design Tokens)
- Design Guidelines
- Components
- Pages
- Voice & tone, Grammar
- Accesibility
- FAQ

‍

Why do we need a Design System?

As the product progresses, the level of complexity increases in every sense, control is lost if we do not have a design system that allows us to be in sync with the team and meet requirements, deadlines, etc.

‍

Clarity

Eliminate ambiguity, allow people to see, understand and act with confidence.

Unsafety

In the crowd of Modals or pop ups: Which option to use, which one is correct, and are they following good practices?

‍

Efficiency

Thanks to pre-tested components we can use them in new projects, allowing us to focus on solving problems, avoiding development / design questions that do not add value to the product.

Consistency

Create an intuitive product thanks to a good consistent user experience across all platforms.

Business-level benefits

• Greater speed and reduced time to market, thanks to component libraries and documented navigation patterns, is an agile process that allows us to launch new versions more quickly without losing quality.
• Intuitive interaction with the product, reducing adaptation time and friction for new users, thanks to a good user experience and consistent design on all platforms.
• Reduction of time and money invested in developing and designing non-reusable solutions.
• Clean design and code, and the time invested in creating a solid and clear design system for everyone from the beginning, will allow us to make changes as the product scales.
• Greater collaboration and knowledge exchange among the teams that have access to the design systems allows the entire team to be on the same page so that they can collaborate and contribute to the product.
• Another benefit is that new team members will have a much more streamlined onboarding process.

‍

‍

Design Tokens

A Design Token is an abstraction of a visual property such as color, font, width, animations, etc. These raw values are independent of the application and the programming language used on any platform. Artículo recomendado.

‍

Types of Design Tokens

• Colors
• Border Colors
• Background Colors
• Shadows
• Text Colors
• Animation durations
• Z-Indexes
• Media Queries
• Spacing
• Sizing
• Rounded Corners
• Font Weights
• Font Sizes
• Line Heights
• Font Families

‍

‍