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.
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.
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.