🐴 How to use AI to automate Figma workflows

A step-by-step guide with tips and tricks

Feb 18, 2025

The next cohort of my course AI for Product Designers will start soon on March 3.
It's a rare course that covers emerging topics like AI-powered prototyping.
(Use promo code MAVEN100 to get $100 off at the checkout—expires at the end of Feb 20.)

Happy Tuesday,

Today, I'll share how I used AI to create an automation that instantly categorizes Figma comments and generates a structured summary in Google Docs—with just one click.

I'll cover:

The Problem (Why I wanted to build this)
The Solution (A simple demo)
A Step-by-step Walkthrough (How I built it)
Appendix (Additional considerations)

Let’s dive in!

The Problem

My Figma files often contain comments from various team members, such as product managers, designers, engineers, the brand team, and the legal team.

I would hover over each comment to read it in time, sort the feedback into themes, and then think about how to summarize those comments into useful insights.

But this process can be time-consuming if there are many comments—especially with new comments constantly coming in that need to be tracked.

Snapshot of the Figma file used for the demo

For demonstration purposes, I used the Mercedes-Benz app design as an example in the Figma file.

The Solution

I built an automation that lets me generate a summary of all Figma comments in an easy-to-read, simple, organized document.

I just need to click a button and the document is generated in less than 15 seconds.

Actually, I can even set up recurring automation, so I don’t need to click a button at all. It can automatically generate a summary report based on the time interval I set.

And this is what the summary document looks like:

Alright. Let’s me walk you through how I built the automation step by step.

Step 1: Connect Figma to fetch comments

I used Make.com, a no-code automation platform similar to Zapier.

I added a "Figma’s List Comments” component to pull comments from my Figma file.

Then I needed to provide the File ID, which I could easily copy & paste from the URL.

I could also set a limit on how many comments to fetch at a time. In my case, 400 was more than enough.

If you don’t expect your Figma file to receive many comments, you could lower the number to 50–100 or even less to make the automation run faster.

Step 2: Format the comments before feeding them to AI

Actually, I didn’t include this step at first, but I realized that was a mistake.

When I tried to send the data straight to Google Gemini AI (which I’ll cover in Step 3), it didn’t work properly.

The AI got confused because it received too much unnecessary information. Instead of just the comment text, it also mixed in other data like timestamps, IDs, file keys, order positions, reactions, etc, as you can see from below:

The direct output from the Figma component

That’s why this step can clean up the data and make sure AI only gets the actual comments.

Step 3: Categorize, summarize, and format Figma comments with AI

This is the core of the automation—it's the most important step and also my favorite.

1. Why Google Gemini AI

I chose Google Gemini AI simply because it is pretty much free and offers a generous level of rate limit. In contrast, using OpenAI or Claude’s API can become costly.

Gemini AI includes many models, which can be confusing.

For this experiment, I selected an older model—Gemini 1.0 Pro—since it is sufficient for my needs. If you are interested, you can try out Gemini 2.0 Flash.

Lastly, I went to https://ai.google.dev/ to get the API key. It was very easy to set up.

2. Provide the User Text

User Text is what the user is asking the AI to do.

This is what I put in the text box:

Below is a list of Figma comments from a design file.

- Categorize them into maximum **4 categories** based strictly on their content.

- Use the **exact wording from the Figma comments** without modifying or making up content.

- Each category should include:

  - A **heading** using `<h2>Category Name</h2>`.

  - A **bolded summary** inside `<p><b>Summary text here</b></p>`.

  - A **list of real examples** inside `<ul><li>"Actual Figma Comment"</li></ul>`, with spacing before the list.

  - **Limit to a maximum of 4 bullet points per category**.

- **Do not add new examples. Only use what is provided in the formatted comments.**

- If a comment does not fit into one of the 3 categories, place it under `"Other"`.

- **You can only respond in HTML format** and must use these tags:

  `<h2>`, `<p>`, `<ul>`, `<li>`, `<b>`, and `<a>`.

---

### **Figma Comments (Dynamically Pulled from File):**

{{formatted_comments}}

It looked complex because I was trying to accomplish a few things in one prompt.

Let me explain them one by one:

1) Limit the numbers of categories and bullet points.

I prefer to set extra constraints to keep the final summary concise and easy to scan. Limiting it to a maximum of 4 categories with a maximum of 4 bullet points under each ensures that the AI’s response remains focused.

2) Format It as HTML.

The goal is to directly generate a properly styled Google Doc without needing extra formatting later. Just to make the workflow even more convenient.

3) Use the exact wording from the Figma comments.

While I have confidence in AI’s ability to summarize, I need to see the actual quotes for better reference and double check the summary to make sure it’s accurate enough.

4) Include {{formatted_comments}} at the end

This tag ensures the Gemini AI component pull the latest comments from the Figma API component dynamically every time the automation runs.

3. Set up the output token and temperature

I did make two advanced settings in the Google Gemini API.

I set the Maximum Output Tokens as 1000 (1 token ≈ ¾ of a word, so 1000 tokens is like 750 words) just to keep the response concise, rather than generating a long essay for me.

I also set the Temperature as 0.1. The lower the value is, the more factual the response is. The higher the value is, the more creative/random the response is. In this case, I would rather it as reliable as it can be to prevent from random summaries.

Step 4: Connect to Google Doc

This is an easy step—just point to the folder that you want to create the document in.

The settings of the Google Docs component

That’s it! If I click the "Run once" button, a new document called "test" should appear in the "test" folder in my Google Drive with a summary of all the Figma comments.

Appendix

1. Text Parser is no longer necessary.

Initially, I used this Text Parser component as an intermediary step. It could convert the Markdown response from Gemini AI into styled HTML, so that I wouldn’t have to format it later in Google Docs. It already handled that for me.

But I later realized that since I could directly ask Gemini to format its response in the prompt (as specified in Step 3 above), this step is no longer necessary.

The settings of the Text Parser component

2. Do due diligence on the response.

There was some randomness in the summary that I still want to improve. When running the same test, sometimes it adhered well to the Figma comments, while other times it made things up. It’s a good reminder to always double check the AI’s responses rather than blindly following them.

3. The scheduling feature can be helpful.

In my experiment, I only need to manually click on the “run” command once, but the “schedule setting” feature can be helpful.

For example, if you have a Figma file where people actively leave comments every day, you can potentially set up a daily automation—e.g. every morning at 9AM, you’ll get an updated summary document.

If you're more ambitious, you can even connect to a Slack component at the end—e.g. every time a document is generated, you’ll receive a notification in Slack.

Thanks for reading.

Until next week,

Xinran

P.S. Couldn’t find my glasses this morning in the dark and didn’t want to wake up my kids. So I had to wear my prescription sunglasses to write this newsletter…