How to Use a Design System in Code
This article is a summary of last week’s workshop
Last week, I introduced my favorite design system, Shadcn UI and I want to share my approach to implementing it in code.
The Right Design System Isn't a Solo Choice
At my current job, we use Material UI design system. It works great for us, but here's what I've learned about choosing design systems: it's never just about what you like as a designer.
You have to think about:
- Does your engineering team have the experience to work with it?
- Are there enough resources to help everyone learn it?
- Can it actually fit into the products you're building?
I'll give you a real example. When we started our current project, the initial plan was to use Bootstrap. It wasn't my favorite choice because it didn't meet our goals, neither was it a native choice for our tech stack, so I did my research and recommended Material UI instead. Why? Because it has tons of components that work beautifully in both design and code.
Why I Love Shadcn
For my personal projects though, I mostly use Shadcn. What I love about it is how it's built on top of other tools, giving you this comprehensive toolbox that's actually simple to use. Most design systems are so huge that you don't know where to start, but Shadcn makes it straightforward.
My Approach to Implementation
Here's something I've learned: while as a designer I'd love to have a UI kit in Figma, most design systems are code-first. Shadcn doesn't even have an official UI kit in Figma (though people have created their own).
My golden rule? Always start with the design system's website.
Whether I'm working with Material UI or Shadcn, I go straight to the documentation to understand how components work and what they can do. That's your true source of knowledge - where you'll find the most up-to-date information.
Getting Started (Even If You're Not an Engineer)
I'm not an experienced engineer, but that's the beauty of modern design systems - they enable you to create beautiful, accessible, and responsive UIs quickly. Here's how I start:
1. Set up a new project directory
2. Use a package manager (I use npm) to install dependencies
3. Follow the framework-specific guides (I prefer Next.js)
4. Set up the components.json file for configuration
What I love about this approach is that you don't have to guess what comes next - every step is clearly outlined in the documentation.
Want to see how I do this in practice? Check out my full workshop video here.
P.S: I recently gave a workshop on implementing design systems in code. While I've kept some technical terms for accuracy, I hope this helps bridge the gap between design and development for you.