Token: Should primarily be a value, functionally agnostic.
Element: Composition of various tokens. Specific function, content agnostic.
Component: Composition of various elements, may serve specific functionality that applies to a variety of content use cases.
Utility: Specific function, is either not visible or exists temporarily.
- Design identifies a need for a new shared component in a project within
sprint work.
- Designer creates a detailed spec for shared component, and surfaces the need
for component in sprint planning. If there are known instances of components that the new component will make obsolete, designer will list this audit in the component spec.
- When the component is included in a sprint, designer creates a GH Issue,
added to the Component Workflow project (link), announcing the new component.
The issue includes a responsible engineer and designer.
- This issue is shared in #design-system.
- Engineer starts building the component in Palette (link to Readme docs),
publishes the component as "WIP"
- Designer can start adding content to component, in WIP state.
- Eng and Design pair to bring component to full QA'ed completion.
- When component is ready to merge, WIP label is removed, Issue is "closed".
- The new component is ready for use, and announced in #dev (?)
The same process applies for updates to existing components as well — the
emphasis on communication ensures visibility, trust and successful adoption of
this system.
Have questions? Join us in #design-system on slack, we're always happy to help.