10 Basic Tips to Creating a Design System from Scratch

I’ve been critical of design systems in the past (and still am), but there’s no doubt that design systems are here to stay. They help UX designers, UI developers and product teams by making design easier to implement, provide consistency across design teams, and increase the overall quality of digital products.

But for every inspiring design system that comes out from large design team, there are dozens of designers thinking, “I sure wish I had that company’s resources.” Design systems aren’t just for the big design teams, but there isn’t a lot of guidance for those of us creating them on a startup budget.

That’s why I created this quick guide based on my experience creating dozens of systems from scratch.

1. Design screens first

The journey to creating design systems starts with designing actual screens first. Think of it like cooking. It wouldn’t make sense to get your ingredients out and food prepped without having an idea of what you’re cooking. For design systems, this is even more important real screens give you an idea of what you’ll end up needing the most, and what might not be so important

For example, you may not need to spend hours making a reusable data grid if you’re designing a mobile app. On the other hand if you’re working on an enterprise CRM software, data grids will be much more important than a chat bubble.

2. Create styles before symbols and components

We are obviously huge fans and evangelists of Sketch, and that’s due to the amazing functionality they have with symbols. But when you’re starting a system from scratch, symbols might slow you down. Instead, start by getting your styles defined and organized. We focus first on simply getting a good palette of colors and fonts, then we create layer styles for UI controls. If you can get this done up front, this will ensure everything is easy to update later. Once you’re ready to make components, we’ve got you covered.

3. Organize your artboards up front

Speaking of being easy to update, take time to organize your system. In Sketch, we use pages and artboards very intentionally and it saves…