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:
- The Arcade Figma MCP Server, which provides pre-built for interacting with Figma
- Your app code that needs to call the Figma API
- Or, your custom tools that need to call the Figma API
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
- Once logged in, go to your developer dashboard and select “My Apps”
- Click on “Create a new app”
- 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
- After creating your app, you’ll receive a
client_id
andclient_secret
- Set the redirect URI to the redirect URL generated by Arcade (see configuration section below)
- Configure the required scopes for your application:
files:read
- Read access to filesfile_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
Dashboard GUI
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.
Navigate to the OAuth Providers page
- 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
- Authorization URL:
- 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:
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 filesfile_comments:write
- Write access to file commentsfile_dev_resources:write
- Write access to dev resourcesfile_variables:read
- Read access to variablesfile_variables:write
- Write access to variableswebhooks:write
- Write access to webhooks
For a complete list of available scopes and their descriptions, refer to the Figma API documentation .