1. Start your Design System
Overview
Setting up your own Design System can be done in one of two ways:
- By creating a new project for your Design System to live in, or
- by adding everything to an existing project
Create new project
Start in a fresh directory inside your terminal. This should be the directory all your Design System code will live in, and that will also be pushed to a Git host, later on. It shouldn't include a .git folder, yet! We'll use ~/projects/my-design-system here, with ~ denoting the users' home directory.
First, let's create a Git repository:
_10$ mkdir -p ~/projects/my-design-system_10$ cd ~/projects/my-design-system_10$ git init_10_10> Initialized empty Git repository in ~/projects/my-design-system/.git/
Working with the terminal
If any of the commands related to git or npm / node fail for you, or you need help working with the terminal, have a look at our Getting Started page about Environment configuration.
Additionally you might not use nvm for Node version management. Just skip those sections, and ensure the correct version for your project is installed and active!
Next we'll add a .gitignore file to the repository, that will be built up through the following sections to exclude generated code files:
_10touch .gitignore
Add the node_modules folder to it for now:
Then we'll add a .nvmrc file specifying the use of Node 16.14 for this project (this is the version kickstartDS currently works off of) to our project root:
Call nvm use right after, to activate the correct Node and npm versions:
_10$ nvm use_10_10> Found '~/projects/my-design-system/.nvmrc' with version <16.14>_10> Now using node v16.14.2 (npm v8.19.2)
Finally we'll make it a valid npm package, too:
_10$ npm init_10_10> About to write to ~/projects/my-design-system/package.json:_10> ...
Enter the prompted information, and you'll end up with a package.json describing your freshly made npm package. Use dist/index.js for the entry point, this is where our bundled code will live. The rest is pretty much up to your liking! It should look roughly like this:
With this you can continue with Add to existing project. From here on out the steps will be the same.
You'll just find that, in comparison to having an existing project, you'll probably not find any of the steps to be optional!
Add to existing project
In your terminal, switch to the project that you want to add kickstartDS to first. We'll be adding some dependencies, some glue code and configuration to hook everything up.
Some of the following steps might be optional for your personal setup, so feel free to skip them.
For example: you might already have React installed in your project, so you wouldn't have to complete that part of the setup!
`npm` vs `yarn` vs ...
In this guide we'll be using yarn as our package manager of choice. Feel free to use your preferred solution instead.
For more details see our page about Environment configuration.
For example: if you were using npm, and you'd encounter the following command to run yarn add react@17 react-dom@17... just replace yarn with npm and run npm add react@17 react-dom@17 instead.
Dependencies
First of all we need to add some dependencies to our project:
Start with existing package.json
If you're adding to an existing project, just imagine the same lines being added to your existing package.json.
We'll pretend to start fresh:
Add React
If your project was not using React before, you should add a compatible version (kickstartDS currently uses React 17) of it now:
_10yarn add react@17 react-dom@17
Change SemVer requirement
We want to get newer versions for React 17, so we change the import slightly! Learn more about those restrictions.
Add kickstartDS
Next we'll add the kickstartDS dependencies themselves. We start out by adding our base module (@kickstartds/base), which contains all of the base components, to get started:
_10yarn add @kickstartds/base
Learn more about the different modules kickstartDS has to offer in our overview here.
Start with existing package.json
If you're adding to an existing project, just imagine the same lines being added to your existing package.json.
We'll pretend to start fresh:
Add React
If your project was not using React before, you should add a compatible version (kickstartDS currently uses React 17) of it now:
_10yarn add react@17 react-dom@17
Change SemVer requirement
We want to get newer versions for React 17, so we change the import slightly! Learn more about those restrictions.
Add kickstartDS
Next we'll add the kickstartDS dependencies themselves. We start out by adding our base module (@kickstartds/base), which contains all of the base components, to get started:
_10yarn add @kickstartds/base
Learn more about the different modules kickstartDS has to offer in our overview here.
Result
Our repository is initialized. We can now connect it to a Git host, or just continue with the guide without pushing our code to a registry. If you'd like to learn more about Git hosts, see our Environments page about it.
Next Step
We'll continue by applying our branding to kickstartDS, which will result in a bunch of token files (JSON) being added to the project.
This will also give us the opportunity to set up Storybook, and get a first visual representation of our Design System in the browser!
Code Sandbox
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.