Embedding Figma designs in Freehand V7

Use the Figma add-on to curate and contextualize designs in Freehand so collaborators can easily 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. Open your design in Figma, click Share, and copy the share link.
2. Log in to InVision and open your freehand.
3. On the bottom toolbar, click the More tools menu icon (•••) and select Figma. If it's your first time using the Figma add-on, you will be prompted to authorize the plugin to connect to your Figma account.
4. In the modal, paste the share link and click Embed Prototype.

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

To add Figma screens to a freehand:

1. Open your design in Figma, click Share, and copy the share link.
2. Log in to InVision and open your freehand.
3. On the bottom toolbar, click the More tools menu icon (•••) and select Figma. If it's your first time using the Figma add-on, you will be prompted to authorize the plugin to connect to your Figma 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.

Frames will be added to 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 are easy to move around your freehand.

To group Figma frames and prototypes in Freehand:

1. Highlight the frames and prototypes you want to group together.
2. Optionally, click the Arrange to grid icon and drag the icon to arrange the frames and prototypes in a grid.
3. Click 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 can update the frame or prototype in the Figma add-on modal.

To update Figma frames and prototypes in Freehand:

1. On the bottom toolbar, click the More tools menu icon (•••) and select Figma.
2. In the modal, paste the share link from the Figma design and click Browse Frames or Embed Prototype.
3. If you chose Browse Frames, select the frame(s) you want to embed and click 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 the More icon 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 a few keyboard shortcuts to streamline your work. See the shortcuts available in the Figma add-on modal in the table below.

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