Design System Toolkit
Project overview
I created this design system to accelerate my future projects and explore Figma's evolving capabilities. I've previously assisted various companies in establishing their design systems, involving workshops with stakeholders and collaborating with developers to enhance and integrate components.
Design systems encompass multiple facets not covered here:
Gaining buy-in
Scaling
Organization
Branching
Component development, validation, and deployment
This project originated from the UI Prep Bootcamp, allowing me to focus solely on building components. In my next iteration, I plan to incorporate recently released Figma features such as variables.
Style guide
WCAG compliant color palette
Color key to scale effectively
Elevation styles
Text styles
Documentation
Start with a small number of cohesive color styles.
Name each primary color after its corresponding global number.
Then add a description for its primary purpose and accessibility rating.
Optimized for Customization
Every component and style has been optimized for fast, easy customization.
Table component
Assemble a robust table with columns designed with atoms.
Table demo 2 min.
Drop down
Built with atoms and variants, the drop down can be customized at the row level.
Drop down demo 1:36 min.
Dialog
The content of the dialog can be swapped commonly used patterns with slots.
Dialog demo 34 sec.
Inputs
← Back