Your visual designs bring your ideas to life in a notebook. With the Abstract Notebooks plugin for Figma, you can insert frames, individual elements, and symbols directly from Figma into your notebook. You can also 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. Show your visual designs within context, gather feedback, and track reviews all in one place, so everybody can see your complete vision.
Anyone with edit access to a Figma file can install and run the Abstract Notebooks plugin. You also need a contributor seat in Abstract in order to edit a notebook and add content.
Add content from Figma
Install the Abstract Notebooks plugin and sign in to Abstract to insert designs from Figma directly into a notebook.
- Select the Figma frames, elements, or symbols you would like to add to a notebook.
- Right click on the canvas or click Plugins in the Mac menu bar.
- From the Plugins option, select Abstract Notebooks.
- Select the name of the notebook where you want to add the Figma content.
- Click Add to Notebook.
The Figma content appears in your selected notebook. You can now interact with it in the same way you would any other image in a notebook.
Add content from FigJam
Each shape in a FigJam whiteboard is an individual asset. Even when placed in context together, they don't exist within a frame or group by default. This means that when you add content from FigJam to your notebook, each shape is added as a separate image unless you group them.
To group shapes together into a single image or flow:
Navigate to the FigJam content you want to add to your notebook.
Click and drag around the shapes you want to group to highlight them.
Choose Group Selection from the menu or press ⌘+G on your keyboard.
FigJam groups the shapes. You can now add your images or flows in the same way you would for any Figma content.
Update content from Figma
When you update content in Figma, you can use the Abstract plugin to update to any designs you've already added to a notebook.
Update all Figma content
If you have nothing selected in Figma, the Abstract plugin can automatically detect which frames, components, and individual elements in the current Figma file have already been added to a notebook. If this is the case, it will update all those items.
Once you’ve added content to a notebook from a Figma file, the Notebooks plugin selects that notebook by default the next time you use the plugin. Use the back arrow to select a different notebook.
- With Abstract’s Notebooks plugin open, select the notebook you want to update.
- Click Update existing to update all frames in the notebook with the changes from the current Figma file.
Update selected Figma content
You can choose specific frames, components, and elements from Figma to update in your notebook by selecting the individual items that have changed.
You can select a mixture of content that hasn't yet been added to the notebook and content that has. If you do this, Notebooks updates the existing frames and adds the new frames to the bottom of the notebook.
- Select the Figma frames, elements, or symbols you want to update.
- With Abstract’s Notebooks plugin open, select the notebook that has Figma content you want to update. This only updates those selected items — it doesn't update items you haven’t selected in Figma.
- Click Update existing.
Update content from FigJam
Because FigJam content doesn't exist in a frame, the way you update depends on the specific changes you made:
If you made changes without ungrouping the shapes: You can update the content as normal. You can make almost all changes without ungrouping the shapes, including adding text to a shape, changing shape colors, deleting or moving shapes, and so on. The only update you can't do without ungrouping the shapes is adding new shapes.
If you ungrouped the shapes, made changes, and regrouped them: FigJam considers this a new image. Add the image to your notebook again and delete the old version. You can keep or delete the previous iteration as needed.