Skip to main content
Connect your AI agent to a user’s Figma account to export assets, apply changes to design files programmatically, and comment on prototypes to automate design feedback loops.

​
Connect Figma to Auth0

1

Figma setup

  1. Visit the Figma Developer account page and sign up.
  2. Create a new app in the Figma Developer Dashboard.
  3. Provide a name for your app and select a team or organization to associate it with.
  4. Copy and securely store the Client ID and Client Secret that Figma provides.
  5. Configure OAuth redirect URL:
    • Redirect URL: https://YOUR_AUTH0_DOMAIN/login/callback
    You can find the Auth0 domain in the Auth0 Dashboard.You can find this under Applications > [Your Application] > Settings > Basic Information > Domain.If you are using the custom domains feature, your Auth0 domain is the custom domain. You can find this under Branding > Custom Domains.
  6. Select the necessary scopes that your application needs to access (current_user:read, file_content:read, file_comments:write, etc.).
  7. Publish it.
To learn more about setting up Figma, read the Login with Figma documentation.
2

Auth0 setup

  1. In the Auth0 Dashboard, go to Authentication > Social.
  2. Select Create Connection, then choose Figma.
  3. Click Continue.
  4. In General:
    1. Enter the Client ID and Client Secret from your Figma OAuth app.
    2. Under Attributes, select the scope(s) required for your application. These determine what permissions your application can request from Figma, whether for authentication (such as accessing basic profile details) or for API access (such as connecting to the provider's APIs).
    3. Add any additional scopes your application requires in the Additional Scopes field.
  5. In Advanced, Enable Token Vault. This lets the connection retrieve and securely store access tokens for third‑party APIs. Learn more in Configure Token Vault.
  6. Click Create.
  7. After creation, you are redirected to the Applications page. Select the application(s) to enable this connection for.
    Note: In a new Auth0 tenant, you can select the Default App.
  8. Once you have created your Figma social connection, test your connection to ensure the setup is working correctly before using it in your application.
This guide walks you through setting up the Figma connection in Auth0. For an end-to-end example that shows how to set up your app to call third-party APIs on the user's behalf using a connection like this, read the Call Other's APIs on User's Behalf Quickstart.

​
Token Vault configuration example

To configure the Token Vault for your Figma connection, you can use the following code snippet in your application:
  • JavaScript
  • Python
const auth0AI = new Auth0AI();

export const withFigmaConnection = auth0AI.withTokenVault({
  connection: "figma",
  scopes: ["current_user:read", "file_content:read", "file_comments:write", ...],
  refreshToken: getAuth0RefreshToken(),
});

​
Next steps