Figma Connect for Confluence

Overview

Figma Connect allows you to seamlessly embed and preview live, interactive Figma design files and prototypes directly within your Confluence pages. Ensure your entire team stays aligned by bringing your designs exactly where the work happens.

Key Features

Live Figma Embeds — Display real-time Figma designs within Confluence pages
Interactive Preview — Click to load an interactive preview of the embedded design
Secure OAuth Integration — Connect your Figma account securely via OAuth 2.0 with PKCE
Per-user Authentication — Each user connects their own Figma account for proper access control
Node-level Embedding — Embed specific frames, components, or pages from a Figma file
Admin Dashboard — Monitor usage statistics and manage connections

1. Prerequisites

Before using the app, ensure the following:

You have a Confluence Cloud instance with administrative rights to install the app.
You have access to the Figma files you want to embed.

2. Installation

Go to your Confluence settings or the Find new apps screen.
Search for "Figma Connect".
Click Get app to install it.
Once installed, the macro will be instantly available across your Confluence instance.

3. How to Use

Follow these simple steps to embed a Figma design into your Confluence page:

Step 1: Copy the Figma Link

1

Open your design file or prototype in Figma.

Click the Share button in the top right corner.

Ensure the link permissions are set appropriately (e.g., "Anyone with the link can view").

Click Copy link.

Step 2: Insert the Macro

2

Open the Confluence page where you want to embed the design and enter Edit Mode.

Type /figma and select Figma Connect from the macro dropdown menu, or insert it from the toolbar menu.

Step 3: Configure and Embed

3

Once the macro settings dialog opens, paste your copied Figma URL into the input field.

(If applicable) Adjust any display settings available in the macro dialog.

Click Save or Insert.

Publish or Update your Confluence page. Your live Figma design is now successfully embedded!

Supported Figma URL Formats

https://www.figma.com/design/FILE_KEY/Title
https://www.figma.com/design/FILE_KEY/Title?node-id=NODE_ID
https://www.figma.com/file/FILE_KEY/Title
https://www.figma.com/proto/FILE_KEY/Title (prototypes)

4. Admin Configuration

Confluence administrators can manage app settings to ensure security and monitor usage:

Navigate to Confluence Administration > Manage apps.
Expand Figma Connect and click Configure.
From here, you can view connection status and basic analytics.

5. How It Works

Figma Connect uses a secure architecture built on Atlassian Forge with a Custom UI:

Architecture

Component	Technology	Purpose
Frontend	Forge Custom UI (React)	Macro configuration and embed display
Backend	Vercel Edge Functions	API proxy, token management, Figma API calls
Database	Supabase (PostgreSQL)	Tenant data, encrypted tokens, audit logs
Auth	Forge Invocation Token (FIT)	Secure communication between Forge and backend

Data Flow

User inserts the Figma Connect macro on a Confluence page
User pastes a Figma URL into the macro configuration dialog
The macro validates the URL, extracts the file key and node ID
When rendering, the Forge resolver calls the Vercel backend via invokeRemote
The backend verifies the Forge Invocation Token (FIT), retrieves the user's Figma OAuth token, and fetches data from the Figma API
The design thumbnail and metadata are returned and displayed in the Confluence page

6. Security & Privacy

OAuth 2.0 with PKCE — Industry-standard authorization; no client secrets are exposed to the browser
AES-256-GCM Encryption — All Figma tokens are encrypted at rest in the database
Forge Invocation Token (FIT) — Every API request is authenticated via Atlassian's FIT mechanism
Per-user Token Isolation — Each user's Figma credentials are stored separately; no shared tokens
No Design Data Stored — Figma file data is fetched in real-time and never persisted on our servers (pass-through architecture)
Rate Limiting — Built-in rate limiting to prevent abuse
Audit Logging — All authentication and configuration events are logged for compliance

7. Troubleshooting & FAQ

Q: The embedded Figma file shows an error or a blank screen.

A: Please ensure that the Figma URL is correct and the sharing permissions in Figma are set to allow viewing (for example, "Anyone with the link can view"). If the file is strictly private, the embed block may not render for users without Figma access.

Q: Does this app store my Figma files?

A: No. Figma Connect acts purely as a secure rendering proxy. We do not store, export, or log your Atlassian Customer Data or your Figma design content.

Error Messages

"Figma account is not connected"

Click "Connect to Figma" or "Reconnect to Figma" in the macro configuration dialog to authorize your Figma account.

"Figma token expired"

Your Figma authorization has expired. Click "Reconnect to Figma" to re-authorize.

"The specified Figma file was not found"

Verify that the Figma URL is correct and that you have access to the file in Figma.

"Access to Figma denied"

Your Figma account does not have permission to view this file. Check your Figma team permissions.

8. Support & Contact

If you encounter any issues or have feedback, we are here to help!

Email: webinfo@digitalate.jp
Website: https://digitalate.jp

Welcome to Figma Connect