Figma

Figma is a cloud-based design and prototyping tool that enables teams to collaborate in real-time on user interface and user experience projects.

Categories: Productivity and Collaboration

Type: figma/v1

Connections

Version: 1

OAuth2 Authorization Code

Properties

Name	Label	Type	Description	Required
clientId	Client Id	STRING		true
clientSecret	Client Secret	STRING		true

Connection Setup

Create a Figma OAuth App

Go to https://www.figma.com/developers/apps (or click “My Apps” in the top toolbar).
Click Create a new app (top-right).
Enter a name for your OAuth app and select a Team/Organization. The app must be associated with a team or organization.
Click Create.
Copy the Client ID and Client Secret and store them securely.
- Figma shows the Client Secret only once. You’ll need it for token exchange and refreshing access tokens.

Configure OAuth Scopes

On the OAuth scopes page, select the scopes your app needs. For the ByteChef Figma connector, enable:

file_comments:read
file_comments:write
webhooks:write

Set the Redirect URI

Add the ByteChef OAuth2 callback URL as a Redirect URI in your Figma app:

Example cloud URL: https://app.bytechef.io/callback
Example local URL: http://127.0.0.1:5173/callback

If you run ByteChef with a custom domain, the pattern is: <YOUR_PUBLIC_URL>/callback.

Actions

Get Comments

Name: getComments

Gets a list of comments left on the file.

Properties

Name	Label	Type	Description	Required
fileKey	File Key	STRING	File to get comments from. Figma file key copy from Figma file URL.	true

Example JSON Structure

{
  "label" : "Get Comments",
  "name" : "getComments",
  "parameters" : {
    "fileKey" : ""
  },
  "type" : "figma/v1/getComments"
}

Properties

Name	Type	Description
comments	ARRAY Items [{STRING(id), STRING(file_key), STRING(parent_id), {STRING(id), STRING(handle), STRING(img_url), STRING(email)}(user)}]	List of comments.

Output Example

{
  "comments" : [ {
    "id" : "",
    "file_key" : "",
    "parent_id" : "",
    "user" : {
      "id" : "",
      "handle" : "",
      "img_url" : "",
      "email" : ""
    }
  } ]
}

To find a Figma file key, copy the alphanumeric string located between /file/ (or /design/, /proto/, etc.) and the file name in the browser URL. For example, in https://www.figma.com/file/ABC123456/File-Name, the file key is ABC123456. You can also right-click a file in the desktop app and select Copy link to extract it.

Post Comment

Name: postComment

Posts a new comment on the file.

Properties

Name	Label	Type	Description	Required
fileKey	File Key	STRING	File to add comments in. Figma file key copy from Figma file URL.	true
message	Comment	STRING	Comment to post on the file.	true

Example JSON Structure

{
  "label" : "Post Comment",
  "name" : "postComment",
  "parameters" : {
    "fileKey" : "",
    "message" : ""
  },
  "type" : "figma/v1/postComment"
}

Output

Type: OBJECT

Properties

Name	Type	Description
id	STRING	ID of the comment.
file_key	STRING	File key of the file the comment is on.
parent_id	STRING	ID of comment this comment is a reply to.
message	STRING	Message of the comment.

Output Example

{
  "id" : "",
  "file_key" : "",
  "parent_id" : "",
  "message" : ""
}

Find File Key

Triggers

New Comment

Name: newComment

Triggers when new comment is posted.

Type: DYNAMIC_WEBHOOK

Properties

Name	Label	Type	Description	Required
team_id	Team ID	STRING	The ID of the team.	true

Output

Type: OBJECT

Properties

Name	Type	Description
file_name	STRING	The name of the file that was updated.
created_at	STRING	The UTC ISO 8601 time at which the comment was left.
comment_id	STRING	ID of the comment.
triggered_by	OBJECT Properties {STRING(id), STRING(handle), STRING(email), STRING(img_url)}	The user that made the comment and triggered this event.
file_key	STRING	The key of the file that was updated.
retries	INTEGER	Number of times the event has been retried.
event_type	STRING	Type of the event.
webhook_id	STRING	The id of the webhook that caused the callback.
parent_id	STRING	If present, the id of the comment to which this is the reply.
resolved_at	STRING	If set, the UTC ISO 8601 time the comment was resolved.
mentions	ARRAY Items [{STRING(id), STRING(handle), STRING(email), STRING(img_url)}]	Users that were mentioned in the comment.
comment	ARRAY Items [{STRING(text), STRING(mention)}]	Contents of the comment itself.
order_id	STRING	Only set for top level comments. The number displayed with the comment in the UI.
passcode	STRING	The passcode specified when the webhook was created, should match what was initially provided.
timestamp	STRING	UTC ISO 8601 timestamp of when the event was triggered.

JSON Example

{
  "label" : "New Comment",
  "name" : "newComment",
  "parameters" : {
    "team_id" : ""
  },
  "type" : "figma/v1/newComment"
}

Find Team ID

To find your Figma Team ID, open the Figma web browser app, click on your team name in the left-hand sidebar, and copy the long numerical string located after /team/ in the URL bar (e.g., figma.com/team/123456789/team-name).

What to do if your action is not listed here?

If this component doesn't have the action you need, you can use Custom Action to create your own. Custom Actions empower you to define HTTP requests tailored to your specific requirements, allowing for greater flexibility in integrating with external services or APIs.

To create a Custom Action, simply specify the desired HTTP method, path, and any necessary parameters. This way, you can extend the functionality of your component beyond the predefined actions, ensuring that you can meet all your integration needs effectively.

On this page