See llms.txt for all machine-readable content.

Back to Templates

Audit Figma designs against your design system with Gemini and Slack

Created by

Created by: toshiyuki kikuchi || cmr-kikuchi
toshiyuki kikuchi

Last update

Last update a day ago

Categories

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

  1. Triggers when a Figma named version is saved via webhook, when someone submits the audit request form, or every Monday at 9:00.
  2. Validates the request (including the Figma webhook passcode), loads the design guide from Google Docs, and fetches the Figma file structure.
  3. 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).
  4. 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.
  5. 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.
  6. 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.
  7. 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

  1. 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.
  2. Add Google Docs OAuth credentials for reading your design guide and update the design guide document URL in the workflow configuration.
  3. Add a Google Gemini API credential for the Gemini chat model used by the agent.
  4. Add Slack credentials and set the target channel ID in the workflow configuration.
  5. 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.