10 Basic Tips to Creating a Design System from Scratch

Christian Beck
Jun 25, 2019 · 6 min read

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 time later on. Personally, I use Pages to correspond to features, then line up workflows horizontally, with them stacked horizontally and flowing from left-to-right:

Pro tip: Use the Artboard Manager plugin by Alé Muñoz. It does the work for you:

4. Start with an existing system base

This can mean starting with Material Design, or something web-based like Semantic UI or Bootstrap (we also create a nice sketch starter system as well). The key here is to keep the pressure off yourself to make something unique.

If you’re starting from scratch, then success is measured in creating something useable; you can evolve it into something unique later.

5. Use an icon set

We are partial to Nucleo, but we’ve also used a lot of other sets in the past. Using icon sets is helpful because it ensures that the visual style of all your icons will be consistent. And if you’re like us, designing icons isn’t necessarily your strong suit.

Unless you’re a large, well-funded organization, it’s not quite worth your time to create a custom icon set. At least not yet.

6. Use visual style tools to help

Again, we’ve established that we aren’t icon designers, and frankly, we’re not always the most incredible visual designers ourselves.

When you’re establishing a system, haggling over color swatches can slow you down. We highly recommend using tools to help at least give you a competent palette to start with. And if you’re using styles (as you should be!), then you can easily change the colors later on.

We are partial to using coolors.co because you can plug in a base color and build palettes from it. This is perfect for new systems because you can build off your product’s brand colors.

7. Establish your key components

Your design system will probably share at least 75% of its styles and components with any other system. But what will make it extremely efficient for your product are the handful of components that are special to your product.

For Facebook, it’s the Stream and its various components. For Slack, it’s channels and messages. Your app will have a few fundamental pieces which make sense to bake into reusable components.

If popovers are a critical piece of your system, it’s worth calling them out in your system.

8. Establish a UI Inventory

If you’re building a system for an existing product, then this means that you are writing down every key screen in the app. It also means you will track components (like dropdowns and text fields) to see where there are inconsistencies.

For new products, you can grow this inventory as you move on, but it will be most important to simply start with the key screens you need. And since you are starting fresh, you won’t have to worry so much at documenting the UI controls in the beginning.

9. Update your system between major features or releases

As you build your system, you‘ll want to continue evolving it. But in our experience, there’s good times and bad times to do this.

The desire to update a system always springs up while you’re designing a new feature, but that’s usually the worst time to make updates. Instead, track the changes you need to make, then set aside time for “spring cleaning” where you can revisit things to make the updates you desire.

Pro tip: Prioritize forward-looking features rather than backward-looking ones. What that means is, when you make system updates, you should be applying those updates to new features before worrying about ones that are already done. If you do a good job communicating the updates to your dev team (or you are lucky enough to have a system that is connected to code), the updates will eventually get applied to old features.

Documentation doesn’t have to be robust if you collaborate closely with your dev team.

10. Document UI guidelines and rules

This is a step we’ll admit that we skip sometimes

But every time we hand off a design to another team or designer, we regret skipping it. It’s easy as you document a system to keep all the rationale and decisions in your head.

But the long-term value of a system is that it not only guides your design team, but your product and development team as well. We believe that design systems should help a non-designer make better decisions. And while we would all love to think we’ll get to design everything, the truth is we can’t always keep up with a fast-moving product. As a result, having UI guidelines to supplement your system will ensure your product doesn’t need you around to hold your hand.

If you’re interested seeing the system we use at Innovatemap to start all new projects, check it out in Sketch Cloud.

When I’m not sharing stupid human design system tricks, I’m helping designers get faster with Sketch design tools at UX Power Tools, leading design at the digital product agency Innovatemap, and co-hosting the Better Product Podcast.

Follow UX Power Tools on Twitter

Connect with me on LinkedIn

UX Power Tools

A publication for designers, written by designers.

Christian Beck

Written by

By day, executive designer at Innovatemap where I help tech companies design marketable products. By night, co-founder of UX Power Tools.

UX Power Tools

A publication for designers, written by designers.

Christian Beck

Written by

By day, executive designer at Innovatemap where I help tech companies design marketable products. By night, co-founder of UX Power Tools.

UX Power Tools

A publication for designers, written by designers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store