← Back to all apps

Figma

Designby Figma, Inc.
Open in ChatGPT →

Make diagrams, slides, assets

12Tools
Figma, Inc.Developer
DesignCategory

Available Tools

Figma provides 12 tools that can be used to interact with its services.

Add Code Connect Map

add_code_connect_map
Full Description

Map a Figma node to a code component in your codebase using Code Connect. Use the nodeId parameter to specify a node id. Use the fileKey parameter to specify the file key. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2 and the fileKey would be :fileKey.

Parameters

Required
componentNamestring

The name of the component to map to in the source code

fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`.

labelstring

The framework or language label for this Code Connect mapping. Valid values: React, Web Components, Vue, Svelte, Storybook, Javascript, Swift UIKit, Objective-C UIKit, SwiftUI, Compose, Java, Kotlin, Android XML Layout, Flutter

Options:ReactWeb ComponentsVueSvelteStorybookJavascriptSwift UIKitObjective-C UIKitSwiftUIComposeJavaKotlinAndroid XML LayoutFlutter
nodeIdstring

The ID of the node in the Figma document, eg. "123:456" or "123-456". This should be a valid node ID in the Figma document.

sourcestring

The location of the component in the source code

Optional
clientFrameworksstring

A comma separated list of frameworks used by the client in the current context, e.g. `react`, `vue`, `django` etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which frameworks are being used. If you are unsure, it is better to list `unknown` than to make a guess

clientLanguagesstring

A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which languages are being used. If you are unsure, it is better to list `unknown` than to make a guess.

Create Design System Rules

create_design_system_rules
Full Description

Provides a prompt to generate design system rules for this repo.

Parameters

Optional
clientFrameworksstring

A comma separated list of frameworks used by the client in the current context, e.g. `react`, `vue`, `django` etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which frameworks are being used. If you are unsure, it is better to list `unknown` than to make a guess

clientLanguagesstring

A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which languages are being used. If you are unsure, it is better to list `unknown` than to make a guess.

Generate Asset

generate_asset
Full Description

Generates marketing and creative assets in Figma Buzz, including but not limited to social media posts, banners, digital ads, posters, hiring materials, event materials, one-pagers, or flyers, greeting cards, invitations, resumes, business cards, and invoices.

Use this tool when you need polished, visual content suitable for social, print, or digital contexts and marketing, communication, personal, or professional purposes. Do not use this tool when you need application UI, websites, diagrams, or presentation decks. For diagrams, use the generate_diagram tool instead. For presentation decks, use generate_deck.

This tool requires an asset description, list of use cases, list of styles, list of aspect ratios, and list of search keywords. The tool does not have context on previous requests or chat history. The asset description you provide should be fully self-contained and include all relevant details with the context in mind but without referencing earlier prompts.

This tool will return up to three visual assets (thumbnails and URLs) suitable for further edits in Figma Buzz.

Parameters

Required
aspectRatiosarray

List of applicable aspect ratios ranked by relevance. Do not include more than the singular relevant aspect ratio if the user requests a specific format (e.g. Instagram story): - 0.27: google skyscraper ad - 0.52: linkedin post - 0.56: 9:16 vertical, social story/reel/post, mobile video, tall poster - 0.67: 2:3, Pinterest, tall poster - 0.71: 5:7, photo print, invitation, poster - 0.75: 3:4 poster - 0.77: 8.5×11 Letter portrait, posters, research posters, one pager, flyers, and printed documents - 0.8: 4:5, social ads, poster - 1: 1:1 square, social ads - 1.2: 6:5 slide - 1.4: 7:5 photo print, postcard - 1.5: 3:2 name tag - 1.78: 16:9 widescreen, YouTube thumbnails - 1.9: wide facebook post - 1.91: Facebook event cover photo - 1.92: wide linkedin post - 2: 2:1 banner - 2.7: facebook cover photo - 3: 3:1 banner - 4: 4:1 LinkedIn profile banner - 5: 5:1 banner, YouTube ad - 6: 6:1 banner - 8.09: 8:1 leaderboard, Google ad

assetDescriptionstring

A self-contained prompt describing the asset to generate, as if written by a creative NYC brand designer. Include user intent, specific colors to use (only one set, do not give options), and the tone of the copy. Do not include specific copy unless the user specifies them. Do not add any layout, typography, or format requirements.

searchKeywordsarray

A short list of key terms or phrases that capture the core topic or intent of the asset to generate

stylesarray

List of applicable styles that define the visual aesthetic or overall look and feel of the asset, ordered with most relevant first. The valid values are: bold, minimal, playful, elegant, vibrant, organic, nostalgic, illustrated

titlestring

The title of the asset to generate.

useCasesarray

List of applicable use cases ordered with most relevant first. The valid values are: social_post, ad, flyer, poster, banner, invitation, announcement, event, promotion, product_showcase, celebration, sale, linkedin, instagram, resume, quote, invoice, one_pager, collage, letter, itinerary, name_tag, thank_you_card, birthday_card, testimonial, letterhead, event_speaker, youtube_thumbnail, hiring, social_proof, research_poster, business_card, save_the_date

Optional
planKeystring

Optional. The team or organization key where the generated Buzz draft file should be saved. The key must start with "team::" or "org::", but do not use these abbreviations in user-facing messages.

savePlanKeyboolean

Optional. Indicates whether to use the same plan for future generations. Do not provide this parameter unless the user specifically requests it, and a planKey is also provided.

userIntentstring

A description of what the user is trying to accomplish with this tool call. Important: Do not add extraneous information other than what the user provides.

Generate Deck

generate_deck
Full Description

Generates polished and fully editable presentation decks in Figma Slides, suitable for a wide range of use cases including pitches, slideshows, portfolios, readouts, workshops, research summaries, moodboards, training materials, retrospectives, event recaps, and strategic reviews. This tool produces visually refined, ready-to-edit decks that can be customized for personal, creative, professional, corporate, and creative contexts.

Use this tool when you need a slide deck that communicates ideas, findings, or proposals in a visually compelling way. Decks are optimized for storytelling, clarity, and design consistency—ideal for presenting to teams, clients, stakeholders, or audiences.

Do not use this tool for designing application UIs, websites, flow diagrams, or standalone marketing assets. For FigJam diagrams, use the generate_diagram tool instead. For Buzz marketing assets, use generate_asset.

This tool requires the following parameters to generate high-quality outputs: objectives, outline, style, color palette, use case, and theme. This tool does not retain chat history or conversational context beyond what you provide in the current request. To ensure best results, include all relevant details directly in your prompt, describing your goals and constraints clearly and completely. The prompt should be self-contained and include all relevant details with the context in mind but without referencing earlier prompts.

This tool will return up to three unique slide deck options, each including a thumbnail and Figma Slides URL for editing within Figma. These generated decks serve as starting points for refinement, collaboration, and final presentation design.

Parameters

Required
descriptionstring

A description of the deck to generate. It must include the topic, audience, style/tone, and any other relevant information in this exact order. Be as detailed as possible and use context from the conversation to help generate the deck.

objectivesarray
outlinearray

A slide-by-slide outline of the deck. Each outline item includes the slide's subject, purpose, role, content, and visuals. The role represents the slide's layout type; aim to use a variety of roles to keep the deck interesting; do not use the same role for more than two slides in a row; ensure that each deck has at least two layouts with images. The content should be a list of specific facts, examples, or points; if the user's prompt is not specific enough, look up relevant information instead of using ambiguous language or abstract meta-commentary. The visuals should be a list of detailed descriptions of the images for the slide. Both the content and visuals should match the selected role.

templateQueryobject
titlestring

The title of the deck to generate.

Optional
planKeystring

Optional. The team or organization key where the generated slide deck should be saved. The key must start with "team::" or "org::", but do not use these abbreviations in user-facing messages.

rulesstring

Optional. Concrete, enforceable do/don't rules specified by the user that must be followed. Only set this if the user has provided specific rules.

savePlanKeyboolean

Optional. Indicates whether to use the same plan for future generations. Do not provide this parameter unless the user specifically requests it, and a planKey is also provided.

themeobject

The theme of the slide deck. The palette is a list of accessible colors in hex format well-suited for both text, accent, and background colors. The paletteDescription is a concise phrase that describes the colors in the palette. The palette should be based on two primary colors related to the presentation content, with all other colors being tints, shades, or tones derived from these two primary colors.

userIntentstring

A description of what the user is trying to accomplish with this tool call. Important: Do not add extraneous information other than what the user provides.

Generate Diagram

generate_diagram
Full Description

Create a flowchart, decision tree, gantt chart, sequence diagram, or state diagram in FigJam, using Mermaid.js. Generated diagrams should be simple, unless a user asks for details. This tool also does not support generating Figma designs, class diagrams, timelines, venn diagrams, entity relationship diagrams, or other Mermaid.js diagram types. This tool also does not support font changes, or moving individual shapes around -- if a user asks for those changes to an existing diagram, encourage them to open the diagram in Figma. If the tool is unable to complete the user's task, reference the error that is passed back.

Parameters

Required
mermaidSyntaxstring

Mermaid.js code for the diagram. Keep diagrams simple, unless the user has detailed requirements. Only the following diagram types are supported: graph, flowchart, sequenceDiagram, stateDiagram, stateDiagram-v2, and gantt. Make sure to use correct Mermaid.js syntax. For graph or flowchart diagrams, use LR direction by default and put all shape and edge text in quotes (eg. ["Text"], -->|"Edge Text"|, --"Edge Text"-->). Do not use emojis in the Mermaid.js code. Do not use to represent new lines. Feel free to use the full range of shapes and connectors that Mermaid.js syntax offers. For graph and flowchart diagrams only, you can use color styling--but do so sparingly unless the user asks for it. In gantt charts, do not use color styling. In sequence diagrams, do not use notes. Do not use the word "end" in classNames.

namestring

A human-readable title for the diagram. Keep it short, but descriptive.

Optional
userIntentstring

A description of what the user is trying to accomplish with this tool call. Important: Do not add extraneous information other than what the user provides.

Get Code Connect Map

get_code_connect_map
Full Description

Get a mapping of {[nodeId]: {codeConnectSrc: e.g. location of component in codebase, codeConnectName: e.g. name of component in codebase} E.g. {'1:2': { codeConnectSrc: 'https://github.com/foo/components/Button.tsx', codeConnectName: 'Button' } }. Use the nodeId parameter to specify a node id. Use the fileKey parameter to specify the file key.If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2 and the fileKey would be :fileKey.

Parameters

Required
fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`.

nodeIdstring

The ID of the node in the Figma document, eg. "123:456" or "123-456". This should be a valid node ID in the Figma document.

Optional
codeConnectLabelstring

The label used to fetch Code Connect information for a particular language or framework when multiple Code Connect mappings exist.

Get Design Context

get_design_context
Full Description

Generate UI code for a given node in Figma. Use the nodeId parameter to specify a node id. Use the fileKey parameter to specify the file key. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2 and the fileKey would be :fileKey. If the URL is of the format https://figma.com/design/:fileKey/branch/:branchKey/:fileName then use the branchKey as the fileKey. If the URL is of the format https://figma.com/make/:makeFileKey/:makeFileName then use the makeFileKey to identify the Figma Make file. The response will contain a code string and a JSON of download URLs for the assets referenced in the code.

Parameters

Required
fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`.

nodeIdstring

The ID of the node in the Figma document, eg. "123:456" or "123-456". This should be a valid node ID in the Figma document.

Optional
clientFrameworksstring

A comma separated list of frameworks used by the client in the current context, e.g. `react`, `vue`, `django` etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which frameworks are being used. If you are unsure, it is better to list `unknown` than to make a guess

clientLanguagesstring

A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which languages are being used. If you are unsure, it is better to list `unknown` than to make a guess.

disableCodeConnectboolean

Whether Code Connect should be used to get the design context. Only set this when the user directly requests to disable Code Connect.

forceCodeboolean

Whether code should always be returned, instead of returning just metadata if the output size is too large. Only set this when the user directly requests to force the code.

Get Figjam

get_figjam
Full Description

Generate UI code for a given FigJam node in Figma. Use the nodeId parameter to specify a node id. Use the fileKey parameter to specify the file key. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/board/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2 and the fileKey would be :fileKey. IMPORTANT: This tool only works for FigJam files, not other Figma files.

Parameters

Required
fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`.

nodeIdstring

The ID of the node in the Figma document, eg. "123:456" or "123-456". This should be a valid node ID in the Figma document.

Optional
clientFrameworksstring

A comma separated list of frameworks used by the client in the current context, e.g. `react`, `vue`, `django` etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which frameworks are being used. If you are unsure, it is better to list `unknown` than to make a guess

clientLanguagesstring

A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which languages are being used. If you are unsure, it is better to list `unknown` than to make a guess.

includeImagesOfNodesboolean

Whether to include images of nodes in the response

Default: True

Get Metadata

get_metadata
Full Description

IMPORTANT: Always prefer to use get_design_context tool. Get metadata for a node or page in the Figma desktop app in XML format. Useful only for getting an overview of the structure, it only includes node IDs, layer types, names, positions and sizes. You can call get_design_context on the node IDs contained in this response. Use the nodeId parameter to specify a node id, it can also be the page id (e.g. 0:1). Extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2. If the URL is of the format https://figma.com/design/:fileKey/branch/:branchKey/:fileName then use the branchKey as the fileKey.

Parameters

Required
fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`.

nodeIdstring

The ID of the node in the Figma document, eg. "123:456" or "123-456". This should be a valid node ID in the Figma document.

Optional
clientFrameworksstring

A comma separated list of frameworks used by the client in the current context, e.g. `react`, `vue`, `django` etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which frameworks are being used. If you are unsure, it is better to list `unknown` than to make a guess

clientLanguagesstring

A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which languages are being used. If you are unsure, it is better to list `unknown` than to make a guess.

Get Screenshot

get_screenshot
Full Description

Generate a screenshot for a given node or the currently selected node in the Figma desktop app. Use the nodeId parameter to specify a node id. nodeId parameter is REQUIRED. Use the fileKey parameter to specify the file key. fileKey parameter is REQUIRED. If a URL is provided, extract the file key and node id from the URL. For example, if given the URL https://figma.com/design/pqrs/ExampleFile?node-id=1-2 the extracted fileKey would be pqrs and the extracted nodeId would be 1:2. If the URL is of the format https://figma.com/design/:fileKey/branch/:branchKey/:fileName then use the branchKey as the fileKey.

Parameters

Required
fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`.

nodeIdstring

The ID of the node in the Figma document, eg. "123:456" or "123-456". This should be a valid node ID in the Figma document.

Optional
clientFrameworksstring

A comma separated list of frameworks used by the client in the current context, e.g. `react`, `vue`, `django` etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which frameworks are being used. If you are unsure, it is better to list `unknown` than to make a guess

clientLanguagesstring

A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which languages are being used. If you are unsure, it is better to list `unknown` than to make a guess.

Get Variable Defs

get_variable_defs
Full Description

Get variable definitions for a given node id. E.g. {'icon/default/secondary': #949494}Variables are reusable values that can be applied to all kinds of design properties, such as fonts, colors, sizes and spacings. Use the nodeId parameter to specify a node id. Extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2. If the URL is of the format https://figma.com/design/:fileKey/branch/:branchKey/:fileName then use the branchKey as the fileKey.

Parameters

Required
fileKeystring

The key of the Figma file to use. If the URL is provided, extract the file key from the URL. The given URL must be in the format https://figma.com/design/:fileKey/:fileName?node-id=:int1-:int2. The extracted fileKey would be `:fileKey`.

nodeIdstring

The ID of the node in the Figma document, eg. "123:456" or "123-456". This should be a valid node ID in the Figma document.

Optional
clientFrameworksstring

A comma separated list of frameworks used by the client in the current context, e.g. `react`, `vue`, `django` etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which frameworks are being used. If you are unsure, it is better to list `unknown` than to make a guess

clientLanguagesstring

A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which languages are being used. If you are unsure, it is better to list `unknown` than to make a guess.

Whoami

whoami
Full Description

Returns information about the authenticated user. If you are experiencing permission issues with other tools, you can use this tool to get information about who is authenticated and validate the right user is logged in.

Links

WebsitePrivacy PolicyTerms of Service