Design System

• Documented elements, components, including both design and front-end guidelines
• Includes underlying design principles

Styles

• Brand applied to interface elements
• Color, typography, iconography

Component Library

• 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

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
  • Behavior
  • Properties
  • States
• Applicable examples
• Links to code examples if available

Front-end Guidelines

WIP