FFC (Data Center) - How to use

Owned by Jonas Hallensleben
Last updated: Sept 11, 2024
4 min read

How to use Figma for Confluence Pro

FFC DC - How to use (1).png

Adding Figma designs to your Confluence page

After installing Figma for Confluence Pro, 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 Pro and click on the item to add the macro

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

 

FFC DC - How to use (2).png

 

 

 

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 Pro

  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

 

 

 

 

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 Pro 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 successfully 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.

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

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.

Changes to the page or macro width in the preview are not persisted in the Confluence page. This is only an indication of how the macro might look like. If you wish to change the page of macro width, you will need to do this after you’ve closed the macro editor.

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.