Save time flipping between tabs and copy/pasting by connecting Coda and FigJam directly with the FigJam widget. The FigJam widget lets you visualize Coda tables inside FigJam files, and makes actioning brainstorms easy.
Within this article you’ll find...
FigJam widget uses
So what can you do with the FigJam widget? The widget offers two key integrations:
Import FigJam sticky notes and reactions into a Coda table, where you can sort, filter, group, and integrate other apps in our Packs ecosystem.
Turn rows from a Coda table into visual sticky notes in FigJam.
You can use this widget whenever you’re working between Coda tables and FigJam stickies. These integrations unlock a number of potential powerful scenarios. For instance, use this widget to...
Turn ideas from FigJam into next steps in Coda.
Ideate tasks in FigJam, then assign owners in Coda.
Visualize objectives and roadmaps in FigJam and track them in Coda.
Take action on reflections from retrospectives or pre-mortems.
Generate questions in Coda, then brainstorm solutions in FigJam.
Get started
The easiest way to understand how the widget works is to copy and play with any of the following templates to experience how both tools can complement each other:
But we’ve also included some basic instructions below. To get started, you will need to add the Coda widget from the (Part 1), then sync your FigJam board to a table in your Coda doc (Part 2).
Part 1: Connect the widget
First, you need to connect the FigJam widget to your Coda account and Coda table. To do so, follow these steps:
In your FigJam canvas, click + in the bottom right of the toolbar.
Then search coda under the Widgets tab.
Select the Coda widget, then click Get started.
If you haven’t yet, you’ll need to connect to your Coda account using a Coda API token.
To get this token, go to coda.io/account, scroll to the API Settings section, and click on Generate API token. Give the token a name and generate. Then copy the newly created token. Finally, back in FigJam paste this token into the widget’s text field.
Follow the prompts in the widget to connect to a Coda table.
You’ll need to copy the link to the table within Coda. To do so, hover over the table, click the vertical three-dot menu to the left of the table title, then select Copy link from the options. Then, back in FigJam, paste this link into the widget.
Now you’ll see a tile for a Coda table in FigJam. Click on the gear icon in the upper right corner, then match the columns in your Coda table to data in FigJam. Hit Save settings when you’re done.
That’s it for Part 1. Continue to Part 2 below.
Part 2: Export stickies to Coda
Now that you’ve connected your FigJam and Coda via the widget, you can start exporting stickies to Coda. To do so, follow these steps:
In FigJam, use the cursor to select the stickies and sections you want to export.
Click Convert stickies to rows.
Your stickies should now appear in your Coda table!
FAQs
What is the difference between FigJam and Figma?
What is the difference between FigJam and Figma?
FigJam is a collaborative digital whiteboard tool that facilitates idea exploration and team collaboration. It is ideal for low-fidelity activities like brainstorming, team retros, diagramming, mind mapping, research synthesis, design critiques or feedback sessions. On the other hand, Figma is a powerful design tool focused on high-fidelity design work, including creating interactive prototypes, graphics, presentations, and integrating with design systems.
FigJam is a product launched by Figma, to be the whiteboard counterpart to Figma’s original high-fidelity design canvas.
How will data translate from FigJam to Coda?
How will data translate from FigJam to Coda?
Syncing data: The widget imports data through a manual sync (rather than continuously syncing in live data). So in order to re-sync data from FigJam to Coda, you will need to reset the table (clear all rows), then click “Convert stickies to rows” using the widget.
Stamp counts and reactions: The count of stamps over a sticky in FigJam will be displayed as a number in Coda.
Syncing colors: To ensure the color the FigJam stickies match the colors of rows in Coda tables, there must be a Color column in the Coda table that is not hidden, and the colors in the select list options must be the same names as the colors of the FigJam stickies. (Feel free to hide the color column after done syncing.)
Grouping ideas: In FigJam, stickies are organized into sections, which turn into table groups in Coda.
From Coda to FigJam: Transform rows in Coda tables into separate cards in FigJam, where you can do deeper brainstorming. Currently, the existing widget does not render Coda tables in FigJam.
How can I remove the widget?
How can I remove the widget?
To remove the widget, simply delete the widget from your FigJam board, and this will disable future syncs between FigJam and Coda.
Is the widget free?
Is the widget free?
Yes! You can install the FigJam-Coda widget for free, into your FigJam board, then follow the widget’s instructions to connect your FigJam board to a table in a Coda doc.
How else can I integrate Coda and Figma?
How else can I integrate Coda and Figma?
Coda has 4 key ways to integrate your Figma workflows:
FigJam widget: Turn ideas into action with Coda + FigJam.
Figma page embeds: Embed a Figma canvas or FigJam board right into your Coda doc, as a full-page embed or embed within a page, so your designs and whiteboards can live alongside all your team’s key artifacts.
Figma Pack: Keep your product design up-to-date with the latest from Figma. Pull in images, last modified times, and comments. And post new comments directly from your doc.
Design Integration Pack: Keep all your Figma components and styles in sync, ensuring your design system stays up-to-date and integrates your Design and Code libraries to create a dynamic, comprehensive design system.