Fable Insight Annotations (Figma widget)

The Fable Insight Annotations widget allows users to add videos from Fable Engage to Figma files and FigJam boards.

Setup instructions

Users can add the Fable widget to their existing Figma files or FigJam boards in both the app and browser versions of Figma.

Step 1: Open the Widgets menu

In a Figma file

  • In the toolbar, select the “Resources” icon and navigate to the “Widgets” tab
    • Or, right click anywhere on the page and select “Widgets” and then “Manage Widgets”
A screenshot of a portion of a Figma design file interface, showing the navigation bar which includes several icons representing different tools. The active selection on the navigation bar is the Resources icon. The Resources menu is open and shows tabs for "Components," "Plugins," and "Widgets." The "Widgets" tab is active, and there is a search bar labeled "Search all widgets," which is currently empty.
A screenshot of the Figma menu. The menu has several options: Paste here Show/Hide UI Show/Hide comments Cursor chat Quick actions... Plugins Widgets (highlighted with a submenu) Manage widgets... (highlighted) Select all widgets

In a FigJam board

  • In the toolbar, select the “+” button and navigate to the “Widgets” tab
    • Or, in the main menu, select “Widgets” then select “Manage Widgets”
    • Or, right click anywhere on the board and select “Widgets” then select “Manage Widgets”
A screenshot of the FigJam tool bar and menu. The toolbar's "Plus" button is highlighted and a menu is open. The menu has. search bar. Beneath the search bar there are multiple tabs: All, Templates, Stickers, Widgets and Plug ins. The Widgets tab is actively selected. Beneath the tabs there is a Recently Saved widgets section, which is empty.
A screenshot of a main menu on a FigJam board titled "My FigJam board" The menu is open, showing several options, displayed over a background with a dotted grid pattern. From the menu list, Widgets is selected and highlighted in purple with a submenu. From the submenu, Manage widgets is selected and. highlighted in purple.
A screenshot of an on-page menu with several options, displayed over a background with a dotted grid pattern. The menu contains the following items: Paste Unlock all objects Cursor chat Show/Hide UI Show/Hide comments Plugins Widgets (highlighted in purple with a submenu) Manage widgets... (highlighted in purple) Select all widgets Publish template...

Step 2: Search for the Fable widget

Search “Fable” or “Fable insight annotations” for the widget to appear. Then, select it from the results to add it to the current file or board.

A screenshot of the Figma Widget user interface panel. It includes the following content: A search bar at the top with the text "fable" entered, and a "Clear" button on the right side. Below the search bar, there are several tabs labeled "All," "Stickers," "Templates," "Widgets" (currently active), "Plugins," and "More." Results Section: The search results section titled "From Fable" shows one widget card titled "Fable Insight Annotations" as a result.

Step 3: Authenticate the widget

Once added, connect the widget to your Fable Engage account.

  • In Figma or FigJam, select the “Start” button in the widget
  • In the window that opens, select the “Allow access” button

The authentication process will temporarily redirect you outside of Figma to input your Fable Engage credentials, ensuring a connection between Figma and Fable.

A “Connection successful” window will open in Figma once the widget has been authenticated.

A screenshot of a dialog box with the following content: The Fable logo. The text "Build accessible products with insights from people with disabilities." is next to a simple line drawing of a person with curly hair, glasses, connected by a flowing line to various icons, including a code icon and a paper with a feather quill. A pink button at the bottom left says "Start"
a dialog box titled "Connect to Fable." (displayed at the top with the Fable logo on the left and a close button on the right). In the dialog box it says "To continue, Figma would like to access your Fable account." next to the Figma logo. Underneath are two buttons: Allow access and Decline access.
A dialog box titled "Connect to Fable." (displayed at the top with the Fable logo on the left and a close button on the right). In the dialog box it says "continue in the browser to connect your Fable account" with the Figma logo to the right. Underneath it says "Retry connection" in purple underlined text next to an "Opens in new tab" icon
A screenshot of a dialog box with the following content: The image shows a confirmation dialog box with the following content: "Connect to Fable" (displayed at the top with the Fable logo on the left and a close button on the right). "Connection successful. You can close this window and start adding Fable video clips." with a checkmark inside a purple circle next to the message.

Adding a clip or video

Once the authentication is complete, you will be able to add clips or videos to Figma files and FigJam boards.

  • In Fable Engage, find the clip or video you want to add
    • Select “Share” and copy the shareable link
    • In Figma or FigJam, in the Fable widget select the “Add video clip” button, and paste the shareable link into the Video clip field.
  • Select the “Add” button
A screenshot of a user interface section labeled "Video files," featuring a table with the following components: Column headers are: "File name," "Options," "Duration," "Date," and "Created by." There are two rows of data beneath. In each row, there are Icons for "Download" and "Share" in blue. The second row is highlighted in purple. The Share icon is actively selected, with a pop-up box below showing a "Shareable link" field containing a URL, with a "Copy" button next to it.
A screenshot of a dialog box with the following content: The Fable logo. The text "Build accessible products with insights from people with disabilities." is next to a simple line drawing of a person with curly hair, glasses, connected by a flowing line to various icons, including a code icon and a document with a feather quill. A pink button at the bottom left says "Add video clip."
A screenshot of a dialog box titled "Add Fable video clip." (displayed at the top with the Fable logo on the left and a close button on the right). The text "Video clip, Enter Fable’s shareable link for a video clip." is above an empty text input field. Below that, there is a pink button labeled "Add".

Viewing a clip/video

Once the clip or video has been added, all users in that Figma file or FigJam board can view it. Selecting the video or clip will open a new window in Figma or FigJam for the video player to play.

You can add multiple videos or clips to any Figma or FigJam board.

A video clip preview card for a video titled "Can't log into account." The card includes the following elements: A greyed-out screenshot of a login page with a large pink play button icon in the center, indicating that the video can be played. The video is titled "Can't log into account." Date: "February 18, 2022." Author: "Matt K." Feature: "Screen magnification." Below the title and information, there is a brief description: "Description of unable to log in and use my account clip."
The image shows a video player interface displaying a video clip titled "Can't log into account." The interface includes the following elements: A video of a screen recording of a log in page. Below the video there is a video progress bar and playback controls.

Technical requirements

  • You may need to get approval from your team’s internal Figma administrator before anyone can use the Fable widget.
  • The Fable widget must be authenticated by a Fable user (someone with a Fable Engage account) before videos can be added or viewed.
  • A Fable user will need to authenticate with the widget every time the widget is added to a new Figma file or FigJam board.

Troubleshooting and support

Learn more about the Fable Insight Annotations Figma widget.

If you have any questions, email support@makeitfable.com.

If you have thoughts or feedback about this feature, reach out to your Customer Success Manager or email support@makeitfable.com.