How to Build a Single Source of Truth with Adobe XD

One pattern library, one step closer to a Design System.

Image source: Cody Brown Tractiv XD Kit.

by Demian Borba

posted on 12-21-2018

Trying to build a library for design consistency? Adobe XD can help you get there faster.

Designing across devices and mediums isn’t a new concept, but that doesn’t mean it’s easy.

Last month, we explored the idea of designing systems, not pages — inspired by the Adobe MAX session of the same name. The idea of creating a design system using Adobe XD is something I’ve been exploring for a while, and, while it may not be 100 percent there, it’s certainly getting closer.

The intuitive workflows in XD provide a way to ensure consistency while still providing the built-in flexibility you need in a constantly changing environment. And it all starts with a pattern library.

1. Create an XD document as a pattern library

While a pattern library is only part of a larger design system, it’s crucial for maintaining consistency.

Essentially, a pattern library is a collection of design elements that are reused across a website or app, from basic navigation to more complex items like carousels, social media components, and so on. The pattern library not only holds all of these patterns, but it defines what they look like and how they act.

By building an XD document as a pattern library, you start to create that elusive “single source of truth” in one place. This is where you’ll define your components, including:

The best part? Any time a designer copies a symbol from this pattern library document, and pastes it into his or her document, the copy stays linked to the original pattern library document. This functionality is called Linked Symbols: all changes made to the symbol in the source document can update all other symbol copies present in other documents.

2. Easily change common elements across your designs

The Assets panel is another great way to manage (or create, copy, delete, edit, search, rename, reorder, or highlight on canvas) the colors, character styles, and symbols — all with the ability to reuse or change them quickly and easily across your designs. Here’s a look at how you can use symbols:

If you have a common symbol that you want to replace, like an icon, the Swap Symbols feature automates this process across your designs.

3. Give developers control (and still rest easy)

Here’s where steps 1 and 2 really pay off.

Any good design system — or the beginnings of one — should make your developer’s life easier.

After you build your Adobe XD document as a pattern library, you can generate a design specs link via File > Share, giving developers the ability to inspect colors, character styles, and measurements, as well as download your “sticker sheet” assets in the file format they need.

Because designers can copy symbols from the document you created in step 1, and keep the link, the pattern library becomes their single source of truth for designers. And the design spec link can be the single source of truth for developers.

Nobody said creating a connected experience was easy. By nature, it’s really hard to nail down design elements and patterns that are constantly changing all the time, whether by a design choice or a client’s request.

But now you have some tools to help you get there.

Be sure to read up on the latest updates on Adobe XD, from voice design, to plug-ins, and much more. And be sure to check out Adobe Creative Cloud Libraries, another great resource for consuming in predefined colors, character styles, and images. All items stay synced across your devices and are ready to use, even if you’re offline.

Topics: Creativity, Design

Products: Creative Cloud