The Design Library
A Figma library created to standardize components for efficient design and
development processes.
Timeline: January 2022 - February 2022
PROBLEM STATEMENT
The original design library was disorganized, inefficient, and inconsistent. Components were built ad-hoc and weren’t scalable for other use cases.
Background
BUSINESS GOALS
Build a source-of-truth design system library for efficient, cohesive design files and cross-functional collaboration.development processes.
Cohesion
Efficiency
Organization
BEFORE REDESIGN
The 1.0 Design System Library was lacking consistent design choices and clear organization for the vast array of components.
Buttons, menus, and other components were created ad-hoc.
❌ Pages were organized by features, rather than components
❌ Text styles required clarification before use
❌ Color styles were named uniquely, and lacked clear rules
AFTER REDESIGN
The 1.5 Design System Library introduced a file structure organized by component types, featuring cohesive design choices across the collection.
Each component is robust, with various states and use cases.
“Without drag and drop components, these larger projects wouldn’t even be possible.”
— Sr. Director of Product
✅ Pages are organized by styles and individual components
✅ Text styles are organized by size and use cases
✅ Color styles are named to communicate functionality
The Documentation Library
PAIN POINT SOLUTIONS
Clarified file organization
Components built with flexibility
Stylization and usage rules
“ Everything is laid out about as clear and concise as it can be.
— Lead Developer
COMPONENT ORGANIZATION
By laying out the components in a clear visual manner, both developers and onboarding designers can easily understand style choices and usage rules.
The Outcome
BUSINESS GOALS
I designed, organized over a dozen component types, each with variants for different states and types. I then presented the new system to the design and development teams, walking them through how to navigate the new files.
On all new design files following, I created a cover page including a link to the design library and documentation library for easy navigation.
THE VALUE
This work opened up the opportunity for development teams to build their own component library based on this one, which helped significantly speed up their process.
The design team was immediately able to capitalize off a new and improved design system, using it to redesign the existing product faster than ever before.
Thank You
This project was led and completed individually by: