Design Systems

For both web and mobile products, I’ve built complex design systems from scratch, as well as grew or evolved existing design systems.

How I Approach and Structure My Design Systems
1. I create a design system Figma file with different sections, all clearly titled
2. I save brand colors, fonts and font styles to library and add them to design system
3. I create the needed UI element
4. I give it a descriptive name so that it’s easily searchable, and also adequately name its parts so it’s easily editable if needed
5. I turn the UI element to a reusable component with any needed variants/states it might include. 
6. I add it to the design system under a relevant section
7. I build the complex/bigger UI elements using auto-layouts consisting of the smaller sub-elements
8. I add documentation where needed and train my design and dev team on how to use the design system
9. As the product grows, so does the design system. Whenever new UI elements are needed, they are created the same way and added to the design system. 

Below are some examples on design systems I’ve created or worked on.