Changelog Figma implementation plan

[tombrewsviews]

Prompt: provide step-by-step implementation plan to create automation between figma, zapier and slack

the goal of the automation is to check for component frame updates in a specific file and send a slack message if there was no changelog comment associated with the updated component frame

the flow of the automation:

1. get access to the selected figma file
2. check for any updates
3. if there was a component change check if there was a comment added with a changelog by the user who made the change to the file
4. if there was component change and no comment send a slack message reminding about the comment
5. if there was component change and comment do nothing
6. take the reply content from the thread on the original message and send it to figma as a changelog message

attaching the flow chart and the example file structure screenshots

Plan:

Step 1: Set Up Webhook for Figma Events In the Figma desktop app or in the browser, go to the 'Plugins' section. Create a new plugin or use an existing one and go to its settings. In the plugin settings, find the 'Webhooks' section. Add a new webhook and set the event type to listen for component updates. Input the URL where you want to receive the webhook payloads. This URL will be from a server you control or a service like Zapier Webhooks. Step 2: Set Up a Server to Receive Webhook Payloads Set up a server with an endpoint to receive POST requests from Figma. Use a framework like Express.js for Node.js to handle incoming webhook requests. Verify the webhook signature to ensure the requests are from Figma. On receiving a webhook event, parse the payload to determine if a component frame has been updated. Step 3: Check for Changelog Comments in Figma When your server receives a payload indicating a component frame update, use the Figma API to check for comments. Make a GET request to https://api.figma.com/v1/files/:file_key/comments with your server. Analyze the comments to determine if a changelog entry was made for the updated component. Step 4: Send Slack Message if No Changelog Comment If no changelog comment is associated with the updated component, use the Slack API to send a message. Set up an incoming webhook in Slack or use a Slack bot to post messages to the desired channel. Send a POST request to Slack with a reminder message about adding a changelog comment. Step 5: No Action if Changelog Comment Exists If a changelog comment is present, the server should take no further action. Step 6: Listen for Replies on Slack and Post Back to Figma If you're using a Slack bot, subscribe to message events in the Slack API. When a reply is detected, capture the content. Use the Figma API to post the captured content back into the Figma file as a changelog comment.

revised Step 1: Use a Third-Party Service to Create Webhooks Use a service like Zapier, which can poll Figma's API at regular intervals to look for changes in the file. In Zapier, set up a "Zap" that triggers on a schedule (e.g., every 5 minutes) and checks the Figma file for changes using the Figma API. If Zapier detects changes, it can then send a webhook to an endpoint you specify with details of the change. Step 2: Set Up the Endpoint to Receive Webhooks Create an endpoint on your server or use a serverless function that can receive POST requests. This endpoint will process the JSON payload sent by Zapier when it detects changes in the Figma file. Step 3: Verify Changes and Send Slack Messages Your server or serverless function should handle the logic to verify if there is an update to a component frame and if there is an associated changelog comment. If there is an update without a changelog comment, use the Slack API to send a message to the relevant channel or user. Step 4: Monitor Slack for Replies and Update Figma If you're using a Slack bot, you can listen to replies in the thread and once a reply is detected, you can use the Figma API to update the changelog in the Figma file. Step 5: Test and Deploy Test your setup thoroughly to ensure that the triggers, webhook reception, and Slack messaging work as intended. Once tested, deploy your server or serverless function and make sure your Zap in Zapier is turned on.\

revied with make:

To implement the automation between Figma, Make (formerly Integromat), and Slack, follow this step-by-step plan:

Step 1: Access the Figma File

• Obtain access to the specific Figma file you wish to monitor.
• Generate a Personal Access Token from the Figma API by going to the account settings in Figma and looking under the API section.

Step 2: Create a Make Scenario for Figma Updates

• Log in to your Make account.
• Create a new scenario and search for the Figma module.
• Use the "Watch Files" or a similar event to trigger when there are updates in Figma.
• Connect your Figma account using the Personal Access Token and select the specific file to monitor.

Step 3: Filter for Component Updates

• Add a filter to your Make scenario that checks if the update type corresponds to a component frame update.
• You can do this by examining the output of the trigger and setting conditions based on the update details.

Step 4: Use Make Tools to Check for Changelog Comments

• If a component update is detected, use the HTTP module to make an API call to Figma to fetch comments for the updated component frame.
• Set up the HTTP request to GET https://api.figma.com/v1/files/:file_key/comments.
• Use the Figma Personal Access Token for authentication.

Step 5: Slack Notification for Missing Changelog Comment

• If the changelog comment is missing (based on the output from the HTTP request), add another module to your scenario.
• Choose the Slack module and use the "Create a Message" action to send a notification.
• Connect your Slack account and configure the message content, mentioning the need for a changelog comment.

Step 6: Do Nothing if Comment Exists

• Add another filter to the scenario that stops the process if a changelog comment is found associated with the component update.

Step 7: Handle Slack Replies and Update Figma

• Set up another scenario in Make that watches for messages in Slack, specifically looking for replies in a thread that pertains to the Figma update notification.
• Use filters to ensure that the message is relevant to the Figma component update.
• When a reply is detected, use the HTTP module again to post the reply content back to Figma as a changelog comment, using the POST https://api.figma.com/v1/files/:file_key/comments endpoint.

Step 8: Testing and Deployment

• Test your scenario thoroughly to make sure that all filters and actions are correctly set up.
• Ensure that the scenario behaves as expected when there are updates to the component frames and when comments are present or missing.
• Once tested, activate the scenario.

Additional Considerations:

• Security: Ensure that all connections to external services are secure and that any sensitive data, like Personal Access Tokens, is handled securely.
• Error Handling: Implement error handling within your Make scenarios to manage any exceptions or failed HTTP requests.
• Monitoring: Regularly check the execution logs in Make to ensure the scenario is running as expected and to troubleshoot any issues.

This implementation plan is designed to automate the monitoring of Figma file updates, checking for associated changelog comments, and sending notifications through Slack, with the entire workflow managed by Make scenarios.

• [ ] set up make
• [ ] set up api backend
• [ ] set up slack integration

[tombrewsviews]

Here's a basic server setup using Express.js:

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;

app.use(bodyParser.json());

app.post('/figma-webhook', (req, res) => {
    const payload = req.body;
    // Here, you should validate the webhook signature for security
    // Process the webhook payload to determine if a component frame was updated
    // ...

    res.status(200).send('Webhook received');
});

app.listen(port, () => {
    console.log(`Server listening at http://localhost:${port}`);
});

Here's an example POST request to the Slack API for sending a message:

const axios = require('axios');
const slackWebhookUrl = 'YOUR_SLACK_WEBHOOK_URL';

axios.post(slackWebhookUrl, {
    text: 'A component was updated without a changelog comment. Please add one.'
})
.then((response) => {
    console.log('Message posted to Slack');
})
.catch((error) => {
    console.error('Error posting message to Slack', error);
});

[tombrewsviews]

Figma files: https://www.figma.com/file/rkAqnqpNwI1Mywcuc7ZSI6/Example-component-file-with-changelog?type=design&node-id=0%3A1&mode=design&t=4vvwkz4egC6qsWYr-1 https://www.figma.com/file/7LPUHoLm3dxhCbVs35jQFV/Update-changelog?type=whiteboard&node-id=0%3A1&t=MYDTDuXR2RsuMpat-1

[tombrewsviews]

Figma token: figd_R9WwWgZRBE43nxxEwHfjcvDa5ptQEpV5cqJY5-S-

[tombrewsviews]

potentially we can use: https://buildship.app/

[tombrewsviews]

Listing all updated frames from a specific Figma file involves using the Figma REST API to fetch the file and then compare the versions to identify changes. Here's how you can achieve this:

Step 1: Get the File Versions

Use the GET /v1/files/:file_key/versions endpoint to retrieve a list of versions for the file.

Step 2: Compare Two Versions

Once you have the list of versions, choose two versions to compare. This could be the most recent version and the one before it, or any two versions between which you want to detect changes.

Step 3: Fetch the File Contents for Each Version

For both versions, use the GET /v1/files/:file_key?version=:version endpoint to fetch the contents of the file at each version.

Step 4: Parse the Document Structure

The response for the file contents will include the document structure in JSON format. Parse this JSON to analyze the structure of the frames.

Step 5: Identify Updated Frames

Write a script to compare the two document structures and identify frames that have been updated. You will need to compare node IDs and their properties to find differences.

Example in Node.js

Below is a high-level example of how you might write a Node.js script to fetch versions and compare frames:

javascriptCopy code
const axios = require('axios');

const figmaToken = 'YOUR_FIGMA_TOKEN';
const fileKey = 'YOUR_FIGMA_FILE_KEY';

const headers = {
    'X-Figma-Token': figmaToken
};

// Function to get file versions
async function getFileVersions() {
    const versionsResponse = await axios.get(`https://api.figma.com/v1/files/${fileKey}/versions`, { headers });
    return versionsResponse.data.versions;
}

// Function to get file contents for a specific version
async function getFileContents(version) {
    const fileResponse = await axios.get(`https://api.figma.com/v1/files/${fileKey}?version=${version}`, { headers });
    return fileResponse.data.document;
}

// Function to compare two versions and list updated frames
async function listUpdatedFrames(oldVersion, newVersion) {
    const oldFileContents = await getFileContents(oldVersion);
    const newFileContents = await getFileContents(newVersion);

    // Pseudo-function to compare two document structures
    const diff = compareDocumentStructures(oldFileContents, newFileContents);

    // This is where you would implement the logic to compare the structures
    // and identify updated frames

    return diff;
}

// Call this function with the appropriate version IDs
listUpdatedFrames('old_version_id', 'new_version_id').then(updatedFrames => {
    console.log(updatedFrames);
}).catch(error => {
    console.error(error);
});

In this script, compareDocumentStructures is a placeholder for your comparison logic, which will likely involve a recursive function to walk through the frame tree and compare each node.

Note:

• This is a simplified example. In practice, you'll need to handle pagination if there are many versions or if the document structure is large.
• You'll also need to account for the specific properties you're interested in when determining what constitutes an "update" to a frame.
• Figma does not provide a direct way to fetch only updated frames between versions through their API, so this comparison logic is necessary.

Remember, you need to have the right permissions to access the file contents through the API.