Design Systems (Coming Soon)
Coming Soon
Design Systems
A design system drives clarity, consistency, and efficiency across design, development, and product teams. It helps designers focus on solving problems, enables developers to implement reliable patterns, and ensures a cohesive user experience. I enjoy building design systems because they empower teams to work smarter and faster, and teaching designers to use and contribute to them turns a static library into a dynamic, collaborative resource.
Tools
Figma
Role
Lead Design Architect
Systems Built
Foundations
Atomic Design Approach
Adopting an atomic design approach for building components allows for managing sizes at the atomic level, rather than defining separate sizes for every individual component. By creating a range of sizes for atomic components and nesting them within more complex elements, it keeps component structures more streamlined and efficient.
Token Architecture with Variables
I use Figma variables to manage components through a token-based architecture, which creates a single source of truth for foundational design decisions like color, typography, spacing, and sizing. This approach keeps the design system closely aligned with development by mirroring how design tokens are implemented in code. It also makes it easier to scale and maintain the system — enabling efficient updates to global styles or component properties without manually adjusting each instance. As the system evolves, this setup ensures faster iteration, better cross-team alignment, and more predictable, consistent UI updates.
Documentation
Documentation is essential for both designers and developers to ensure a design system is used consistently and correctly. Through working on several systems, I’ve learned that people access documentation differently. Some designers don’t always open the main design system file, which means key information can be missed. To solve this, I document important notes directly within the components in Figma, so when designers use enabled library assets to pull them into their files, the guidance is right there. For developers, I set up a centralized documentation page where I extracted key assets and paired them with their corresponding CSS. This way, devs can inspect variables in Dev Mode and cross-reference them with the written documentation as needed. They can also comment directly into the file, keeping the documentation collaborative and current.
Let's Connect.
While the design system pages are in development, a walkthrough is available on request.