The Art of Design Systems
- Ericka Campos and Luis Martínez
- Mar 31
- 6 min read
Have you ever wondered what makes a design system truly effective? Attending the Config conference by Figma last year was a game-changer for our Design team. The event was full of inspiration and insights, especially on design systems—a foundational element in creating cohesive and scalable products. As we apply these lessons, we've identified key takeaways that remain highly relevant and impactful today. These insights reflect the wisdom shared at Config and our experiences working with design systems.
What is a Design System?
Imagine building a house. You need a blueprint, a set of tools, and a collection of materials to ensure everything fits together. A design system works in much the same way for digital products.
A design system is like a well-organized toolkit for creating consistent and scalable user experiences across a product or brand. It includes components, guidelines, and tools that work harmoniously, much like the blueprint and materials needed to build a house. It also serves as a blueprint for designers and developers, providing a unified language and framework that ensures alignment, efficiency, and coherence in the design and development process. Just as a blueprint helps builders construct a house that is both functional and aesthetically pleasing, a design system allows teams to create digital products that are both user-friendly and visually consistent.
Key Elements of a Design System:
Components: Think of these as the building blocks, like bricks and beams, that make up the structure of your digital product. Buttons, forms, and navigation bars are all examples of components.
Guidelines: These are the rules and best practices that guide how components should be used, much like the instructions in a recipe. They ensure that everything works together perfectly.
Tools: These are the resources and software that help designers and developers implement the design system, like the tools a builder uses to construct a house.
Benefits of Design Systems
1. Scalability: Design systems allow companies to scale their products more efficiently by centralizing design and UI decisions. This scalability reduces the complexity and effort required to maintain consistency across multiple products
2. Maintainability: A centralized design system makes maintaining and updating products easier. Changes can be made in one place and propagated throughout the system, ensuring consistency
3. Productivity: Design systems enhance the design and development process, enabling teams to work more quickly and efficiently.
4. Consistency: By providing a unified set of guidelines and components, design systems ensure a consistent user experience across all products and platforms
5. Improved Code and Design Quality: Design systems promote best practices and standardization, leading to higher quality code and design
6. Knowledge Sharing: Design systems facilitate better communication and knowledge sharing among team members, reducing silos and improving collaboration
Misconceptions of Design Systems
1. Design Systems Limit Creativity: Unlike popular belief, design systems do not limit creativity. Instead, they provide a solid foundation that frees designers to focus on solving unique challenges and crafting innovative user experiences
2. Design Systems Are Just for Big Companies: Design systems are beneficial for organizations of all sizes. They help small teams work more efficiently and maintain consistency, just as they do for larger companies
3. Design Systems Are Rigid Frameworks: A common misconception is that design systems are inflexible. In reality, they are living documents that evolve to meet all needs.
4. Design Systems Limit Flexibility: Some believe design systems restrict flexibility. However, they provide a framework that supports customization and adaptation to different projects and requirements
5. Design Systems Are Just for Designers: Design systems benefit the entire team, including developers, product managers, and other stakeholders. They facilitate better communication and collaboration across different roles
6. Design Systems Should Employ All the Latest Industry Techniques: While it's essential to stay updated with industry trends, a design system should be functional and goal-oriented rather than just following the latest trends
The Core of Design Systems
Building a successful design system involves focusing on a few key principles. These principles, highlighted at the Config conference, are essential for creating effective and innovative design systems:
More is not better: One of the most important lessons from Config was the emphasis on simplicity. Complexity can often hinder progress, so we should try to remove unnecessary elements, allowing for more refined and adaptable designs. Iteration is key; it's about learning from each version and embracing the changes that come with it. This mindset is critical in evolving and perfecting a design system.
Design first, add constraints later: At Config, it was highlighted that the initial focus should be on the creative process, letting ideas flow freely. Constraints can come later as a guiding framework rather than a starting point. This approach encourages innovation and allows for more fluid and dynamic design outcomes.
Design Tokens: Expressing brand identity through design tokens is an essential aspect of a modern design system. Design tokens are the core, reusable values that define a design system's visual and functional attributes, such as colors, typography, spacing, and motion. They are the building blocks that translate a brand's identity into code, ensuring consistency and scalability across different platforms and devices. By centralizing these values, design tokens make it easier for designers and developers to maintain a cohesive look and feel and allow for efficient updates and customization within the design system. Tokens should be small, easy to understand, and named with intention, ensuring that designers and developers can effectively use them.
Collaboration and Vision: A design system thrives on collaboration. When we create or maintain a design system, we should work closely with the team, including designers, developers, and product managers. Conducting workshops and sharing ideas ensures that no valuable opinion is left unheard. Additionally, creating a vision and rooting every decision in that vision builds confidence and direction, ensuring the system aligns with broader organizational goals.
Reflecting on Design Systems: Key Questions to Consider
To ensure the effectiveness of our design systems, it's important to ask ourselves some key questions regularly. These reflections help us stay on track, improve our work, and adapt to new challenges.
· Are design systems helping us work better while maintaining quality?
Consider whether the design system streamlines workflows and makes the design and development process more efficient. Are team members able to work faster and with fewer errors? Is the product's overall quality improving due to using the design system?
· Are we effectively resolving ambiguity and achieving clarity?
Reflect on whether the design system provides clear guidelines and reduces confusion. Are designers and developers able to understand and implement the system quickly? Is it helping to eliminate inconsistencies and ensure a cohesive user experience?
· Are we innovating and providing unique brand identities within system constraints?
Evaluate whether the design system fosters creativity and allows for unique brand expressions. Can we innovate and differentiate our products while adhering to the system's guidelines? Is the design system flexible enough to accommodate new ideas and evolving brand identities?
Examples of Design Systems
Looking for inspiration? Check out these top-notch design systems from leading companies highlighted at the Config conference.
· AUDI Design System: AUDI Style Guide
· Astro Design System: Astro UXDS Components
· Intuit Design System: Intuit Content Design
· Carbon Design System by IBM: Carbon Design System
Summary
In the dynamic digital design world, a well-crafted design system is essential. It not only provides a solid foundation but also facilitates innovation. The insights we gathered from the Config conference last year emphasized the importance of simplicity, collaboration, and adaptability.
A great design system doesn't just set rules; it creates a supportive framework that fosters creativity. It helps teams work more efficiently, resolve ambiguity, and deliver unique and impactful user experiences.
As we move forward, let's embrace the lessons from Config. By keeping our design systems flexible, user-focused, and aligned with our vision, we can create digital experiences that truly stand out. The true power of a design system lies in its ability to inspire and drive progress.
By:
Ericka Campos
Luis Martínez
Comments