Wireframe to Design Workflow (While Using Design Systems)

Question

I'm curious what workflows people are using to go from wireframes to more completely designed prototypes in XD. I want to take a fully functional wireframe to a real design as efficiently as possible. Does anyone start a design system at the wireframes stage? What's the best way to turn your wireframes (after the functionality has been tested) to fully designed pages? What tips are there for replacing wireframed elements/components with fully designed ones?

I know you could design all this in XD, but what if you want to design wireframes in Photoshop or Illustrator first and bring it over. Can I use Creative Cloud libraries in this process?

Or what if I want to make wireframes in XD, but do my full designs in Photoshop, then bring back to XD?

Any workflows, tips, videos, or resources that address this? Thanks in advance!

AkinGn · Answer

Hi @Prof Josh, whenever I need to edit an image in XD, I usually use right click > edit in Photoshop, and once I finish, I just save the image and close, and it's updated in XD, that's the most frequent PS-XD integration feature I use. For lo-fi/mid-fi wireframes to hi-fi designs, that depends on the preference, some people do all steps in XD and partially add polished parts in PS, some prefer more parts to be in PS. (I'd suggest Wireframer, Whiteboard plugins in XD btw for wireframing etc purposes) I think libraries are usable throughout the applications. There's a great video about PS-XD integration actually: https://www.youtube.com/watch?v=M3djHzuPRxA Hope this helps!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded