DEV Community

Cover image for kickstartDS is Open Source now. Let’s start to democratize Design Systems today
Jonas Ulrich for kickstartDS

Posted on • Originally published at kickstartds.com

kickstartDS is Open Source now. Let’s start to democratize Design Systems today

Finally, the wait is over … today we are very proud to announce the Open Source release of kickstartDS. It’s been roughly one year since we started to go to market by publishing our first website, and we are thrilled to now share the kickstartDS core with everyone in the Design System community.

We’re also officially live on Product Hunt! Feel free to drop as an upvote 🎉
https://www.producthunt.com/posts/kickstartds

Why have we decided to go Open Source?

Some of you might have read my post on why we are creating kickstartDS. Today, I can proudly say that we reached the next big milestone of our mission to democratize Design Systems. Last year we started to implement kickstartDS for selected pilot customers, keeping the source behind closed doors. We wanted to validate technical decisions taken, and learn how developers interact and adapt kickstartDS.

During that time, while doing user research, presenting our ideas and solutions to developers, we often heard that they really like it… and that they would love to test it by directly installing “the package”. Well, who would go for a no-name, closed solution to build up something highly important like their Design System?

Open Source is the way! A couple of months ago we took the decision to share all our learnings and practices, wrapped up in the baseline of what kickstartDS is today. We want to continue that learning journey. That will be even easier with people working with kickstartDS independently, who hopefully also share their experiences and stories with us in the process. That is what we’d like to encourage users to do. Just try our setup guide… and once you own your Design System based on kickstartDS, really make it your own. Tell us how you adapted it towards your individual needs, even how you named your components, how you get along with it adoption are super interesting to us! So please share it with us and the community.

Help democratize Design Systems!

The term Design System describes a broad topic, growing more and more momentum. Where large organizations today mostly have problems with the adoption or governance of theirs, in small to medium enterprises the problem often already is to get a Design System started at all. For example, when standard frameworks are too difficult or complex to adapt, when stakeholders need to be won in a time when frontend experts are a rare good. The approach is doomed and will lead to compromised technical solutions; consuming even more time and budget.

Today quite some companies are already tackling similar problems. Talking of Knapsack.cloud, Backlight.dev, Specify, Supernova and many more, here. They all deliver value to simplify workflows for setup, integration, documentation and management of Design Systems. This is all super helpful in spreading the love about Design Systems to teams out there, and is a huge benefit to the process side of things. But you usually still need to create or import all of your components, which means that you still have some hard work before to you yourself, before finally benefitting from these tools. There’s also a lot (knowledge and work) going into the setup of a Design System (semantic tokens, hardened components, etc) that’s not solved by those tools, yet.

Setting up a code first Design System has never been easier

Developer Documentation

Visit our GitHub

To help you getting started quickly, we created documentation guiding you through the installation process of your first Design System built with kickstartDS… in just 5 rather simple steps.
The main steps will go as follows:

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

Although the resulting Design System will obviously not be finished by finishing these steps, you’ll have everything set up to start on the real work.

The essential part

At that point you already got rid of some of the core challenges. Plus, this might even give you the mental freedom to tackle the unique components to your organizations actual needs.

Thinking of such components … usually, every company has content to display. On their website, on marketing or landing pages, in their intranet or documentation, you name it. You can now start developing the perfect “Hero Visual Component” with our basic Open Source components or you can skip even that by relying on our complex content components, which you can easily buy for a few bucks to add as additional building blocks for your freshly created Design System.

That package, additionally, really puts you in the driving seat… speeding up the ride for even the most individual and complex cases you’ll want to solve, the “next component your organization needs”. (this refers to Dan Mall’s talk on Converge’22, available through their registry here)

What’s next?

Now that kickstartDS is public we look ahead to its future with an open mind. We still have to work on many details to let our documentation really shine, for example. As we want to explain the underlying concepts in-depth. And since everyone is now free to install, test and use kickstartDS we believe in the great openness of the Design System community. We rely on your feedback by adapting to your needs, so that kickstartDS will really become the Design System starter digital teams like to work with.

Releasing kickstartDS doesn’t mean that the development is completed. We have lots of ideas in mind. Features or modules which may find the way into the portfolio, thinking of telemetry, adapters, transformers and much more based on our Component API.

Not to forget: a Design System is nothing without systems using it!

A Design System is there to generate value, to support the organization to better reach its objectives. Naturally there will be product or feature teams using it. About that, a 6th Step could and maybe even should be added to the setup process of the Design System.

Step 6: Apply your Design System

Whilst setting up kickstartDS you made quite a lot of decisions adapting the library to your organizations’ specific needs. You decided which properties every component needs, how to name components, and much more. What would you say if we told you: you can even add a CMS, using these exact Design System components, with just a handful of clicks? Where your editor immediately benefits from all your decisions, because the properties of components in the editor UI are always aligned with those from your Design System.

We offer adapters for some well-known content management systems already, e.g. Sanity.io, NetlifyCMS, Storyblok, Contentful and even WordPress.

One more reason why we think: relying on kickstartDS when building your Design System is of huge value for you and the Open Source community, who can start building more adapters and implementations on top of kickstartDS to simplify the process of applying Design Systems.

The importance of the growing Design System community

Thinking about the best thing we could achieve with kickstartDS, and as already written in this posts’ headline: do our part in democratizing Design Systems. The more people know about kickstartDS, the more organizations use it, the more developers build Design Systems based on it, the better it will become in the future. Helping organizations adopt best practices, and hopefully help everyone to get their Design System that decisive bit faster, while having fun doing it!

Join our Discord community to share feedback, ask us questions and start any discussion around kickstartDS.

Take a look at kickstartDS on GitHub, and tell us what you think.

And if you're on Product Hunt, we'd love your vote 🤗
https://www.producthunt.com/posts/kickstartds

Top comments (0)