Skip to content
Scalekit Docs
Talk to an Engineer Dashboard

Connect AI agents to Figma

Scalekit connector
Open markdown

The Figma connector lets your AI agent act in each user's Figma account. Each user signs in to Figma once, and Scalekit stores and refreshes their tokens, so your agent never handles credentials. It comes with 54 tools.

Tools
54
What they doRead · write · destructive
43 · 7 · 443 read7 write4 destructive
Users sign in with
OAuth app
Your own Figma app

Setup

  1. Install the SDK

    Terminal window
    npm install @scalekit-sdk/node dotenv

  2. Set your credentials

    Add your Scalekit credentials to your .env file. Find values in app.scalekit.com > Developers > API Credentials.

    .env
    SCALEKIT_ENVIRONMENT_URL=<your-environment-url>
    SCALEKIT_CLIENT_ID=<your-client-id>
    SCALEKIT_CLIENT_SECRET=<your-client-secret>

  3. Create the Figma connection

    In AgentKit > Connections, create a Figma connection and copy its redirect URI. The name you give it is the connection_name your code passes. See Configure connections.

  4. Register an OAuth app

    Figma connections use your own OAuth app. Register one with Figma and add the redirect URI you copied.

    Then enter the app's Client ID and Client Secret on the Figma connection.

    Console steps with screenshots

    Register your Figma app credentials with Scalekit so it can manage the OAuth 2.0 authentication flow and token lifecycle on your behalf. You’ll need a Client ID and Client Secret from the Figma Developers portal.

    1. Create a Figma connection in Scalekit

      • In Scalekit dashboard, go to AgentKit > Connections > Create Connection. Search for Figma and click Create.

        Search for Figma and create a new connection

      • In the Configure Figma Connection panel, copy the Redirect URI. It looks like https://<SCALEKIT_ENVIRONMENT_URL>/sso/v1/oauth/<CONNECTION_ID>/callback. You’ll paste this into Figma in the next step.

        Copy the Redirect URI from the Configure Figma Connection panel

    2. Create an app in the Figma Developers portal

      • Go to the Figma Developers portal and sign in. Click + Create a new app.

        Figma Developers portal showing the My apps list and Create a new app button

      • Fill in your app name and description, then click Save.

    3. Add the redirect URI and copy credentials

      • Open your app and click the OAuth credentials tab.

      • Under Redirect URLs, click Add a redirect URL and paste the Redirect URI you copied from Scalekit.

      • Copy the Client ID from the same tab.

      • Copy the Client Secret. Store it securely — never commit it to source control.

        Figma app OAuth credentials tab showing Client ID, Client Secret, and Redirect URLs

    4. Add credentials in Scalekit

      • In Scalekit dashboard, go to AgentKit > Connections and open the Figma connection you created.

      • Enter your credentials:

        • Client ID — from the Figma OAuth credentials tab
        • Client Secret — copied in the previous step
        • Scopes — select the permissions your app needs:
          • files:read — read files, nodes, images, components, and styles
          • file_variables:read — read local and published variables
          • file_variables:write — create, update, and delete variables
          • webhooks:write — create, update, and delete team webhooks

        Scalekit Figma connection with Client ID, Client Secret, and scopes filled in

      • Click Save.

  5. Authorize a user and make your first call

    quickstart.mts
    import { ScalekitClient } from '@scalekit-sdk/node'
    import 'dotenv/config'
    import { createInterface } from 'node:readline/promises'
    

    const scalekit = new ScalekitClient(
      process.env.SCALEKIT_ENVIRONMENT_URL,
      process.env.SCALEKIT_CLIENT_ID,
      process.env.SCALEKIT_CLIENT_SECRET,
    )
    const actions = scalekit.actions
    

    const connector = 'figma'
    const identifier = 'user_123'
    

    // Generate an authorization link for the user
    const { link } = await actions.getAuthorizationLink({ connectionName: connector, identifier })
    console.log('Authorize Figma:', link)
    const rl = createInterface({ input: process.stdin, output: process.stdout })
    await rl.question('Press Enter after authorizing...')
    rl.close()
    

    // Make your first call
    const result = await actions.executeTool({
      connector,
      identifier,
      toolName: 'figma_activity_logs_list',
      toolInput: {},
    })
    console.log(result)
    Terminal window
    npx tsx quickstart.mts

    Each user signs in once. See Authorize a user for the full flow and statuses.

Tools

Pass the exact name to execute_tool
Try in PlaygroundRequest a tool
  • figma_activity_logs_listReturns activity log events for an organization (Enterprise only).Read-only

    List Activity Logs

    Returns activity log events for an organization (Enterprise only). Includes events for file edits, permissions changes, and user actions.

    Inputs

    cursorstring
    Pagination cursor from the previous response to fetch the next batch of events.
    end_timeinteger
    Unix timestamp (seconds) to stop fetching events at.
    eventsstring
    Comma-separated event types to filter. All returned by default.
    limitinteger
    Maximum number of events to return (1-1000, default 100).
    orderstring
    Sort order: asc or desc by timestamp. Default is desc.
    start_timeinteger
    Unix timestamp (seconds) to start fetching events from.
  • figma_ai_usage_daily_getReturn per-user, per-day AI credit usage for the plan associated with the calling token (Enterprise orgs).Read-only

    Get Daily AI Usage

    Return per-user, per-day AI credit usage for the plan associated with the calling token (Enterprise orgs). Requires a plan access token with the org:ai_metering_usage_read scope.

    Inputs

    end_datestringrequired
    End of the date range (YYYY-MM-DD), required
    start_datestringrequired
    Start of the date range (YYYY-MM-DD), required
    cursorstring
    Pagination cursor from a previous response
    limitinteger
    Maximum number of results to return (1-1000, default 1000)
    user_emailstring
    Filter results to a single user's email
  • figma_comment_reactions_listReturns a list of emoji reactions on a specific comment in a Figma file.Read-only

    List Comment Reactions

    Returns a list of emoji reactions on a specific comment in a Figma file.

    Inputs

    comment_idstringrequired
    The ID of the comment to get reactions for.
    file_keystringrequired
    The unique key of the Figma file.
    cursorstring
    Pagination cursor for next page of results.
  • figma_component_getReturns metadata for a published component by its key, including name, description, thumbnail, and containing file information.Read-only

    Get Component

    Returns metadata for a published component by its key, including name, description, thumbnail, and containing file information.

    Inputs

    keystringrequired
    The unique key of the component.
  • figma_component_set_getReturns metadata for a published component set (a group of related component variants) by its key.Read-only

    Get Component Set

    Returns metadata for a published component set (a group of related component variants) by its key.

    Inputs

    keystringrequired
    The unique key of the component set.
  • figma_dev_resources_listReturns dev resources (links to external tools like Storybook, Jira, etc.) attached to nodes in a Figma file.Read-only

    List Dev Resources

    Returns dev resources (links to external tools like Storybook, Jira, etc.) attached to nodes in a Figma file.

    Inputs

    file_keystringrequired
    The key of the Figma file to get dev resources for.
    node_idsstring
    Comma-separated node IDs to filter by. Omit to return all dev resources in the file.
  • figma_developer_logs_listReturn developer log entries for REST API and MCP server requests made within the organization, optionally filtered by token type/value, user email, IP address, or event source.Read-only

    List Developer Logs

    Return developer log entries for REST API and MCP server requests made within the organization, optionally filtered by token type/value, user email, IP address, or event source. Requires a plan access token with the org:developer_log_read scope. Complements figma_activity_logs_list, which covers design/file activity rather than API usage.

    Inputs

    event_sourcestring
    Filter by event source
    ip_addressstring
    Filter by IP address prefix(es), comma-separated
    tokenstring
    Filter by token value(s), comma-separated
    token_namestring
    Filter by token name prefix(es), comma-separated
    token_typestring
    Filter by the type of token used for authenticationone of plan_access_tokendeveloper_tokenoauth_token
    user_emailstring
    Filter by user email prefix(es), comma-separated
  • figma_file_comments_listReturns all comments left on a Figma file, including their text, author, position, and resolved status.Read-only

    List File Comments

    Returns all comments left on a Figma file, including their text, author, position, and resolved status.

    Inputs

    file_keystringrequired
    The unique key of the Figma file.
    as_mdboolean
    If true, returns comment text as Markdown.

Workflows

Proxy API call
const me = await actions.request({
  connectionName: 'figma',
  identifier: 'user_123',
  path: '/v1/me',
  method: 'GET',
});
console.log('Authenticated user:', me);


// Example: fetch a file's document tree
const file = await actions.request({
  connectionName: 'figma',
  identifier: 'user_123',
  path: '/v1/files/YOUR_FILE_KEY',
  method: 'GET',
});
console.log('File:', file);
Execute a tool
const result = await actions.executeTool({
  connector: 'figma',
  identifier: 'user_123',
  toolName: 'figma_activity_logs_list',
  toolInput: {},
});
console.log(result);
All 22 in Design