Skip to main content

​
What can you do with it?

Manage design files, collaborate through comments, and access project resources with Figma, including retrieving design files, getting specific nodes, rendering images, managing projects, creating and managing comments, adding reactions, and organizing team resources for comprehensive design collaboration.

​
How to use it?

​
Basic Command Structure

/your-figma-connection [action] [required-parameters] [optional-parameters]

​
Parameters

Required:
  • action - The operation to perform (get-file, get-file-nodes, get-rendered-image, get-team-projects, get-project-files, create-comment, get-comments, delete-comment, create-reaction, get-reactions, delete-reaction)
Optional:
  • file-id - Figma file ID
  • node-ids - Comma-separated node IDs
  • team-id - Team ID for projects
  • project-id - Project ID for files
  • comment-message - Comment message text
  • comment-id - Comment ID for operations
  • x-position - X coordinate for comment placement
  • y-position - Y coordinate for comment placement
  • emoji - Emoji for reactions

​
Tools

​
Get File

Retrieve the content of a Figma file using its unique ID Parameters:
  • file-id (required) - Figma file ID
Example: 
/your-figma-connection
action: get-file
file-id: 12345
Response: 
{
  "name": "Design System",
  "lastModified": "2025-01-15T12:34:56Z",
  "thumbnailUrl": "https://example.com/thumbnail.png",
  "document": {
    "id": "0:1",
    "name": "Page 1",
    "type": "CANVAS",
    "children": [
      {
        "id": "1:2",
        "name": "Component",
        "type": "FRAME"
      }
    ]
  }
}

​
Get File Nodes

Retrieve specific nodes within a Figma file Parameters:
  • file-id (required) - Figma file ID
  • node-ids (required) - Comma-separated list of node IDs
Example: 
/your-figma-connection
action: get-file-nodes
file-id: 12345
node-ids: 1:2,1:3
Response: 
{
  "nodes": {
    "1:2": {
      "document": {
        "id": "1:2",
        "name": "Component",
        "type": "FRAME"
      }
    },
    "1:3": {
      "document": {
        "id": "1:3",
        "name": "Button",
        "type": "COMPONENT"
      }
    }
  }
}

​
Get Rendered Image

Retrieve rendered images of selected nodes within a Figma file Parameters:
  • file-id (required) - Figma file ID
  • node-ids (required) - Comma-separated list of node IDs to render
  • format (optional) - Image format (png, jpg, svg, pdf)
  • scale (optional) - Image scale (1, 2, 4)
Example: 
/your-figma-connection
action: get-rendered-image
file-id: 12345
node-ids: 1:2,1:3
format: png
scale: 2
Response: 
{
  "images": {
    "1:2": "https://example.com/image1.png",
    "1:3": "https://example.com/image2.png"
  }
}

​
Get Team Projects

Retrieve a list of projects for a specific team Parameters:
  • team-id (required) - Team ID to get projects for
Example: 
/your-figma-connection
action: get-team-projects
team-id: 67890
Response: 
{
  "name": "Dev Forpink's team",
  "projects": [
    {
      "id": "101",
      "name": "Marketing Website",
      "description": "Designs for the new marketing site."
    },
    {
      "id": "102",
      "name": "Mobile App",
      "description": "UI designs for the mobile application."
    }
  ]
}

​
Get Project Files

Retrieve a list of files within a specific project Parameters:
  • project-id (required) - Project ID to get files for
Example: 
/your-figma-connection
action: get-project-files
project-id: 101
Response: 
{
  "files": [
    {
      "key": "12345",
      "name": "Homepage Design",
      "thumbnail_url": "https://example.com/thumbnail1.png",
      "last_modified": "2025-01-14T10:00:00Z"
    },
    {
      "key": "67890",
      "name": "Dashboard UI",
      "thumbnail_url": "https://example.com/thumbnail2.png",
      "last_modified": "2025-01-13T09:00:00Z"
    }
  ]
}

​
Create Comment

Add a new comment to a specific location within a Figma file Parameters:
  • file-id (required) - Figma file ID
  • comment-message (required) - Comment message text
  • x-position (required) - X coordinate for comment placement
  • y-position (required) - Y coordinate for comment placement
Example: 
/your-figma-connection
action: create-comment
file-id: 12345
comment-message: This section needs revision.
x-position: 150
y-position: 200
Response: 
{
  "id": "c123",
  "file_key": "12345",
  "parent_id": null,
  "user": {
    "handle": "designer@example.com"
  },
  "created_at": "2025-01-15T12:00:00Z",
  "resolved_at": null,
  "message": "This section needs revision.",
  "client_meta": {
    "x": 150,
    "y": 200
  }
}

​
Get Comments

Retrieve all comments associated with a specific Figma file Parameters:
  • file-id (required) - Figma file ID
Example: 
/your-figma-connection
action: get-comments
file-id: 12345
Response: 
{
  "comments": [
    {
      "id": "c123",
      "user": {
        "handle": "designer@example.com"
      },
      "created_at": "2025-01-15T12:00:00Z",
      "message": "This section needs revision.",
      "client_meta": {
        "x": 150,
        "y": 200
      }
    },
    {
      "id": "c124",
      "user": {
        "handle": "developer@example.com"
      },
      "created_at": "2025-01-15T12:30:00Z",
      "message": "Updated the design as per feedback.",
      "client_meta": {
        "x": 150,
        "y": 200
      }
    }
  ]
}

​
Delete Comment

Remove a specific comment from a Figma file Parameters:
  • file-id (required) - Figma file ID
  • comment-id (required) - Comment ID to delete
Example: 
/your-figma-connection
action: delete-comment
file-id: 12345
comment-id: c123
Response: 
{
  "message": "Comment deleted successfully."
}

​
Create Comment Reaction

Add a reaction (emoji) to a specific comment in a Figma file Parameters:
  • file-id (required) - Figma file ID
  • comment-id (required) - Comment ID to react to
  • emoji (required) - Emoji for the reaction
Example: 
/your-figma-connection
action: create-reaction
file-id: 12345
comment-id: c123
emoji: 👍
Response: 
{
  "reaction_id": "r123",
  "comment_id": "c123",
  "emoji": "👍",
  "user": {
    "handle": "designer@example.com"
  },
  "created_at": "2025-01-15T12:45:00Z"
}

​
Get Comment Reactions

Retrieve all reactions to a specific comment within a Figma file Parameters:
  • file-id (required) - Figma file ID
  • comment-id (required) - Comment ID to get reactions for
Example: 
/your-figma-connection
action: get-reactions
file-id: 12345
comment-id: c123
Response: 
{
  "reactions": [
    {
      "reaction_id": "r123",
      "emoji": "👍",
      "user": {
        "handle": "designer@example.com"
      },
      "created_at": "2025-01-15T12:45:00Z"
    },
    {
      "reaction_id": "r124",
      "emoji": "❤️",
      "user": {
        "handle": "developer@example.com"
      },
      "created_at": "2025-01-15T12:50:00Z"
    }
  ]
}

​
Delete Comment Reaction

Remove a reaction from a specific comment in a Figma file Parameters:
  • file-id (required) - Figma file ID
  • comment-id (required) - Comment ID
  • reaction-id (required) - Reaction ID to delete
Example: 
/your-figma-connection
action: delete-reaction
file-id: 12345
comment-id: c123
reaction-id: r123
Response: 
{
  "message": "Reaction deleted successfully."
}

​
Notes

Figma requires team ID to be provided by the user as there’s no endpoint to list available teams. File IDs and node IDs use Figma’s unique identifier format. Comments can be placed at specific coordinates within design files. Rendered images support multiple formats including PNG, JPG, SVG, and PDF. Team projects contain multiple design files organized by project categories.
⌘I