I've built 6 design systems in 4 of my past jobs and kept iterating my approaches based on learning. Here I will share how I built design systems differently to truly ease team communications and save development efforts.
At start-ups, I would understand if developers are using any open sources to build CSS framework? At tech companies, I would understand how devs built CSS and framework? Take a look on the stylesheet so we can align on the style setting.
Who's the user? Use cases? How's their experiences with Figma, design systems, specs?
It's helpful to estalish shared style in the beginning to save time on design changes -
Step 1 - Set up the baseline in Figma (It's ok to give numbers first and change later)
Step 2 - Share with designer
Step 3 - Collect feedback
Step 4 - Iterate style setting and share with Devs
1. Name UI style strategically - Avoid being too specific or conflict with html tags.
2. Use "scale" - Create variants with scale (darken 10%, 1.25 rem) to ease the adjustment.
3. Consider accessibility in the beginning.
1. Learned from the past experience to iterate components and ease team communicaiton.
2. Learned HTML/CSS to understand what specs Eng need for development.
1. Think about how components move on different devices
2. Provide designs and breakpoints for reponsive web development
By doing these, I've delivered design specs that simplify understanding for everyone.
