At one of India’s unicorn startups, the engineering team didn’t ship a new feature for a whole year. Why? They realised they needed a design system and they dedicated engineering capital towards building and integrating it. But not all design system teams can do that. The more common story is this: most teams don’t have the luxury of halting feature delivery.
If design systems have to be built “on the go”, a smarter and more modular approach is needed. I believe building a design system doesn’t have to be an extensive or expensive process. You could start with just an MVP. Here’s how you can do that:
Before building a design system, the team should know why it’s important.
An audit of your design files and your codebase will help identify what you’re trying to solve by implementing a design system. It could be one of the following or a combination of multiple:
To audit your design files:
To audit your codebase, do a static code analysis using linting. This will tell you:
The audit enables your team to:
After the audit, the next step is to learn what kind of design system your organisation needs.
If the bottleneck for your organisation is consistency, build an exhaustive set of tokens and just a few standard components. If the bottleneck is speed of feature delivery, build more components and just a few colour and type tokens.
From all flows in your app, identify one for a pilot. This flow should utilise 3-4 components which are reused and use colour and type tokens. It should be technically feasible to implement the design system for this flow. In the component sheet, add an estimate of how much time implementation requires and pick the pilot flow. Dan Mall has a detailed guide about how to select pilot candidates that you could refer to.
For the pilot, the team that is building the design system needs to work closely with designers and engineers who own the pilot flow.
To build the foundation:
This should take 4 days.
To build components:
Building one component should take 2-3 days.
To integrate the design system in the pilot flow:
Integration should take 7 days.
The pilot gives the team an early win and they can now create a roadmap for the design system. That means identifying:
Thanks to the pilot, your team has a shallow version of the design system and knows how to use it and integrate it across design and engineering. It is time to build the MVP.
Along with 3 components from the pilot, pick another 2 or 3 components that have high reusability and can build 80% of the app.
For the pilot, designers defined just anatomy, behaviour and a few variations. For the MVP, that isn’t enough. Each component should have:
Engineers build components in the library incrementally by
Build the rest of the components incrementally. A first, working version of your design system is ready!
As your team starts using the design system, take the product or feature roadmap into consideration. Let your product or feature roadmap dictate where you’ll start using the design system. Ideally, you’ll begin with high-priority features and designers and engineers should use components and tokens to build those flows. Continue to integrate with more pilot teams to see the impact of your design system.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
eadings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.