Figma

Figma Connection

Put Figma to Work with @Human Automations and @Human Agents

The Figma Connection documents all Triggers, Actions and Query Operations available for creating automations via the Figma API.

What can you do with the Figma Connection?

• Connect to the Figma API in a few clicks

• Use the related Figma Operations (see below) in @Human Automations or @Human Agents

Related Operations

Trigger Operations

File Updated

Triggers on: files/file_updated

Triggered when a Figma file is updated.

Comment Created

Triggers on: comments/comment_created

Triggered when a new comment is created on a Figma file.

Action Operations

Action: Create Comment

Action: Create Image

Action: Delete Comment

Action: React to Comment

Query Operations

Example link

Related Automations

Example link

Obtaining Access Credentials

To obtain a Personal Access Token (PAT) for Figma, follow these steps:

1. Log in to your Figma account at https://www.figma.com.

2. Click on your profile icon (top-left) → Select Settings.

3. In the upper sidebar, go to Security.

4. Click Generate new token.

5. Enter a description for the token (e.g., "API Access").

6. Set an expiration date.

7. Under Scopes, select the required permissions (e.g., files:read, files:write).

8. Click Generate token.

9. Copy the token immediately—it won’t be shown again. Store it securely; treat it like a password.

Configuring Webhooks

1. Generate a Personal Access Token (PAT) in Figma with the webhooks:write scope enabled.

2. Determine the scope for your webhook (Team, Project, or File) and locate its corresponding ID.

3. Set up a public endpoint capable of receiving POST requests and returning a 200 OK status code.

4. Register the webhook by sending a POST request to https://api.figma.com/v2/webhooks.

5. Add the header X-Figma-Token using your Personal Access Token as the value.

6. Include a JSON body specifying the event_type, the resource ID (team_id, project_id, or file_id), your endpoint URL, and a passcode for verification.

7. Confirm registration by verifying the automated PING event sent by Figma to your specified endpoint.

Code (Apache v2.0): Service Connectivity and Metadata

{
  "handle": "figma",
  "status": "active",
  "meta": {
    "short": "Figma",
    "description": "Connect to Figma to manage design files, comments, and projects.",
    "icon": "figma",
    "tags": ["design", "collaboration", "api"]
  },
  "service": {
    "baseURL": {
      "value": "https://api.figma.com/v1"
    },
    "protocol": "https",
    "contentType": "application/json",
    "headers": {
      "X-Figma-Token": {
        "value": "{{apiToken}}"
      }
    },
    "auth": {
      "method": "api_token",
      "params": {
        "apiToken": {
          "token": {
            "value": "{{apiToken}}",
            "placeholders": [
              {
                "name": "apiToken",
                "type": "String",
                "description": "Figma personal access token",
                "required": true
              }
            ]
          },
          "headerName": {
            "value": "X-Figma-Token"
          }
        }
      }
    }
  }
}

Code (Apache v2.0): List of External Resources and Internal Mapping

[
  {
    "handle": "files",
    "meta": {
      "short": "Files",
      "description": "Manage Figma design files, including retrieval, creation, and updates."
    },
    "endpoint": {
      "value": "/v1/files/{{fileKey}}",
      "placeholders": [
        {
          "name": "fileKey",
          "type": "String",
          "description": "The unique key of the Figma file",
          "required": true
        }
      ]
    },
    "fields": [
      {
        "name": "name",
        "type": "String",
        "selector": [
          "name"
        ],
        "meta": {
          "description": "Name of the Figma file"
        }
      },
      {
        "name": "lastModified",
        "type": "String",
        "selector": [
          "lastModified"
        ],
        "meta": {
          "description": "Last modified timestamp of the file"
        }
      },
      {
        "name": "thumbnailUrl",
        "type": "String",
        "selector": [
          "thumbnail",
          "url"
        ],
        "meta": {
          "description": "URL to the thumbnail image of the file"
        }
      },
      {
        "name": "document_id",
        "type": "String",
        "selector": [
          "document",
          "id"
        ],
        "meta": {
          "description": "ID of the root document node."
        }
      },
      {
        "name": "document_type",
        "type": "String",
        "selector": [
          "document",
          "type"
        ],
        "meta": {
          "description": "Type of the root node (always 'DOCUMENT')."
        }
      },
      {
        "name": "document_name",
        "type": "String",
        "selector": [
          "document",
          "name"
        ],
        "meta": {
          "description": "Name of the root document node."
        }
      }
    ],
    "operations": {
      "read": {
        "method": "GET",
        "path": {
          "value": "",
          "placeholders": []
        },
        "headers": {
          "X-Figma-Token": "{{apiKey}}"
        },
        "queryParams": {},
        "bodyTemplate": null
      },
      "update": {
        "method": "PATCH",
        "path": {
          "value": "",
          "placeholders": []
        },
        "headers": {
          "X-Figma-Token": "{{apiKey}}",
          "Content-Type": "application/json"
        },
        "queryParams": {},
        "bodyTemplate": {
          "value": "{\"name\": \"{{name}}\"}",
          "placeholders": [
            {
              "name": "name",
              "type": "String",
              "description": "New name for the file",
              "required": false
            }
          ]
        }
      }
    },
    "webhooks": [
      {
        "event": "file_updated",
        "path": "/webhooks/figma/file-updated",
        "payload": [
          {
            "name": "fileKey",
            "type": "String",
            "selector": [
              "file_key"
            ],
            "meta": {
              "description": "The unique key of the updated file"
            }
          },
          {
            "name": "timestamp",
            "type": "String",
            "selector": [
              "timestamp"
            ],
            "meta": {
              "description": "When the file was updated"
            }
          }
        ]
      }
    ]
  },
  {
    "handle": "projects",
    "meta": {
      "short": "Projects",
      "description": "Manage Figma projects, including listing files within a project."
    },
    "endpoint": {
      "value": "/v1/projects/{{projectId}}",
      "placeholders": [
        {
          "name": "projectId",
          "type": "String",
          "description": "The unique ID of the Figma project",
          "required": true
        }
      ]
    },
    "fields": [
      {
        "name": "name",
        "type": "String",
        "selector": [
          "name"
        ],
        "meta": {
          "description": "Name of the project"
        }
      },
      {
        "name": "files_0_key",
        "type": "String",
        "selector": [
          "files",
          0,
          "key"
        ],
        "meta": {
          "description": "Unique key of the first file in the project."
        },
        "multivalue": true
      },
      {
        "name": "files_0_name",
        "type": "String",
        "selector": [
          "files",
          0,
          "name"
        ],
        "meta": {
          "description": "Name of the first file in the project."
        },
        "multivalue": true
      },
      {
        "name": "files_0_last_modified",
        "type": "String",
        "selector": [
          "files",
          0,
          "last_modified"
        ],
        "meta": {
          "description": "Last modified timestamp of the first file."
        },
        "multivalue": true
      },
      {
        "name": "files_0_thumbnail_url",
        "type": "String",
        "selector": [
          "files",
          0,
          "thumbnail_url"
        ],
        "meta": {
          "description": "Thumbnail URL of the first file."
        },
        "multivalue": true
      }
    ],
    "operations": {
      "read": {
        "method": "GET",
        "path": {
          "value": "",
          "placeholders": []
        },
        "headers": {
          "X-Figma-Token": "{{apiKey}}"
        },
        "queryParams": {},
        "bodyTemplate": null
      },
      "list": {
        "method": "GET",
        "path": {
          "value": "/files",
          "placeholders": []
        },
        "headers": {
          "X-Figma-Token": "{{apiKey}}"
        },
        "queryParams": {},
        "bodyTemplate": null
      }
    },
    "webhooks": []
  },
  {
    "handle": "comments",
    "meta": {
      "short": "Comments",
      "description": "Manage comments on Figma files, including listing, creating, and resolving comments."
    },
    "endpoint": {
      "value": "/v1/files/{{fileKey}}/comments",
      "placeholders": [
        {
          "name": "fileKey",
          "type": "String",
          "description": "The unique key of the Figma file",
          "required": true
        }
      ]
    },
    "fields": [
      {
        "name": "id",
        "type": "String",
        "selector": [
          "id"
        ],
        "meta": {
          "description": "Unique identifier for the comment"
        }
      },
      {
        "name": "message",
        "type": "String",
        "selector": [
          "message"
        ],
        "meta": {
          "description": "The content of the comment"
        }
      },
      {
        "name": "resolved",
        "type": "Boolean",
        "selector": [
          "resolved"
        ],
        "meta": {
          "description": "Whether the comment has been resolved"
        }
      },
      {
        "name": "createdAt",
        "type": "String",
        "selector": [
          "created_at"
        ],
        "meta": {
          "description": "Timestamp when the comment was created"
        }
      }
    ],
    "operations": {
      "list": {
        "method": "GET",
        "path": {
          "value": "",
          "placeholders": []
        },
        "headers": {
          "X-Figma-Token": "{{apiKey}}"
        },
        "queryParams": {},
        "bodyTemplate": null
      },
      "create": {
        "method": "POST",
        "path": {
          "value": "",
          "placeholders": []
        },
        "headers": {
          "X-Figma-Token": "{{apiKey}}",
          "Content-Type": "application/json"
        },
        "queryParams": {},
        "bodyTemplate": {
          "value": "{\"message\": \"{{message}}\", \"client_meta\": {\"node_id\": \"{{nodeId}}\"}}",
          "placeholders": [
            {
              "name": "message",
              "type": "String",
              "description": "The comment message",
              "required": true
            },
            {
              "name": "nodeId",
              "type": "String",
              "description": "The node ID the comment refers to",
              "required": false
            }
          ]
        }
      },
      "delete": {
        "method": "DELETE",
        "path": {
          "value": "/{{commentId}}",
          "placeholders": [
            {
              "name": "commentId",
              "type": "String",
              "description": "The ID of the comment to delete",
              "required": true
            }
          ]
        },
        "headers": {
          "X-Figma-Token": "{{apiKey}}"
        },
        "queryParams": {},
        "bodyTemplate": null
      }
    },
    "webhooks": [
      {
        "event": "comment_created",
        "path": "/webhooks/figma/comment-created",
        "payload": [
          {
            "name": "fileKey",
            "type": "String",
            "selector": [
              "file_key"
            ],
            "meta": {
              "description": "The file key where the comment was created"
            }
          },
          {
            "name": "commentId",
            "type": "String",
            "selector": [
              "comment_id"
            ],
            "meta": {
              "description": "The ID of the created comment"
            }
          }
        ]
      }
    ]
  },
  {
    "handle": "file_nodes",
    "meta": {
      "short": "File Nodes",
      "description": "Read specific nodes from a Figma file."
    },
    "endpoint": {
      "value": "/v1/files/{{fileKey}}/nodes",
      "placeholders": [
        {
          "name": "fileKey",
          "type": "String",
          "description": "The unique key of the Figma file",
          "required": true
        }
      ]
    },
    "fields": [
      {
        "name": "name",
        "type": "String",
        "selector": [
          "name"
        ],
        "meta": {
          "description": "Name of the file"
        }
      },
      {
        "name": "lastModified",
        "type": "String",
        "selector": [
          "lastModified"
        ],
        "meta": {
          "description": "Last modified timestamp of the file"
        }
      },
      {
        "name": "thumbnailUrl",
        "type": "String",
        "selector": [
          "thumbnailUrl"
        ],
        "meta": {
          "description": "URL to the thumbnail image of the file"
        }
      },
      {
        "name": "version",
        "type": "String",
        "selector": [
          "version"
        ],
        "meta": {
          "description": "File version"
        }
      }
    ],
    "operations": {
      "read": {
        "method": "GET",
        "path": {
          "value": "",
          "placeholders": []
        },
        "headers": {
          "X-Figma-Token": "{{apiKey}}"
        },
        "queryParams": {
          "ids": {
            "value": "{{ids}}",
            "placeholders": [
              {
                "name": "ids",
                "type": "String",
                "description": "Comma-separated list of nodes to retrieve",
                "required": true
              }
            ]
          }
        },
        "bodyTemplate": null
      }
    },
    "webhooks": []
  },
  {
    "handle": "images",
    "meta": {
      "short": "Images",
      "description": "Render images from a Figma file."
    },
    "endpoint": {
      "value": "/v1/images/{{fileKey}}",
      "placeholders": [
        {
          "name": "fileKey",
          "type": "String",
          "description": "The unique key of the Figma file",
          "required": true
        }
      ]
    },
    "fields": [
      {
        "name": "err",
        "type": "String",
        "selector": [
          "err"
        ],
        "meta": {
          "description": "Error message if any"
        }
      }
    ],
    "operations": {
      "list": {
        "method": "GET",
        "path": {
          "value": "",
          "placeholders": []
        },
        "headers": {
          "X-Figma-Token": "{{apiKey}}"
        },
        "queryParams": {
          "ids": {
            "value": "{{ids}}",
            "placeholders": [
              {
                "name": "ids",
                "type": "String",
                "description": "Comma-separated list of nodes to render",
                "required": true
              }
            ]
          },
          "format": {
            "value": "{{format}}",
            "placeholders": [
              {
                "name": "format",
                "type": "String",
                "description": "Image format (e.g. jpg, png, svg, pdf)",
                "required": false
              }
            ]
          }
        },
        "bodyTemplate": null
      }
    },
    "webhooks": []
  },
  {
    "handle": "teams",
    "meta": {
      "short": "Teams",
      "description": "Manage Figma teams and retrieve their projects."
    },
    "endpoint": {
      "value": "/v1/teams/{{teamId}}/projects",
      "placeholders": [
        {
          "name": "teamId",
          "type": "String",
          "description": "The unique ID of the Figma team",
          "required": true
        }
      ]
    },
    "fields": [
      {
        "name": "id",
        "type": "String",
        "selector": [
          "id"
        ],
        "meta": {
          "description": "Project ID"
        }
      },
      {
        "name": "name",
        "type": "String",
        "selector": [
          "name"
        ],
        "meta": {
          "description": "Name of the project"
        }
      }
    ],
    "operations": {
      "list": {
        "method": "GET",
        "path": {
          "value": "",
          "placeholders": []
        },
        "headers": {
          "X-Figma-Token": "{{apiKey}}"
        },
        "queryParams": {},
        "bodyTemplate": null
      }
    },
    "webhooks": []
  },
  {
    "handle": "users",
    "meta": {
      "short": "Users",
      "description": "Retrieve information about the authenticated user."
    },
    "endpoint": {
      "value": "/v1/me",
      "placeholders": []
    },
    "fields": [
      {
        "name": "id",
        "type": "String",
        "selector": [
          "id"
        ],
        "meta": {
          "description": "The unique ID of the user"
        }
      },
      {
        "name": "email",
        "type": "String",
        "selector": [
          "email"
        ],
        "meta": {
          "description": "The user's email address"
        }
      },
      {
        "name": "handle",
        "type": "String",
        "selector": [
          "handle"
        ],
        "meta": {
          "description": "The user's handle"
        }
      },
      {
        "name": "img_url",
        "type": "String",
        "selector": [
          "img_url"
        ],
        "meta": {
          "description": "The URL to the user's avatar image"
        }
      }
    ],
    "operations": {
      "read": {
        "method": "GET",
        "path": {
          "value": "",
          "placeholders": []
        },
        "headers": {
          "X-Figma-Token": "{{apiKey}}"
        },
        "queryParams": {},
        "bodyTemplate": null
      }
    },
    "webhooks": []
  },
  {
    "handle": "webhooks",
    "meta": {
      "short": "Webhooks",
      "description": "Manage Figma webhooks."
    },
    "endpoint": {
      "value": "/v2/webhooks",
      "placeholders": []
    },
    "fields": [
      {
        "name": "id",
        "type": "String",
        "selector": [
          "id"
        ],
        "meta": {
          "description": "The unique ID of the webhook"
        }
      },
      {
        "name": "event_type",
        "type": "String",
        "selector": [
          "event_type"
        ],
        "meta": {
          "description": "The event that triggers the webhook"
        }
      },
      {
        "name": "endpoint",
        "type": "String",
        "selector": [
          "endpoint"
        ],
        "meta": {
          "description": "The URL the webhook sends payloads to"
        }
      },
      {
        "name": "status",
        "type": "String",
        "selector": [
          "status"
        ],
        "meta": {
          "description": "The current status of the webhook"
        }
      }
    ],
    "operations": {
      "list": {
        "method": "GET",
        "path": {
          "value": "",
          "placeholders": []
        },
        "headers": {
          "X-Figma-Token": "{{apiKey}}"
        },
        "queryParams": {},
        "bodyTemplate": null
      },
      "read": {
        "method": "GET",
        "path": {
          "value": "/{{webhookId}}",
          "placeholders": [
            {
              "name": "webhookId",
              "type": "String",
              "description": "The ID of the webhook",
              "required": true
            }
          ]
        },
        "headers": {
          "X-Figma-Token": "{{apiKey}}"
        },
        "queryParams": {},
        "bodyTemplate": null
      },
      "create": {
        "method": "POST",
        "path": {
          "value": "",
          "placeholders": []
        },
        "headers": {
          "X-Figma-Token": "{{apiKey}}",
          "Content-Type": "application/json"
        },
        "queryParams": {},
        "bodyTemplate": {
          "value": "{\"event_type\": \"{{event_type}}\", \"team_id\": \"{{team_id}}\", \"endpoint\": \"{{endpoint}}\", \"passcode\": \"{{passcode}}\"}",
          "placeholders": [
            {
              "name": "event_type",
              "type": "String",
              "description": "The event type (e.g. FILE_UPDATE, FILE_COMMENT)",
              "required": true
            },
            {
              "name": "team_id",
              "type": "String",
              "description": "The team ID to monitor",
              "required": true
            },
            {
              "name": "endpoint",
              "type": "String",
              "description": "The URL to send events to",
              "required": true
            },
            {
              "name": "passcode",
              "type": "String",
              "description": "Passcode to authenticate webhook deliveries",
              "required": true
            }
          ]
        }
      },
      "delete": {
        "method": "DELETE",
        "path": {
          "value": "/{{webhookId}}",
          "placeholders": [
            {
              "name": "webhookId",
              "type": "String",
              "description": "The ID of the webhook to delete",
              "required": true
            }
          ]
        },
        "headers": {
          "X-Figma-Token": "{{apiKey}}"
        },
        "queryParams": {},
        "bodyTemplate": null
      }
    },
    "webhooks": []
  },
  {
    "handle": "variables",
    "meta": {
      "short": "Variables",
      "description": "Manage local and published design variables in a Figma file."
    },
    "endpoint": {
      "value": "/v1/files/{{fileKey}}/variables",
      "placeholders": [
        {
          "name": "fileKey",
          "type": "String",
          "description": "The unique key of the Figma file",
          "required": true
        }
      ]
    },
    "fields": [
      {
        "name": "id",
        "type": "String",
        "selector": [
          "id"
        ],
        "meta": {
          "description": "The unique ID of the variable"
        }
      },
      {
        "name": "name",
        "type": "String",
        "selector": [
          "name"
        ],
        "meta": {
          "description": "The name of the variable"
        }
      },
      {
        "name": "resolvedType",
        "type": "String",
        "selector": [
          "resolvedType"
        ],
        "meta": {
          "description": "The type of the variable (e.g., COLOR, FLOAT, STRING, BOOLEAN)"
        }
      }
    ],
    "operations": {
      "list_local": {
        "method": "GET",
        "path": {
          "value": "/local",
          "placeholders": []
        },
        "headers": {
          "X-Figma-Token": "{{apiKey}}"
        },
        "queryParams": {},
        "bodyTemplate": null
      },
      "list_published": {
        "method": "GET",
        "path": {
          "value": "/published",
          "placeholders": []
        },
        "headers": {
          "X-Figma-Token": "{{apiKey}}"
        },
        "queryParams": {},
        "bodyTemplate": null
      }
    },
    "webhooks": []
  }
]