Audit Figma designs against your design system with Gemini and Slack

Go to Workflow
0 views
Built by toshiyuki kikuchi toshiyuki kikuchi
Created on October 26, 2026

Description

Quick overview
Audits only changed Figma frames against your design system: contrast, font size, tap targets, unlinked tokens and detached components. A Gemini agent reviews each screenshot with your design guide. New issues become Figma comments, fixed ones get a ✅ reply, and Slack gets summaries and weekly reports.

How it works
Triggers when a Figma named version is saved via webhook, when someone submits the audit request form, or every Monday at 9:00.
Validates the request (including the Figma webhook passcode), loads the design guide from Google Docs, and fetches the Figma file structure.
Selects the target page, lists top-level frames, compares frame fingerprints against the stored snapshots in n8n Data Tables, and keeps only frames that changed (or forces a review for form requests).
For each changed frame, runs deterministic checks on the Figma node tree for contrast, font size, tap targets, token/style usage, and possible detached components, then loads any still-open findings for that frame.
Exports a PNG screenshot from Figma and sends it, the layer index, the design guide, and open issues to a Google Gemini agent that proposes new issues and marks previously reported AI issues as resolved when they appear fixed.
Reconciles new, still-open, and fixed findings by pinning new comments in Figma, replying in existing threads for fixed items, and updating the findings and frame snapshots in n8n Data Tables.
Posts an audit summary to a Slack channel after each run and posts a weekly design-health report to Slack based on the stored findings and frame metrics.

Setup
Create a Figma personal access token with access to read file content and write comments, and configure it as HTTP Header Auth for all Figma API requests (including the layer-inspection tool) and set a webhook passcode.
Add Google Docs OAuth credentials for reading your design guide and update the design guide document URL in the workflow configuration.
Add a Google Gemini API credential for the Gemini chat model used by the agent.
Add Slack credentials and set the target channel ID in the workflow configuration.
Update the workflow configuration values (page name, review focus, thresholds, limits, and timezone), and if using the Figma trigger, register a Figma FILE_VERSION_UPDATE webhook pointing to the production webhook URL with the same passcode.

Requirements
Figma account with a personal access token (file content read, comments write)
Google Gemini API key
Google account with the design guide in Google Docs
Slack workspace with a bot (chat:write) invited to the target channel
n8n with Data Tables (n8n Cloud or a recent self-hosted version)

Customization
Change contrast, font size and tap-target thresholds or the per-run limits in Workflow Configuration
Set reviewLanguage to get Figma comments in another language
Add your own rules in Run Design Checks; new rules are tracked and closed automatically like the built-in ones
Replace the Slack nodes with Gmail or Microsoft Teams, or move the weekly report to another day

Additional info
Tested end to end on a Figma file with color variables, text styles, a component and a detached copy. On the second run, fixed issues received a "✅ Fixed" reply and reaction in their original comment threads, and unchanged frames were skipped.

This workflow was created by toshiyuki kikuchi and shared publicly on the n8n community template library. n8nFind indexes it for discovery — the workflow remains the property of its original creator.

Nodes Used (7)

AI Agent
@n8n/n8n-nodes-langchain.agent
Code
n8n-nodes-base.code
Google Docs
n8n-nodes-base.googleDocs
Google Gemini Chat Model
@n8n/n8n-nodes-langchain.lmChatGoogleGemini
HTTP Request
n8n-nodes-base.httpRequest
Slack
n8n-nodes-base.slack
Structured Output Parser
@n8n/n8n-nodes-langchain.outputParserStructured