Add a Figma desing to a Confluence page

Adding the Figma for Confluence macro

Using the plus button (+)

1. Click on the  button in the editor toolbar.
2. Click on View more.
3. Search for Figma for Confluence and click on the item to add the macro.
4. A macro editor dialog will open allowing you to configure the macro.

Using the slash command ( / )

1. Type / on your Confluence page. Doing so brings up the same list you'd see by selecting  from the toolbar.
2. Continue typing Figma for Confluence.
3. Press the “Enter” key or click on the item in the context menu to add the macro.
4. A macro editor dialog will open allowing you to configure the macro.

Using the macro editor

When you add the macro using either the plus button or the slash command, the macro editor will open automatically. You will be prompted to provide the Figma URL for the design that you wish to add to your Confluence page.

Obtaining a Figma URL

1. To obtain the Figma URL, you need to open Figma and click on the Share button in the top right corner.
2. In the dialog that opens, click Copy link.
3. The link to the specific design will be copied to your clipboard.

Opening the Figma design in the macro editor

1. Paste the URL of your Figma design into the input box in the Figma for Confluence macro editor.
2. Click the Show button.
3. A preview of your Figma design will be shown unless you need to authenticate the app first (see below).

Authenticating the app (if you haven’t done so already)

In order to embed Figma designs in Confluence pages, Figma for Confluence needs access to the Figma API. If you haven’t already done so, you will be asked to fill in your Figma personal access token upon adding a new design. If you need to generate a token, follow these steps:

1. Go back to the file in Figma and click the main menu in the top left corner.
2. Click Help & Account.
3. Click Account Settings.
4. Select the Security tab in the top menu.
5. Navigate to the Personal Access Tokens section.
6. Click Generate new token.
7. Copy the token.
8. Navigate back to Confluence.
9. Paste the token in the Add new token modal.
10. Click Save.

Customizing the Figma design

After saving your token, a preview of your Figma design will load in the right panel of the macro editor. This will give you an idea of how the macro will appear on your Confluence page based on the settings you choose.

You can also use the preview to see what the macro will look like when you select a different page or macro width using Confluence’s native features.

Changes to the page or macro width in the preview won’t affect the Confluence page. The preview just indicates what the macro might look like. If you want to change the width, you’ll need to do this after you’ve closed the macro editor.

Display types

In the editor, you can customize how your Figma design will display on your page. You can choose a specific display type and select your desired height by either choosing one of the predefined sizes or providing a custom height. You can also, based on the type, select if the design should be collapsed or expanded by default.

Although you can’t adjust the width of the macro in the macro editor, you can use Confluence’s native features. These let you change the width of the macro or the whole page in edit mode. You can further adjust the width by placing the macro in a page column or table column, which can be as wide or as narrow as you want. Your Figma for Confluence macro will automatically adjust to fit the available width.

Find out more about the display types.

Once you have added your Figma link and customized how you want the design to display, click Insert. The design will be embedded in your Confluence page.

Once you have embedded a Figma design, you will no longer be able to adjust the Figma URL. If you want to change the embedded design, you’ll need to remove the macro and add a new one.

Versioning

By default, the design you've embedded is the current version of the design in Figma, which is pinned to your Confluence page. The pinning feature means that any future versions created in Figma will not reflect in Confluence. You would have to manually update the version to get any changes made in Figma to render.

This maintains the integrity of your Confluence design documentation, allowing stakeholders to use and reference it without the design assets constantly changing.

Find out more about version control in Figma for Confluence and how to switch versions or turn off the pinning feature.

Pasting the Figma URL directly

1. Navigate to Figma and open the Figma design you’d like to embed.
2. Click the Share button in the top right corner. In the dialog that opens, click Copy link. The link to the specific design will be copied to your clipboard.
3. Navigate back to Confluence and paste the link directly into your Confluence page.
4. The macro, with the design embedded, is automatically loaded into the page. We would advise opening the macro editor to further configure the macro and unlock additional features that are otherwise not available.

The above steps are assuming you have already authenticated the app. If you haven’t, pasting the Figma URL directly will show the macro in a loading state. You will need to edit the macro, where you’ll see a message saying, “We’re unable to access the Figma file”. Click Add new Personal Access Token to open the Access required dialog and enter your token. Once you’ve added your token and clicked Save, your design should display.