A deep dive into my experience building my own design system that documents my process of defining tokens, creating efficient components, and shipping them as a package.

Kirill Kurko

OpenAI

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

A small scoped design system mainly composed of primitive components focused solely on personal branding and personal use. The scope of this design system feels small compared to the bigger ones we can get to work on in a work context, it was not necessarily less complex to build. In the following parts, I'll go through the challenges and decisions I've made along the way when working on this project.

Building a Design System from scratch

Context: Why would I even choose to build my own design system?

Lots a detail and hard work has gone into this. A clean, consistent and reusable approach. This is a great resource.

To me, this is not a design system, just a graphical chart with Frontend integration.
A design system is WAY more than this.
It has UX rules, wording rules, CTA placements …etc
Take Atlassian’s one as an exemple
<a href="https://atlassian.design/" target="_blank" rel="noopener nofollow">https://atlassian.design/</a>

Packaging, shipping, versioning, bundling are so crucial!