Introducing Design Systems in Adobe XD: Easily Create, Share, and Manage Reusable Colors, Styles, and Components with Your Team

After we added cloud documents to XD late last year, I highlighted a number of major areas that we’d be working on over the course of 2019 – one such area was creating and managing design systems.

With this month’s release of XD we’re excited to introduce a number of new capabilities that will enable you to create cloud documents that contain reusable colors, character styles and components, share them easily with team members for use in their own documents, and then centrally manage updates to design system elements so that everyone is leveraging the latest assets.

While doing this, our overarching goal was to make it a natural progression to move from designing individual elements to creating a comprehensive set of reusable assets that help ensure design consistency as you and your team scale your work.

Components

Since the introduction of XD we’ve had symbols as reusable elements, but they had a number of limitations when it came to how flexible and adaptable they could be. With this release, we’re completely replacing symbols with components, which are even more capable. You can create a master component to define a reusable element, such as a button, and then instances of that element can be customized by making changes to any properties. Changes that you make to an individual instance are specific to that element, but changes you make to the master will propagate to all the instances where that property hasn’t been customized. It’s an incredibly powerful model, yet extremely easy to use, and it’s at the heart of our design systems solution.

We’ve designed components to work with responsive resize, so you can take any instance and adjust the size of the component, with XD automatically managing placement and scaling of elements within the component for you.

Components have the potential to change how you design in XD, and this is just the start – in the coming months you can expect us to add support for defining multiple component states and animating between states, to create robust reusable components with interactions, as well as explore ways to connect design components to their production equivalents.

Linking assets

The assets panel provides a way for you to manage the colors, characters styles and components used within your document. As part of a design system, you can now use the assets panel to curate the collection of reusable elements that you want to make available to other designers on your team.

To enable others to leverage the colors, character styles and components you’ve defined, simply invite them to the document using Share>Invite to Edit. Once they have access, they can link your cloud document to theirs – this will add the colors, character styles and components into their document so they can take advantage of the elements you’ve created and shared. When you make updates to the source document, they will be advised that updates are available and can choose to accept the updates in their document – helping ensure that everyone is using the latest assets.

Style guides

In addition to enabling other designers to link to your document so as to reuse colors, character styles and components, you may also need to share these with developers. By laying out the elements from the assets panel as a “sticker sheet” within your XD document, you can use Share>Share for Development to publish your design system on the web, from which others can reference color values, style attributes and download assets.

With the ability to create robust components, combine them with colors and character styles, then share with designers and developers, we believe you now have the foundation to create and manage design systems in XD. We’re continuing to work a number of refinements that will add more fine grained control over both sharing permissions and distribution of updates to design system elements.

More new features and improvements

Also in this month’s release we’re excited to introduce a number of new features and improvements, many of which have been added in direct response to feedback that you’ve shared with us.

Artboard guides

Guides can now be added to any artboard by dragging them out from either the top or left side of the artboard – this makes it easy to align elements and have consistent positioning of elements across artboards.

Keyboard and gamepad triggers

We’re always looking for ways to expand the devices and platforms you can create prototypes for in XD, so we’re excited to add support for keyboard and gamepad triggers. With this release you can assign keyboard triggers to simulate desktop-based experiences, as well as use connected XBox One and Playstation Dualshock controllers as inputs to simulate interaction for game console experiences.

Polygon tool

The new polygon tool makes it faster to create a multitude of shapes, including triangles, rhombus, pentagons and other polygons with up to 100 sides. When combined with auto-animate, the polygon tool makes it easy to morph between different shapes.

Uppercase, lowercase, title case, and strikethrough

Improvements to text formatting options include the addition of making text uppercase, lowercase or title case, as well as being able to define text strikethroughs. In a future update, we’ll also enable superscript and subscript text support.

Permissions and sharing

Finally, for those sharing prototypes and design specs securely to only invited people, it’s now possible for those with the link, but without permission to view, to request access from you. You can review each of the incoming requests and decide whether to grant access to your work.

More plugins to extend the power of XD

Momentum around XD’s plugin ecosystem continues to grow each month, with over 150 plugins now available. With an ever-increasing number of plugins, we’ve made some improvements to the plugin manager, so that you can see summary and detailed descriptions, as well as search for plugins based on keywords. Additionally, last month we announced the Adobe XD Plugin Accelerator, an intensive, ninety-day program that provides funding and resources to individuals with unique visions for the future of creativity.

Some new and noteworthy plugins worth calling out include UnDraw, which offers beautiful illustrations for your projects, Rotato, which presents your designs on the screens of devices in photorealistic 3D, and Maps Generator, which makes it quick and easy to insert maps into your designs. Learn more about available plugins.

UX community

We’d love to continue the dialogue! Help us shape the future of Adobe XD by submitting feature requests or file bugs. You can follow our handle @AdobeXD for updates or reach the team on Twitter using #AdobeXD. You can also talk to us using Facebook, where we share videos and updates as well as answer questions during live sessions.

#MadeWithAdobeXD

While sharing your prototypes on Behance, don’t forget to tag them with #MadeWithAdobeXD and select Adobe XD under “Tools Used” for the opportunity to be featured in the Adobe XD newsletter.