Workplace Forms
Facebook
The design system and libraries are the best way to ensure standardized look and feel to any UI, especially those that are spread across multiple tools like at Hyphen. If built well, they can also be the source of truth and supercharge your design team's ability to move quickly at high fidelity.
To ensure a high degree of consistency across our tools, and to facilitate highly rapid design delivery, I've been creating a procedural and responsive design system for the company. The libraries and the assets within them have live dependencies on one another. An update in one place will update everywhere else. This is true for the "atoms" that are the core of each component and their variations, the patterns that use those components, and the screens that use the patterns.
There are three libraries at Hyphen. There's one for each major tool (KDS and KMS), and there's a base they are dependent on.
In the base library, there are some foundational assets that are the same regardless of context. Some of these include iconography, colors, and typography.
The KDS and KMS each have their own libraries, and in them, their own components.
Components are the smallest usable assets in the UI. Buttons, pills, fields, steppers, etc. would be some of the items you could see in this library. It is fed by the base library and the typography of this context.
There is actually one smaller, lower level asset that is used in this design system, and that is the atom. The atom is the starting point for a component's variations. A change to that atom is a change to the variations.
The KDS and KMS each have their own patterns as well.
The sticker sheet, or pattern library, are the assets that are made of smaller components. An example pattern could be a card, and it could be composed of some text, maybe a field, maybe a CTA, a standardized color, etc. Those elements would be inherited from the component and base libraries.
The KDS and KMS each have their own typography system. This is due to the fact that that KDS is non responsive and on a touch screen so most everything is at a larger size than usual.
The design system, as well as anything that doesn't quite fit in a Figma file like interactions or motion guidance, is documented like anything else.
This is an sample of the documentation around motion and interactions. Each of the visuals is actually a gif to clearly communicate design intent to the software team. Detailed specifics are also called out where applicable.