By Matte Rae
A
dobe Photoshop has long been a go-to application for image editing, graphic design and endless other visual assets used across creative applications. Thanks to Creative Cloud integrations, Photoshop integrates seamlessly with Adobe XD, allowing you to bring those incredible assets into your experience design projects. In this guide, learn how you can leverage these integrations between Adobe XD and Adobe Photoshop to take your Photoshop documents to the next level and modify imagery from XD in Photoshop.
Importing Photoshop documents into Adobe XD
Whether you’re looking to bring a Photoshop document to life with Auto-Animate or simply want to access Photoshop assets, importing Photoshop documents into Adobe XD is as easy as opening an Adobe XD document in XD. There are three ways of doing this.
Open with Adobe XD
From your computer’s file browser, select the Photoshop document you wish to import and right click it to bring up the options menu. From here, rather than opening the document in the default application, Photoshop, select Open with… and select Adobe XD from the list of options. Alternatively, on MacOS, dragging the document over top of the Adobe XD icon in the menu bar will perform the same action.
This will import the Photoshop document into an Adobe XD document, opening it in a new window. From here, all the grouping and layers from Photoshop are retained and converted to Adobe XD groups and layers.
Open a file from within Adobe XD
If you’re already working in Adobe XD, opening a Photoshop document is just as easy. Navigating to the File menu, select Open from your computer.. and select the desired Photoshop document from your computer’s file browser.
Once selected, this will once again convert the Photoshop document into an Adobe XD document just like it did before.
Import into an existing document
If you’re looking to use existing assets, stored as Photoshop files, into your active Adobe XD projects, you don’t need to open the Photoshop documents as new XD documents, instead, you can import them directly into your existing file.
To do this, navigate to the File menu and select Import…. From here, select the Photoshop file you wish to import into the project and XD will convert the groups and layers, but rather than open them in a new file, will create a new artboard in the active document, allowing you to integrate images and graphics directly into your work in Adobe XD.
Design and prototype with Photoshop assets
The above import methods are fast and efficient ways to take advantage of Adobe XD’s powerful Design and Prototyping features, from your Photoshop assets. For example, if you had a website design that was completed in Photoshop, adding interactivity or converting elements into reusable components with states is easy once imported into Adobe XD.
Easily replace images
Once your design is open in Adobe XD, replacing images is as easy as dragging them in from your file browser and dropping them onto any shape or existing image.
With the image placed, double clicking will open up the mask allowing you to reposition the image and get the placement just right.
Repeat elements with Repeat Grids
In Photoshop, duplicating elements like image galleries can mean lots of copying and pasting. Adobe XD makes this process much smoother with Repeat Grids. In the below design, the image square needs to be repeated to create a two row gallery of images.
To do this, simply select the shape and enable Repeat Grid from the property inspector on the right. Once enabled, simply drag the green handles until the desired grid height and width is defined, adjust the spacing and you’re done.
Using a Repeat Grid, images can be added quickly in bulk by dragging them in from the file browser on your computer. Select multiple image files at once and drag them onto the Repeat Grid to see it automatically populate the grid with the imagery. A great way to quickly add visuals to your design.
Add scrolling areas
The Repeat Grid can also be expanded beyond the page to create a scrolling area. Using Scroll Groups in Adobe XD, the overflow can be scrolled horizontally when previewing the design.
To do this, select the Repeat Grid and navigate to the property inspector just below the dimensions section. There are three options for scroll groups, horizontal, vertical and horizontal and vertical. To create a horizontally scrolling gallery, select the Horizontal Scroll Group.
Notice two blue handles now appearing on the page. These handles can be repositioned to define the scrolling viewport, representing the area in which the elements in this group will be visible. To create a full-width scrolling area, drag the handles to the edges of the artboard.
Now on preview, the Repeat Grid can be scrolled horizontally, creating an interactive image gallery, right inside Adobe XD, using your Photoshop assets.
Create components
Adobe XD is incredibly powerful at creating reusable components that can contain various states and be used across your design and other projects. Importing your Photoshop documents into Adobe XD unlocks the power of components for your Photoshop assets.
To create a component, select the element, like a button and either use the keyboard shortcut CMD/CTRL + K or click the + next to the component section on the property inspector. Ensure that all layers of the button element are selected before doing this.
Once created, the button now becomes a main component that can be copied and pasted to create instances that will stay in sync as changes are made to the main - making it really easy to edit styles across pages of the design.
A hover state can also be added to the component to add another level of interactivity when previewing the design. To do so, click the + button next to the Default State in the component section of the property inspector.
The Hover state interaction is automatically linked to the hover trigger, meaning you don’t need to connect this one in the prototyping mode. WIth the hover state selected, simply edit the properties, like background colour or arrow positioning and on preview XD will Auto-Animate between the two states, Default and Hover.
Edit image assets in Photoshop
Adobe XD provides several handy tools for working with imagery in your designs, but when you’re working with advanced image editing, it’s likely that you’ll want to harness the power of Photoshop. Thanks to the integration with Creative Cloud, editing images from Adobe XD files, in Photoshop, is as simple as right clicking an image and selecting Edit in Photoshop.
Once selected, the image will open in Photoshop, allowing you to make the necessary changes, whether you’re touching up blemishes, manipulating the hue or removing elements from a scene. Once saved in Photoshop, changes will automatically be synced back to the Adobe XD document, with no need to export and import images. It just works.
Pro Tip: When making changes like this, edits only apply to the image that was selected. If you have multiple instances of that image and you’d like all to update with the Photoshop edits, convert the image in Adobe XD into a component first. Once converted to a component, double clicking and editing the image within the Main Component will then push the edits to all instances of that component. Alternatively, leveraging Creative Cloud Libraries will also help keep multiple instances of an image in sync.
Creative Cloud Libraries
Both Adobe XD and Adobe Photoshop leverage the collaborative functionality of Creative Cloud Libraries meaning assets like images and graphics can seamlessly be shared across applications and changes made to the source file will be pushed to all instances.
This means that images imported into Adobe XD from a Creative Cloud Library can be edited directly in Photoshop and as those changes are made, the image will update automatically within Adobe XD. So if you’re working across teams or simply across files in different Adobe CC applications, keeping up to date on the latest versions of assets is streamlined.
Empowering workflows across Creative Cloud
Whether you’re working between Adobe XD and Adobe Photoshop or leveraging the advanced vector editing capabilities in Adobe Illustrator, the Creative Cloud integrations connected to Adobe XD help you to accelerate your workflow and easily handoff between powerful creative applications.
Download Adobe XD today as part of the Creative Cloud suite to start using it alongside Adobe Photoshop. Whether you’re editing images from Adobe XD or importing full website designs to make use of XD’s powerful prototyping functionality, you’ll find a seamless handoff between the two tools, allowing you to focus on what you do best; Crafting incredible experiences.
