Link notebook frames to Figma and FigJam

As a contributor in Abstract, you can create links in your notebooks from Figma frames and elements or FigJam shapes and groups. You can use these links to easily jump back to the relevant file from your notebooks. This lets you make changes based on feedback in your notebook, and also gives engineers quick access to inspect your designs.

After you make the first link to a Figma or FigJam file, Abstract searches all the notebooks in your organization for content from that file. If it finds any, it links each instance back to the parent Figma or FigJam file. If you add any new content from that file to notebook in your organization, it automatically links it back to the file as well.

Create a link to Figma or FigJam

Follow the steps below to link existing frames in Notebooks to a Figma or FigJam file.

  1. Open the Abstract web app.
  2. Navigate to a notebook that has Figma or FigJam content inserted from the Figma plugin OR insert frames in a notebook with the Figma plugin.
  3. Click on a frame to select the one you want to view in Figma or FigJam, then click it again to open the frame in preview mode.
  4. On the top toolbar, click the Link to Figma button.
  5. Navigate to the original Figma or FigJam file that has the selected frame.
  6. In the Figma or FigJam top toolbar, click Share.
  7. Click Copy Link to copy the file link to your clipboard.
  8. Navigate back to your Abstract notebook.
  9. In the Link your Figma file window, paste the Figma or FigJam link in the text box.
  10. Click Create link.

View linked frames in Figma or FigJam

Once a Figma or FigJam file has been linked to a notebook in your organization, all users can navigate directly from a frame in Notebooks to the original file.

  1. Navigate to a notebook that contains Figma or FigJam content.
  2. Click on a frame to select the one you want to view in Figma or FigJam, then click it again to open the frame in preview mode.
  3. Click the Open in Figma button.

Figma or FigJam opens and navigates you to the content you selected.

Edit a link to Figma or FigJam

After you've linked Figma or FigJam content to the original file, you can edit the link.

When you edit a link, the update affects that specific content as well as all other content from that file in all notebooks in your organization.

  1. Navigate to a notebook that contains Figma or FigJam content.
  2. Click on a frame to select the one you want to view in Figma or FigJam, then click it again to open the frame in preview mode.
  3. In the top toolbar, click the dropdown arrow on the Open in Figma button.
  4. Select Edit link.
  5. Navigate to the original Figma or FigJam file that has the selected frame.
  6. Click the Share button in Figma or FigJam and select Copy Link to copy the file link to your clipboard.
  7. Navigate back to your Abstract notebook.
  8. In the Link your Figma file window, paste the Figma or FigJam link in the text box to replace the previous link.
  9. Click Create link.

Remove a link to Figma or FigJam

If you no longer want to have notebooks content linked to the original Figma or FigJam content, you can remove the link.

When you remove a link, the links are removed from that specific piece of content as well as all other content from that file in all notebooks in your organization.

  1. Navigate to a notebook that contains Figma or FigJam content.
  2. Click on a frame to select the one you want to view in Figma or FigJam, then click it again to open the frame in preview mode.
  3. In the top toolbar, click the dropdown arrow on the Open in Figma button.
  4. Select Remove link.
  5. Confirm your decision to remove the link by clicking Remove Link.

The link is removed for all pieces of content from that Figma or FigJam file across all notebooks in your organization.