Figma MCP server for Claude, ChatGPT, Claude Code and Cursor
A collaborative interface design tool.
Examples of what your AI apps can do in Figma. You'll see the exact list of tools after you connect it.
design_tokens_to_tailwind
ToolConvert design tokens to tailwind css configuration. takes the output from extractdesigntokens and generates: - tailwind.config.ts/js with theme extensions - optional globals.css with font imports note: shadow colors can be provided in either string format (e.g., "rgba(15, 110, 110, 0.32)") or dictionary format (e.g., {"r": 0.059, "g": 0.431, "b": 0.431, "a": 0.32}).
download_figma_images
ToolDownload images from figma file nodes. renders specified nodes as images and downloads them using mercury's filedownloadable infrastructure. supports png, svg, jpg, and pdf formats.
extract_design_tokens
ToolExtract design tokens from figma files. combines styles, variables, and extracted values to create a comprehensive design token system.
extract_prototype_interactions
ToolExtract prototype interactions and animations from figma files. analyzes the prototype data to extract: - user interactions (clicks, hovers, etc.) - transition animations - component variant states - user flows and navigation
get_component
ToolGet component data with automatic simplification. returns clean, ai-friendly component structure.
get_current_user
ToolRetrieves detailed information for the currently authenticated figma user.
get_file_components
ToolRetrieves published components from a figma file, which must be a main file (not a branch) acting as a library.
get_file_component_sets
ToolRetrieves all published component sets from the specified figma main file (file key must not be for a branch).
get_file_json
ToolGet figma file data with automatic simplification. this enhanced version automatically transforms verbose figma json into clean, ai-friendly format with: - css-like property names - deduplicated variables - removed empty values - 70%+ size reduction use simplify=false to get raw api response.
get_files_in_a_project
ToolFetches a list of files in a figma project, optionally including branch metadata.
get_local_variables
ToolRetrieves all local/remote variables for a figma file/branch; crucial for obtaining mode-specific values which `/v1/files/{file key}/variables/published` omits.
get_projects_in_a_team
ToolRetrieves projects within a specified figma team that are visible to the authenticated user.
add_a_comment_to_a_file
ToolPosts a new comment to a figma file or branch, optionally replying to an existing root comment (replies cannot be nested); `region height` and `region width` in `client meta` must be positive if defining a comment region.
add_a_reaction_to_a_comment
ToolPosts a specified emoji reaction to an existing comment in a figma file or branch, requiring valid file key and comment id.
create_a_webhook
ToolCreates a figma webhook for a `team id` to send post notifications for an `event type` to a publicly accessible https `endpoint`; an initial ping is sent unless `status` is `paused`.
create_dev_resources
ToolCreates and attaches multiple uniquely-urled development resources to specified figma nodes, up to 10 per node.
create_modify_delete_variables
ToolManages variables, collections, modes, and their values in a figma file via batch create/update/delete operations; use temporary ids to link new related items in one request and ensure `variablemodevalues` match the target variable's `resolvedtype`.
delete_a_comment
ToolDeletes a specific comment from a figma file or branch, provided the authenticated user is the original author of the comment.
delete_a_reaction
ToolDeletes a specific emoji reaction from a comment in a figma file; the user must have originally created the reaction.
delete_a_webhook
ToolPermanently deletes an existing webhook, identified by its unique `webhook id`; this operation is irreversible.
delete_dev_resource
ToolDeletes a development resource (used to link figma design elements to external developer information like code or tasks) from a specified figma file.
detect_background
ToolDetect background layers for selected nodes. uses geometric analysis, z-index ordering, and visual properties to identify potential background layers.
discover_figma_resources
Tool๐ smart figma resource discovery - never guess ids again! ๐ฏ easiest method: just paste any figma url to get all ids: โข file urls: https://www.figma.com/file/abc123/design โ get file key โข design urls: https://www.figma.com/design/abc123/design โ get file key โข node urls: ...?node-id=123:456 โ get file key + node id โข team urls: .../team/123456/... โ get team id ๐ step-by-step discovery: 1. team id โ projects list (with project ids) 2. project id โ files list (with file keys + thumbnails) 3. file key โ nodes list (with node ids + hierarchy) ๐ก common workflows: โข extract from url: discoverfigmaresources(figma url="...") โข browse team: discoverfigmaresources(team id="123") โข list files: discoverfigmaresources(project id="proj 456") โข find nodes: discoverfigmaresources(file key="abc123") โจ get file key for getfilejson, node ids for detectbackground, etc.
get_activity_logs
ToolRetrieves activity log events from figma, allowing filtering by event types, time range, and pagination.
get_a_webhook
ToolRetrieves detailed information about a specific webhook by its id, provided the webhook exists and is accessible to the user.
get_comments_in_a_file
ToolRetrieves all comments from an existing figma file, identified by a valid `file key`, returning details like content, author, position, and reactions, with an option for markdown formatted content.
get_component_set
ToolRetrieves detailed metadata for a specific published figma component set using its unique `key`.
get_dev_resources
ToolRetrieves development resources (e.g., jira/github links) for a figma main file, optionally filtering by specific node ids.
get_file_styles
ToolRetrieves a list of published styles (like colors, text attributes, effects, and layout grids) from a specified main figma file (not a branch).
get_image_fills
ToolRetrieves temporary (14-day expiry) download urls for all image fills in a figma file; requires `imageref` from `paint` objects to map urls.
get_library_analytics_component_action_data
ToolRetrieves component insertion and detachment analytics for a specified figma library, groupable by 'component' or 'team' and filterable by a date range (yyyy-mm-dd).
get_library_analytics_component_usage_data
ToolRetrieves component usage analytics for a specified figma library file (identified by `file key`), with data groupable by 'component' or 'file'.
get_library_analytics_style_action_data
ToolRetrieves style usage analytics (insertions, detachments) for a figma library, grouped by 'style' or 'team'; if providing a date range, ensure end date is not before start date.
get_library_analytics_style_usage_data
ToolRetrieves style usage analytics for a figma library (specified by a valid `file key`), allowing data to be grouped by 'file' or 'style'.
get_library_analytics_variable_action_data
ToolRetrieves weekly, paginated analytics data on variable insertions and detachments for a specified figma library (identified by `file key`), groupable by 'variable' or 'team', and filterable by an optional date range.
get_library_analytics_variable_usage_data
ToolRetrieves paginated analytics data on variable usage from a specified figma library, grouped by 'file' or 'variable', for libraries with enabled analytics.
get_payments
ToolRetrieves a user's payment information for a figma plugin, widget, or community file; the authenticated identity must own the resource.
get_published_variables
ToolRetrieves variables published from a specified figma file; this api is available only to full members of enterprise organizations.
get_reactions_for_a_comment
ToolRetrieves reactions for a specific comment in a figma file.
get_style
ToolRetrieves detailed metadata for a specific style in figma using its unique style key.
get_team_components
ToolRetrieves components published in a specific figma team's library; the team must have published components, otherwise an empty list is returned.
get_team_component_sets
ToolRetrieves a paginated list of published component sets (collections of reusable ui elements) from a specified figma team's library.
get_team_styles
ToolRetrieves a paginated list of published styles, such as colors or text attributes, from a specified figma team's library.
get_team_webhooks
ToolRetrieves all webhooks registered for a specified figma team.
get_versions_of_a_file
ToolRetrieves the version history for a figma file or branch, as specified by its `file key`.
get_webhook_requests
ToolRetrieves a history of webhook requests for a specific figma webhook subscription; data is available for requests sent within the last seven days.
render_images_of_file_nodes
ToolRenders specified nodes from a figma file as images (jpg, pdf, png, svg), returning a map of node ids to image urls (or `null` for failed nodes); images expire after 30 days and are capped at 32 megapixels (larger requests are scaled down).
update_a_webhook
ToolUpdates an existing figma webhook, identified by `webhook id`, allowing modification of its event type, endpoint, passcode, status, or description.
update_dev_resources
ToolUpdates the name and/or url of one or more existing figma dev resources, each identified by its unique `id`.
Free. No card needed.
How to connect Figma
- 1Create your free ContextGate account.
- 2Figma isn't in ContextGate's app list yet. If you have an MCP server for Figma, add it under Connections โ Add Connection โ Custom MCP.
- 3Add ContextGate to Claude, Cursor or ChatGPT (the Setup page shows you how), then ask it to use Figma.
What you get with Figma and ContextGate
- Your AI apps can use Figma Claude, Cursor, ChatGPT and other AI apps reach Figma through the one ContextGate connection you add to them.
- You choose which tools they can use Switch off any Figma tool you don't want used. It's hidden from your AI apps and refused if called.
- Every call is checked and recorded Your policies check each call (for example, personal data is hidden and secrets are blocked), and Activity keeps a record of it.
ContextGate sees only the tool calls that go through it, not your AI app's built-in tools or your chats.
Select a tool on the left to see its parameters
What you get with Figma and ContextGate
- Your AI apps can use Figma: Claude, Cursor, ChatGPT and other AI apps reach Figma through the one ContextGate connection you add to them.
- You choose which tools they can use: Switch off any Figma tool you don't want used. It's hidden from your AI apps and refused if called.
- Every call is checked and recorded: Your policies check each call (for example, personal data is hidden and secrets are blocked), and Activity keeps a record of it.
ContextGate sees only the tool calls that go through it, not your AI app's built-in tools or your chats.
Free. No card needed.
How to connect Figma
- Create your free ContextGate account.
- Figma isn't in ContextGate's app list yet. If you have an MCP server for Figma, add it under Connections โ Add Connection โ Custom MCP.
- Add ContextGate to Claude, Cursor or ChatGPT (the Setup page shows you how), then ask it to use Figma.