Build A Design System from Scratch in 7 Steps

What do you think of faster project turnarounds? How about consistency in all of your products? Does better UX and customer satisfaction sound good to you? This isn’t some new miracle product that’s available to buy — but you can build it yourself.

Designs systems are sweeping the tech world right now, with advocates like Trello, Atlassian, Stacks, and Shopify (Check out a complete list of companies with links to their design systems here at Adele). This wave of popularity explains why 69% of designers surveyed in the 2017–2018 Enterprise UX Industry Report said that they either already had a design system or were currently planning on building one.

And why are design systems suddenly so popular, you ask? Because they’re exactly as effective as everyone says. The hype is real. Incorporating a design system in your company brings a variety of benefits:

• Faster time to market. By breaking design elements into homogenized components, design systems make the whole process more efficient. Planning, designing, testing and coding are all streamlined to reduce wasting time.
• Improved UX and customer satisfaction. They make it easy to keep track of what your users like and dislike, retaining the former and disregarding the latter. They ensure all your products use only the UX elements your customers prefer.
• Better internal communication. As a standardized document, design systems minimize the amount of miscommunication. They keep everyone on the same page to avoid confusion.
• Consistency across all products. Your loyal customers expect a certain level of excellence on all the products, apps, and sites you launch. Deliver consistent quality and familiar usability on every single product by using identical components.
• Less version control issues. Updating the same bug on different products can get annoying, not to mention time consuming. With design systems, you update once and it populates all occurrences.

Design systems are a clear advantage to companies that have already implemented them, and in a few years they’ll be the norm. So how can you build a design system now to utilize their benefits yourself? We’ll explain how in just 7 easy steps… but first, let’s talk a little about what they are.

What’s a Design System?

Formally, a design system is a master collection of the key standardized documentation every company needs to, in the words of AirBnB Principal Designer Karri Saarinen, “define the overall design of the product.” This includes your usual documents like pattern libraries, guideline texts and styles guide, but also more technical aids like reusable codes for common components and other time-saving design assets.

The true beauty of design systems, though, is that all of the components in these areas are already optimized and coded. That means whenever you’re designing a new project or updating an old one, all the pieces you need are already ready — you just have to put them into place.

Textual documents like the style guide and rule guidelines are not exactly coded components, but we still recommend them. Including these documents creates an all-inclusive reference guide that covers every roadblock your designers might have. Whenever someone has a question, they can always refer to the design system.

Now, chances are you won’t have all these documents lying around already. Most companies compile these only as needed, so it’s common to have gaps and oversights. That provides one more advantage of creating a design system: an excuse to gather and formalize these materials for your company once and for all.

In this article, we’ll assume you need to create all of these areas — after all, this is a guide on building a design system from scratch. Startups especially have to tackle all these issues all at once, but even long-established companies may have ignored one or two (or ten) of these areas in their focus on fast growth. Either way, the 7 steps below can lead you to a fully functional design system, even if you’re starting from nothing.

7 Steps to Building a Design System

1. Evaluate your current UI inventory and note inconsistencies

The best place to start is evaluating what you already have. Which elements do you like? Which do you want to replace? Where are there inconsistencies between products or pages?

You’ll want to review every digital asset and all pre-existing reference materials. The end goal is to create a universal guidebook and resource library, so everything that can be included, should be included. Specifically, take a good look at:

• Color schemes and how each color is used
• Stylistic text choices, like specialized grammar selections, voice, etc. — choices that would be outlined in a style guide
• Icon libraries
• Photo libraries, both stock and custom
• Other graphics, especially your logo — now is a good time to reevaluate your logo and make a new one if you were planning to
• UI patterns (note which ones need to be updated)
• Page templates

If you’re a new startup and don’t have any finalized design elements to review, think critically on each of these areas to determine the choices that best fit your brand. Later, you’ll have to create a master list anyway, so it’s never too soon to start deciding on these.

2. Get the entire team on board

True, you could do this step first before evaluating your UI inventory; however, we recommend looking for inconsistencies first to give your argument leverage if you’re met with resistance. Nothing like a laundry list of design inconsistencies to get naysayers on board.

Regardless of how many errors you collect, you should highlight to the team the efficiency bonuses of using a centralized design system. Repeat everything mentioned above in the introduction, and accent the amount of time and work a design system saves by streamlining the entire design process beginning to end.

A common complaint about design systems is that the company doesn’t have time to set aside on a side project, but the truth is design systems make up that time — and much, much more — in the long run.

3. Color palette

Now we get into the nitty-gritty of design systems: creating a master list of all your design choices, whether you’re choosing among existing elements or creating them from scratch. It goes without saying that you should rectify the inconsistencies from the first step before adding them in the master.

Your color palette is a good place to start. Maybe you’ve noticed the company uses more than a hundred different shades of gray. How much easier would it be if everyone just used one shade, and that one could be grabbed in a readily available design system?

Identify your chosen shades and hues for every color you use repeatedly, and write definitive guidelines for how to use them. Of course this includes your primary branding colors, but also pay attention to your secondary colors. For example, what color is your text? Your links? Special buttons? Backgrounds?

Remember to include HEX, RGBA, or HSL codes to be as precise as possible.

4. Typographic elements guide

Next, you want to review and finalize your typographic choices. If you already have a style guide, most of the work is done for you. If not, this free style guide eBook will tell you what you need.

Design systems can be more technical than static style guides, so take advantage of this. Note your preferred text sizes, spaces, fonts, etc., as well as any rules on where and when to use them. For example, how big are section headings in your blog articles? What font do you use for on-site calls-to-action?

Don’t neglect the fine details, like font weights, line heights, or custom kerning rules if applicable.

5. Graphic design assets

A well-made design system allows you to simply drag and drop visual components right into your new prototype. The more graphic design assets you collect in a design system, the faster your workflow for future projects.

Don’t forget to include the proper code snippets or any other documentation developers may need. This small inclusion is an enormous help during the development stage.

Among your graphic design assets, you’ll need libraries for

• Icons — All the icons your products, apps, or sites use. Having a standardized icon library ensures consistency across your entire brand.
• Photography — A single go-to reference for all your company photography, both custom images and purchased stock photos. Not only is it easier to pull these from a design system, it also allows workers to browse the selection for ideas and inspiration.
• Illustrations — Likewise, compile all the custom illustrations you’ve commissioned, including page flourishes or border designs.
• Branding images — This is a place for your standardized logos and other branding images, like mascots. Rules for logo usage can get strict, so it’s better to pull pre-approved images to ensure compliance.

Moreover, you may want to include a list of design principles for everyone to follow if they’re creating a new graphic asset. Sizes, colors, compatibilities, preferred file formats — having a rulebook helps ensure your company’s style remains intact in the future.

6. Pattern library

Finally, include a pattern library of all your common design elements, especially interactive ones. There may be some overlap between UI patterns and graphic assets. On the whole, your UI patterns are more advanced than stagnant visuals.

To be clear, UI patterns are any design elements you use consistently for the interface of your site, app, or product. For example, how you treat your search function is a UI pattern, including how the magnifying glass icon looks, whether the input window expands or remains open, where it’s located on the screen, and if you include placeholder text or not.

Don’t forget, once again, to include code snippets and other development documentation. This is even more significant for UI patterns, as they tend to be more technical.

When organizing your UI patterns, include usage notes to clarify the specifics of how to use it. It also helps to use screenshots or visual cues to make searching for them easier.

It also helps to organize your pattern library into subsections. Try categorizing them by function, such as “navigation,” or by type, such as “drop-down menus.”

7. Upload the select UI elements in a design system document

Lastly, you need to house your design system somewhere that’s convenient and easily accessible. The UXPin Design Systems platform was created for this in particular, with a template-like format where all you have to do is input your components in the appropriate space or upload them from Sketch.

You also have the options of dragging and dropping your elements into the prototyping software, which means easy, DIY designing and a fully-coded handoff to developers with complete documentation (full markup, information about imports, and names of javascript components, etc.). If you want to optimize your time-to-market, this all-inclusive solution is the way to go.

Conclusion

Design systems are a relatively new addition to the world of digital design, but they’re already changing the game. Given the depth of what they’re capable of, we can’t fully explain their usage here; this is just an introduction on how to get started.

This article originally appeared here on Medium.

UXPin is the design process tool that helps product teams around the world turn ideas into products faster.

With Merge, UXPin’s revolutionary technology, companies like PayPal can easily solve DesignOps challenges. UXPin Merge allows you to design with React components to achieve full consistency with the final product.