Skip to Content

Figma

The Figma enables tools and to call Figma APIs  on behalf of a using OAuth 2.0 authentication.

Want to quickly get started with Figma in your or AI app? The pre-built Arcade Figma MCP Server is what you want!

What’s documented here

This page describes how to use and configure Figma auth with Arcade.

This is used by:

Configuring Figma auth

When using your own app credentials, make sure you configure your to use a custom user verifier. Without this, your end-users will not be able to use your app or in production.

In a production environment, you will most likely want to use your own Figma app credentials. This way, your will see your application’s name requesting permission.

Before showing how to configure your Figma app credentials, let’s go through the steps to create a Figma app.

Create a Figma app

To integrate with Figma’s API, you’ll need to set up OAuth 2.0 authentication by creating an app in the Figma Developer Portal:

Access the Figma Developer Portal

Navigate to the Figma Developer Portal  and sign in with your existing Figma credentials or create a new .

Create a new app

  1. Once logged in, go to your developer dashboard and select “My Apps”
  2. Click on “Create a new app”
  3. Fill in the required details:
    • App Name: Choose a descriptive name for your application
    • Website: Provide the URL of your application’s website
    • App Logo: Upload a 100x100px PNG image representing your app

Set up OAuth configuration

  1. After creating your app, you’ll receive a client_id and client_secret
  2. Set the redirect URI to the redirect URL generated by Arcade (see configuration section below)
  3. Configure the required scopes for your application:
    • files:read - Read access to files
    • file_comments:write - Write access to file comments
    • Add other scopes as needed for your use case

For detailed instructions, refer to Figma’s official Authentication documentation .

Next, add the Figma app to Arcade.

Configuring your own Figma Auth Provider in Arcade

Configure Figma Auth Using the Arcade Dashboard GUI

Access the Arcade Dashboard

To access the Arcade Cloud dashboard, go to api.arcade.dev/dashboard . If you are self-hosting, by default the dashboard will be available at http://localhost:9099/dashboard . Adjust the host and port number to match your environment.

  • Under the OAuth section of the Arcade Dashboard left-side menu, click Providers.
  • Click Add OAuth Provider in the top right corner.
  • Select the OAuth 2.0 tab at the top.

Enter the provider details

  • Choose a unique ID for your provider (e.g. “arcade-figma”).
  • Optionally enter a Description.
  • Enter the Client ID and Client Secret from your Figma app.
  • Configure the OAuth 2.0 endpoints:
    • Authorization URL: https://www.figma.com/oauth
    • Token URL: https://www.figma.com/api/oauth/token
  • Note the Redirect URL generated by Arcade. This must be set as your Figma app’s redirect URI.

Create the provider

Hit the Create button and the provider will be ready to be used.

When you use tools that require Figma auth using your Arcade credentials, Arcade will automatically use this Figma OAuth provider. If you have multiple Figma providers, see using multiple auth providers of the same type for more information.

Using Figma auth in app code

Use the Figma in your own and AI apps to get a token for the Figma API. See authorizing agents with Arcade to understand how this works.

Use client.auth.start() to get a token for the Figma API:

Python
from arcadepy import Arcade client = Arcade() # Automatically finds the `ARCADE_API_KEY` env variable user_id = "{arcade_user_id}" # Start the authorization process auth_response = client.auth.start( user_id=user_id, provider="arcade-figma", scopes=["files:read", "file_comments:write"] ) if auth_response.status != "completed": print("Please complete the authorization challenge in your browser:") print(auth_response.url) # Wait for the authorization to complete auth_response = client.auth.wait_for_completion(auth_response) token = auth_response.context.token # Do something interesting with the token...

Using Figma auth in custom tools

You can use the pre-built Arcade Figma MCP Server to quickly build and AI apps that interact with Figma.

If the pre-built tools in the Figma Server don’t meet your needs, you can author your own custom tools that interact with the Figma API.

Use the OAuth2() auth class to specify that a requires authorization with Figma. The context.authorization.token field will be automatically populated with the ’s Figma token:

Python
from typing import Annotated import httpx from arcade_tdk import ToolContext, tool from arcade_tdk.auth import OAuth2 @tool( requires_auth=OAuth2( provider_id="arcade-figma", scopes=["files:read"] ) ) async def get_figma_file( context: ToolContext, file_key: Annotated[str, "The Figma file key to retrieve."], ) -> Annotated[dict, "The Figma file data."]: """ Retrieve a Figma file by its key. """ url = f"https://api.figma.com/v1/files/{file_key}" headers = { "Authorization": context.authorization.token, } async with httpx.AsyncClient() as client: response = await client.get(url, headers=headers) response.raise_for_status() return dict(response.json())

Available Scopes

Figma supports various OAuth scopes that determine the level of access your application has:

  • files:read - Read access to files
  • file_comments:write - Write access to file comments
  • file_dev_resources:write - Write access to dev resources
  • file_variables:read - Read access to variables
  • file_variables:write - Write access to variables
  • webhooks:write - Write access to webhooks

For a complete list of available scopes and their descriptions, refer to the Figma API documentation .

Last updated on