Design System

Definición Rápida

A Design System is a collection of reusable UI components, guided by clear standards (principles, style guides), that enables teams to design and build digital products in a coherent and efficient manner.

What is a Design System?

Imagine you’re building with LEGO. You don’t have to create each brick from scratch every time you build something new. You have a set of standard bricks (2x2, 2x4, etc.) that you can combine to create anything. Plus, you have an instruction manual that tells you how the pieces fit together.

A Design System is that, but for digital products. It’s much more than a simple style guide or a component library. It’s a single source of truth that includes:

• Foundations:
  • Design Principles: The philosophical rules that guide design (e.g., “Simple, Clear, Efficient”).
  • Style Guides: Rules on how to use visual elements (colors, typography, spacing, iconography).
• Components:
  • The collection of reusable UI elements (buttons, forms, cards, menus). Each component is designed, built, and tested.
• Patterns:
  • Design solutions for recurring problems that combine multiple components (e.g., a pattern for a login form, a pattern for a data table).
• Governance and Documentation:
  • Who owns the system, how changes can be proposed, how it’s updated, and how it’s used. Documentation is key for adoption.

Why is it important?

• Consistency: Ensures the user experience is coherent across all parts of a product or among multiple products from the same company.
• Efficiency: Frees designers and developers from constantly reinventing the wheel. Instead of designing a new button every time, they can take the one that already exists in the system. This dramatically accelerates the development process.
• Quality: The system’s components are tested (usability, accessibility, performance), which raises the overall product quality.
• Common Language: Creates a shared vocabulary between design and development. A “Card” is a “Card” for everyone, with the same specifications.

How is it created and maintained?

Creating a design system is a product in itself, not a side project.

1. Visual Audit: Review your entire application and inventory all the UI elements you’re using. You’ll be surprised by the number of variations of the same button you can find.
2. Define the Foundations: Establish your design principles and style guide (colors, typefaces, etc.).
3. Build the Basic Components: Start with the smallest elements (often following Atomic Design methodology: atoms, molecules, organisms). Design and build the most fundamental components like buttons, inputs, etc.
4. Document EVERYTHING: Each component must have clear documentation about when to use it, when not to use it, its variants, and its accessibility specifications.
5. Establish a Governance Process: How is a new component added? How is an existing one updated? Define a clear workflow so the system evolves in an orderly fashion.
6. Encourage Adoption: A design system is only useful if people use it. Make it easy to find, easy to use, and demonstrate its value to the rest of the organization.

Mentor Tips

• Start small: Don’t try to build the entire system at once. Start with the most commonly used components and grow from there.
• Treat it as a product: A design system needs an owner (Product Owner), a backlog, a roadmap, and users (the designers and developers at your company).
• Collaboration is mandatory: A design system cannot be created solely by designers or solely by developers. It requires deep and constant collaboration between both disciplines.
• Documentation is not optional, it’s the key: A design system without good documentation is just a component library that nobody will know how to use correctly.

Resources and Tools

• Documentation Tools:
  • Storybook: The industry standard for building and documenting UI components in code.
  • Zeroheight: A tool that syncs with Figma and Storybook to create design system documentation sites easily.
• Examples of Public Design Systems:
  • Material Design by Google: One of the most famous and complete.
  • Carbon Design System by IBM.
  • Polaris by Shopify.
  • Atlassian Design System: A great example of excellent documentation.
• Books:
  • Atomic Design by Brad Frost: The book that popularized the modular approach to building design systems.