> ## Documentation Index
> Fetch the complete documentation index at: https://www.klavis.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Setting Up Figma OAuth App

> Complete guide to creating and configuring a Figma OAuth application

## Prerequisites

* Figma account (personal or business)
* Access to Figma Developer Portal

## Step 1: Create Figma Developer Account

1. Visit [https://www.figma.com/developers/](https://www.figma.com/developers/)
2. Click **"Sign Up"** or **"Login"** if you already have an account
3. Sign in with your Figma account or create a new developer account

![Figma Developer Login](https://mintcdn.com/klavisai/2FN45VVIW760Qvl2/images/knowledge-base/figma_oauth_app/figma_step1_login.png?fit=max\&auto=format\&n=2FN45VVIW760Qvl2\&q=85\&s=d1933544c63edc08d8765214ea53639e)

## Step 2: Create a New App

1. Once logged in, go to your developer dashboard -> **"My Apps"**
2. Click **"Create a new app"**
3. Fill in the app details:
   * **App name**: Your application name (e.g., your brand name)
   * **Website**: Your company website
   * **App logo**: Upload 100x100px PNG (recommended)

![Figma App Creation Form](https://mintcdn.com/klavisai/2FN45VVIW760Qvl2/images/knowledge-base/figma_oauth_app/figma_step2_create_app.png?fit=max\&auto=format\&n=2FN45VVIW760Qvl2\&q=85\&s=885cbbadf00835b5bfcd54ad564af2bd)

## Step 3: Get Your Credentials

> [!NOTE]
>
> Klavis Figma MCP Server uses the following OAuth scopes: `files:read,file_comments:write,openid,email,profile`

After creating the app, navigate to **OAuth 2.0** tab

* **Client ID**: Copy this value
* **Client Secret**: Generate and copy this value (keep it secure!)
* **Redirect URIs**: Add your callback URL:
  * `https://api.klavis.ai/oauth/figma/callback`

![OAuth Settings and Getting the Credentials](https://mintcdn.com/klavisai/2FN45VVIW760Qvl2/images/knowledge-base/figma_oauth_app/figma_step3_client_id_secret_and_redirect_url.png?fit=max\&auto=format\&n=2FN45VVIW760Qvl2\&q=85\&s=650f6874d08fff3d5c89164732d13b22)

> [!TIP]
>
> You have successfully created a Figma OAuth application! You now have your Client ID and Client Secret ready for integration with Klavis AI.

## (Optional) Step 4: White Labeling

> [!NOTE]
>
> White labeling allows you to customize the OAuth experience with your own branding instead of Klavis AI's.

If you want to use your own Figma OAuth application with custom branding:

1. **Configure White Labeling**: Go to [https://www.klavis.ai/home/white-label](https://www.klavis.ai/home/white-label)
2. **Add Your Credentials**: Enter your Figma **Client ID** and **Client Secret** from Step 3
3. **Set Redirect URI**: Use `https://api.klavis.ai/oauth/figma/callback` or your custom callback URL
4. **Initiate OAuth**: Use your client ID when starting the OAuth flow:

   ```javascript without SDK theme={null}
   // Example: Initiating Figma OAuth with white-label
   const authUrl = `https://api.klavis.ai/oauth/figma/authorize?instance_id=${instanceId}&client_id=${yourClientId}`;
   window.location.href = authUrl;
   ```

   ```typescript TypeScript SDK theme={null}
   import { Klavis } from "@klavis/sdk";

   const klavis = new Klavis({
     apiKey: "YOUR_API_KEY"
   });

   // Example: Initiating Figma OAuth with white-label
   const oauthUrl = await klavis.mcpServer.getOAuthUrl({
     serverName: Klavis.McpServerName.Figma,
     instanceId: instanceId,
     clientId: yourClientId,
     // redirectUri: YOUR_REDIRECT_URI,
     // scope: "YOUR_SCOPES", 
   });

   window.location.href = oauthUrl;
   ```

   ```python Python SDK theme={null}
   import webbrowser
   from klavis import Klavis
   from klavis.types import McpServerName

   klavis = Klavis(api_key="YOUR_API_KEY")

   # Example: Initiating Figma OAuth with white-label
   oauth_url = klavis.mcp_server.get_oauth_url(
       server_name=McpServerName.FIGMA,
       instance_id=instance_id,
       client_id=your_client_id,
       # redirect_uri="YOUR_REDIRECT_URI",
       # scope="YOUR_SCOPES"
   )

   # Open OAuth URL in user's default browser
   webbrowser.open(oauth_url)
   ```

> [!TIP]
>
> For detailed white labeling implementation and code examples, see our [OAuth & White Labeling guide](https://www.klavis.ai/docs/auth/white-label.md).

## Resources

* [Figma Developer Documentation](https://www.figma.com/developers/api)
* [Figma OAuth 2.0 Authentication Guide](https://www.figma.com/developers/api#authentication)
* [Klavis OAuth & White Labeling Guide](https://www.klavis.ai/docs/auth/white-label.md)
* [Klavis White Label Dashboard](https://www.klavis.ai/home/white-label)
* [Figma API Scopes Reference](https://www.figma.com/developers/api#authentication-scopes)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.