‹ See more on design systems
Design systems:
The language of scalable design
by Hoyle Wang
A design system is a single source of truth, allowing designers to easily pull common elements to design and develop products and experiences. It grows and evolves constantly, always providing a collaborative space for innovation and iteration.
Web, mobile, voice, VR/AR, and more — with an ever-growing number of devices, screens, and demands, designers are under more pressure than ever to deliver effective multi-platform user experiences, efficiently. That’s where a design system can be a life saver; building a cohesive and collaborative design system will empower designers across your organization to develop consistent and scalable designs, saving time in the process and achieving a cohesive experience for your users.
There’s an added benefit to design systems, too: a strong design system cuts down on much of the grunt work of building experiences — individual designers easily share components, best practices, and experience guidelines, freeing them up to spend more time on being truly creative. Less repetitive pixel pushing, more innovation and experimentation.
Our team knows the power of a design system first hand. At Adobe, we’ve been working hard to develop our own design system, Spectrum, in an effort to make our creative tools more consistent, collaborative, and cloud-centered (and to make life easier for us, too). We’ve been using Adobe XD to do it, and we want to share how you can use it to build your design system from scratch. In this guide, we’ll go into more detail about how an XD cloud document can be turned into a sticker sheet featuring components and linked assets, but first, let’s talk about what a design system is and what its key building blocks are.
What is a Design System?
To start, it helps to gain an understanding of what a design system really is, and what it will look like in the context of your projects. At its core, a design system is a series of guidelines — these guidelines are like the lego that you and your team build experiences out of. These building blocks take many forms, such as:
Components
The reusable elements that you will use (and reuse) to build experiences, like buttons, navigation elements, icons, etc.
Assets
Colors and character styles for designers to use when building out various experiences.
Guidelines
Sizing and scaling details, navigation patterns, and other frameworks designers can reference to make sure they’re on the right track.
A starting point for every designer creating new experiences
The guidelines that make up your design system should all live in one place; this will be a central destination designers can go to to quickly pull elements and get all the information they need to make sure they’re building experiences correctly (and efficiently — no need to build elements from scratch when they’re easily available already). This destination, often referred to as a sticker sheet, forms the single source of truth and the best possible starting point for all new experiences. Designers will pull assets and components from this repository as they build and update experiences.
Adobe XD makes it incredibly easy to build a sticker sheet and share it with your team, in the form of a cloud document. This is where designers will be able to regularly share and update UI elements and experience guidelines. All aspects of design system creation and management can be done, via this cloud document, right in Adobe XD — in this guide, we’ll walk you through the steps to create your design system and get it up and running with your team.
Step 1: Define your design system by selecting components, logos, colors, character styles, and more
Remember, a design system is your single source of truth for the final version of your app. Your best practices live here, whether that’s in the form of colors, character styles, components, guideline considerations, the latest logos and promo images, etc. That’s why it’s often easiest to have a single designer or a small group in charge of the design system; they will serve as the gatekeeper(s) of the design system, updating elements as necessary. Whether you alone are that gatekeeper or you’re part of a team that is, it’s important to begin the design system creation process by laying a solid foundation.
To start creating your design system in Adobe XD, you’ll need to add your foundational colors, character styles, and components to the assets panel and save the document as a cloud document in XD. This is where you’ll store all of your guidelines and elements — it will be easily accessible to anyone you share it with, and they will be able to view assets directly in Adobe XD’s assets panel (making it easy for them to quickly reference and pull from your design system while they’re creating new experiences).
A foundation to innovate and iterate on
This design system is like a dictionary of your design language: you are defining the logos, colors, fonts, grids/layout, and more. Your design system reflects the desired look and feel of all the experiences you and your team will build, so begin by identifying your existing elements and best practices and import them into this cloud document. Remember, your design system can be easily updated and adjusted whenever you need; right now, you just need a place to start so you and your team can begin innovating and expanding.
Step 2: Begin building your design system with linked assets
Adobe XD allows you to create linked assets in your documents. This is how you will manage the latest versions of navbars, buttons, colors/character styles, and other UI elements that will be used throughout the experiences you’re creating. Import your existing elements, mark them as components (more on that below), and then designers will be able to easily pull these elements from the design system’s ‘sticker sheet’ and use them in their designs.
Link Assets
In order to link from one document to another, all you have to do is hit “Link Assets” button on the upper right hand corner of your Assets Panel. The document that you link from will serve as the source of your design system, and the new document will import all elements inside of its Assets Panel.
Going forward, when a new version of one of these elements is ready, all you’ll need to do is update it within the design system doc and it will automatically update in all other documents it’s been used in. This maintains that single source of truth. Everyone stays in the loop, too: documents that use a linked asset display a notification whenever a change is made to the design system file.
Master Components and Instances: Maintain repeatable elements while retaining individual flexibility
Of course, while you’ll want the elements in your design system to be used consistently, that doesn’t mean you want to take a ‘one-size-fits-all’ approach — UX is at its best when elements are familiar but adapted to meet individual user needs in context. Fortunately, in Adobe XD, you’re able to create master components — these are elements that live on your design system’s cloud document. They’re linked assets, as mentioned above, and they can be quickly pulled by designers to build designs, and easily modified on a one-by-one basis when necessary.
As you build your design system, the first component you created in the source document serves as the Master Component. These are the cornerstones of your design system — designers can copy and paste these components into their designs for use and reuse. Each time you do this, it creates an instance. You can override any property in an Instance while still keeping its connection with the Master Component. Changes made to Master Components will update automatically all instances where those properties have not been overridden.
Flexibility
A design system is only as useful as the degree of flexibility it provides. In XD, Instances of components are infinitely flexible. This allows you to alter the content, style, size, layout, and even add or subtract elements to an Instance, while still keeping its relationship with the Master Component.
Layout flexibility
You can also choose to change the layout of your Components drastically, resize them, and even add or remove objects in Instances. You decide what’s needed in your design system, and XD does the hard part for you.
Seamless updates
Updating the original Colors, Character Styles, and Master Components in the source document will propagate those edits to any consuming documents. You can hover over the badges to preview changes, or accept all of them by clicking on the “Update All” button at the bottom of the Assets Panel.
Step 3: Transform your design system into a comprehensive resource for your entire design team
Once you have your project’s most important key elements in your design system, it’s time to begin expanding and enhancing the offerings. By laying out all of the UX guidelines and UI resources in your XD cloud document, you’re creating a single destination to go to for anyone on your design and product teams that needs to quickly solve problems and inform their decision-making. Begin adding some of the following elements to save production time and resources on the other end:
Sizes and dimensions
You’ll likely want to set standard guidelines for the sizing and layout of your experiences. Create artboards that show the best practices for the distance between elements, the use of negative space, grid layout, and more.
UI kits
Adobe XD comes with an ever-growing and very useful list of UI kits that you can use to build out experiences. These include UI resources for Apple, Google, and Microsoft operating systems, which will save you time when designing for different devices and platforms.
Shared Adobe Fonts
Your design system can also be your tool to maintaining consistency of typefaces across experiences. Any fonts from the Adobe Fonts library you use on your sticker sheet will be automatically loaded in XD for the designers who have access to it.
