November 2019 Release of Adobe XD: Coediting, Document History, Component States, and More Unveiled at Adobe MAX
We love releasing new features and enhancements every month in Adobe XD, but Adobe MAX is undoubtedly our favorite time of year, as we unveil major new capabilities in our product. This year is no exception, with the MAX 2019 release of XD being one of our biggest releases ever!
This release introduces a ton of new features and improvements to help you and your team bring ideas to life faster and collaborate including real-time Coediting, states for components, support for hover interactions, a redesigned Plugin Manager, and much more. And, as always, we’re committed to delivering each new feature with the same level of ease-of-use, performance, and quality that you’ve come to expect from XD, so you and your design team can rely on XD to power your design workflow.
Alongside this host of major new features, we’ve also enhanced a number of other areas of XD based on feedback from designers using XD, like you. We love to receive your feature requests on UserVoice and engage in discussions regarding the future of XD on Twitter, Facebook and our Community Forums.
Let’s dive into everything that’s new in the latest release!
The power of collaboration in XD
Design is an inherently collaborative process. It involves deeply understanding problems and crafting solutions based on data, empathy, research, and a constant dialogue with users, teammates, and stakeholders. In the MAX 2019 release of XD, we’re taking a massive step forward in enabling collaboration with XD.
Coediting (Beta)
Coediting, available today in beta, lets you and other designers work together in XD in real time. Coediting operates seamlessly in the background of XD, allowing multiple designers to design and iterate in the same cloud document at the same time, while benefiting from the performance and quality of our native application. With Coediting, you and your teammates can design together in a centralized source of truth without worrying about duplicating work or maintaining redundant documents. Coediting removes unnecessary friction so you and your team can do you best work.
Coediting is opt-in and can be enabled on cloud documents in XD. When Coediting is enabled on a document, you can invite other teammates to edit the document with you. You’ll see when other designers are active in a document and which artboards and objects they’re currently editing.
Coediting will completely change how teams work together and unlock new workflows in XD, which means we have a lot to learn! We’re making Coediting available today in beta so you can try it for yourself and help us understand how we can make Coediting even better, based on feedback from our community. During the beta we encourage you try, use, and provide feedback on coediting, but note that there may be quality and performance issues while we continue to ready the feature for general availability.
Document history
As you work, cloud documents automatically save your work as you go. With this release, you can see a document’s history and how your work has evolved over time. Document history lets you open previous versions of a document so you can copy elements to the current document or save out a previous version and pick up your work from there. Your document’s history is available for up to 30 days automatically and you can bookmark specific versions to retain those milestones indefinitely. You can also name versions to keep track of important milestones throughout a design project.
To access your document’s history, just click on the dropdown icon next to your cloud document’s name at the top of your screen.
Share mode
An important part of the design process is sharing work with other teams and stakeholders to get feedback and delivering developer-ready assets so designs can be built into working products. Sharing has always been an important part of XD, so we’ve combined several different sharing capabilities into one location in the brand-new Share mode, alongside our Design and Prototype modes.
Share mode is the place to go when you need to share your work with others. Here, you can create and manage shareable web links to your work, using new sharing presets to customize the sharing experience for different use cases, including design reviews, development hand-off, presentations, and user testing. You’ll see exactly which artboards will be included in a shared artifact and can give each link a unique name so it’s easy to keep track of what you’ve shared. You can also manage access permissions to your shared links and add password protection — all in one place. You can expect to see further enhancements to Share mode in future releases that make it even easier to share different prototype flows or different sets of artboards.
All of these new capabilities, including Coediting, are available in all plan levels for Adobe XD. Users on our paid plans can enjoy unlimited access to these capabilities and — until April 2020 — we’re also including unlimited access to all sharing and collaboration features in our free XD Starter plan.
We can’t wait to see how these capabilities unlock new ways of working in XD for you and your team!
Deepening interaction and prototyping capabilities
From the very beginning, we built XD to be an all-in-one platform for both designing and prototyping user experiences. Our goal was to help design teams focus on creating and delivering incredible experiences, instead of having to worry about keeping design files in sync across multiple design tools. In addition to several updates we’ve made to our design functionality throughout the year, we’re excited to share a major update to our interaction and prototyping capabilities.
Component states
Components in XD help designers create consistency throughout a design project while allowing designers to avoid having to recreate the same user interface elements over and over in a document. For those creating and managing a design system in XD, the ability to link components to a centralized source enables you and your team to reuse elements across multiple projects in a team or organization. But experiences today are so much more than just visual elements – they are dynamic and adaptive based on different interactions.
That’s why, with this release of XD, we’re making components even more powerful with the addition of component states. Now, each component can support multiple variations of a single user interface element representing different types of user interactions, like when a tab is active or when a user taps on a button. Component states mean you won’t have to create multiple components for these different scenarios; instead, you can focus on your experiences and easily organizing and managing components across documents.
Creating component states is easy. With a component selected, you’ll see a new section in the Property Inspector on the right side of your screen where you can create and manage different states for the selected component. When a specific state is selected, you can change properties like the component’s fill color or character styles, just like editing a normal component.
You can also work with component states in Prototype mode, making it possible to create interactive user interfaces, as well as implement microinteractions as part of your prototype’s experience. If a selected component has any states, you’ll see the different states as destinations for a prototyping action. For example, you can define a hover state for a button component in Design mode, and then set the hover state as a destination for a prototyping interaction in Prototype mode.
To help you get a better understanding of how component states work in Adobe XD, we partnered with Danksy to create the XD Fresh UI Kit. In the kit, you’ll find a fictional app that simulates the experience of buying fruits and vegetables online. The kit uses component states to switch on and off a variety of ‘ordering’ elements, such as checkboxes, switches, and buttons, without the need for additional artboards.
Hover trigger
One of the most common use cases for component states is to create hover states for your components. For some, hover support has been a long time coming to XD, but we wanted to hold back delivering on this until we could combine it with the power of component states to make it as useful as possible for design teams. As the name implies, the hover trigger is invoked whenever a user ‘hovers’ a cursor over an element, such as hovering over a button in a desktop application.
As part of defining states for your components (as described above), you can choose to define a hover state, which will automatically wire up the necessary interactions to respond to a user hovering their cursor over the component. You can also choose to manually apply the hover trigger to any element in prototype mode using the trigger dropdown in the Property Inspector. Hover joins a growing list of triggers supported in XD including tap, drag, voice commands, keyboard input, and gamepad input.
Support for multiple interactions
As we support more and more user inputs in XD, interaction designers can prototype fully interactive experiences without having to write any code. Oftentimes, prototype interactions will vary based on a user’s input, such as having one action when a user taps on an object and another when a user drags on an object. Until now, this required duplicating artboards to wire up different prototyping flows — but not any more!
Now, you can define multiple interactions on a single object without any of the unnecessary work. When prototyping in XD, simply drag out multiple wires from a single object to define all the different interaction scenarios. You can define different interactions based on different triggers to handle more complex interactions, such as responding to a range of different voice commands or a series of different key commands. You can also use multiple interactions with component states to transition component states in addition to artboards. XD will automatically know when you’ve already defined an interaction for a particular trigger, so you won’t have to worry about conflicting interactions as you work.
We can’t wait to see what you create with this powerful combination of components and component states, the new hover trigger, and support for multiple interactions!
Extensibility and compatibility with other tools
One of the main reasons design teams choose XD is for our open platform and interoperability with other tools — both the tools and services in Creative Cloud, as well as third-party tools and platforms. As part of this release, we’re also introducing updates and improvements to how XD works with other tools and allows developers to build on top of XD’s core capabilities.
Enhanced Creative Cloud Libraries integration
Creative Cloud Libraries let you share logos, colors, and more across different Creative Cloud applications. With our existing support for Creative Cloud Libraries, you can consume assets that have been created in other Creative Cloud applications, such as Photoshop and Illustrator, within XD. Based on your feedback, we’re expanding our support for Creative Cloud Libraries to allow you to create and manage libraries from within XD and enable you to add assets and components from XD to your libraries and use them in other Creative Cloud applications. For the first time, this makes it possible to share brand, marketing, and design system assets across your entire organization, all within a centralized creative system.
Improved Sketch import and compatibility
We know that a lot of design teams use a variety of tools throughout their processes and that, to fully adopt XD, it’s important that you can bring existing assets across them. While we’ve had support for importing design files from Sketch for some time now (and have continuously improved the fidelity of the import based on your feedback), this release adds the ability to convert existing Sketch Libraries into cloud documents in XD so you can use Sketch Libraries assets as part of your design system in XD. XD will automatically link all the assets and components in your converted library to a source cloud document so you can use them right within XD. You can also make changes to the source cloud document and populate those changes in your designs with linked assets.
Redesigned Plugin Manager
At MAX 2018, we opened the Adobe XD platform to enable technical designers and developers to extend the power of XD with plugins. Today, there are more than 200 different plugins available for XD, including Jira Cloud, zeroheight, UI Faces, Stark, Arranger, and dozens of others, that help automate routine design tasks, connect XD to other tools, and extend XD into new use cases. Our developer community is constantly introducing new plugins and improving existing ones to take advantage of new features in XD.
As our ecosystem continues to grow, we want to make it as easy as possible for you to find the right plugins for your unique workflow. That’s why we’re excited to introduce a completely revamped Plugin Manager in this release. The redesigned Plugin Manager lets you discover recommended plugins, browse curated collections, explore different plugin categories, and see more information about a plugin’s capabilities, including ratings from other designers, before you install them into XD. You can also contact a plugin developer to get support or provide feedback and copy links to share plugins with other members of your team.
In addition to the redesigned Plugin Manager, we’re continuing to expand the range of APIs available to developers. With this release, we’re introducing a new set of XD Cloud Content APIs that allow you to bring information about XD documents into other applications. We use these APIs to power several of our integrations like Jira, Slack, and Microsoft Teams. You can read more about these new APIs above and start building on our developer site.
In the same way design is never done, we’ll continue to evolve XD as the needs of designers grow and change. You can access all of the amazing new features by downloading the latest version of XD or updating XD using the Creative Cloud application.
Stay tuned for more updates from XD and as always, please share your thoughts and feedback with our team!
Get involved in our community
We’d love to continue the dialogue! Help us shape the future of Adobe XD by submitting feature requests on our UserVoice. 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.
Share your work with #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 on our website, in the Adobe XD newsletter, and on social media.
