Deepnote
Published in

Deepnote

Building a design system at a startup

How to build a design system at a fast-moving startup and still leverage all the benefits a design system offers.

Why have a design system?

Before we jump into why have a design system, let me describe the world without it. We used to have all components spread over various Figma files, not having a single source of truth. This made it hard to search and re-use them for me, the only designer on the team. For others, it was downright impossible. As the team grew, it was also harder to keep the components in code synced with the designs.

  • Visual and behavioral consistency of elements
  • It reduces the number of decisions designers need to make

The design system at Deepnote

Creating a design system can easily take weeks or months, depending on how extensive you make the system. Deepnote is a fast-moving startup, so allocating a couple of team members on a several-month project is not something we were looking to do. In our case, a design system means a simple collection of very basic elements and building blocks. Think type, colors, buttons, inputs, and dropdowns. It has a long way to go from neat systems like Figma’s UI2 or the Visual Studio Code Toolkit, but it’s a start that has already had a large impact on the team.

A look at our inputs and dropdown from the design system
A look at our inputs and dropdowns from the new design system

A 4-point grid and a type scale

An important part of every design system is its type scale and grid.

Example sizes of the 4-point grid
Example of the type scale and the line-height formula. Notice that 11px and 12px font has the same line-height so they will take up the same height in the interface even though 12px is slightly larger.

Buttons, inputs, and other elements

Once your grid and type scale are defined, creating individual elements becomes surprisingly quick. We already had our elements created, they were just scattered across many Figma files. This was a nice exercise to revisit all the buttons or inputs you use every day without perhaps giving them a second thought and check that they adhere to the grid, type scale, and are consistent with the rest of the design system.

A view of some other basic elements like checkboxes and toggles

The translation to code

Our aim was to never do a big single sweep where we code & replace everything. That could potentially take a serious amount of time.

A button from our Storybook

The benefits of a design system

The larger your company is, the greater will be the benefits of a design system. In our case, we saw 3 main benefits.

Increased productivity across the team

The most immediate and praised benefit of a design system. Colleagues can just directly use the same components in the code as in the Figma designs. This reduces the hand-off time significantly too, saving time for both parties. Also, if others have an idea they would like to see, I encourage them to do the design for it. Thanks to a design system, this is now much easier.

Visual and behavioral consistency of elements

This one speaks for itself. As mentioned before, we are gradually replacing all elements with their component counterparts. It was also a nice reality check, we found we had 7 different representations of the same button.

Reducing the number of decisions for designers

The most striking difference of having a design system was that it reduced the number of decisions I need to make. I no longer need to search for the right files and elements, deciding if they fit into the new design. I simply drag and drop them into the design, knowing that they form a unified experience for the user. I can use the energy to focus on the actual design problem at hand. This reminded me of a story about why Mark Zuckerberg wears the same shirt every day.

Wrapping up

A design system is never done and these were just the very first baby steps. It’s already amazing to see the amount of impact it has across the whole team, ranging from the eagerness of engineers to create designs (who would otherwise be discouraged because they had to search for elements) up to the mentioned reduced decision fatigue.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store