FFC (Cloud) - How to use
How to use Figma for Confluence
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
Click on the Plus button at the top right of your screen
Click on Other macro’s or View more
Search for Figma for Confluence and click on the item to add the macro
A macro editor dialog will open allowing you to further configure the macro
Slash command ( / )
Type / on your Confluence page
Doing so brings up the same list you'd see by selecting from the toolbar;Continue typing Figma for Confluence
Press the “Enter” key or click on the item in the context menu to add the macro
A macro editor dial will open allowing you to further configure the macro
Pasting the Figma URL directly
Navigate to Figma & open the Figma design you’d like to embed;
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;
Navigate back to Confluence and paste the link directly into your Confluence page
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.
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.