Embed Figma designs in a freehand

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

Embed Figma designs

The Figma integration 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, select Share, and copy the share link.
2. Sign in to InVision and open your freehand.
3. On the bottom toolbar, select Explore () > Figma. If it's your first time using the Figma integration, you must allow the integration 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. 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 Explore () > Figma. If it's your first time using the Figma integration, you must allow the integration 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

Update 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 by following the steps in the section Embed Figma designs.

Inspect Figma designs in Freehand

Once you've embedded your Figma designs in Freehand, you can inspect them to access measurements, colors, assets, code, and more for your designs. 

Read this article for more details about Inspect in Freehand: Inspect design screens in Freehand.

Group 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. 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.

Collaborate 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 then select ••• 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 integration

The Figma integration in Freehand has the following keyboard shortcuts to streamline your work: