> **Building with AI coding agents?** If you're using an AI coding agent, install the official Scalekit plugin. It gives your agent full awareness of the Scalekit API — reducing hallucinations and enabling faster, more accurate code generation. > > - **Claude Code**: `/plugin marketplace add scalekit-inc/claude-code-authstack` then `/plugin install @scalekit-auth-stack` > - **GitHub Copilot CLI**: `copilot plugin marketplace add scalekit-inc/github-copilot-authstack` then `copilot plugin install @scalekit-auth-stack` > - **Codex**: run the bash installer, restart, then open Plugin Directory and enable `` > - **Skills CLI** (Windsurf, Cline, 40+ agents): `npx skills add scalekit-inc/skills --list` then `--skill ` > > `` / ``: `agentkit`, `full-stack-auth`, `mcp-auth`, `modular-sso`, `modular-scim` — [Full setup guide](https://docs.scalekit.com/dev-kit/build-with-ai/) --- # Figma **Authentication:** OAuth 2.0 **Categories:** Files, Documents ## What you can do Connect this agent connector to let your agent: - **Delete comment reaction, dev resource, file comment** — Removes the authenticated user's emoji reaction from a comment in a Figma file - **List file components, file component sets, file styles** — Returns a list of all published components in a Figma file, including their keys, names, descriptions, and thumbnails - **Create file comment, webhook, comment reaction** — Posts a new comment on a Figma file - **Get webhook, file variables local, file image fills** — Returns details of a specific Figma webhook by its ID, including event type, endpoint, and status - **Update file variables, webhook, dev resource** — Creates, updates, or deletes variables and variable collections in a Figma file - **Render file images** — Renders nodes from a Figma file as images (PNG, JPG, SVG, or PDF) and returns URLs to download them ## Authentication This connector uses **OAuth 2.0**. Scalekit acts as the OAuth client: it redirects your user to Figma, obtains an access token, and automatically refreshes it before it expires. Your agent code never handles tokens directly — you only pass a `connectionName` and a user `identifier`. You supply your Figma **Connected App** credentials (Client ID + Secret) once per environment in the Scalekit dashboard. Before calling this connector from your code, create the Figma connection in **AgentKit** > **Connections** and copy the exact **Connection name** from that connection into your code. The value in code must match the dashboard exactly. ## Set up the connector 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](https://www.figma.com/developers). 1. ### Create a Figma connection in Scalekit - In [Scalekit dashboard](https://app.scalekit.com), go to **AgentKit** > **Connections** > **Create Connection**. Search for **Figma** and click **Create**. > Image: Search for Figma and create a new connection - In the **Configure Figma Connection** panel, copy the **Redirect URI**. It looks like `https:///sso/v1/oauth//callback`. You'll paste this into Figma in the next step. > Image: 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](https://www.figma.com/developers/apps) and sign in. Click **+ Create a new app**. > Image: 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. > Image: Figma app OAuth credentials tab showing Client ID, Client Secret, and Redirect URLs > caution: Client secret is shown once > > The Client Secret is masked after the initial creation. If you lose it, you must generate a new one in the Figma app settings. 4. ### Add credentials in Scalekit - In [Scalekit dashboard](https://app.scalekit.com), 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 > Image: Scalekit Figma connection with Client ID, Client Secret, and scopes filled in - Click **Save**. ## Code examples Connect a user's Figma account and make API calls on their behalf — Scalekit handles OAuth and token management automatically. ## Proxy API calls ### Node.js ```typescript const connectionName = 'figma'; // get your connection name from connection configurations const identifier = 'user_123'; // your unique user identifier // Get your credentials from app.scalekit.com → Developers → Settings → API Credentials const scalekit = new ScalekitClient( process.env.SCALEKIT_ENV_URL, process.env.SCALEKIT_CLIENT_ID, process.env.SCALEKIT_CLIENT_SECRET ); const actions = scalekit.actions; // Step 1: Generate an authorization link and present it to your user const { link } = await actions.getAuthorizationLink({ connectionName, identifier, }); console.log('Authorize Figma:', link); process.stdout.write('Press Enter after authorizing...'); await new Promise(r => process.stdin.once('data', r)); // Step 2: Make API requests via the Scalekit proxy — no token management needed const me = await actions.request({ connectionName, identifier, path: '/v1/me', method: 'GET', }); console.log('Authenticated user:', me); // Example: fetch a file's document tree const file = await actions.request({ connectionName, identifier, path: '/v1/files/YOUR_FILE_KEY', method: 'GET', }); console.log('File:', file); ``` ### Python ```python from dotenv import load_dotenv load_dotenv() connection_name = "figma" # get your connection name from connection configurations identifier = "user_123" # your unique user identifier # Get your credentials from app.scalekit.com → Developers → Settings → API Credentials scalekit_client = scalekit.client.ScalekitClient( client_id=os.getenv("SCALEKIT_CLIENT_ID"), client_secret=os.getenv("SCALEKIT_CLIENT_SECRET"), env_url=os.getenv("SCALEKIT_ENV_URL"), ) actions = scalekit_client.actions # Step 1: Generate an authorization link and present it to your user link_response = actions.get_authorization_link( connection_name=connection_name, identifier=identifier ) print("Authorize Figma:", link_response.link) input("Press Enter after authorizing...") # Step 2: Make API requests via the Scalekit proxy — no token management needed me = actions.request( connection_name=connection_name, identifier=identifier, path="/v1/me", method="GET" ) print("Authenticated user:", me) # Example: fetch a file's document tree file = actions.request( connection_name=connection_name, identifier=identifier, path="/v1/files/YOUR_FILE_KEY", method="GET" ) print("File:", file) ``` ## Scalekit tools ## Tool list Use the exact tool names from the **Tool list** below when you call `execute_tool`. If you're not sure which name to use, list the tools available for the current user first. ## Tool list ### `figma_activity_logs_list` Returns activity log events for an organization (Enterprise only). Includes events for file edits, permissions changes, and user actions. Parameters: - `cursor` (`string`, optional): Cursor from previous response for pagination. - `end_time` (`integer`, optional): Unix timestamp (seconds) to stop fetching events at. - `event_type` (`string`, optional): Filter by a specific event type, e.g. 'file.update'. - `limit` (`integer`, optional): Maximum number of events to return (1-1000, default 100). - `order` (`string`, optional): Sort order: asc or desc by timestamp. Default is desc. - `start_time` (`integer`, optional): Unix timestamp (seconds) to start fetching events from. ### `figma_comment_reaction_create` Adds an emoji reaction to a comment in a Figma file. Parameters: - `comment_id` (`string`, required): The ID of the comment to react to. - `emoji` (`string`, required): The emoji to react with (e.g. ':thumbsup:'). - `file_key` (`string`, required): The unique key of the Figma file. ### `figma_comment_reaction_delete` Removes the authenticated user's emoji reaction from a comment in a Figma file. Parameters: - `comment_id` (`string`, required): The ID of the comment to remove reaction from. - `emoji` (`string`, required): The emoji reaction to remove (e.g. ':thumbsup:'). - `file_key` (`string`, required): The unique key of the Figma file. ### `figma_comment_reactions_list` Returns a list of emoji reactions on a specific comment in a Figma file. Parameters: - `comment_id` (`string`, required): The ID of the comment to get reactions for. - `file_key` (`string`, required): The unique key of the Figma file. - `cursor` (`string`, optional): Pagination cursor for next page of results. ### `figma_component_get` Returns metadata for a published component by its key, including name, description, thumbnail, and containing file information. Parameters: - `key` (`string`, required): The unique key of the component. ### `figma_component_set_get` Returns metadata for a published component set (a group of related component variants) by its key. Parameters: - `key` (`string`, required): The unique key of the component set. ### `figma_dev_resource_create` Creates a dev resource (external link) attached to a node in a Figma file, such as a link to Storybook, Jira, or documentation. Parameters: - `file_key` (`string`, required): The key of the Figma file containing the target node. - `name` (`string`, required): Display name for the dev resource link. - `node_id` (`string`, required): The ID of the node to attach the dev resource to. - `url` (`string`, required): The URL of the external resource. ### `figma_dev_resource_delete` Permanently deletes a dev resource from a node in a Figma file. Parameters: - `dev_resource_id` (`string`, required): The ID of the dev resource to delete. - `file_key` (`string`, required): The key of the Figma file containing the dev resource. ### `figma_dev_resource_update` Updates an existing dev resource attached to a node in a Figma file. Parameters: - `dev_resource_id` (`string`, required): The ID of the dev resource to update. - `name` (`string`, optional): New display name for the dev resource. - `url` (`string`, optional): New URL for the dev resource. ### `figma_dev_resources_list` Returns dev resources (links to external tools like Storybook, Jira, etc.) attached to nodes in a Figma file. Parameters: - `file_key` (`string`, required): The key of the Figma file to get dev resources for. - `node_ids` (`string`, optional): Comma-separated node IDs to filter by. Omit to return all dev resources in the file. ### `figma_file_comment_create` Posts a new comment on a Figma file. Can be placed at a specific canvas position or anchored to a specific node. Parameters: - `file_key` (`string`, required): The unique key of the Figma file. - `message` (`string`, required): The text content of the comment. - `client_meta` (`string`, optional): JSON string specifying position or node anchor for the comment, e.g. {"node_id":"1:2","node_offset":{"x":0,"y":0}}. ### `figma_file_comment_delete` Deletes a specific comment from a Figma file. Only the comment author or file owner can delete a comment. Parameters: - `comment_id` (`string`, required): The ID of the comment to delete. - `file_key` (`string`, required): The unique key of the Figma file. ### `figma_file_comments_list` Returns all comments left on a Figma file, including their text, author, position, and resolved status. Parameters: - `file_key` (`string`, required): The unique key of the Figma file. - `as_md` (`boolean`, optional): If true, returns comment text as Markdown. ### `figma_file_component_sets_list` Returns all published component sets in a Figma file. Parameters: - `file_key` (`string`, required): The unique key of the Figma file. ### `figma_file_components_list` Returns a list of all published components in a Figma file, including their keys, names, descriptions, and thumbnails. Parameters: - `file_key` (`string`, required): The unique key of the Figma file. ### `figma_file_get` Returns a Figma file's full document tree including all nodes, components, styles, and metadata. Parameters: - `file_key` (`string`, required): The unique key of the Figma file (found in the file URL). - `depth` (`integer`, optional): Depth of the document tree to return (1-4). Lower depth returns faster. - `version` (`string`, optional): A specific version ID to get. Omit to get the current version. ### `figma_file_image_fills_get` Returns download URLs for all image fills used in a Figma file. Image fills are images that have been applied as fills to nodes. Parameters: - `file_key` (`string`, required): The unique key of the Figma file. ### `figma_file_images_render` Renders nodes from a Figma file as images (PNG, JPG, SVG, or PDF) and returns URLs to download them. Parameters: - `file_key` (`string`, required): The unique key of the Figma file. - `ids` (`string`, required): Comma-separated list of node IDs to render. - `format` (`string`, optional): Image format: jpg, png, svg, or pdf. Default is png. - `scale` (`number`, optional): Image scale factor (0.01 to 4). Default is 1. - `version` (`string`, optional): A specific version ID to render from. ### `figma_file_nodes_get` Returns specific nodes from a Figma file by their node IDs, along with their children and associated styles and components. Parameters: - `file_key` (`string`, required): The unique key of the Figma file. - `ids` (`string`, required): Comma-separated list of node IDs to retrieve. - `depth` (`integer`, optional): Depth of the document tree to return for each node. - `version` (`string`, optional): A specific version ID to fetch nodes from. ### `figma_file_styles_list` Returns all published styles in a Figma file, including color, text, effect, and grid styles. Parameters: - `file_key` (`string`, required): The unique key of the Figma file. ### `figma_file_variables_local_get` Returns all local variables and variable collections defined in a Figma file. Requires the variables:read scope. Parameters: - `file_key` (`string`, required): The unique key of the Figma file. ### `figma_file_variables_published_get` Returns all published variables and variable collections from a Figma file's library. Requires the variables:read scope. Parameters: - `file_key` (`string`, required): The unique key of the Figma file. ### `figma_file_variables_update` Creates, updates, or deletes variables and variable collections in a Figma file. Accepts a JSON payload describing the changes. Requires the variables:write scope. Parameters: - `file_key` (`string`, required): The unique key of the Figma file. - `payload` (`string`, required): JSON string with variableCollections, variables, and variableModeValues arrays describing changes to apply. ### `figma_file_versions_list` Returns the version history of a Figma file, including version IDs, labels, descriptions, and creation timestamps. Parameters: - `file_key` (`string`, required): The unique key of the Figma file. - `after` (`string`, optional): Return versions created after this version ID (for pagination). - `before` (`string`, optional): Return versions created before this version ID (for pagination). - `page_size` (`integer`, optional): Number of versions to return per page. ### `figma_library_analytics_component_actions_get` Returns analytics data on component insertion, detachment, and usage actions from a library file. Enterprise only. Parameters: - `file_key` (`string`, required): The key of the library Figma file. - `group_by` (`string`, required): Dimension to group results by: component or team. - `cursor` (`string`, optional): Pagination cursor from previous response. - `end_date` (`string`, optional): End date for analytics in YYYY-MM-DD format. - `start_date` (`string`, optional): Start date for analytics in YYYY-MM-DD format. ### `figma_library_analytics_component_usages_get` Returns a snapshot of how many times each component from a library is used across the organization. Enterprise only. Parameters: - `file_key` (`string`, required): The key of the library Figma file. - `cursor` (`string`, optional): Pagination cursor from previous response. ### `figma_library_analytics_style_actions_get` Returns analytics data on style insertion and detachment actions from a library file. Enterprise only. Parameters: - `file_key` (`string`, required): The key of the library Figma file. - `group_by` (`string`, required): Dimension to group results by: style or team. - `cursor` (`string`, optional): Pagination cursor from previous response. - `end_date` (`string`, optional): End date for analytics in YYYY-MM-DD format. - `start_date` (`string`, optional): Start date for analytics in YYYY-MM-DD format. ### `figma_library_analytics_style_usages_get` Returns a snapshot of how many times each style from a library is used across the organization. Enterprise only. Parameters: - `file_key` (`string`, required): The key of the library Figma file. - `cursor` (`string`, optional): Pagination cursor from previous response. ### `figma_library_analytics_variable_actions_get` Returns analytics data on variable actions from a library file. Enterprise only. Parameters: - `file_key` (`string`, required): The key of the library Figma file. - `group_by` (`string`, required): Dimension to group results by: variable or team. - `cursor` (`string`, optional): Pagination cursor from previous response. - `end_date` (`string`, optional): End date for analytics in YYYY-MM-DD format. - `start_date` (`string`, optional): Start date for analytics in YYYY-MM-DD format. ### `figma_library_analytics_variable_usages_get` Returns a snapshot of how many times each variable from a library is used across the organization. Enterprise only. Parameters: - `file_key` (`string`, required): The key of the library Figma file. - `cursor` (`string`, optional): Pagination cursor from previous response. ### `figma_me_get` Returns the authenticated user's information including name, email, and profile image URL. ### `figma_payments_get` Returns payment and plan information for a Figma user or resource, including subscription status and plan type. Parameters: - `resource_id` (`string`, optional): The ID of the plugin or widget resource. - `resource_type` (`string`, optional): The type of resource: plugin or widget. - `user_id` (`string`, optional): The ID of the user to get payment info for. ### `figma_project_files_list` Returns all files in a Figma project, including file keys, names, thumbnails, and last modified timestamps. Parameters: - `project_id` (`string`, required): The ID of the Figma project. - `branch_data` (`boolean`, optional): If true, includes branch metadata for each file. ### `figma_style_get` Returns metadata for a published style by its key, including name, description, style type, and containing file information. Parameters: - `key` (`string`, required): The unique key of the style. ### `figma_team_component_sets_list` Returns all published component sets in a Figma team library, with pagination support. Parameters: - `team_id` (`string`, required): The ID of the Figma team. - `after` (`integer`, optional): Cursor for the next page of results. - `before` (`integer`, optional): Cursor for the previous page of results. - `page_size` (`integer`, optional): Number of component sets to return per page. ### `figma_team_components_list` Returns all published components in a Figma team library, with pagination support. Parameters: - `team_id` (`string`, required): The ID of the Figma team. - `after` (`integer`, optional): Cursor for the next page of results. - `before` (`integer`, optional): Cursor for the previous page of results. - `page_size` (`integer`, optional): Number of components to return per page. ### `figma_team_get` Returns metadata about a Figma team, including its name and member count. Parameters: - `team_id` (`string`, required): The ID of the Figma team. ### `figma_team_projects_list` Returns all projects within a Figma team that the authenticated user has access to. Parameters: - `team_id` (`string`, required): The ID of the Figma team. ### `figma_team_styles_list` Returns all published styles in a Figma team library, with pagination support. Parameters: - `team_id` (`string`, required): The ID of the Figma team. - `after` (`integer`, optional): Cursor for the next page of results. - `before` (`integer`, optional): Cursor for the previous page of results. - `page_size` (`integer`, optional): Number of styles to return per page. ### `figma_team_webhooks_list` Returns all webhooks registered for a Figma team. Parameters: - `team_id` (`string`, required): The ID of the Figma team. ### `figma_webhook_create` Creates a new webhook that sends events to the specified endpoint URL when Figma events occur in a team. Parameters: - `endpoint` (`string`, required): The HTTPS URL to send webhook payloads to. - `event_type` (`string`, required): The event type to subscribe to: FILE_UPDATE, FILE_DELETE, FILE_VERSION_UPDATE, FILE_COMMENT, LIBRARY_PUBLISH. - `passcode` (`string`, required): A passcode included in the webhook payload for verification. - `team_id` (`string`, required): The ID of the team to subscribe to events for. - `description` (`string`, optional): Optional description for the webhook. - `status` (`string`, optional): Webhook status: ACTIVE or PAUSED. ### `figma_webhook_delete` Permanently deletes a Figma webhook. This stops all future event deliveries for this webhook. Parameters: - `webhook_id` (`string`, required): The ID of the webhook to delete. ### `figma_webhook_get` Returns details of a specific Figma webhook by its ID, including event type, endpoint, and status. Parameters: - `webhook_id` (`string`, required): The ID of the webhook. ### `figma_webhook_requests_list` Returns the delivery history for a webhook, including request payloads, response codes, and timestamps. Parameters: - `webhook_id` (`string`, required): The ID of the webhook. ### `figma_webhook_update` Updates an existing Figma webhook's endpoint, passcode, status, or description. Parameters: - `webhook_id` (`string`, required): The ID of the webhook to update. - `description` (`string`, optional): Updated description for the webhook. - `endpoint` (`string`, optional): New HTTPS URL to send webhook payloads to. - `passcode` (`string`, optional): New passcode for webhook verification. - `status` (`string`, optional): Webhook status: ACTIVE or PAUSED. --- ## More Scalekit documentation | Resource | What it contains | When to use it | |----------|-----------------|----------------| | [/llms.txt](/llms.txt) | Structured index with routing hints per product area | Start here — find which documentation set covers your topic before loading full content | | [/llms-full.txt](/llms-full.txt) | Complete documentation for all Scalekit products in one file | Use when you need exhaustive context across multiple products or when the topic spans several areas | | [sitemap-0.xml](https://docs.scalekit.com/sitemap-0.xml) | Full URL list of every documentation page | Use to discover specific page URLs you can fetch for targeted, page-level answers |