Building a design system within Figma
Our objective was to increase design productivity by building out a full design system before migrating our teams over to Figma.
Migration planning
Our team has been working sketch for many years and working with a highly robust styleguide for reference. Making the decision to move over to Figma was not an easy decision, but there were too many advantages that we couldn't ignore. One of those advantages being a highly customizable and deeply integrated design system.
Taking inventory
We got the team together to start taking inventory of our site and identifying areas of opportunity to be made to our current styleguide. What was working? What felt dated? What patterns could be improved upon when thinking about building out the new design system?
Yup! That's me in the adidas cap :)
Setting a compliant foundation
The pillars of any system are typography and color. We also made sure that all of our styles were at least AA+ accessibility compliant.
Prioritization top traffic
The next step was to make sure that our top traffic pages were addressed and fully supported out of the gate. Our migration timeline was aggressive so we needed to make sure that DSM 1.0 had at the very least typography, color, form styles, and other global patterns.
Implementation and buy-in
Not only did this system need to work for the design team, but it also had to reflect within the engineering CSS. Getting buy-in was challenging to get a team of engineers dedicated to building out a CSS version 1-to-1 of our system, but when were able to show an increase in productivity and speed across design within the next few months, they were interested, and eventually prioritized the effort. For consistency reasons alone, it is also a no-brainer for everyone.
