I created a dynamic design system in Figma that can be used as the basis for any new project and grow as needed.

  1. The file structure of the design system is the first consideration.

I ended up creating the most basic design system because my current project was only one client with about 10 web pages.

This entailed using a basic component library with a few unique components created for a few pages.

The other design system file structures had an emphasis on being dynamic and were considered and saved for future reference.

2. Next I settled on a color key by following the same color math from existing design systems (in this case Tailwind) but changing the saturation values so the colors were different but aligned from 50-900. I used the contrast plugin to determine and edit my color values so that they were all accessible. From there I made my color styles, gradients, and avatars.

3. From there I created my typography styles and scales, my container styles, and my grid and layout sizes.

4. Next I created my components utilizing atomic design, starting where possible with nested components and atoms.

5. From there I built out the main components of my standard component library using my design system styles and math to make the molecules and organisms.

Previous

Client work start to finish at ROI DNA, a SF Digital Marketing Agency
Next

Creating a UX scorecard and benchmarking system to measure ROI in UX