Link notebook frames to Figma

As a contributor in Abstract, you can create links from Figma frames and elements in a notebook back to the original Figma file so that you and your teammates can easily jump back to the relevant file. This enables you to continue working and making changes based on feedback in your notebook, and provides engineers with quick access to inspect designs.

After you make the first link to a Figma file, Abstract creates deep links to each Figma frame from that file in all notebooks across the entire organization, as well as any future frames that are posted or updated.

Create a link to Figma

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

  1. Open the Abstract web app.
  2. Navigate to a notebook that has Figma frames 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, then click it again to open the frame in preview mode.
    Notebooks_LinkFigma-Create.png
  4. Click the Link to Figma button.
  5. Navigate to the original Figma file that has the selected frame.
  6. Click the Share button in Figma 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 link in the text box.
    Modal_Figma-Link.png
  9. Click Create link.

After you have linked a Figma file for the first time, all frames from that file will be linked from your notebooks back to Figma in every instance and every notebook in your organization. Any frames that you insert from that file in the future will automatically have links back to Figma.

Edit or remove a link to Figma

After you have linked a Figma frame or element to the original file, you can edit or remove the link.

Editing or removing a link will affect that frame or element as well as all other items from that file in all notebooks in your organization.

  1. Navigate to a notebook that contains Figma frames.
  2. Click on a frame to select the one you want to view in Figma, then click it again to open the frame in preview mode.
  3. Click the arrow on the Open in Figma button.
    Notebooks_LinkFigma-EditRemove.png
  4. Select Edit link or Remove link.
  5. Navigate to the original Figma file that has the selected frame.
  6. Click the Share button in Figma 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 link in the text box to replace the previous link.
  9. Click Create link.

View linked frames in Figma

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

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