> ## 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

<img src="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" alt="Figma Developer Login" width="1920" height="1080" data-path="images/knowledge-base/figma_oauth_app/figma_step1_login.png" />

## 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)

<img src="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" alt="Figma App Creation Form" width="1920" height="1080" data-path="images/knowledge-base/figma_oauth_app/figma_step2_create_app.png" />

## Step 3: Get Your Credentials

<Note>
  Klavis Figma MCP Server uses the following OAuth scopes: `files:read,file_comments:write,openid,email,profile`
</Note>

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`

<img src="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" alt="OAuth Settings and Getting the Credentials" width="1920" height="1080" data-path="images/knowledge-base/figma_oauth_app/figma_step3_client_id_secret_and_redirect_url.png" />

<Check>
  You have successfully created a Figma OAuth application! You now have your Client ID and Client Secret ready for integration with Klavis AI.
</Check>

## (Optional) Step 4: White Labeling

<Note>
  White labeling allows you to customize the OAuth experience with your own branding instead of Klavis AI's.
</Note>

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:

   <CodeGroup>
     ```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)
     ```
   </CodeGroup>

<Tip>
  For detailed white labeling implementation and code examples, see our [OAuth & White Labeling guide](/auth/white-label).
</Tip>

## 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](/auth/white-label)
* [Klavis White Label Dashboard](https://www.klavis.ai/home/white-label)
* [Figma API Scopes Reference](https://www.figma.com/developers/api#authentication-scopes)