Components
"The job of the design system team is not to innovate, but to curate. The system should provide answers only for settled solutions: the components and patterns that don’t require innovation because they’ve been solved and now standardized. Answers go into the design system when the questions are no longer interesting—proven out in product. The most exciting design systems are boring." - from link.
What are Components?
Components are the atomic building blocks of a design system.
They are reusable, content and context agnostic, and consistent UI elements that can be combined to create more complex interfaces.
Examples: Card, Drawer, Selector.
Why Components?
Components help to:
- Maintain Consistency: By using standardized components, we ensure a uniform look and feel across all products.
- Enhance Efficiency: Reusable components speed up the design and development process, reducing redundancy.
- Ensure Quality: Well-designed components adhere to best practices in usability and accessibility.
- Facilitate Scalability: Components can be easily updated and scaled across multiple projects.
- Improve Maintainability: Centralized components make it easier to manage and update the design system.
- Support Accessibility: Components are built with accessibility in mind, ensuring inclusivity for all users.
Best Practices for Using Components
- Consistency: Always use components as intended to maintain design consistency.
- Customization: Avoid excessive customization of components to preserve their integrity and reusability.
- Documentation: Refer to component documentation for proper usage guidelines and examples.
- Feedback: Provide feedback to the design system team for improvements or new component requests.
Guidelines for Creating New Components
When creating new components, consider the following guidelines:
- Reusability: Ensure the component can be reused across different contexts and scenarios - it should not be tied to a specific business/domain logic.
- Simplicity: Keep the component simple and focused on a single purpose.
- Accessibility: Design components with accessibility in mind, following best practices.
- Documentation: Provide clear documentation, including usage guidelines and examples.
- Collaboration: Work closely with designers and developers to ensure the component meets both design and technical requirements.
Where should they live?
Figma
They should live as an independent file inside this space.
Code
They should live inside the design system monorepo, specifically on these packages:
the-wall-web
└── components
the-wall-native
└── components
Resources: