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.

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:

• Fundamental elements like colors, fonts, icons, and accent bars.
• Background and pattern information, such as artboard fills, patterns, gradient background, and neutral or accent gradients.
• Headers and input components, including look and feel for headers, buttons, and text fields.
• Card styles for various use cases, such as reservations, maps and hours of operation, or user ratings.
• Annotations as text elements on artboards to describe your components, including when and how they can be used.

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:

• Start by saving symbols > If you have a symbol in your design that will be recurring, simply click that symbol to select it, and choose Make Symbol from the drop-down menu to add it to the Symbols area in the Assets panel. You’ll see it appear right at the top.
• Symbol Overrides > when you edit a symbol instance in XD, you can override text content or bitmaps, all within the context of your design.

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

• Speed things up with Swap Symbols > Select the symbol you want from the Symbols area of the Assets panel.
• As you click and drag the symbol, the green + sign tells you it can be added anywhere to your canvas. As you continue to drag and then hover with that new symbol over the old one, the + sign changes to an arrow . This lets you know that all instances of the symbol will be replaced throughout your design. Whenever you make changes to that symbol element going forward, the updates are made automatically.

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.

• Simplify asset extraction > You can check out this step-by-step demo, but here’s the gist: First, you Mark for Batch Export all the assets you want to export using the Batch Export tag. When you’re ready to publish, simply click Share and then select Publish Design Specs.**
  **
• In the Export For drop-down options, choose Web, iOS, or Android. Then you can create a public link and send it to your developer. When the developer is working within that link, they can see all tagged assets and easily select the file format they need: SVG, PNG, or PDF.

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.