Import an Adobe XD design into Freehand
  • 08 May 2023
  • 4 Minutes to read
  • Dark
    Light

Import an Adobe XD design into Freehand

  • Dark
    Light

Article Summary

This article provides answers for InVision V7. To confirm your version, check the upper right corner of your dashboard.

Use the Adobe XD integration to curate and contextualize designs in Freehand so collaborators can give feedback. You will need to have view access to the Adobe XD artboard or prototype to import it into Freehand.

Import artboards and embedding prototypes

The Adobe XD integration allows you to embed interactive Adobe XD prototypes and add Adobe XD screens to your freehand.

To embed your Adobe XD prototype into a freehand:

  1. In Adobe XD, open the file you want to import into Freehand. Click the Share tab and copy the share link.
  2. Sign in to InVision and open your freehand.
  3. On the bottom toolbar, select Explore > Adobe XD. If it's your first time using this integration, you will be prompted to authorize the plugin to connect to your Adobe XD account.
  4. In the modal, paste the share link and click Embed Prototype.
    If you’re using a private share link, a modal will appear with the following options:
    • Authorize with Adobe Cloud . Clicking this will take you to another screen to sign in to your Adobe XD account and authorize InVision to access the private link.
    • Use public links only. Clicking this will bring you back to the previous screen, where you will have to paste a public link from step 1.

Hover over the embedded prototype and click Play prototype to interact with the prototype.

To add Adobe XD screens to a freehand:

  1. In Adobe XD, open the file you want to import into Freehand. Click the Share tab and copy the share link.
  2. Sign in to InVision and open your freehand.
  3. On the bottom toolbar, select Explore > Adobe XD. If it's your first time using this integration, you will be prompted to authorize the plugin to connect to your Adobe XD account.
  4. In the modal, paste the share link and click Browse frames.
  5. Select the frames you want to embed and click Import frames.

Artboards will appear in the canvas in the order they appear in the modal, regardless of the order in which you select them. Due to an existing limitation by the Adobe API, images are exported to InVision at x0.5 quality.

Group designs

You can group your designs so they're easy to move around your freehand.

To group designs in Freehand:

  1. Select the designs you want to group together.
  2. Optionally, click and drag the Arrange to grid icon Arrange_to_grid_icon.png to arrange the designs in a grid.
  3. Click the Group icon Group_icon.png.
  4. Drag the group to the desired location on the canvas.freehand-adobe-xd-group-designs.gif

Collaborate on a design in Freehand

You can collaborate with your team by adding emoji and comments to the design in Freehand. Use the toolbar to select the emoji or comment icon and click on the design where you want to leave your mark. Learn more about commenting here: Commenting in Freehand.freehand-adobe-xd-reactions-comments.gif

Update imported artboards and embedded prototypes

Updating imported artboards and embedded prototypes will overwrite the original designs. If you want to keep a historical version before you update them, you can duplicate the designs by selecting the artboards and/or prototypes and using the Cmd + D keyboard shortcut. The latest version of that duplicated design will keep it synced with the original artboards and prototypes.

If you make changes to an artboard in Adobe XD and you want the changes to appear in Freehand, you need to paste the share link again in the Adobe XD modal.

To update existing artboards and prototypes in Freehand:

  1. In Adobe XD, open the file you previously imported in Freehand. Click the Share tab, click Update Link, and then copy the share link.
  2. Log into InVision and open your freehand. On the bottom toolbar, select  ExploreAdobe XD.
  3. In the modal, paste the updated share link and click Browse artboards or Embed prototypes.
  4. If you chose Browse artboards, select the artboard(s) you want to update and click Import artboards.

Copy, delete, or duplicate a design

Select a design in your freehand and click the More icon More_icon.png to do any of the following:

  • Copy link: copy a link to the design in Freehand.
  • Copy Cmd + C : copy the design.
  • Delete Delete: delete the design from Freehand. The artboard(s) won't be deleted from Adobe XD.

    If you accidentally deleted a design, use the keyboard shortcut Cmd + Z to restore the deleted item, or revert to a previous version of the document using version history.

  • Duplicate  Cmd + D : duplicate the design.

Keyboard shortcuts in the Adobe XD integration

The Adobe XD integration in Freehand has a few keyboard shortcuts to streamline your work. See the shortcuts available in the Adobe XD modal in the table below.

Shortcut

Action

 Escape 

Close the integration

← ↑ ↓ → (arrow keys)

Navigate frames in the frames list 

Enter

Confirm selection

Command + A on Mac,
Ctrl + A on Windows

Select and deselect all frames in the frames list 

Shift + click or
Shift + ← ↑ ↓ → (arrow keys)

Select multiple frames in the frames list

Learn more about embedding your content in Freehand here: Embed your content in Freehand.

Was this article helpful?