- Should build just a “draft” design system at an atomic level to be cost-effective.
- The Development team should use a storybook to document elements.
- A design system can speed up collaboration by syncing the design and development team.
A design system is a collection of reusable components that can be assembled together to build any number of applications. Comparing cost and effectiveness, do we really need to build a general design system for the development and design team?
When running a project, having a design system will partly increase developing productivity. Take “Homepages”, for example. If the design team hasn’t decided on the final version, they can set up the design system in advance. Thanks to a storybook or something like that, Frontend team develops components and Designers form extensive features parallelly. It’s based on Atomic design methodology. Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are:
When reviewing a component, instead of bringing it directly to the app without knowing its location, we can deploy to the storybook and test independently. However, building a design system still costs significantly to the design team. So how much effort should we invest in it?
The first idea came to our Designer’s mind is building a basic design system including token defining, spacing, button, radius, etc., that all platforms usually have. It aims to multiple platforms/ devices, so it just needs these foundations. This basic design system can be easily fixed, built up depending on the product’s requirement.
In fact, every design has fundamental fields like: typography (heading, body text), color, style, size, etc. So do the project. It cannot lack a button, form input, text, logo, etc. When we have a foundation design system, the Developer can follow the rules (develop components before developing features). We cannot wait for design then development. To ensuring communication about style/color between Developer and Designer, exporting design style into Json file might be a solution.
Generally, if we cannot build a whole storybook, leave Developers a UI Library to increase communication quality and development standards. Better than none!
In the long run, a design system will increase software quality. But if we work with a modest team on a single app, we’re better off with a directory of UI components instead of setting up the infrastructure to enable a design system. For small projects, the cost of maintenance, integration, and tooling far outweighs any productivity benefits we might see.
Subscribe for “The Next Bytes” where Han & the crew draft up our observation in the industry.