Design systems

Building design systems and component libraries

I've built component libraries at Sensand and Sketchli, two very different places. At Sensand, it was a structured system for two complex products. At Sketchli, an agency that ships fast, it was a lo-fi library built for speed. Here's how each worked, and what I'd do differently.

Role
Product designer, system builder
Built at
Sensand, Sketchli
Tools
Figma

In numbers

2 → 1Sensand component libraries merged into one
2 daysfor the team to design lo-fi with the Sketchli library and send it to clients for approval

Sensand: two libraries, then one

Sensand had two products, an agtech platform and a carbon market platform, so we started with two component libraries, one for each. Each followed the same structure:

  • Sub components: the smallest building blocks
  • Content components: built from the sub components, holding the content
  • Components by usage: a different set for each type of use, such as pages, modals and cards

Once the products had to come together, the two libraries overlapped and drifted. I built both libraries and led the merge, using the agtech library as the base and keeping the same structure, so the team could find and reuse things quickly instead of digging through two systems.

The result: fewer duplicate components and a faster handoff to engineering.

Library one: agtech

Up close: modals. Two modal blocks at full size: an account form and a delete confirmation.

1 / 6
Close-up of two modal blocks from the agtech library: an account details form with email and password fields, and a delete confirmation with Cancel and Delete file buttons.

Library two: carbon market

Up close. Accordions, unit batch cards and credit-type tags, each in its states.

1 / 3
Close-up from the carbon market library: accordion headers in closed and open states, unit batch cards in default and selected states, and credit-type tags such as ACCU, VCU and VER.
Two libraries worked at first, but cost us when the products came together.

Sketchli: a lo-fi library built for speed

Sketchli is an agency, so speed mattered more than polish. Clients needed to see and approve ideas quickly, so I built a lo-fi component library with multiple variables. With it, the team could put together a lo-fi design in about two days and send it to the client for approval.

The lo-fi library

Title bars. Title bars with variables for alignment, subtitle, back arrow and actions.

1 / 4
Lo-fi title bar variants in Figma: centred, left-aligned and back-arrow versions, with or without a subtitle, search, filter, add and label actions.
Lo-fi home screen assembled from the component library, with suggested profiles and a bottom navigation bar.
Home
Lo-fi notifications screen assembled from the component library.
Notifications
Lo-fi profile set-up screen assembled from the component library, with a photo upload and form fields.
Profile set-up
Lo-fi sign-up screen assembled from the component library, with phone and social sign-up.
Sign up
Lo-fi chat screen assembled from the component library.
Chat

Lo-fi screens put together from the library in a couple of days and sent to the client for approval.

What I'd do differently

At Sensand, I'd plan one system from the start, with shared foundations and product-specific layers on top. At Sketchli, I'd use fewer variables in the lo-fi library: too many options confuse the designer, and the client too, so I'd keep it simple.

The goal in both places was the same: make it quick for the team to start from something solid.

More work
Colleago

From phone calls to one request: a client portal for temp staffing

Sensand

Designing farm tasks into an existing IoT platform

Apta

A health tracker for families living apart, live in 2 weeks