By Matte Rae
T
hanks to integrations with Adobe’s Creative Cloud, Adobe XD integrates with other applications like Photoshop and Illustrator. These integrations enable super-powered workflows for editing imagery and working with advanced vector editing tools. In this guide, I’ll walk you through how to use these integrations to build powerful vector workflows between Adobe XD and Adobe Illustrator.
Opening Illustrator files in Adobe XD
Working across teams, it's not uncommon to have design assets in various formats or file types. Thankfully, working with designs and assets created in illustrator won’t break your workflow, as it's simple to open these files and convert them into XD content.
To open an illustrator file in Adobe XD, simply right click the file and choose “Open with..” and select “Adobe XD” from the list of available applications. XD will open and load the Illustrator content into a new XD file, creating all the artboards, paths and layers.
Alternatively, if Adobe XD is already open, you can open illustrator files from the File menu and select Open from Computer.. and browse to the desired file on your local machine.
Once the content is loaded in Adobe XD, paths, shapes and layers can be interacted with like any other XD elements. Artboards can be connected together in prototyping mode to bring static designs to life with Auto-Animate and Voice, while lists can be made interactive with Scroll Groups.
Saving this newly created document will save it as a .xd file, either locally or in the Creative Cloud, allowing it to be opened and edited in the future without modifying the original Illustrator file.
Import Illustrator artboards
If you’re already working in an Adobe XD file and want to import an illustrator file into your working document, the process is even easier. With XD open, navigate to “File > Import…”. A file browser will appear, allowing you to search and select the desired import file.
Adobe XD will then perform the same import process as done when opening an illustrator file, but rather than opening in a new window, will import the artboard(s) into the existing working document. Elements can then be selected and dragged into place on the design.
Importing works great when working with Illustrator files containing only a couple of artboards, for content like illustrations, logos or other graphics. Once artboards are imported to XD, these elements can easily be converted into components to be reuse throughout the design.
Copy between applications
If you’re working with an already opened illustrator file, perhaps a source file for icons or other graphics, saving the file and importing it into XD may not make sense. Instead, assets can be copied into XD from the open illustrator file, simplifying the process of importing the precise graphics needed in the XD project.
With the desired element or elements selected in Illustrator, use CMD + C or right click > copy to add the elements to the clipboard.
Returning to the document in Adobe XD, CMD + V (CTRL + V on Windows) or right clicking the artboard and selecting “Paste” will paste the elements onto the canvas to be repositioned as desired.
When pasting content into Adobe XD, if no artboard is selected, elements will be pasted into the centre of the viewport. If an artboard is selected, elements will be pasted to the centre of that artboard, unless the artboard is not completely within the current viewport, in that case, XD will paste the elements as close-to-artboard-centre as possible.
Vector elements can be copied and pasted back and forth between XD and Illustrator meaning edits and adjustments can be made in Illustrator and ported back to XD with a couple of actions.
Working with CC Libraries
If you find yourself copying and pasting assets between illustrator and XD often, incorporating a Creative Cloud library into your workflow will make this process even smoother. CC Libraries are a great way to share assets between the applications you use most within the Creative Cloud suite.
With the Libraries window open in Illustrator, adding icons and graphics to a library is as simple as clicking the “+” at the bottom with the element selected. Once added, these graphics can be accessed from Adobe XD and dragged onto the canvas for use in design projects.
At any time right clicking the graphic and selecting “Edit’ will open it up in illustrator to be edited. Once saved, changes made will be distributed through the cloud and will automatically appear on the linked asset in Adobe XD, eliminating the pasting and re-positioning of the copy and paste workflow.
Whether you’re working with logo assets and icons or intricate vector illustrations, integrations between Adobe illustrator and Adobe XD unlock powerful workflows for editing and managing vector assets throughout the design process.
