- Documented elements, components, including both design and front-end guidelines
- Includes underlying design principles
- Brand applied to interface elements
- Color, typography, iconography
- Common core elements that the team can use throughout the product
- Design Files or living code
Ways to create library components¶
There’s no single best approach when it comes to building components. Methods like fast-prototyping will sometimes require interfaces to use components before they become available and documented in the library.
In the book Building Design Systems, two different approaches to creating new components are described. Both methods of construction are outlined here:
- Build Up Components to Create Interfaces: Start with building the components and grouping them until the interface is complete.
- Break Down Interfaces into Components: Break an interface into parts until and start creating components for the reusable ones.
Both methods will still require documentation to be created at the end of the process. Still, the former method focuses more on anticipating design requirements based on available solutions, and the latter happens as the result of prototyping activities.
Documenting components is a crucial step of the design process. It provides the team with a resource to reuse and integrate components and maintain consistency as the product evolves.
Ideally a component library entry should contain the following:
- Name of the component
- Description of the component
- Usage guidelines
- Applicable examples
- Links to code examples if available