The goal for this design system was to collaborate with a developer to create a style sheet and component library for medium fidelity Adobe XD wireframes at an agency. It was also a priority to keep branding ambiguous the agency's many clients with different branding and to optimize design and usability on desktop and mobile.
The design system was to be used with many clients in many industries, all with different branding, so this design system needed to serve as a template for medium fidelity wireframes and prototypes for clients. I had old wireframes created by the developer for reference, but no access to a style guide. The previous file was started in Adobe XD, which does not have responsive design tools that are as robust as Figma.
I aimed to create the following in Adobe XD, then do the same in Figma with more responsive components with auto-layout:
I researched comprehensive lists of all common component types and variations on Apple Human Interface Guidelines and Google Material Design 3.
All components were created to be fully responsive in Figma Auto layout and resize for different screen sizes.
Components with different variants were coded to toggle on and off different elements within the component.
Interactive components also were designed to include hover states, tab focus states, inactive states, and alternative designs.
