Zeplin
Zeplin is a collaboration tool that bridges the gap between designers and developers by providing a platform to share, organize, and translate design files into development.
Categories: Communication
Type: zeplin/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
Connect Zeplin to ByteChef using OAuth 2.0 (Authorization Code).
Create a Zeplin OAuth app
- Log in to the Zeplin profile page and go to the Developer tab.
- Click Create new app.
- Enter an app name (for example,
ByteChef Integration). - Add the ByteChef OAuth redirect (callback) URL(s):
- Cloud:
https://app.bytechef.io/callback - Local development:
http://127.0.0.1:5173/callback
- Cloud:
- Click CREATE.
- Copy Client ID and Client Secret. You will use these in ByteChef when creating the Zeplin connection.
Actions
Update Project
Name: updateProject
Updates an existing project.
Properties
| Name | Label | Type | Description | Required |
|---|---|---|---|---|
| project_id | Project ID | STRING | Project to update. | true |
| name | Name | STRING | New name for the project. | true |
| description | Description | STRING | New description for the project. | false |
Example JSON Structure
{
"label" : "Update Project",
"name" : "updateProject",
"parameters" : {
"project_id" : "",
"name" : "",
"description" : ""
},
"type" : "zeplin/v1/updateProject"
}Output
This action does not produce any output.
Find Project ID
To find the Project ID, click here.
Triggers
Project Note
Name: projectNote
Triggers when new note is created, deleted or updated in specified project.
Type: DYNAMIC_WEBHOOK
Properties
| Name | Label | Type | Description | Required |
|---|---|---|---|---|
| project_id | Project ID | STRING | ID of the project you want to monitor. | true |
Output
Type: OBJECT
Properties
| Name | Type | Description |
|---|---|---|
| context | OBJECT Properties{{STRING(id), STRING(name)}(project)} | |
| resource | OBJECT Properties{{STRING(id), STRING(status), [{STRING(id), {STRING(id), STRING(email), STRING(username)}(author), STRING(content)}](comments)}(data)} | |
| action | STRING | The action that triggered the webhook. |
| event | STRING | The event that triggered the webhook. |
| timestamp | INTEGER | The timestamp of the event. |
JSON Example
{
"label" : "Project Note",
"name" : "projectNote",
"parameters" : {
"project_id" : ""
},
"type" : "zeplin/v1/projectNote"
}Find Project ID
To find the Project ID, click here.
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.
Additional Instructions
How to find Project ID
- Open Zeplin in your web browser (https://app.zeplin.io).
- Navigate to your project.
- Look at the URL in the address bar. The Project ID is the long string of characters at the end of the URL. Example: https://app.zeplin.io/project/5ab33a7928b7751764c16aaa1. The ID is 5ab33a7928b7751764c16aaa1.
How is this guide?
Last updated on