Shoelace Design Kit

Role

  • Figma Component Maker
  • Project Manager

    • Project Type

  • Design Kit

    • What is it?

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

    Shoelace Design Kit Billboard Image

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

    Shoelace Design Kit Billboard Image

    Why make it?

    In short, I made this to continue improving my craft and to contribute to the open source community.

    Sharpening my Figma Pencil

    The majority of my experience over the past 5 or 6 years has been on the management side of design and design systems. However, I have never gotten completely away from picking up a design tool and makin’ some rectangles :)

    In the past, I mostly used the Adobe suite of tools and I was looking for an opportunity to work closer with Figma since it has risen to such prominence in the industry and includes significant features related to design systems. I wanted to attempt replicating some of the architecture and elements of a design system, like tokens, and get in-depth with Figma’s interaction and animation features.

    Collage of design tokens and Figma components

    Ultimately, this is one of the many tools a design system team uses and this process helps me stay up to date with current technologies and understand the perspective of the people on the team. Being able to speak the same language also helps maintain a modicum of street cred.

    Give back to Open Source

    I owe a great deal of my experience and passion for the digital design space to the Open Source community. Whether it is building this very site with Astro↗ or getting inspired to code by TLDraw↗ and Perfect Arrows↗ from Steve Ruiz↗; I have grown so much from their efforts and contributions.

    I found the Open Source project, Shoelace, while researching design systems and was immediately drawn in by its use of native web components that allowed it be, mostly, framework agnostic. The only outlier is React where they have provided wrappers since React doesn’t play that well with web components (as of v18, fingers crossed for v19↗).

    Cory created Shoelace as a side project and it has grown to become a massively influential UI library. He created the component library and the documentation. I noticed, however, there weren’t design assets to complement it and I thought I could help by contributing something myself.

    How I made it

    Clicking in Figma

    I have used a wide range of design tools throughout my time as a designer like Macromedia Director and Flash (pre-Adobe acquisition), Sketch/Principle, Axure RP, Visio, and just about everything in the Adobe Suite. From those experiences, I have a tendency to simplify all of them down to tools that make rectangles. If it can make rectangles, I can use it to communicate design. It may seem a bit reductive, but these products overlap and evolve the same basic concepts over time. Which is a good thing.

    While this is still true for Figma, there are intricacies and unique constraints that I needed to understand and learn. Each new Figma component I made added to that set of knowledge. For example, understanding what could be provided as a component property and what would have to be an instance override made each step of this process valuable.

    Button Component API and Figma Component Properties

    One of my core goals was to make the Figma Component “API” match the dev component API as closely as possible. If the component provided a property as a boolean, I would try to do the same. If the web component combined a wide range of variations into a single button component, so would…did…I. Sure, this may result in a button component with over 800 variants, but it matched the architecture of the web component and can make the handoff to dev more seamless…theoretically.

    Tracking in GitHub

    Screenshots of project from GitHub

    I know we’re not supposed to like project management and process. It’s not “cool” to like those things…but I really like those things. There is alot of power in a simple list. Add some Kanban style work tracking in there and you’ve got yourself a system. Tracking my work in GitHub projects provided some great benefits:

    Tracking Progress

    How close to done am I? This makes it simple and automated.

    Prioritize Work

    It was pretty easy to make sure I ordered the work in a way that created dependent/core pieces first and left more complex components until later.

    Transparency

    Since this Design Kit is published in the Figma Community↗, I made the project public so anyone can see the progress and they have a path to submit any issues they run into.