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!