Published on | Prototyping: From UX to Front End — Medium Sympli

Designers have been able to export screens from Sketch and Photoshop to Sympli for a while, but we’re happy to announce that you can now export screens from Adobe XD CC too. Adobe XD is Adobe’s new(ish) flagship application for designing user interfaces, which not only serves as a smashing alternative to Sketch on macOS, but it also works for Windows where Sketch doesn’t. Designers using Windows no longer have to rely on Photoshop for UI design.

For the last few months, the Sympli team has been working closely with the Adobe XD team to integrate Sympli with Adobe XD directly, allowing you to export your screens to Sympli for collaboration, annotation, handoff and streamlining your digital product development process.

Let’s take a super-quick look at how exporting screens from Adobe XD actually works.

Download the Sympli for Adobe XD CC App

Firstly, you’ll need to download and then open the Sympli for Adobe XD CC App. You’ll also need to have Adobe XD open, and of course some Artboards ready to be synced into Sympli. Make sure you’ve logged into the Sympli for Adobe XD CC app with your Sympli credentials.

If you already have Adobe XD and the Sympli for Adobe XD CC app installed, you can also access Sympli directly from Adobe XD under File>Export>Sympli, or by hitting alt+cmd+E.

Marking Assets for Export

In Adobe XD, you’ll need to mark the assets you’d like to be exported as available for batch export. To do this, click the “Export” icon next to each asset that you’d like to export to Sympli.

Syncing Artboards to Sympli

Now you’re ready to sync the artboards to Sympli.

To do this, select the Artboards that you’d like to upload to Sympli and click the “Resync” button on the Sympli for Adobe XD CC app, then “Upload artboard to Sympli”.

Either choose from the list of existing Sympli Projects, or click “Create New Project”.

If creating a “New Project”, define the Project Name, Platform, Resolution, and whether or not this is a Personal Project or a Company Project. If you’re using Artboard templates bundled with XD, select @1x or mdpi as the resolution. If you’re using a different size for your Artboards, check out our article on how to choose the correct resolution.

Click “Create” when you’re done, and that’s really all there is to it. If you’ve switched from Sketch to Adobe XD, then you’ll find the entire workflow blissfully familiar.

Adobe was running a surprisingly stable beta of Adobe XD CC all the way up until the end of last year (2017), so it’s been quite easy to forget that it’s been totally free up until now. If you haven’t tried Adobe XD before, you can still download and use a free trial for 7 days.

Like what you read? Use the 👏 button below to spread it around even more. Follow us on Twitter and Facebook to get more tips and tricks for mobile and web app UX/UI and development.

And, check out the Sympli platform to help you speed the digital product development process with design versioning; asset, style, positioning handoff; Sketch, Photoshop, Adobe XD CC, Xcode & Android Studio integration; and much more.

How to export Adobe XD CC screens to Sympli was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to export Adobe XD CC screens to Sympli

Cool stuff, every week

More Articles