Skip to main content

Create your Design System

Overview

In this guide we'll get your first Design System, based on kickstartDS of course, off the ground in just 5 rather simple steps!

You could say that this is the main guide for kickstartDS, as it branches out into a bunch of sub guides in the process. Hopefully giving you a well-rounded overview over everything offered and possible in the end. While also creating the draft for your first Design System in the process!

This guide can act as a great reference, too. If you're struggling somewhere, just look up the section concerned with that part of the setup!

And if following such a long guide (it's quite comprehensive) seems daunting, we also have a starter in the works you'll be able to use to have something running in no time. You can always come back to specific sections then anyways!

Just keep this page in mind as a great overview and intro point into kickstartDS in general!

The main steps involved go as follows:

  1. Start your Design System
  2. Design Application
  3. Configure Storybook
  4. Add Components
  5. Publish your Design System

The resulting Design System will obviously not be finished by the end of this guide, but you'll have everything set up to start on the real work. We'll add links along the way when it makes sense, calling out concepts at play, or processes to use, to find and refine your own personalized worfklow with kickstartDS, and ultimately your own Design System (stuff like choosing an initial component set for your Design System).

We also recommend having a look over at our guide for the "Design System Initiative", which concerns itself with questions like:

  • What actually is my Design System?
  • Which components do I really need?
  • How could I find out, which components I'll need?
  • Who should be involved in that endeavour?
  • How to choose a good place to start?

This will not be strictly needed for this guide, though. So feel free to just continue on!

1. Start your Design System

In this step you'll either create a new project entirely, or learn which basics to add to your existing project to get started!

Start: Go to step 1.

A rough outline:

See the result of this step in the Code Sandbox below. It's showing specifically the result after this step. You can also view this on Github directly in the ds-guide repository, there's a branch for every step... and we're currently on the branch step/1 in the guide:

Toggle the file browser with the hamburger icon at the top left, or open it directly in your browser.

2. Design Application

We will create your initial Design Token set by applying your corporate design, as a reduced set of Branding Token.
We'll then fine-tune this, at least as much as sensibly possible in such a guide. We also compile a first semantic Design Token set with our newly created Style Dictionary.

Start: Go to step 2

A rough outline:

See the result of this step in the Code Sandbox below. It's showing specifically the result after this step. You can also view this on Github directly in the ds-guide repository, there's a branch for every step... and we're currently on the branch step/2 in the guide:

Toggle the file browser with the hamburger icon at the top left, or open it directly in your browser.

3. Configure Storybook

We add Storybook here, which includes installing and configuring all the addons we suggest to use. This also includes some we've written ourselves, to really get the most out of kickstartDS. We'll also add those, and add integration with kickstartDS (tokens, icons, etc). You will end with a fully configured Storybook.

Start: Go to step 3

A rough outline:

See the result of this step in the Code Sandbox below. It's showing specifically the result after this step. You can also view this on Github directly in the ds-guide repository, there's a branch for every step... and we're currently on the branch step/3 in the guide:

Toggle the file browser with the hamburger icon at the top left, or open it directly in your browser.

4. Add Components

In this part we'll add 4 exemplary components to illustrate the 4 main ways of adding a component to kickstartDS. A Button to show adaptation, a Headline to show customization, a TeaserCard to show creation, and finally a Section for extension.

We'll then add a recipe, demonstrating that concept, combining those 4 components into one big article teaser component! This should hopefully equip you with all the weapons needed to start creating your very own components! We'd love to hear how it went!

Start: Go to step 4

A rough outline:

See the result of this step in the Code Sandbox below. It's showing specifically the result after this step. You can also view this on Github directly in the ds-guide repository, there's a branch for every step... and we're currently on the branch step/4 in the guide:

Toggle the file browser with the hamburger icon at the top left, or open it directly in your browser.

5. Publish your Design System

We're currently in the process of finishing this section. Come back real soon, and it should be here!

Start: Go to step 5