Embed Figma designs in a freehand V7

Use the Figma add-on to curate and contextualize designs in Freehand so collaborators can give feedback. You can pin the Figma add-on to the sidebar for easy access. You will need to have View access to the Figma file to embed the design into Freehand.

Embedding Figma designs

The Figma add-on allows you to embed interactive Figma prototypes and add Figma screens to your freehand.

To embed your Figma prototype into a freehand:

1. 1. Open your design in Figma, select Share, and copy the share link.
   2. Sign in to InVision and open your freehand.
   3. On the bottom toolbar, select More tools (•••) > Figma. If it's your first time using the Figma add-on, you must allow the plugin to connect to your Figma account.
   4. In the modal, paste the Figma share link and select Embed Prototype.

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

To add Figma screens to a freehand:

1. 1. Open your design in Figma, select Share, and copy the share link.
   2. Sign in to InVision and open your freehand.
   3. On the bottom toolbar, select More tools (•••) > Figma. If it's your first time using the Figma add-on, you must allow the plugin to connect to your Figma account.
   4. In the modal, paste the Figma share link and select Browse Frames.
   5. Choose the frames you want to embed and then select Import frames.

Frames appear in the canvas in the order they appear in the modal, regardless of the order in which you select them.

To learn how to add Figma designs to your InVision V7 homepage, space, or project, check out this article: Adding External Files and Links to InVision

Grouping Figma frames and prototypes

You can group Figma frames and embedded prototypes together so they're easy to move around your freehand.

To group Figma frames and prototypes in Freehand:

1. 1. Highlight the frames and prototypes you want to group together.
   2. Optionally, select the Arrange to grid icon and drag the icon to arrange the frames and prototypes in a grid.
   3. Select the Group icon .
   4. Drag the grouped frames and prototypes to your desired location on the canvas.

Updating Figma frames and prototypes

If you make changes to a design in Figma and you want the changes to be visible in Freehand, you need to re-import them to your freehand.

To update Figma frames and prototypes in Freehand:

1. On the bottom toolbar, select More tools (•••) > Figma.
2. In the modal, paste the Figma share link and select Browse Frames or Embed Prototype.
3. If you chose Browse Frames, select the frame(s) you want to embed and then select Import frames.

Collaborating on a design in Freehand

You can collaborate on designs by adding emoji and comments. Use the toolbar to select the emoji or comment icon and click on the Figma frame or embedded prototype where you want to leave your mark. Learn more about commenting here: Commenting in Freehand

Copy, delete, or duplicate a Figma frame or prototype

Select a Figma frame or prototype in your freehand and click More (•••) to do any of the following:

• • Copy link: copy a link to the Figma frame or prototype.
  • Copy: copy the Figma frame or prototype.
  • Delete: delete the Figma frame or prototype.
    Note: If you accidentally deleted a frame or prototype, use the keyboard shortcut Cmd + Z to restore the deleted item. You can also revert to a previous version of the document using version history.
  • Duplicate: duplicate the Figma frame or prototype.

Keyboard shortcuts in the Figma add-on

The Figma add-on in Freehand has the following keyboard shortcuts to streamline your work:

Learn more about embedding your content in Freehand here: Embedding content in Freehand