​
Prerequisites

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

​
Step 1: Create Figma Developer Account

  1. Visit 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

​
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

​
Step 3: Get Your Credentials

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

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
  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: 
    const authUrl = `https://api.klavis.ai/oauth/figma/authorize?instance_id=${instanceId}&client_id=${yourClientId}`;
For detailed white labeling implementation and code examples, see our OAuth & White Labeling guide.

​
Resources