Skip to content

Design in Sketch, prototype in Adobe XD


Read on if a) you are in the somewhat privileged situation of having a Sketch license and b) a Adobe CC membership. And c) you don’t feel like paying a cent more for d) InVision or Marvel or other prototype app.

Yup that’s right. A colleague of mine shared this brilliant “hack” with me and I was like “why haven’t I thought ? about this before — it’s bloody brilliant ???

The workflow goes like this

  1. Design in Sketch
  2. Export each artboard as a .PNG — Depending on your output from Sketch use @1x or @2x
  3. XD: Create first one artboard in correct dimensions, then copy paste as many times as you have exported Sketch artboards
  4. Paste one PNG/artboard per canvas
  5. Go into Prototype mode (Ctrl + Tab)
  6. Prototype like a PRO ?
  7. Upload to Adobe Cloud from XD
  8. Share the link to your client — they can even comment on your designs
  9. Rock on ?

Tutorial

Pros

  • XD is super super fast (and a native app)
  • You can work offline up until you need to share your prototypes
  • Work on Mac or Windows with your prototype. Or both!
  • Using Invision/Craft tends to clutter your Sketch design files — not anymore!
  • Save time by choosing “Previous Artboard” in the XD prototype mode if you have a “home” or “back” button
  • Clients can comment on your designs and all of the comments turn up in your Creative Cloud app on your desktop — smooth as butter

Cons

  • Updating your screens takes a few more seconds than other solutions

Designforventures.co is Juan Fernando Maguid trying to make his fellow design friends makers lives a bit easier. Check out his tools here.

Leave a Reply

Your email address will not be published. Required fields are marked *