Page Comparison

How to use Figma for Confluence

Image Added

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 Plus button at the top right of your screen and click

2. Click on Other macro’s or View more

3. Search for Figma for Confluence . The app provides you with the following two macro’s

   1. Figma macro - This macro allows you to embed private Figma files

   2. Figma embed macro - This macro only allows you to embed public files.

4. Click on the desired Figma for Confluence macro

Figma Macro

1. Upon clicking on the Figma macro, The Macro will pop-up and aks for a Figma URL

2. Go and click on the item to add the macro

3. 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 file design you’d like to embed;

2. Click on the share Share button at in the top right off your screenClick on copy link and a share link corner. In the dialog that opens, click Copy link. The link to the specific design will be copied to your clipboard

3. Paste the Figma link into the Figma macro

4. In case you are using the app for the first time;

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

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.

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

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

Figma Embed Macro

1. Upon clicking on the Figma macro, The Macro will pop-up and aks for a Figma URL

2. Go to Figma & open the Figma file you’d like to embed
   Click on the share button at the top right off your screen

3. Click on copy link and a share link will be copied to your clipboard

4. Paste the Figma link into the Figma embed macro

5. The Figma for Confluence app will load your Figma file

6. Fill in the desired Width & Height

7. Publish your Figma File or Frame!

8. on the file/frame will provide you with two additional options:

   1. Refresh - Clicking on Refresh will ensure that the latest version of the file/frame is shown

   2. Open in Figma - Clicking on Open in Figma will redirect you to the file/frame in 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

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.

Child pages (Children Display)
all true