Zeplin

Microsoft Teams workflows are customizable automations designed to streamline tasks, improve collaboration, and boost productivity.

With Zeplin webhooks, you can bring important updates directly to Microsoft Teams, ensuring your teammates stay informed about changes in Zeplin. Creating a Zeplin workflow in Teams allows everyone to:

Receive notifications about design changes

Track updates for components, colors, text styles, and spacing tokens

- Receive notifications about design changes
- Stay updated on conversations
- Track updates for components, colors, text styles, and spacing tokens

To have workflow working properly, you’ll need to:

Set up a webhook in Zeplin and configure events

- Create a workflow in Microsoft Teams
- Set up a webhook in Zeplin and configure events

☝️ If you’ve been using the <a href="https://support.zeplin.io/en/articles/4475316-installing-zeplin-for-microsoft-teams">Zeplin app for Microsoft Teams</a>, you’ll still need to set up a workflow to continue receiving Zeplin updates in your Microsoft Teams channels.

Creating your Zeplin workflow in Microsoft Teams

To start, open your Microsoft Teams app or website.

- Navigate to the left panel in the Microsoft Teams app and click on "Workflows". If you don’t see "Workflows" there, click on "…" options button and search for it.

- Click on the "+ New flow" button in the top-right corner.
- Click on the "Create from blank" button located in the top-right corner.
- Provide a name for your workflow.

- In the search bar, type "webhook" and select "When a Teams webhook request is received".
- From the "Who can trigger the flow?" dropdown menu, select "Anyone".
- Click on "+ New Step".

- In the "Choose an operation" search bar, type "post" and select "Post card in a chat or channel".
- In the "Post as" menu, choose "Flow bot". If posting to a private channel, select "User".
- In the "Post in" menu, choose "Channel".
- Select the desired team and channel where you would like the post to appear.
- For the "Adaptive card" option, click on "Add dynamic content" and select "Adaptive Card".

- Click on the "Save" button.
- Once saved, click on the "When a Teams webhook request is received" block to copy the generated URL.

1. Open workflows in Microsoft Teams
 - Navigate to the left panel in the Microsoft Teams app and click on "Workflows". If you don’t see "Workflows" there, click on "…" options button and search for it.
 
2. Create a new workflow
 - Click on the "+ New flow" button in the top-right corner.
 - Click on the "Create from blank" button located in the top-right corner.
 - Provide a name for your workflow.
 
3. Configure the webhook trigger
 - In the search bar, type "webhook" and select "When a Teams webhook request is received".
 - From the "Who can trigger the flow?" dropdown menu, select "Anyone".
 - Click on "+ New Step".
 
4. Add a post action
 - In the "Choose an operation" search bar, type "post" and select "Post card in a chat or channel".
 - In the "Post as" menu, choose "Flow bot". If posting to a private channel, select "User".
 - In the "Post in" menu, choose "Channel".
 - Select the desired team and channel where you would like the post to appear.
 - For the "Adaptive card" option, click on "Add dynamic content" and select "Adaptive Card".
 
5. Save the workflow
 - Click on the "Save" button.
 - Once saved, click on the "When a Teams webhook request is received" block to copy the generated URL.

To create a new webhook, let’s navigate to the Zeplin webapp.

- Click on your profile picture in the top-right corner.
- Select the workspace where you want to receive notifications from.
- On Workspace Members page, click on the "Settings" button and navigate to the "Developer" tab.
- Click on "Create new webhook".
- Paste the URL copied from the Microsoft Teams workflow.
- Add a secret key for your webhook.

- If you wish to receive all events, select "Subscribe to all events". Otherwise, select "Subscribe to individual events" and choose the specific events you wish to receive. Note that not all events are supported by the Microsoft Teams app; please refer to the list below for available events.

- Ensure the "Make this webhook active" checkbox is selected.
- Click on the "Create" button to finalize the setup.

1. Set up the webhook in Zeplin
 - Click on your profile picture in the top-right corner.
 - Select the workspace where you want to receive notifications from.
 - On Workspace Members page, click on the "Settings" button and navigate to the "Developer" tab.
 - Click on "Create new webhook".
 - Paste the URL copied from the Microsoft Teams workflow.
 - Add a secret key for your webhook.
 
2. Configure event subscriptions
 - If you wish to receive all events, select "Subscribe to all events". Otherwise, select "Subscribe to individual events" and choose the specific events you wish to receive. Note that not all events are supported by the Microsoft Teams app; please refer to the list below for available events.
 
3. Activate the webhook
 - Ensure the "Make this webhook active" checkbox is selected.
 - Click on the "Create" button to finalize the setup.

Event	Project	Styleguide
Color created	✅	✅
Color updated	✅	✅
Text style created	✅	✅
Text style updated	✅	✅
Component created	✅	✅
Component updated	✅	✅
Spacing token created	✅	✅
Spacing token updated	✅	✅
User added	✅	✅
Screen created	✅	N/A
Screen updated (new version created)	✅	N/A
Comment created	✅	N/A
Flow created	✅	N/A

Creating your Zeplin workflow in Microsoft Teams

Setting up a webhook in Zeplin

Supported events