Kastler: design system generator

Creation of a tool to generate easily design system from scratch for little structures needing a design system to start building their product.

Timeline

6 months

My roles

Product designer, user researcher, design system manager

Goals

Create a POC of this tool to demonstrate the interest

Constraints

Little team composed by only a designer and a developper

Identifying obstacles

First of all, we have identified several obstacles and problems in the Saas design system market:

- There is a communication problem between designers and developers.

- A design system is long and costly to produce

- Creating patterns and components is a repetitive task that has been done many times before

- Ensuring alignment between design and development, even in the smallest structures

Opportunity

To create a software package that not only generates a design system for Figma, but also generates it in code so that structures of all sizes can have access to it.

We chose the SaaS solution to enable us to directly customize the components in a guided and simplified way, and to integrate them using a Figma plugin or a CLI.

On boarding

In a first version, we chose to include the completion of design tokens directly within onboarding. But user tests showed us that this made the process too long and frustrating.

In the second version, we've simplified onboarding, notably by adding google connect, to increase the rate of account creation. As for design tokens, we've removed them from onboarding.

Dashboard

Users can quickly see whether or not they have completed the minimum design tokens and components of their design system.

The sidebar provides a quick overview and smooth navigation through the various design tokens and components, sorted by category.

History page to follow the modifications in the design system

Design tokens completion

We've chosen to use Figma's interface for variables, to simplify understanding and completion for everyone, including teams without a design system manager.

It becomes very easy to set up all design tokens for color, spacing, radius or elevation.

Component details

In this interface, users can consult all possible variants of each component, enabling them to visualize the different use cases and associated guidelines.

Like a zeroHeight, he can also find all the specifications, as well as code extracts to easily understand the component, and onboard new collaborators.