What is it?

The Shoelace Design Kit is a Figma library I created to provide design components that complement the Shoelace UI Library.

The Shoelace UI Library is a set of free to use, open-source, web components created by Cory LaViska↗

Why make it?

To sharpen my Figma skills and give back to the open source community.

Sharpening my Figma Pencil

Most of my recent experience has been on the management side of design systems, but I’ve never stopped using design tools entirely. Having worked primarily in the Adobe suite, I wanted to go deeper with Figma given its prominence in the industry and its design system capabilities. This project let me explore token architecture, component building, and Figma’s interaction and animation features firsthand. Staying current with the tools my team uses helps me speak their language and, frankly, maintain some street cred.

Give back to Open Source

I owe a lot to the open source community and wanted to contribute something meaningful. I came across Shoelace while researching design systems and was drawn to its framework-agnostic approach. Cory built the component library and documentation, but there were no design assets to go with it. I saw an opportunity to fill that gap.

How I made it

Clicking in Figma

My core goal was to make the Figma component “API” match the developer component API as closely as possible. If the web component used a boolean property, so did the Figma component. If it combined variations into a single component, I did the same. That approach can result in a button with over 800 variants, but it mirrors the web component architecture and makes design-to-dev handoff more seamless.

Tracking in GitHub

I track all work in a public GitHub Projects using a Kanban board. It kept progress visible, helped me prioritize dependent components first, and since the kit is published in the Figma Community, making the project public gave anyone a way to follow along or submit issues.