Figma Discord Webhook

After a few months working on the Discord Design System Team, I wanted to make a better effort to promote transparency and communication.

A big part of that communication is notifying our team of 20+ designers when any of our 4-5 libraries are changed and published.

Up until now, updates have been manually communicated by the person making the change. This is cumbersome as it's easy to forget to post an update. Since we use Discord everyday for communication (duh) it made sense to explore how to get publish events directly into our #product-design-system Discord channel, where most of our team would see them.

How does it work?

This process is possible thanks to Webhooks

Figma sends http requests to an endpoint of your choice whenever a specific event occurs. In this case we are listening for LIBRARY_UPDATE and FILE_VERSION_UPDATE events.

Figma webhooks are still in beta, and while I did encounter some bugs with the LIBRARY_UPDATE event, I ultimately got things working adequately enough using the FILE_VERSION_UPDATE event instead.

A request is sent from Figma to our CloudFlare Worker (these are amazing by the way, so simple to setup) as soon as one of the Figma files we're listening for is published. If the correct payload is received and validated (proper passcode, event_type, and file_key) a Discord message is crafted and sent to the webhook url of your choice (per file_key) which ultimately produces an update message seen above.

The code is up on Github and freely available to modify. Let me know if it's helpful or if you have any questions.