Design systems at scale require close collaboration between a whole team of people: Product Managers, Front End, DesignOps, UI Engineers, and of course, Product Designers. With so many intersecting functions, it's important for all team members to stay up-to-date with the latest changes inside the design system.

Figma's in-product notifications are great for designers that are in the design tool everyday. But, what about everyone else that's involved with the design system that might only open Figma once a month?

Enter the Figma Design System Update Bot built inside of WayScript. It updates Slack any time a change is pushed to the design system.

"Doesn't Figma have a Slack integration!?" you might ask. Yes, but it doesn't do this! So, until they update their integration, here's a great, easy solution you can get up and running with a few steps and keep your design system team in-the-know.

Here's how to get set up:

  1. Create a WayScript account and clone the necessary code

Go here, log in, press clone.

2. Create a slack app for your workspace channel

Slack has an awesome app api that makes posting to channels a cinch. Head to https://api.slack.com/apps and create a new app.

Go to the "Incoming Webhooks" tab and activate it.

Once activated, create a new webhook for your workspace and assign it a channel to post to.

Copy the webhook URL to your clipboard.

3. Add the Webhook URL to WayScript and deploy your code

Open the WayScript Lair we cloned in step 1, and then open the ".env" file. Click on the row containing the Key called "SLACK_HOOK" and paste your Slack app Webhook URL into the "Value" field.

Then, click on the "Deploy" tab and press deploy. This puts your code into production.

4. Copy WayScript's HTTP Trigger endpoint

From the environment menu in the top left of the screen, switch to the production environment (labeled "prod").

Open the ".triggers" file and press the copy icon on the column labeled endpoint.

5. Setup Figma to send events to this endpoint

Head over to Figma's API.

There's this super handy tool in the right column that lets you easily create POST webhooks, you just need to enter a few pieces of info:

event_type: LIBRARY_PUBLISH
team_id: Enter your team ID
endpoint: Paste the URL we copied from WayScript in step 4.
passcode: notused

Then click on + Get personal access token. If you're logged in, this should generate an access token for you and fill in a field with it.

Finally, just press the "Submit API Request" button.

That's it!

Now, when you publish changes to your design library, it will update Slack with who changed what and when!