Wireframe to Design Workflow (While Using Design Systems)

[Prof Josh]

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]

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!

[Ares Hovhannesyan]

In adding to @AkinGn answer I want to add that it depend on the tack that you need to have accomplish. Designers are free in actions or they need to follow guideline that customers required from them.  If you have a time please review Jesse James Garrett: The Elements of User Experience (jjg.net) 

This can help you to plane your work in right direction. 

[Josh Polk @ IUPUI]

Thanks for the feedback! I need to improve my plug-in usage so this is very good. I have drawn wireframes manually using vector shapes in XD, and now tried with Wireframer. Unfortunately, what I can't seem to do with those vector-based objects is right click and open them in Photoshop to replace out the art that way, or do the replace image option. 

The only way I can think of to do what I want to do is instead of using XD vectors shapes I can create wireframe elements or maybe even CC library graphics in Photoshop first.  Then import and use/reuse them to create a wireframe in XD. Then that Edit in Photoshop/replace ability would work when it is time to design it out fully because they are raster graphics and can be swapped. 

Let me know if I'm missing anything. 

[AkinGn]

Hmmm right click > edit in Photoshop is one of my favorite XD features, thinking how I'd easily place images to my wireframe, I'd just draw boxes to use as a mask for an image and drag the images on them to easily mask them. Oh and for fancy PS-only elements, using libraries makes sense yes, good thinking 🙂