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 you can use to have something running in no time (okay, okay... it will take you 5 minutes, but not more!). You can always come back to specific sections here then! The starter also includes exactly the same components that are created in this guide, it just adds more features and configuration to your Design System.

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!

Implementation

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:

• Overview
• Create new project
• Add to existing project
  • Dependencies
• Result
• Next Step

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:

• Overview
• Apply branding
  • Initialization
  • Select Branding Token
  • Apply Branding Token
• kickstartDS Integration
  • Generate first Design Token set
  • Compile Design Token set
  • Fine tune the design
• Result
• Next Step

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:

• Overview
• Install Storybook
  • Storybook dependencies
  • New scripts entries
• Configure Storybook
  • General configuration
  • Design Token integration
  • Add Storybook theming
  • Integrate with kickstartDS
  • Install remaining addons
• Review changes
  • HTML rendering addon
  • Design Token addon
  • JSON Schema addon
  • Component Token addon
• Result
• Next Step

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:

• Establish structure
  • Add component Providers
  • Add package.json scripts
• Component implementation
  • 1. Adding our own Button component
  • 2. Adding our own Headline component
  • 3. Adding our own TeaserCard component
  • 4. Adding our own Section component
• Adding an article teaser recipe
• Result
• Next Step

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

Result

This concludes setting up your own Design System from scratch. Hopefully everything made sense, and you were able to learn about kickstartDS, the reasoning behind decisions taken, and how best to approach the creation of components in a Design System-y way.

You can find all the code for this guide, the one also embedded in the Code Sandboxes above, on Github here:
https://github.com/kickstartDS/ds-guide

There are branches on that repository containing the result for every major step of this guide:

1. Start your Design System on branch step/1
2. Design Application on branch step/2
3. Configure Storybook on branch step/3
4. Add Components on branch step/4
5. Publish your Design System coming soon...

You can also have a look at our Design System Starter, which, while including the same components this guide added, also adds lots of additional features out-of-the-box for you.

Next Steps

Your next steps will depend heavily on your unique circumstances. But to give some pointers to resources that could help in the most common scenarios:

Question	Description	Link
What should I build next?	If you need a process that helps in identifying Design System requirements, and in ultimately deciding on what components need to be built, in which order they should be built... and what a good pilot project for your Design System could look like.	Design System Initiative
Selecting component processes	Background about when to choose which component creation approach, and what should be taken into consideration. this, for example, can have great impact on the technical debt added.	Components
How will this integrate?	Learn about potential integrations that can be leveraged to integrate your Design System into different systems, like headless CMS, or technologies, like Next.js or Gatsby.	Integrations
I need more support!	If you feel like need more support, or just a helping hand, feel free to have a look at the services we offer around Design Systems. These are in no way a requirement to setup your Design System, but we're always happy to help!	Services
I want to leave feedback	If you have feedback that you want to share with us, or just want to hang out in our small Design System community, head over to our Feedback page. We love to hear from you!	Feedback