Design system · Product design · 2022
A shared design system for a growing automation platform
DataFlow had grown through individually designed pages and block settings. Spacing, controls, and states had begun to differ across the product. I audited the existing interface and worked with the developers on shared foundations, components, and behavior documentation.
Shipped design system
DataFlow and client names are anonymized. Interface text is translated into English.
Start with the existing product
I reviewed the spacing, colors, type, and controls already in use. The aim was a smaller shared set that could support the existing pages.
The system used Material Design foundations and selected Ant interaction patterns, with components drawn and documented for this product. Frequently used controls came first; less common patterns followed as the product needed them.
Design the repeating parts
With more than 50 block types, the same settings and canvas patterns appeared in many places. I made those repeating parts the basis of the system.
The workflow block is one example: its status and interaction states use a shared structure. Inputs, validation, and settings panels follow the same approach.
Document behavior with engineering
I kept the component library and developer documentation in separate Figma files. The library holds the reusable pieces; the documentation explains their states, sizes, feedback, and edge cases.
Working with developers on those details connected the visual components to the behavior needed in the product.
What shipped
The shared components and behavior documentation were used in the canvas and settings work. The system continued to grow with new pages and block types.
The next thing I would document is adoption: where teams use the shared components, where they work around them, and why.