Building a Design System: Speed, Scale, Collaboration, and Innovation
Adobe XD works with your design system to create better experiences.
The number of interactions between brands and their customers is exploding as experiences go digital. Maintaining personal relationships when there are so many ways to connect is a growing challenge. But products and services can be efficiently created — and all of this easily managed — if a solid design system is at the foundation.
A design system will help your marketers, designers, engineers, and data analysts collaborate to quickly produce the experiences your customers want, while maintaining the consistency your brand needs.
On the other hand, attempting to manage this process ad hoc quickly results in creative chaos. Global brands and agencies require end-to-end design systems to efficiently manage tools, brand assets, component libraries, documentation, and workflows according to their unique design truth.
A design system is a collection of reusable design elements, UI components, and standards that guide their use. But that’s just the starting point. An advanced design system needs to encompass the entire design platform — design tools; brand identity including color, typography, voice, and photography; UI and app components; code libraries; content libraries; data analytics; documentation; workflow; and more.
With this foundation inside of experience design, teams will be better able to stay in sync. For example, as teams share data via design spec workflows, those workflows will be extended and exposed on the web through development tools as users’ data is communicated through the designed application. As a result of this extensive framework, usage numbers could begin to flow back through the system and back to the designer who published the spec. Ultimately, this will give designers more information to make better design decisions.
“Building design systems help with the overall organization and communication across internal and external teams and, more importantly, brings a unified experience to our readers,” says Jan-Jan Tayson, digital creative director of New York Post.
Here are some foundational ideas you’ll want to include as you build and iterate a comprehensive design system. Each element will establish a better experience across your organization and help you create powerful experiences for your customers.
Design for speed
With a design system, you can quickly develop new tools and content without having to reinvent the design/UI wheel every time — and your results will look and work consistently, and most importantly, provide an excellent customer experience.
One way to ensure speed is to use integrated products and workflows that support collaboration. This will help your team work at a faster pace when iterating. For example, if you are able to collect all feedback in one place, then UX teams can quickly revise and publish new versions. Similarly, being able to switch easily from design to prototype makes it simple to demonstrate multi-screen experiences to colleagues or share prototypes with teammates via the web.
Another way to speed up the process, while remaining true to your design system, is with features that allow designers to automatically update shared elements in a design after updating just one of those elements — like repeat grid or symbols in Adobe XD. Not only is this infinitely faster than updating elements and styles individually, or cutting and pasting new specs, but it also eliminates errors that can creep in with a manual process.
UX designers regularly face the challenge of designing for multiple screen sizes. Having the technology to customize for any screen size and be able to adjust without losing the placement or integrity of design elements, is critical for maintaining speed in your design process.
Design at scale
To work at scale, you need access to a single source of design truth. That means confidence that you’re accessing the latest assets across all guidelines, documentation, and asset libraries.
Make sure your design software is integrated into your creative asset and code libraries to avoid the inconsistencies that happen when design concepts fail to match real-world application.
For example, when designing a new website, your design concepts need to be implemented by a developer. A small design tweak for a designer could be seen as a huge tweak — or even a wholly new component — to a developer looking at static design files. However, if I can hand my developer a much more descriptive and rich view of my design components, we can connect those dots a little more seamlessly in the planning process, which equates to less room for error.
“Design systems have helped us close the gap between designers and developers,” says Tor Gundersen, executive creative director of Perficient Digital. “It gives them both a common language to work from and a single source of truth that defines interactions.”
You’ll also want seamless connectivity between design assets and code components so that designs both look and behave consistently when implemented across different devices, browsers, operating systems, and other channels. These design assets could include colors, symbols, linear gradients, typefaces, character styles, and imagery — whether stock, original designs, or original photography.
“Adobe XD has changed the way we approach design for digital layouts because of its ability to smoothly merge the process of design, prototype, and specifications in one simple to use program,” says Jan-Jan.
Designing at the enterprise level means designing across large, multi-functional teams both within the brand and with agency partners. When teams can work effectively together, with positive command and control, they get to market faster. This is important because real-world teams don’t have the luxury to work three to six months out. They have to react quickly to competition, market events, customer feedback, and real-time data.
Rapid prototyping means getting feedback on designs before going to development. You want to make sure everyone — from designers, to managers, to customers — is onboard with the designs you’ve created and the customer experience it delivers. Then, the development process can be much shorter. Working with a design product like Adobe XD that includes prototyping, as well as the ability to generate detailed design specs, makes the process faster and ensures that your design system is carried through to the final product.
With most design systems, design is connected to a code framework and a set of brand guidelines. Design and engineering components are used as building blocks. All of this helps ensure consistency.
“Building a design system gives us a recipe for extending solutions. It means we don’t have to create a design for every screen. With an established look and feel and a design language of reusable styles, components, and patterns, a development team can assemble new pages using just wireframes for reference. No further design required,” Tor says.
But remember that design is not a one-size-fits-all endeavor. If the design system is too rigid, it can stifle creativity and innovation. You still need the ability to adapt in a way that leads to consistent communication and more accurate implementation.
Future capabilities with Adobe
As we add more capabilities to build design systems inside of Adobe XD, there’s more that we can publish with your design spec via Creative Cloud. We’ll be able to deliver richer information to a developer that will shorten the communication gap. Instead of only being able to extract a hex value or style information, developers could get code snippets that they can implement as well. Consistency within experience design creates a one-to-one relationship between the design spec and the component as it’s coded.
Ultimately, any design system will provide consistency, but the most effective design systems will do more. When you have a comprehensive design system and the tools to integrate it across your enterprise without slowing down the process, you can create great digital experiences within your brand framework, at scale.
Get started with Adobe XD to explore how it can work as part of your design system.