We had a gap of documenting and standardizing our UI components that needed to be addressed. So, I volunteered to create a Design System.
Duration: Ongoing (6+ months)
Methods: Front-end UI design
Tools: Figma
Context
We recently changed UI libraries and redesigned our core software. There wasn’t much documentation around how to use each component, its capabilities, or branding. Plus, BAs were wasting hours creating components from scratch in Figma. Even before the UI switch, our products weren’t consistent, and I knew they could get worse if we didn’t change the status quo.
I wanted to create a Design System that incorporates approved components, best practices guidance, and developer documentation. This would support BAs and developers, reduce churn on requirements, and help standardize across solutions.
Process
I floated the initial idea to the team in early October 2020. This involved some stakeholder management, since we haven’t had a design system in the past. To build buy-in with multiple teams, I calculated the potential ROI of a design system. I collected estimates of time spent on visual/UI decisions, cost of redesigning the same elements for each project, and frequency of mockups needed. In the end, the Design System’s estimated cost savings was over $400,000 per year!
I also inventoried just one component – the humble button – to see how much rework we had already done. I found over 115 different button styles across solutions, plus 24 more on our website! Creating a single standard would seriously streamline BA and dev processes and build trust with our clients and our brand.
With the team on board, the next step was to choose a tool. Our team considered Confluence, Figma, GitHub, InVision DSM, and building from scratch against the criteria of integrations, usability, efficiency for BA and dev teams, ease of implementation, maintenance, and security. Eventually we decided to build our design system in Figma and set up a new Figma space for this purpose.
Next, I planned out the pieces that needed to be included in the design system – from “atoms” like colors and typography to “molecules” like buttons to “components” like a file uploader. Estimates for the full task list came out to about 1,000 hours. We roadmapped the project with an eye to a couple of new projects starting in Q2-Q3 2021.
Finally I was ready to dive into component creation. My team had a small working set of components that we created as we went along, but it needed to be expanded and polished as well as updated to match the latest version of our UI library.
I worked on the text, colors, and shadow styles first since they impacted all the other components. The Style Organizer Figma plugin came in handy here to consolidate all the random hex codes into actual styles.
For each component, I started by applying AutoLayout and making sure colors, corner rounding, etc. matched our updated UI kit. Then I dug into the nitty-gritty design decisions. For example, on the Button component:
- Grouped buttons using Variants and designed 7 main color styles + text/icon/both and default/hover/focus/disabled states.
- Decided that including small/large variants was too complex + not warranted by use cases.
- Simplified layers and eliminated layer dependencies and cycles.
I test each component thoroughly, adding it to various layouts, stretching and squishing it, adding extra-long and extra-short text, and anything else a mockup might require. I’ve also released the file to my team for “early access” testing. After several weeks of work, I have a solid first draft of the main components that just needs some additions and tweaking to be complete.
Next steps are to polish up the components, then write component documentation and add it to the Figma file. Documentation will include tips like default options and recommended usage. I’ll be working with developers to include GitHub links to each component’s code as well. Finally, I’ll create a cover, how-to-use, and index for the Design System file.
Once completed, I’ll share out the file to other teams and talk them through how to use it. Figma literacy varies, so I plan to hold a Figma component workshop to help team members get the most out of the Design System. In the future, we’ll need to support and update the system, but it will pay for itself many times over in efficiency and consistency.
Lessons Learned
During this project I’ve honed my Figma knowledge and learned a few basic tenets of creating a design system:
- Simplicity is best
- Test test test your components!
- Start with the atoms and build up
- Try to find a balance between too many components and too many variants
- Watch someone else use your design system! And adjust accordingly
- If your component has text on it, make the text useful (“Primary”, “Left”, etc.) to help others understand the component at a glance
If you can spend a few hours learning a new feature or process that will improve your efficiency, do it! AutoLayout, Variants, Shadow Effects, and a bunch of plugins (Style Organizer, Similayer, Master) have made my life as a designer so much easier.
I also enjoyed the process of building consensus with the team. Casual conversations can have a big impact on decisions later. And a good ROI calculation can highlight the value of doing some upfront work for later benefit.