Use the InVision plug-in for Figma

The InVision plug-in for Figma enables frictionless collaboration for everyone involved in design projects. Create designs in Figma and bring them to Freehand for robust, cross-functional collaboration.

Install the InVision plug-in in Figma

You first have to install the InVision plug-in in Figma. Read Figma's instructions on using plug-ins in files.

After installation, save the plug-in to the sidebar so it's always available.

Connect your Figma file to InVision

To send your Figma designs to InVision, you'll connect your Figma file and then choose where to send your frames.

1. Sign in to Figma and open your design file.
2. In the right sidebar, ensure you're in the Design tab.
3. Under plug-ins, select InVision. An InVision dialog opens.
4. If necessary, select Sign in and sign in to your InVision account, then select your team.
5. In Figma, copy the link from the browser address bar. Or, select Share and copy the share link.
6. In the InVision dialog, paste the link and select Connect.

You're ready to send your Figma design to an InVision document. The InVision plug-in lets you send designs to both new and existing InVision documents.

Send Figma designs to a new freehand or prototype

Send your Figma designs to a new Freehand document or InVision prototype.

1. In the InVision dialog, choose to send your designs to either Freehand or Prototype. Switch between Freehand and Prototype with the dropdown at the top of the dialog.
2. By default, the plug-in sends all frames. If you'd like to send only certain frames, select them on the Figma canvas.
3. In the InVision dialog, under Document name, enter a name for the freehand or prototype.
4. If desired, add the document to a space or group.
5. Select Create document.

The Figma file may take several moments to sync to InVision. When it's finished, the InVision document either opens in a new tab (based on advanced sync settings) or you'll see a success message with a link to the InVision document.

Add to a group or space

When you're sending Figma designs to a new InVision document, you can optionally add the InVision document to a group or space.

1. Under Add to a space or group, select Select. A list of existing groups and spaces opens.
2. Either search or scroll through the spaces and groups.
3. Select the space or group you wish to add the document to.
4. Select Move.

If you'd like to add the document to a new group:

1. Under Add to a space or group, select Select. A list of existing groups and spaces opens.
2. In the search bar, select Create a new group.
3. Enter a name for the group.
4. Select the permissions dropdown and choose to make the group available to your team or private.
5. Select Create.

Send Figma designs to an existing freehand or prototype

Send Figma designs to existing Freehand documents or InVision prototypes.

1. At the top of the InVision dialog, use the send frames to selection to choose either Freehand or Prototype.
2. Select Update existing.
3. Use the search field to find the existing InVision document.
4. Select the existing InVision document to select it.
5. By default, the plug-in sends all frames. If you'd like to send only certain frames, select them on the Figma canvas.
6. Select Update document.

Update Figma designs in a freehand or prototype

If you update your designs in Figma, you need to re-sync them to your freehand or prototype so your InVision documents reflect the changes.

1. Select the frames you want to update in your Figma file.
2. In the right sidebar, ensure you're in the Design tab.
3. Under plug-ins, locate the InVision plug-in and select Resync Frame(s). An InVision dialog opens.
   
   Note
   If you don't select any frames, the plug-in appears as InVision and does not sayResync Frame(s). Select InVision to resync the entire document.
4. Select the InVision document you want to update.
5. Select Update document.

Inspect Figma designs in Freehand

Once you've sent your Figma designs to 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.

Use advanced sync settings

When sending designs to both new and existing InVision documents, you have the following advanced sync settings.

Pixel density: Choose either 1x or 2x. Selecting 1x exports the designs at their original size. Selecting 2x exports the designs at twice their original size.

Open document in new tab when syncing or updating: When selected, the InVision document opens in a new browser tab after you send new or updated Figma designs.

Switch InVision teams in the plug-in

If you're a member of several InVision teams, you need to switch which team you're signed in to in the InVision plug-in.

1. In Figma, in the right sidebar, select InVision. The InVision dialog opens.
2. In the top-right corner, select More > Switch InVision teams. You'll be signed out.
3. Select Sign in and sign in to the other InVision team.