background
As our design system was being overhauled, my role was to research other design systems and create a component reference card for designers and developers.
Pain points
Existing design system is missing details on component usage guidelines.
New designers may not be familiar with restrictions outlined in the brand guidelines.
Designs are created without developer constraints in mind, delaying the process.
Goals
Develop a reference tool for both designers and developers that includes comprehensive information on components.
Ensure documentation covers component variants, best practices, and accessibility for overall consistency in product design.
research
I researched how other companies organized and documented their design systems in Figma, identifying common themes and evaluating what worked best in terms of layout and ease of access.
Most design systems had individual component cards (something ours lacked), with documentation that outlined best practices and usage guidelines. I found the vertical, single card layout worked best with an accompanying sticker sheet to easily access components and their variants.
process
After picking three design systems I deemed most effective, I researched them further in depth and paid particular attention to the sections they included in their documentation. Since developers would also use the reference cards, there needed to be sections dedicated to implementing components in code as well. Overall, the final output needed to be easily scannable, visually appealing, and large enough to accommodate both visuals and text.
Designing the reference card involved a lot of iteration. My initial design had a top-down layout for visuals and text; however, this was harder to scan as there was disconnect between the header and body text. It was also too small width-wise.
As I designed, there were many subtle changes such as adding a purple component icon to the top-most group of components to indicate copyable variants. Do’s and don’ts were also added within individual sections, rather than having them all at the end so important rules wouldn’t be overlooked.
Visually, there was the challenge of creating intrigue without distracting from the main information. I had to ensure the documentation remained easily scannable despite numerous sections of text and diagrams.
solution
The final product was a detailed and flexible component documentation card. Some features included:
A colour-coded header system to differentiate component types, with isometric illustrations for visual interest.
An annotated attributes table for developers, to provide visual context to written code.
In-line diagrams to guide users through the process of editing component variables in Figma.
Diagrams for colour interactions and whether they pass or fail accessibility guidelines.
Below is a preview of the documentation card, with two close-ups.
lessons learned
Overall, this project gave me a lot of familiarity with design systems and how they are best implemented. It enhanced my understanding of user-centred design as the main objective was to lay out information in a clear and accessible way, especially considering the perspective of a new designer.