Designing for creative systems
An inside look at bringing Creative Cloud Libraries to Adobe XD.
With remote work and distributed collaboration, it’s harder than ever for creative teams to stay in sync. While many UX tools have pioneered consistency with design systems, their solutions have been limited to designers in a single application. Creative teams need a broader solution that’s just as multi-disciplinary as they are.
Teams need a creative system — a central platform where all disciplines can bring together creative elements, add guidelines, and stay up-to-date.
As a Senior Designer on the Creative Cloud Services team, I spearheaded the effort to reinvent Creative Cloud Libraries as Adobe’s platform for creative systems. In this article, I’ll deep dive into how we combined the power of XD Design Systems and Libraries into one, unified platform.
Creative Cloud Libraries, reinvented
In the latest release of Adobe XD, you can now publish Creative Cloud Libraries directly from your XD cloud documents. When a library is published, it will stay connected 1:1 with the original document. Teammates can use the library in Photoshop, Illustrator, or any other Adobe tool while UX designers can continue pushing updates from XD. 🎉
Sharing a library
From the new Libraries panel (⇧⌘Y), you can collect colors, character styles, and components from your canvas in Document Assets.
Once you’re ready to share, click the Share icon in the top right of the panel to open the Library Manager. In the manager, click the blue Publish button to publish your Document Assets as a library. Now you’re ready to share with your team.
Pro tip — Be sure to give the editors of your document access to edit the library!
Updating library elements
With the new publish model, you’re in control of updates. You can continue to make changes in your XD document, and publish them once you’re ready.
XD will message you once you have updates available to share. You can choose to publish instantly from this message or publish later from the Library Manager.
Using libraries in your work
In the root level of the Libraries panel, you can switch between Document Assets and Libraries. To keep your workspace focused, you can control which libraries are visible in XD using the Library Manager.
To open the manager, click the Plus icon in the top right. You can now switch libraries on and off. Your preferences will stay the same across documents.
Each time you use a library element, it will be added automatically to your Document Assets as linked from the library. The library will always display the most up-to-date version of the element, while Document Assets will display the version you are currently using in your document.
When updates are available, the Link icon in Document Assets will turn blue. Hover the icon to preview the changes on canvas, then click the icon to accept those changes.
Where we started — A recap
At the onset of this project, XD Design Systems and Creative Cloud Libraries were two separate solutions for creative consistency. Each solution had their own panel in Adobe XD.
XD Design Systems
Teams shared elements by linking one XD cloud document to another. The main version of a component lived in the original document. To update an element, the designer returned to the original document to edit the main version. Because XD Design Systems relied on XD cloud documents, they were limited to four element types and could not be used in other applications.
Creative Cloud Libraries
Libraries were independent of any one app or file format. Teams could contribute and use a wide range of elements from any Adobe tool. The main version of the element lived directly in the library. To make updates, people edited individual elements in isolation — either from a property window or within a temporary file.
Since Libraries were already integrated in rest of the Creative Cloud ecosystem, it was the natural base for us to build the creative systems platform. To incorporate XD Design Systems with Libraries, we asked ourselves:
How could we evolve Libraries to support the unique needs of UX designers without disrupting the value for other creative disciplines?
Finding the gaps
To start, we reviewed XD Design Systems to identify areas of strength and opportunities for improvement. We determined three core challenges that Libraries needed to address in order for creative systems to support UX designers.
Maintain context
Teams typically laid out their components in a series of artboards with usage descriptions. By building their system in a single document, designers were able to link components with style properties and easily make bulk changes. Since Libraries were independent from a document, they didn’t support this crucial workflow.
The challenge — UX designers needed a way to share their system across Adobe apps while still maintaining the original document as the source to document and edit.
Give control
To collaborate at scale, designers needed the power to decide who could edit the system and when to share updates. XD cloud documents did not offer this level of control. When sharing a document, the only available option was edit permission. In addition, all changes to styles and components were live. As soon as the document was auto-saved, updates were automatically pushed to linked documents.
The challenge — To safely iterate and share, designers needed control over sharing and updates.
Enable efficiency
To use XD Design Systems, designers had to manually link their documents to the Asset panel each time they created a new document. When a document was linked, all of its styles and components were added to Document Assets. The Asset panel inevitably became flooded with dozens of irrelevant elements, making it difficult to navigate and browse.
The challenge — Designers needed a focused workspace that let them quickly get to the elements they needed.
Defining the ‘source of truth’
Our first design task was aligning on ‘the source of truth.’ The source of truth is the single place where the main version of an element is defined and maintained. As described earlier, the source of truth for an XD design system was the original document. In contrast, the source of truth for a library was the library itself. We explored four possible models.
Direction 1 — Library as the source of truth
Our first exploration was a slight adjustment to the existing Libraries model. While the library would remain the source of truth, it would now keep track of where elements came from. This would give people the option to edit elements in their original documents.
Evaluation: While this solution was the simplest change, the option of where to edit provided many opportunities for collaborators to make mistakes.
- ✖ Easy to get out of sync — Although design teams would plan to maintain elements in their original document, nothing would prevent collaborators from accidentally editing an element directly from the library. In this scenario, the library would automatically reflect the updated version but the original document would not. It would become difficult to keep track of whether the version in the library or the version in the document was meant to be the ‘correct’ one.
- ✖ Can’t keep style properties linked — In XD, the document keeps track of whether components are built with other components or styles. Library elements on their own are not aware of these connections. If a designer edited an element outside of the document, these connections would be lost. Any cascading styles set up in the original XD document would be broken.
Direction 2 — Document as the source of truth
Next, we considered an option where the original document was the source of truth. Each time you added an element to a library, it was linked from its original source. All changes had to be made in the source document, and elements could no longer be edited in isolation.
Evaluation — While this would have worked for people creating design systems, this option did not support creatives more broadly.
- ✖ Source document not always relevant—In many creative workflows, the original source document simply isn’t relevant. It doesn’t contain any important information or functionality that you want to carry forward. It makes more sense to add the element directly to the library as a self-contained asset.
- ✖ Permission conflicts — In the original permission structure, edit access to the library included all of its elements. In this new model, it was likely that collaborators would have edit access to the library but not to every source document. As a result, collaborators would be able to modify some portions of the library but not others. This would be more complex for teams to manage.
- ✖ Document Assets only in XD — The majority of Creative Cloud apps did not have the concept of Document Assets. Their documents did not contain discrete main elements that we could link to libraries.
Direction 3 — The choice to link
After exploring Direction 2, it was clear that we still needed to allow people to add elements directly to libraries. In Direction 3, we gave people the choice upfront to add elements as self-contained or linked elements.
Evaluation — We rejected this option for similar reasons as Direction 2.
- ✖ Permission conflicts — Collaborators would likely end up with editing access to some parts of the library but not others. This added unnecessary complexity to the existing permission structure.
- ✖ Document Assets only in XD — XD was the only app capable of supporting linked elements. We believed that this would be confusing for teammates trying to edit libraries in other Adobe tools.
Final direction — Library connected 1:1 with document
In our final exploration, we allowed people to create libraries in two different ways. People could continue to create self-contained libraries in the traditional way, or they could choose to publish a library directly from an XD cloud document. In this second option, the library would be linked 1:1 with the document as a whole. People would have to return to the original document to edit the elements.
Evaluation — This conservative approach scaled for both UX designers and the rest of the Creative Cloud ecosystem.
- ✔ Flexible options — By publishing libraries from XD, designers could use their original document as the source of truth. At the same time, creatives in other apps could continue to make self-contained libraries. No workflow was interrupted.
- ✔ Simple permissions — By tying a library to a single document, editing and permissions were clear. There would only be one source for editing main elements.
- ✔ Gated updates — Because the source document and the published library were two different entities, changes to elements would no longer be live. Designers could use the document as place to draft changes and choose to push those updates to the library when ready
Future evolution
Connecting one document to one library is the first step in setting up the platform for creative systems. In the future, we would like to revisit how teams might intuitively link elements to a library from multiple documents.
Creating a unified panel
Now that ‘source of truth’ model was established, we needed to resolve the existing two panels. A new, unified panel had to allow people to use libraries and publish the assets from their document. We explored four different UI patterns to merge these workflows.
Direction 1 — All In-line
First, we explored an option with one view of the panel. Document Assets and libraries were shown on top of each other in a single, collapsible tree of assets. This was the UI solution found in competitor apps like Figma.
Evaluation — While this option did offer great for searching across all sources, it was experientially quite complex.
- ✖ Mixed permissions— For each library in the tree, a user might have edit or view access. In some portions of the tree, people would be able to add, reorder, and organize elements. In others, actions would be locked. These differences were confusing when all elements were in-line.
- ✖ Multiple versions of elements — In XD, every library element that you use is automatically added as a linked element in Document Assets. This lets you gate updates to your document. When all elements were in-line, people would see the same element twice — once in the library and once Document Assets. They would even see two different versions if the document had not accepted updates from the library.
- ✖ Overwhelming to navigate — When all of the elements you might need are loaded into a single tree, the panel becomes cumbersome and overwhelming to browse. We had already identified this as a weakness with XD’s existing panel design.
Direction 2 — Tabs
For our second exploration, we divided the panel into two separate tabs for Document Assets and Libraries.
Evaluation — While this design allowed people to easily switch between Document Assets and Libraries, it did not fit the overall strategy and UI philosophy.
- ✖ Wrong paradigm — In essence, Document Assets are a library that designers can choose to keep private to the document or share for broader use. Showing Document Assets and Libraries as distinct and separate tabs did not communicate this view.
- ✖ Legacy UI — In newer Adobe applications like XD, our designers are consciously trying keep the UI framework more streamlined than our denser flagship programs. Tabbed panels are a pattern we are generally trying to avoid in our modern apps.
Direction 3— Top scroll
Next, we returned to a single panel, but added a list to switch between sources. The source selected on top controlled the elements displayed below. This was the UI solution found in competitor apps like Sketch and Invision Studio.
Evaluation — This solution supported the correct paradigm and allowed users easily switch between sources in a single click, but it wasn’t scalable for many libraries.
- ✔ Right paradigm — Document Assets and libraries were represented together as part of the same system.
- ✔ One source at a time — Unlike Direction 1, people would only see elements from one source at a time. We would avoid the confusion of mixed permissions and multiple versions of an element.
- ✖ Not scalable — If someone had more than a couple libraries, switching sources became more difficult. People had to scroll long lists back and forth in a small space.
Final Direction — Drill in, drill out
In our final exploration, people could drill in and out of a root level listing Document Assets and libraries. This was the direction that we ultimately pursued.
Evaluation — This solution had many of the same benefits as Direction 3, but was also scalable for more libraries.
- ✔ Right paradigm — Like Direction 3, Document Assets and libraries were displayed as one cohesive system.
- ✔ One source at a time — By drilling in and out, people would see elements from one source at a time. They could easily switch between sources with straightforward organization and permissions.
- ✔ Scalable — Unlike the top scroll, the root level was scalable for listing more than 3 or 4 libraries. When people turned libraries on and off in the Library Manager, the effect was obvious in the root level.
Looking ahead
By unifying Xd Design Systems with Libraries, Adobe is laying the foundation for a creative systems solution that empowers all creative disciplines to work together — But this is just the beginning!
In the coming year, we’ll be improving the organization of elements, allowing people to add guidelines, and strengthening our integrations in Adobe’s 3D and video tools.
