Design Systems
I consolidated Fluke's scattered color, typography, and icon definitions into a structured design system and built the component library from scratch in Figma.
My Role
I owned the design library creation end to end, defining foundations, structuring Primitive/Icon/Component layers, and shipping reusable components for product teams.
Platform
Figma design library
Organization
Fluke team
Focus
Web components and reusable foundations
Deliverable
Published multi-library system in Figma
Overview
The project focused on creating a Figma design library that could help the Fluke team create product screens with consistent foundations and reusable components.
My approach was to divide the system into three libraries: Primitive, Icon, and Component. Primitive and Icon would be referenced inside the Component library, so the first web library could scale and future mobile work could reuse the same foundations.
My Contribution
Defined color, typography, and icon foundations for the library.
Structured the system into Primitive, Icon, and Component libraries.
Created responsive web components with states and variants.
Tested components across states and layouts before publishing.
Research
Reviewed fellow designers’ files to understand which components they used most often and how they assembled screens.
Spoke with designers on the team to learn how they were using the library in day-to-day work.
Used those observations to check whether the library structure matched real usage patterns instead of only the intended one.
Structure
Primitive
The Primitive library held the visual foundations of the system, including color and typography decisions that components could reference.
Icon
The Icon library kept icons separate from components so they could be reused consistently instead of duplicated across design files.
Component
The Component library referenced Primitive and Icon libraries, then turned them into usable web components with variants and states.
Design Decisions
ProblemIf colors, type, and icons lived inside every component, the system would become difficult to maintain as the library grew.
DecisionI divided the library into Primitive, Icon, and Component sections, with the Component library referencing the other two.
The system became more modular, making it easier to update foundations without rebuilding every component.
ProblemThe team needed a usable library for current web product work, but the system also needed to leave room for future mobile use.
DecisionI focused the first component library on web while keeping primitives and icons reusable across future platforms.
The team had a practical web library first, with a cleaner path to reuse the same foundations for a mobile library later.
ProblemComponents are not useful if they only work as static examples and break when designers need hover, disabled, error, or responsive states.
DecisionI created components with variants, states, and responsive behavior so they could support real interface needs.
Designers could use more reliable components instead of manually recreating one-off screen elements.
ProblemA published design library needs trust. Broken or untested components can quickly create inconsistent screens.
DecisionI tested components across states and responsive layouts before publishing the library for use.
The published library was more dependable for day-to-day product design work.
Process, Outcome, Reflection
A short wrap-up keeps the story moving and makes the last section easy to scan.
Process
Defined the foundation layer for color and typography.
Built a separate shared icon library.
Created web components that referenced the foundation and icon libraries.
Checked component behavior across states and layouts.
Outcome
A published Figma design library for the Fluke team.
Reusable primitive, icon, and component libraries.
Responsive web components with practical states and variants.
Reflection
This project made the library structure as important as the components themselves.
Separating foundations from components helped keep the system flexible for current web needs and future platform expansion.