FFC (Cloud) - How to use

How to use Figma for Confluence

Open

Adding Figma designs to your Confluence page

After installing Figma for Confluence, you can start adding Figma designs to your Confluence pages using the Figma for Confluence macro. 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 and click on the item to add the macro

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

Open

 

 

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. 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;

3. Navigate back to Confluence and paste the link directly into your Confluence page

4. 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.

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.

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.

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 upon adding a new design. After succesfully saving your token, the app will start loading your Figma design.

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.

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.

Preview

The Figma design is loaded into the preview in the right panel of the macro editor. This will allow you to get a basic idea of how the macro will appear in your Confluence page. The preview is adjusted based on the settings you chose.

In addition, you can also use the preview to get a good overview of how the macro will render when a different page or macro width is selected.

Additional functionality

Embedding your Figma design is just the start of the functionality the app provides! You can find a detailed explanation of all the additional features on the pages below.