Faster Together: Opening Illustrator Files in Adobe XD
by Demian Borba
posted on 10-15-2018
Are you a designer working on very complex vectors such as detailed icons? Have you tried exploring multiple tools and approaches to find the highest precision? If yes, chances are you have decided to use Adobe Illustrator at one point for vector artwork creation. No other tool on the market today has the same level of complexity and precision regarding vectors.
Illustrator runs on Mac and Windows, and its first version was created by Adobe more than 30 years ago. Wow! 30 years! Some designers reading this post are younger than the application itself, which continues to evolve year after year. You can learn more about how Illustrator started by watching this fascinating documentary.
“I began using Illustrator for UX work back in 2007 or so,” said Matt Smith, a prominent UI/UX designer based in Athens, Georgia, who used Illustrator to create massive files with flows and wireframes. “I was getting exposed to agency-based Information Architects work and had years of experience with Adobe products. I wanted an easy way to get started designing low-fidelity wireframes, and Illustrator was the perfect tool.”
Some of many wireframes created by Matt in Illustrator.
Today, designers from all over the world use Illustrator for UI/UX work (although not so much for wireframes, thanks to Adobe XD‘s ability to speed up that process), and a great number use Illustrator for precise vector artwork creation such as icons that need to become good clean SVG code to be used in apps or websites.
Streamline Icons, the world’s largest icon library, in Illustrator.
Getting Your Illustrator Vectors into Adobe XD
Option 1: Copy and Paste
The first option that comes to mind when thinking about reusing content from Illustrator in other tools, like Adobe XD, is by copying and pasting. You can copy elements in Illustrator, and then the SVG is placed in memory for you to paste into your XD wireframe. There are a couple of limitations with this approach: if you use strokes with different settings that are not supported in SVGs, you won’t be able to copy and paste them in. There is also a file size limit to how much data can get added to the clipboard.
We plan to allow designers to copy elements in XD and paste them back into Illustrator as SVG in the near future. Right now, the XD vector gets pasted in Illustrator as a bitmap.
If you need to send vectors from XD to Illustrator, the recommended path is exporting the element(s) as an SVG from XD, and then bringing the SVG file into Illustrator.
Option 2: Creative Cloud Libraries
In Illustrator, you can add vectors to CC Libraries to later consume in XD. The benefit of using this workflow is that when you drag a CC Library element into XD, it gets added to the doc with a link to the Library. If you then go to the CC Libraries panel, you can right-click on the asset and choose Edit. This opens Illustrator where you can make changes and click Save; saving in Illustrator means the changes will be reflected in XD right away, because the link is maintained. As a side note, you can always break the link by clicking on the green link icon in XD.
Using CC Libraries to consume vectors created in Illustrator, maintaining the link.
Option 3: Open Ai files in XD (the recommended approach)
The third option, which we recommend for higher fidelity, is opening Illustrator files directly in XD.Yes! You can open .Ai files in Adobe XD.As a designer in XD, you can open Photoshop files, Sketch files, and now Illustrator files.
As you probably already know, we are building XD by really listening to our customers and their needs. This request has more than one thousand votes in UserVoice, and I’m thrilled to announce we’re finally shipping it. I’d like to use this opportunity to thank our amazing community for helping us improve XD by providing great constructive feedback.
To open single or multiple Ai file(s) in XD, you will have to do one of the following:
- Click File > Open. Navigate to the required folder, select a .Ai file, and open it in XD.
- Drag the Ai file over the XD icon (on Mac only).
- Right-click on the Ai file and select Open with > XD from the context menu.
- Use the Cmd+O (Mac) or Ctrl+O (Windows) keyboard shortcuts.
All symbols and artwork, simple or complex, are transferred as editable with 1:1 visual fidelity. Artboards are preserved, something that doesn’t happen when copying and pasting, and the entire layer structure with naming and order remains intact, so no more tedious work re-organizing content after transferring it to XD.
Note: When you open an Illustrator file in XD, not all elements are supported with complete fidelity. For a list of supported and unsupported elements, see Supported elements when you open Illustrator files in XD.
“If you’re already designing with Ai, the transition to XD is quite easy as a lot of the fundamental conventions are the same. Designers will find that the paired down, UI-focused toolset is much more appropriate for interactive projects. Plus with the extra features like built-in prototyping, repeat-grid, library assets, and more XD is a huge step forward for the Adobe family, ” said Matt.
If you’re thinking “Why do you need Illustrator if you can create vectors in XD directly?”, the simple answer is that Illustrator can help you anytime you need to create more complex vectors, the same way you can use Photoshop anytime you need to create more complex bitmaps. XD will never be Illustrator, just as XD will never be Photoshop. XD is a hub for UX designers to design, prototype, and share experiences, to learn and iterate.
Linked Symbols in XD and Illustrator
With the addition of Linked Symbols in XD, which allows you to have a single source of truth for each of your linked files, assets can now come from your Illustrator documents containing style guides (colors, text, etc.) or design systems (buttons, cards, etc.). To do so, open these Illustrator files in XD, add them to a new XD document, create symbols, and share the document location across teams. If people copy symbols from this main location, changes made to the master document will be reflected in all files that have the linked symbols pasted in them. As always, you can then create full XD prototypes and share the links with stakeholders for review, or even with developers that need the assets marked for export.
We’re continuing to improve the importer in XD to support as many Illustrator features as possible, so stay tuned for more details in the near future. What are you waiting for? Go open your Illustrator files in XD for maximum fidelity!
We’d love to continue the dialogue. You can 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 the #AdobeXD. You can also talk to us using Facebook, where we share videos and updates as well as answer questions during live sessions.
Topics: Creativity, Adobe MAX, Design
Products: Photoshop, Illustrator, Creative Cloud, XD