Building a solid foundation for design consistency, collaboration, and scalability.

About

The Semla Design System is a result of improved documentation, organization, and definition of components. Today we can deliver more consistent designs that contribute to a more cohesive user experience.

My role

Mapped and documented the components. Introduced a tracking system for the design system

The team

Product Designer

Sr. UX Designer

Front-end Engineering Team

Outcome

100% parity for 36 components across Figma, Storybook, and Production
1 Figma file dedicated to the design system, properly divided following the Atomic Design principles
Formalized documentation for design foundations (Color, Typography, Spacing) in Figma and Notion

PROBLEM

Inconsistency between Figma designs and production.

I joined Fyndiq as their second designer on deck. When I joined, there were beginnings of design system in place, which used Atomic Design principles as a base.

It was hard to know which components were already implemented on the website and how to use them for our designs. The documentation and organization of the components was limited and not synchronized with the live website, causing bottlenecks in our developing process.

Fyndiq’s first design system (from before I joined Fyndiq)

PROCESS

Understanding the basics of a design system

When I started, I had little to no idea how to organize all the components. Fortunately, there are many open source design systems, like Shopify, Altassian, and Material design, that have served me to learn from, and take as inspiration.

After reading and learning from other design systems, it was clear that status-keeping and documentation strategy was the essential missing link.

Focus areas:

Documentation of the foundations of our design system: Such as colors, typography, and spacing.
Find a way to keep track of the components’ status
Clear documentation on how a component should behave and be used
Visualize the specifications of every component

Documenting and structuring the design system

Since we were already using Atomic Design, I continued using the principles as a reference. I started by writing an explanatory text on Atomic Design and how we should leverage it at Fyndiq to develop our own DS. Then, I documented all the existing components and linked them to Figma.

Notion documentation of our design system

In Figma, we created separate pages for every Atomic Design concept, i.e., tokens, atoms, molecules, organisms, and templates. Each page contained detailed documentation and specifies how every component should be used.

Documentation of some our atoms and our interactions

Additionally, I created a table in Figma where we could keep track of the status of our components. I divided them into five columns: Component Name, Design Status, Storybook Status, Production Status, and Comments.

Using this table as reference, we started having design system meetings every week with the developers to discuss the status, prioritize components, Q&As, and other topics related to the design system.

Table to keep track of the status of our components

SOLUTION

Design System redesign

Key improvements:

One of the biggest challenges when working with a design system is to make it scalable while maintaining simplicity.

To address this challenge we have come up with several improvements:

We incorporate usability, accessibility, and coding best practices into every component to enable ease of use and learning for designers and developers
We utilize dynamic documentation tools like Storybook, Chromatic, Figma, and Notion to establish clear guidelines and allow experimentation
We have created clear communication channels to discuss DS related topics
We have set up transparent workflows for using the system

List item component in Storybook and Figma

We refined the status table. We now include all the states and variants of every component with their respective status.

Updated table of the status of our components

I put extra focus on the documentation, as I have realized that documentation is key to successfully implement the components.

Examples of a component ready to hand-off to the dev team

Latest components' status table

OUTCOME

Consolidating one source of truth

01

1 Figma file dedicated to the design system, properly divided following the Atomic Design principles

02

100% parity for 36 components across Figma, Storybook, and Production

03

Adoption of Storybook and Chromatic, allowing experimentation, testing, and easy access to the state of the design system

04

Formalized documentation for design foundations (Color, Typography, Spacing) in Figma and Notion.

05

Branded the system as Semla, providing a clear, easily referenced name.

REFLECTION

Key take-aways

Collaboration is Key

As a designer, it is crucial to understand the development team's implementation process so we can find the best way to improve cross-functional workflows and team onboarding.

Keep Learning

As tools continue to evolve and improve, it is important to stay informed and constantly seek ways to optimize our current workflows.

Ask and get frequent feedback

It is okay to not know everything. I have learned to not be afraid of asking questions and getting feedback from developers regarding how they would implement a component or how we should work. Ultimately, the main objective of the Design System is to improve our collective workflows.