design system
Components for multiple platforms
current state
We were doing our best with a small team but our design system was a hot mess. Nothing was documented, most components weren't put together properly, and there were ghost components floating around everywhere. It was time for a design system overhaul.
taking stock
The first thing I did was to document what items we had in Figma and what components actually existed in code. I used Storybook to view all of the components that were in production and noted the differences between those components and the ones that were in Figma.
component organization
After deciding what components I needed to work on, I created a grid to help me build the variants in a logical manner. I also talked to designers & developers to learn more about how our team was using and organizing components.
component creation
At this point I created the components on an 8 pixel grid, organized & documented the variants and published the library! I released the new components to the designers and engineers and continued to take feedback and iterate as needed.
