Page Comparison

How to use Figma for Confluence

Image Added

Adding Figma designs to your Confluence page

After installing the Figma for Confluence app there are three ways to add , you can start adding Figma designs to your Confluence pages using the Figma for Confluence macro to your Confluence page. The macro can be added anywhere in the document, using one of the three distinct ways in which Confluence allows you to add macros.

Plus button ➕

1. Click on the Plus button at the top right of your screen

2. Click on Other macro’s or View more

3. Search for Figma for Confluence

1. and click on the item to add the macro

2. A macro editor dialog will open allowing you to further configure the macro

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 dial will open allowing you to further configure the macro

Pasting the Figma URL directly

1. Navigate to Figma & open the Figma design you’d like to embed

2. Navigate to Figma & open the Figma design you’d like to embed

3. Click on copy linkand a share link ;

4. Click on 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;

5. Navigate back to Confluence and paste the link directly into your Confluence pageMake sure to edit the macro to enable additional features

6. The macro is automatically loaded into the page. It is advised to open the macro editor to further configure the macro and to unlock additional features that are otherwise not available.

Add Figma Design to your Confluence page

Using the macro editor

When adding a new macro

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.

Image Added

To obtain the Figma URL you need to open Figma and click on 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.

Add the URL to the input field and click Show.

Image Added

In order to attach Figma designs to Confluence pages, Figma for Confluence needs access to the Figma API. If you haven’t previously done so, you will be asked to fill in your Figma Personal Access Token

Select your desired macro height

upon adding a new design. After succesfully saving your token, the app will start loading your Figma design.

Image Added

Editing an existing macro

If you open the macro editor for an existing macro, you can no longer adjust the Figma URL. Once added, macros are linked to a specific design and they cannot be altered. If you wish to change to a different design, you will need to remove the macro and add a new one.

Image Added

Appearance options

You can make changes to the appearance of your Figma design in the macro editor. You can choose a specific appearance type, select your desired height by either closing one of the predefined sizes or providing a custom height and, based on the type, select if the design should be collapsed/expanded by default.

Image Added

Due to limitations in Confluence the macro width can not be adjusted

Enable or disable the collapsed state

Click on Save to publish your Figma design