By Matt Rae
Thanks to integrations with Creative Cloud, Adobe XD together with Adobe Illustrator, offer powerful workflows for integrating vector elements like logos and icons into your experience design project.
Here I have an Illustrator file that I'd like to work with in Adobe XD. Opening an Illustrator file and converting the content to editable XD content is as simple as selecting "Open with XD, Ior dragging the illustrator file over top of the XD icon on a Mac. Alternatively, Illustrator files can be converted from the File menu by selecting Open from Your Computer and searching for the file on your local machine. The imported vector content will open in a new window in Adobe XD, allowing me to interact with the path, shapes, and groups just as I would any other XD content.
With the file converted I'd like to copy some of the elements into a mobile design project I've been working on. This can be done with a simple copy and paste of tthe element onto the selected target artboard. The element can then be resized to fit the layout just right. Making these elements reusable is also a breeze with components in XD. With the elements selected, typing CMD-K on a Mac or CTRL-K on Windows will convert this group to a component. I can now reuse this object throughout my design and override elements or instances as desired. Now, I'd like to add in a logo to the Home screen of this app. But again, it's in an Illustrator file. I could open the file in the same way as I did before, but there's actually an easier way. Since I know this file has just the logo, I'll use the import option in the File menu to bring it in as its own artboard in my working file. From here I can then select the element and drag it into place on the home screen. I can take this even a step further. I currently have a file from the Streamline icon pack open in illustrator.
Rather than saving this file and opening it in Adobe XD, I can simply select the icons I wish to use here in Illustrator, copy them to my clipboard, and then back here in XD, paste them into my working design. Once pasted, the paths and the shapes can be edited, resized, and turned into components for use across the design, mvaking it really easy for me to pull in vector assets like icons and illustrations directly into my design in Adobe XD. II can also use this copy and paste workflow from Adobe XD to Illustrator for access to more advanced vector editing tools. I can select this element and copy it to the clipboard in XD.
Switching to Illustrator, I can paste that item onto the design canvas and make edits accordingly. When I'm happy with the edits, the element can be copied from Illustrator and pasted back into the artboard with the new edits made in Illustrator. If you work in a team and have dedicated groups of designers working on brand, graphic, and illustration elements within Adobe Illustrator, and you want to keep everyone in sync as changes happen, these elements can be shared within a Creative Cloud Library.
To add an element to the CC Library in Illustrator, I'll start by enabling the Libraries panel. With the object I want to add selected, clicking on the + on the library's window will allow me to add it as a graphic. Switching back to Adobe XD, this asset can be added onto my artboard by clicking and dragging from the CC Library. As edits are made in Illustrator, the assets update live in Adobe XD, making staying in sync easier than ever, At any time, I can right-click on the asset in the CC Library and select "Edit" to edit the graphic in Illustrator and sync those changes back to the design in Adobe XD.
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.
For higher fidelity, open AI files directly in XD. Click File > Open and navigate to the AI file you created in Adobe Illustrator or use keyboard shortcuts to open the vector artwork. All symbols and artwork from the Illustrator file are transferred as editable content into XD with 1:1 visual fidelity. All of your artboards are preserved. The AI file's layer structure, layer names, and layer order remain intact and are ready to be updated further or incorporated into your XD designs and prototypes.
