This is the continuation of my previous post about the automation icon library in Vue, in this post I will share the upgrade version of it by using Figma webhook and Github action.
You can see the full code and the documentation here:
Steps
to build the workflow, I divide the process into several steps:
- Part 1: Setup Figma Project
- create Figma Team
- list icon in Figma file
- Part 2: Setup Figma Webhook
- listen to change from the file
- hit Github API to trigger the build process
- Part 3: Setup Github Action Workflow
- export icon from Figma
- build the package and Create PR
- publish Icon to NPM
Part 1: Setup Figma Project
Figma webhook will allow us to observe when specific events happen in file Figma team project, in each payload will contain file information. Currently, Figma does not have UI for the webhook, thus we must listen to the webhook through API.
To create a new team, click on "Create new team" on your Figma dashboard, then you need to fill in the team information and team member, for pricing plan select Professional plan to be able to use webhook.
Finally, create a new file in the team project and list icons that are going to be generated to the icon library.
Part 2: Setup Figma Webhook
Because Figma does not have an interface for webhook we must create our own API to listen to change and notify it to Github.
Listen to change from the file
To set up the webhook I learn from this amazing post, in that post, we will learn how to create a webhook locally and use ngrok to expose a public URL for our local webserver. For our workflow, we will use FILE_VERSION_UPDATE to listen to changes when the version of our Figma file is updated, more info about events that available in the webhook here.
axios({
baseURL: process.env.FIGMA_BASE_URL,
method: 'post',
headers: {
'X-Figma-Token': process.env.DEV_ACCESS_TOKEN,
},
data: {
event_type: 'FILE_VERSION_UPDATE',
team_id: process.env.FIGMA_TEAM_ID,
passcode,
endpoint,
},
})
From the request above, the response will be:
{
created_at: '2021-11-20T04:35:40Z',
description: 'add share_outline icon',
event_type: 'FILE_VERSION_UPDATE',
file_key: 'file_key',
file_name: 'my_team library',
label: '0.0.1',
passcode: 'passcode',
protocol_version: '2',
retries: 0,
timestamp: '2021-11-20T04:35:41Z',
triggered_by: { id: 'id', handle: 'Akbar Nafisa' },
version_id: 'version_id',
webhook_id: 'webhook_id'
}
Hit Github API to trigger the build process
Fo each PING, we will check if the file_name is a match, then hit Github API to trigger the build, we also send event_type to notify what process that we want to do for our Github action
app.post('/', async (request, response) => {
if (request.body.passcode === passcode) {
const { file_name, timestamp } = request.body
console.log(`${file_name} was updated at ${timestamp}`)
console.log(request.body)
response.sendStatus(200)
if (file_name === 'my_team library') {
ghDispatch()
}
} else {
response.sendStatus(403)
}
})
const ghDispatch = () => {
axios({
url: process.env.GITHUB_BASE_URL,
method: 'post',
headers: {
Authorization: 'token ' + process.env.GITHUB_TOKEN,
'Content-Type': 'application/json',
},
data: {
event_type: 'update_icon',
},
})
.then(res => {
if (res.status === 204) {
console.log(`✅ Dispatch action was emitted`)
} else {
console.log(`❌ Dispatch action was failed to be emitted`)
}
})
.catch(error => {
if (error.response) {
console.log(`❌ Dispatch failed, ${error.response.data.message}`)
}
})
}
These are the env variables that we use in this Figma webhook project, for full code you can check it here.
FIGMA_BASE_URL = https://api.figma.com/v2/webhooks
FIGMA_TEAM_ID = https://www.figma.com/files/team/{FIGMA_TEAM_ID}/{FIGMA_TEAM_NAME}
DEV_ACCESS_TOKEN = Figma token, more info [here](https://www.figma.com/developers/api#access-tokens)
GITHUB_BASE_URL = https://api.github.com/repos/{username}/${repository}/dispatches
GITHUB_TOKEN = Github token, set your token [here](https://github.com/settings/tokens)
Part 3: Setup Github Action Workflow
We already established on how to build the icon in the previous post, in this step, we will try to export the icon from Figma, build it and publish it to NPM
Export Icon from Figma
I learn how to export the Figma icon from this amazing article, the script already handles what we need on how to get all of the icons.
Then we add the workflow to Github action, for the CI/CD process.
name: icon-automation
on:
repository_dispatch:
types: [update_icon]
jobs:
icon_automation:
name: figma icon automation
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '14'
- run: yarn install
- name: Export icon
env:
FIGMA_BASE_URL: ${{ secrets.FIGMA_BASE_URL }}
FIGMA_PROJECT_ID: ${{ secrets.FIGMA_PROJECT_ID }}
FIGMA_PROJECT_NODE_ID: ${{ secrets.FIGMA_PROJECT_NODE_ID }}
DEV_ACCESS_TOKEN: ${{ secrets.DEV_ACCESS_TOKEN }}
run: |
yarn export-svgs
yarn optimize-svgs
Build the package and Create PR
The new icon will be generated as a Vue component in the Build icon step, then commit and push the new icon in the Commit SVGs step, we also get the version history description to use it as a committed label in the step get-commit-label, but this step is unnecessary, you can use any commit message. Finally, we create a pull request to the main branch to be reviewed in Create Pull Request step.
name: icon-automation
on:
repository_dispatch:
types: [update_icon]
jobs:
icon_automation:
name: figma icon automation
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '14'
- run: yarn install
- name: Export icon
env:
FIGMA_BASE_URL: ${{ secrets.FIGMA_BASE_URL }}
FIGMA_PROJECT_ID: ${{ secrets.FIGMA_PROJECT_ID }}
FIGMA_PROJECT_NODE_ID: ${{ secrets.FIGMA_PROJECT_NODE_ID }}
DEV_ACCESS_TOKEN: ${{ secrets.DEV_ACCESS_TOKEN }}
run: |
yarn export-svgs
yarn optimize-svgs
- name: Build icon
run: yarn generate-svgs
- uses: actions/github-script@v5
id: get-commit-label
env:
FIGMA_BASE_URL: ${{ secrets.FIGMA_BASE_URL }}
FIGMA_PROJECT_ID: ${{ secrets.FIGMA_PROJECT_ID }}
FIGMA_PROJECT_NODE_ID: ${{ secrets.FIGMA_PROJECT_NODE_ID }}
DEV_ACCESS_TOKEN: ${{ secrets.DEV_ACCESS_TOKEN }}
with:
script: |
const getCommitLabel = require('./packages/svgs/exporter/getCommitLabel.js')
return await getCommitLabel()
result-encoding: string
- name: Get result
run: echo "${{steps.get-commit-label.outputs.result}}"
- name: Commit SVGs
run: |
git config user.name github-actions
git config user.email github-actions@github.com
git add .
git commit -m "feat(icon): ${{steps.get-commit-label.outputs.result}}"
- name: Create Pull Request
uses: peter-evans/create-pull-request@v3.11.0
with:
token: ${{ secrets.GH_TOKEN }}
branch-suffix: short-commit-hash
commit-message: Auto Pull Request
title: "Add Icon: ${{steps.get-commit-label.outputs.result}}"
body: Auto-created Pull Request
The pull request example can be seen here.
Publish Icon to NPM
Publishing icon to NPM can be automated using Github action, for this workflow, it is only triggered if there is a pull request from create-pull-request/* branch and it's merged to the main branch.
name: publish-package
on:
pull_request:
branches:
- main
types: [closed]
jobs:
publish-package:
if: contains(github.head_ref, 'create-pull-request/') && github.event.pull_request.merged == true
runs-on: ubuntu-latest
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
steps:
# https://stackoverflow.com/a/67581515
# 1. provide Personal Access Token for checkout@v2
- name: Checkout
uses: actions/checkout@v2
with:
submodules: recursive
token: ${{ secrets.GH_TOKEN }}
# 2. setup .npmrc it uses NODE_AUTH_TOKEN
- name: Setup .npmrc file for publish
uses: actions/setup-node@v2
with:
node-version: '12.x'
registry-url: 'https://registry.npmjs.org'
# 3. configure git user used to push tag
- name: Configure Git User
run: |
git config --global user.email "ci@your-site.com"
git config --global user.name "ci@$GITHUB_ACTOR"
- name: Install dependencies
run: yarn install
- name: Publish
run: |
yarn lerna:new-version
yarn lerna:publish
Wrapping it up
The combination of Figma webhook and Github action can be so powerful, compare to the previous workflow, we can update and publish icons without opening our editor, for the new flow we can add the icon, update the version, merge the pull request, and the icon library is already updated. I hope this post can give you some insight on how to automate the process for icon library by using Figma webhook and Github action and also I want you to explore what other workflow that can be automated!
Top comments (0)