Things That Need Attention When Building a Design System
Suppose you’re a product designer and wondering what things need more attention when building a Design System for your team. Congrats, we’re matching!
A Design System is not solely about colors, typography, icons, and components. It’s not only helpful for designers but also for all employees in your company. So other than making plans for the designer’s side, you need to make plans for the engineer’s side. As a product designer dedicated to Design Systems at our company, there are several things you need to note before building a Design System for your team.
*Disclaimer: I joined the team after the Design System was built at our company, so I talked as a product designer who maintains the Design System that was already created on the designer’s side but is still under development on the engineer’s side.
Set the Whole Plan
Creating the overall plan before building the Design System is important! You need to define a team, how the team will work, a roadmap for your plans, a design implementation or code implementation, and what you will do after the Design System was built.
Define Your Team
You need to create a team of designers and engineers. Why? We want to make things better not only for designers but also for engineers. Once the designers are done with their task, next we need engineers to implement the foundations and components into their code library so other engineers can use them repeatedly.
Create Projects Timeline
You already have the whole plan and the team that will be working on it, the next step is to set a timeline to keep your team on track and you’ll know when the project is supposed to be done. Don’t be confused! You can use the Gantt chart template for your project’s timeline.
Design System Methodology
If you need some method as a reference for your design team, you can use the Atomic Design Methodology by Brad Frost. Sometimes not every component can be made step by step like in atomic design, so you don’t need to do the same persistent steps as atomic design.
Foundations and Components Documentation
A design system is not only about components like buttons or input fields, but much more than that. It’s the entire system on the design side, from color, typography, iconography, and even the voice, tone, and motion that we use in our digital products. For more details, you can check out this article written by our designers Belajar Dari Membangun Design Language System — Part 1 and Belajar Dari Membangun Design Language System — Part 2.
Other designers should know how to use the foundations and components in their work, so you need to create documentation that tells them how to use it and the things that are allowed or not allowed.
Curious about our design system’s documentation? You can check it out here Lion Parcel Pakket Design System.
Design System Development and Technical Documentation
As I’ve already mentioned before, we want to make things better not only for designers but also for engineers. So the foundations and components that are already created need to be developed so other engineers can use them repeatedly.
Technical documentation is also needed to show other engineers how to use the foundations and components in their code, which can be helpful. I’ll give you a sneak peek at what the technical documentation looks like, you can check the developed components here Pop Up iOS Technical Documentation.
Monitored Design and Code Implementation
Lastly, all you have to do is to maintain the design system used on both sides. Don’t forget to remind your designers and engineers to use and apply the foundations and components of the design system to their work.
“But we’re not done yet!”
If after the design system was built, you’re afraid there’ll be no more work. Don’t worry! Even though the foundations are developed, but not with the components. There will be new components discovered as we constantly improve our digital products.
Thank you, guys!
I hope this article will be helpful to you and your team.
If you want some tips for creating a color system for your foundations, check out my article Design System For Beginner: Color Style Guide and some tips for better relationships between designers and developers Relationship Between Figma Auto-Layout & CSS Flex-box.
