10 most common issues with design systems

A well-built design system improves efficiency, saves both the designer’s and developer’s time, and harmonizes the user experience across the company’s services. Many companies have built their own design systems for exactly these reasons. It hasn’t always worked out, and now tens of thousands of designers are locked in a struggle with poor design systems.

Here’s a list of problems that many designers have run into, along with tips on how to fix them.

1. Poor scaling. Craft your components with care. A good component will bend to fit the job at hand. You will hit the limitations of your design tool every now and then, but if your components have no flexibility at all, you are headed for trouble.

2. Poorly named components. Like FrontPageBlueContinueButton. Remember that you are aiming for maximum versatility. Don’t name your components after a specific view or special use case.

3. Versatility. Or the lack thereof. The three things you need to keep in mind are versatility, versatility and versatility. If you make several copies of the same component, make tiny changes to all of them, and finally whip up a new batch of components based on them, you’ve all but ruined your design system. Use the same component and create variation by using different styles or icons, for example. If you change the component’s style or layout, the changes will be immediately propagated into all of your designs. I know, I know. That’s the whole point of design systems, isn’t it?

4. Poorly made icons. Make a grid for the icon and export it with paddings, and you will make everyone’s lives a little easier. Even the developers. You don’t want to make all icons with the same template, though. You will probably need little icons, normal icons and maybe pictograms too. And don’t forget scalability here either.

5. Bizarre color names. It’s nice to give colors cool names, but nobody knows what color Rock, Zap or Mamba is. Append the name of the actual color to your cool moniker, like RockGray, ZapGreen or MambaBlack, so other people can actually understand them too. And don’t forget to make your colors into styles. It’s 2020, you don’t fiddle around with the eyedropper tool any more.

6. Slavish component library use. You will run into situations for which you just can’t find the right component. Don’t be too creative in adapting your components. A design system shouldn’t be a desert island on which you have to make do with what you have. You need to create something new every now and then. And when you do, maybe you can make it into a component too.

7. Obtuse text style names. What I said about colors. The name of the style should tell you whether it will be fine print or a screaming headline. Title1, title2 and title3 are about as informative as Jane, Jill and Joe.

8. Not checking accessibility. Chuck Norris can judge sufficient contrast at a glance, but professionals use the right tools to make sure. There are plug-ins for this too, like Able if you’re using Figma.

9. Sketch. Hanging on to Sketch doesn’t pay. You will usually need Abstract for design version control, Zeplin for painless design sharing, and a prototyping tool in addition to Sketch. Figma can do all of the above alone, and it has the features to conduct user interviews remotely. You will also be saving on license fees, at least a little. Figma is $45/month vs. Sketch $9/month + Abstract $15/month + Zeplin $26/month = $50/month. You will also probably need a better prototyping tool than Sketch.

10. Versatility. In the spirit of design systems, I copied the most important article component here at the end. All I had to do was change the text content. So take this from my tips, if nothing else. Try to make your components as versatile as possible and name them in a way reflecting that versatility.