实现一个Figma Slack 插件

贾克森
346 阅读2分钟

最近在使用Figma，但是经常遇到设计改动没有得到及时反馈的问题，就想着和slack做一个集成，每次UI有变动都及时通知到Slack channel。

本身Figma的付费套餐是支持使用这样一个通知插件的，但是😔由于我团队使用的免费版本，所以只能手撸一个。

这是我给这个插件取的名字： FigmaSync for Slack

这是仓库地址：github.com/JackZong/Fi…

如果你也喜欢的话，给个start吧 💗

例子

example.png

怎么使用

  • 支持一键部署到vercel Deploy with Vercel

  • 配置环境变量 env.local

  • 部署成功后，检查应用是否生效

    • GET {your_app_url}/api/healthcheck should returns {status: 200,message: "success."}
    • POST {your_app_url}/api/figma should returns {status: 200,message: "initial data"}
    • Then go to Figma try to make new comment or save new version history. Like this:

new_version.png

  • Set up the cron job

Note: we build our app with Next.js's serverless function and deploy it on Vercel by free. In free plan, we are able to set cron job by twice a day, so we need Vercel pro plan or set up the cron job to call API regular by ourself

cron_job.png

env.local

set up the env.local and paste to vercel app environment variable

FIGMA_TOKEN = xxx; // Figma Token
FIGMA_FILE_ID = xxx; // The Figma file ID which you want to listen
FIGMA_FILE_LINK = xxx; // The Figma file link which you are listening,like https://www.figma.com/file/[FIGMA_FILE_ID]/[FIGMA_FILE_NAME]
SLACK_WEBHOOK = xxx; // The Slack Incoming Webhooks url
FIGMA_COMMENT_LINK = xxx; // https://www.figma.com/file/[FIGMA_FILE_ID]?mode=design#{ID}

About Figma

  1. Get a Personal Access Token

    1. While logged into Figma on the web or the desktop app, visit your Account Settings
    2. Under Personal Access Tokens, click "Create a new personal access token"
    3. Name the the access token whatever you'd like, for example: figma-slack-updates
    4. Copy the token - this is your only chance to do so! This is your FIGMA_TOKEN

figma_token.png

  1. Get your file key

    Visit the Figma file that you'd like to post updates for and copy its file key. The file key can be found when you copy the file's link or visit the file on the web: figma.com/file/file key/... This is your FIGMA_FILE_ID

About Slack

  1. Get Slack webhook url
  • Go to slack app gallery
  • Add Incoming WebHooks to the channel which you want to push updates

slack_add_channel.png

  • Copy the Webhook Url, this is your SLACK_WEBHOOK

slack_copy_webhook.png

  • Also, you can custom a app name and app logo

Or: you can create your own Slack app here => api.slack.com/apps

Cron job

two ways to set up cron job

  • Vercel Pro user
  • Find a tool by yourself

Vercel Pro Trial

if you are vercel pro user, then you can use vercel's Corn job directly. Just add a vercel.json at root folder.

{
  "crons": [
    {
      "path": "/api/figma",
      "schedule": "*/3 * * * *"
    }
  ]
}
// above means `/api/figma` will be called every 3 minutes, but you need change /api/figma/route.ts to GET function

More detail => vercel.com/docs/cron-j…

Find a tool by yourself

you can search for free cron job or deploy one by yourself

examples:

  • Cron-job.Org(free)

cron_job_org.png

Reference

Enjoy your bot. :)

avatar
文章
阅读
粉丝