Whimsical's product design team used this document to brainstorm how we would structure and organize our design system and what kind of process we would use to build and maintain it.

The design team had the start of a design system library in Figma, but it was quickly becoming unwieldy. The engineering team was interested in codifying the design system and using it in their work, but they weren't sure where to start or how to understand our Figma files. We knew we needed to take a moment to plan our next moves, including how to make our files friendlier so we would increase adoption.

This planning doc helped us move more efficiently into structural changes to our design library. It was a low-fidelity place to explore before we committed to anything. It helped make discussions more productive, especially since all of our staff is remote and much of our work is done asynchronously.

This board did its job once we had alignment on the big stuff. When we had all agreed on the basic taxonomy, for instance, we built that structure in Figma and refined from there. It is always evolving—we've added components that aren't on our original list, for instance—but there's no need to go back and capture those changes. This was a "moment in time" tool designed to help us get alignment, rather than a piece of formal documentation meant to be updated regularly.

While guidelines are important, we wanted to focus most of our energy on getting components and styles codified in Figma before worrying about documentation. They speed up our day to day work and keep us from creating inconsistencies that would add to our design debt.

We deprioritized design patterns in particular because they're already easy to find in our product, they get tweaked fairly often, and they would be time consuming to build and manage in Figma. Our Product Design team is small (4 product designers plus me) so it's easy to ask "hey, do we do this anywhere now?" or "why did we make this decision?" when someone has a question.

I love how Whimsical boards are flexible enough to let me think about a single topic in many different ways. We did a lot of bouncing around in this board.

It was hard to know where to stop... we could spend endless time debating the merits of different organizational structures or process approaches. We knew that once we got started, we'd encounter challenges we hadn't thought of yet and the process and file organization would inevitably change. So I really created this board to help me think through our first pass and get alignment with the designers and engineers impacted by these decisions. Part of what I love about Whimsical is that the toolset intentionally encourages you to stay lo-fi and spend your time on the parts that really matter. In many tools, it's too easy to start adding detail or getting granular well before you actually should. I have an easier time staying focused on the THINKING piece when I'm in Whimsical vs. other visual tools.

This process diagram documents decisions that came out of a discussion with our engineering manager, Marcel.

The design team started with an async brainstorming exercise—the stickies throughout this board—to compile a list of all the elements we would consider documenting in our system. We then met as a design team to groom that list and discuss how we'd organize them. We also started grouping related elements we thought could live on a single page in Figma.

After that, we worked together async on the taxonomy. There was a lot of discussion about what to call things and where to put them. Taxonomy decisions are never easy! It's a big commitment and had to make sense not just to us, but also to anyone outside the team who would be hopping into our Figma files. We got a gut check from engineers at various points to make sure the nomenclature made sense to them.

Brandon Dorn

Todd Moy

Mindy Wagner

As we were planning ways to codify our design system to increase adoption, this board gave us a low-fidelity space to explore options before we committed to anything. It proved to be an ideal way to work through our ideas asynchronously.

"Fancy" Design System - High-Level Planning

Design System High-Level Planning at Whimsical

"Fancy" Design System - High-Level Planning

Sign up to see more