Top 5 ways to use Photoshop assets in XD

[Preran]

If you use Photoshop for UX design, moving your artboards and assets into XD to create prototypes is the smartest move you will ever make.  

After your artboards and assets are in XD, you can use them to create hi-fidelity prototypes using features such as overlays, animations, mouse-overs, and voice commands. After you are done, you can share your prototypes with colleagues, developers, and stakeholders for peer review, development, and feedback. 

1. Open PSD files in XD 

Opening PSD files directly in XD using File > Open helps you quickly start creating prototypes using artboards and assets you have created in Photoshop.  

When you open a PSD file in XD: 

• Artboards in the PSD file are imported as native XD artboards. 
• Layers in the PSD file are converted to layers in XD and retain their nomenclature.  
• All objects in the file remain editable. For known limitations, see Work with Design Assets from Photoshop

2. Copy or Import SVG files from Photoshop into XD 

Similar to PSD files, SVG files retain their structure after you import them into XD. To edit individual objects, ensure that you first ungroup them. Use the Layers panel in XD to identify and edit objects. 

To use SVG files from Photoshop in XD: 

1. In Photoshop, select File > Export As and in the Export panel, choose SVG.
2. In XD, use File > Import to import the SVG file into XD. 
3. Right-click the vector layer that you want to copy and select Copy SVG. Paste the object into XD. The copied object remains editable. 

3. Copy-paste objects from Photoshop into XD 

Copyng objects from Photoshop into XD is the quickest route to get rasterized objects such as icons, buttons, and graphics into XD. 

In Photoshop, select the objects that you want to copy using the Marquee tool, and select Edit > Copy Merged.  

 When you copy paste objects from Photoshop to XD: 

• Objects are rasterized before they are copied. Put simply, the layers are flattened before they are copied in XD.  

• The resolution of the objects is maintained after import. However, you lose the ability to edit individual objects in XD. 

4. Import Photoshop files from Creative Cloud libraries  

Uploading assets to CC libraries allows you to organize assets and access your files across all CC applications that support CC libraries. Any edits you make to the linked file in Photoshop is reflected almost instantaneously in XD. 

1. Combine all associated layers into a group, and add the group to Creative Cloud libraries by dragging the group into the Libraries panel. Alternatively, drag individual layers into the CC libraries panel 
2. In Adobe XD, select File > Open CC Libraries, select the library you uploaded to which you uploaded your assets and drag uploaded assets into your XD project. 

When you open Photoshop files from Creative Cloud Libraries: 

• Assets from CC libraries are copied as rasterized (flat) files and are by default linked to the source file.  
• To edit the asset in Photoshop and have the changes reflected in XD, select the asset in the CC libraries panel, and choose Edit.  

5. Import Colors and Character Styles  

Creative Cloud Libraries allows you to export colors and character styles from Photoshop layers. After you add colors and character styles to CC libraries, you can use them across all supported CC applications. 

 To add a color or character style to the CC library: 

1. Right-click the layer in the Layers panel in Photoshop. 
2. Click the + color in the Libraries panel and choose the format in which you want to add the selection to the library. 

 To apply colors and character styles to objects in XD: 

1. Select File > Open CC Libraries in XD. 
2. Choose the library from the menu that contains the character style or color. 
3. Select the object in XD to which you want to apply the color or character style. 
4. Double-click the color or character style in the CC libraries panel 

Have questions? Need more help?

Reply to this post and we will do our best to help you.