Resources
Understanding Philosophy
Design System Libraries
Figma Skills - Introductory
Figma Skills - Leveling up
Tips + Tricks
Identify Patterns
If you are interested in getting better at Design Systems, one thing I practice is forming a habit of noticing general patterns for interaction, design, or feature when browsing the internet in daily life. e.g. I might be checking out something on Amazon and noticing that their cart icon has a new interaction that slides out rather than brings me to a dedicated cart page.
This helps to understand overall conventions for design.
How would I build that as a component?
Once you get used to noticing design patterns, you can start asking yourself "How would I build that as a component in [design tool's name, e.g. Figma] ?" Don't hesitate to bring out some pen and paper and draw it out if needed.
This helps to form a habit to think through component architecture, the structure of a component, rather than just the visual (e.g. colors, text styles).
UX The Components
Apply information Architecture thinking when analyzing layers of the component. e.g. to replace a nested Button instance inside of this form, there would be 3 clicks while 1 should be enough.
Do low-fidelity, mid-fidelity, and high-fidelity prototyping for complex components. Sketch out atom structures when building molecules and above (see Atomic Design linked above if you don't know what I am talking about).
Interview designers and developers who are using your system to understand pain points and where to improve. Usability test components to see if the properties are easy to configure.
Treat the Design System as a product and components as its features. Apply the same UX and Product thinking to the process.
Ask Karen
✨ Have specific questions about Design Systems? ✨
Book a mentoring session with me on ADPList.
Book a mentoring session with me on ADPList.