Coda is a new doc for teams. Build Coda docs that run meetings, track big launches, or help you remember when to water the plants.
Coda comes with a set of building blocks you can use to build a tool that evolves with the needs of your team:
- Add sections and folders for infinite structure
- Create tables that talk to each other
- Create buttons that connect with other applications
There are two ways you can use Coda and Figma together:
- Figma Live Embeds: Bring your live public or private Figma frames into any Coda doc.
- Figma's Coda Pack: Get an even deeper experience with your Figma files. Push and pull important information, like changes to files or new comments.
Embed Figma files and prototypes
Figma Live Embeds allow you to add live Figma files or prototypes into other websites or apps. Add links to Figma files anywhere in Coda to reveal the latest and greatest frames.
Coda supports private or public embeds, so you can collaborate with your team, or share with the world. Collaborators can interact with embeds based on:
To embed a file in Coda:
- Open the Coda doc you want to add the embed to
/Figma in the Coda canvas and select the Media option:
- Coda will display the embed alongside the contents of the your Coda doc.
- You can now view the file or prototype in Coda. Learn how to interact with File embeds and Prototype embeds.
Tip! You can also paste a Figma link directly into the canvas. Coda will open a modal that allows you to choose a Display as option.
Select Embed from the options.
Install the Figma Pack
Packs connect Coda to other products, like Figma. With Figma Packs you can add Figma data to:
- Tables: Import live data around Figma files and projects.
- Embeds: Import live Figma mocks into your doc.
- Buttons: Use buttons to send comments back to Figma.
To start using Coda and Figma, you need to add the Figma Pack to your Coda doc.
You can connect more than one Figma account to your Coda doc. As part of that process you'll need to decide who can view and interact with data from Figma.
- Click Explore in the top-right corner and select Packs from the menu:
- Select Figma from the list of available Packs. This will open a pop up over your current doc.
- Click the Sign in to install button.
- Grant Coda access to your Figma account. Click Allow access to confirm.
Note: This will only allow Coda to have read access to your files, as well as your name, email, and profile picture.
- Select who can view Figma data in the Coda doc. Choose from:
- You and anyone this doc is shared with (Recommended): Anyone with access to this Coda doc will be able to view Figma data.
- Nobody: Nobody will be able to view Figma data in this Coda doc.
- Select who can take actions in Figma from the Coda doc. Choose from:
- Nobody: This will still allow other people on the doc to view Figma data, but not interact with it. Choose this option if you don't want anyone else in the doc to be able to interact with the file in Figma.
- Only you: Collaborators will need to access the file via their own Figma login to interact with the file. Choose this option if you want people to interact with the file under their own Figma account.
- Anyone this doc is shared with: Everyone can interact with the file in Coda, but they will need to sign in under the same Figma account. Choose this option if you are comfortable with letting anyone on the doc take action on the file.
Want to view templates or adjust your settings? Click on the Figma Pack in the Packs Panel. From here you can add Building Blocks or adjust your Settings.
Use Coda with Figma
Access live data via links
One of the most powerful features of Packs is reading any information shared via a URL.
For example, if you have a Table with links to Figma, you can call on information about that link like comments, images, and who's modified the file.
- Paste a link into a table.
- Coda will suggest columns for the table using data from the link.
- Click Add to add the column to the table.
Tip! You can also include Pack buttons in tables. Select the Button format and click New button. Customize the action the button using any of your installed Packs.
Custom Pack Buttons
The Figma Pack allows you to create a button in the Coda doc that lets you comment on a File in Figma.
The + menu allows you to view all pre-packaged buttons from your installed Packs. If you have multiple Packs, you'll see all of them listed in this menu as well.
- Click the (+) icon to add a new block to your Coda doc.
- Click Button to add a new button.
- View any pre-packages buttons from installed packs.
- Click + New Button to create a new one.
You can also include Pack buttons in your tables. To begin, choose the Button column format. Customize the action the button will take using your installed Packs.
Custom Pack Formulas
You can also use Coda's formula language to access more functionality.
Access the Figma pack via the slash command:
/figma to access the special formula building blocks.
- Select the Figma pack from the options.
- Click Manage to open the Figma pack in the sidebar.
Or, from the Packs section in the sidebar:
- Click Explore in the toolbar to open the sidebar.
- Select Packs from the options.
- Click on the Figma pack in the list:
For the Figma pack, you can use the following formulas:
- File: Use the file ID to get live data from the Figma file.
- File History: Use the file ID to return the version history of that file.
- Image: Use the frame ID to return an image of that frame's contents.
- Comments: Use the file ID to return any comments on that file.
- ProjectFile: Use the project ID to return the ID, name, thumbnail, and last modified date for all files in that project.
- Projects: Use the team ID to return the IDs and names of all projects in that team.
Click and drag the formula from the sidebar into the doc.
Remove Figma from Coda
Remove an embed or formula
To remove an embedded Figma file from your Coda doc:
- Select the embed or formula in the Coda doc.
- Press the
Delete key to remove the embed or formula.
Remove the Figma Pack
To disconnect your doc from Figma, you can remove the Figma pack.
- Click the gear icon to open the Packs section of the doc settings.
- Select the Figma pack.
- Click the three dot menu near the top-right corner and select Remove Pack.