Atomize — Design System Audit

Design system auditor for Figma. Scan colors, fonts, spacing, components, and WCAG contrast without leaving your design file.

Atomize — Design System Audit for Figma Atomize is a free Chrome extension that adds quick design-system checks while you work in Figma in your browser (figma.com). Open a design file, click the Atomize icon, and run three lightweight tools from the popup — no separate app to install. IMPORTANT — WHAT THIS EXTENSION IS (AND IS NOT) This extension runs inside your browser tab on figma.com. It reads the visible web page DOM (Figma’s UI shell and any HTML-rendered elements). It does NOT access your Figma file through the Figma Plugin API, does NOT walk canvas layers, and does NOT read Figma Variables, components, or bound design tokens. Think of it as a fast preview and entry point. For production-grade audits — untokenized values, real contrast on design layers, token grouping, exports, and canvas selection — install the full Atomize plugin inside Figma: https://www.figma.com/community/plugin/1633830079327348736 Website: https://atomize.tools/ --- WHEN IT WORKS • On figma.com/design/…, figma.com/file/…, or figma.com/board/… — all three tools are available. • On the Figma dashboard (figma.com/files/…) — tools are visible; open a file first to scan. • On any other site — the extension prompts you to open Figma in your browser. --- THREE TOOLS IN THE POPUP 1) QUICK AUDIT A heuristic scan of the current browser page for signs of design inconsistency: • Inconsistent colors — samples computed background colors from DOM elements • Duplicated components — repeated text labels that may indicate duplicate UI patterns • Spacing issues — varied margin/padding values sampled from the page Results appear in the popup with a total issue count. You can open a shareable report on atomize.tools (saved via a session link). Quick Audit is a directional preview, not a full file audit. 2) FONT SCANNER Samples up to 300 text-related DOM elements and reports: • Font families grouped by family + weight (with counts) • Font sizes sorted ascending (with counts) Because Figma renders most design text on the canvas (not as DOM text), this scan primarily reflects what the browser can see — mainly Figma’s interface chrome, not every text layer in your design. For a complete typography inventory of TEXT nodes in your file (selection, page, or entire file) with “select all matching layers,” use Font Scanner in the Atomize Figma plugin. 3) CONTRAST AUDIT (WCAG 2.1 PREVIEW) Checks foreground/background color pairs from DOM elements against WCAG 2.1 contrast thresholds: • Body text — AA at 4.5:1 • Large text and UI elements — A at 3:1 • Results grouped as Text vs UI Elements • Each row shows contrast ratio, foreground/background swatches, and pass/fail badges • Skip / Skip all for items you want to ignore during review • Built-in explainer for what contrast ratios mean This is a browser-side preview. It does not composite stacked Figma fills, resolve Variables, or audit every layer on the canvas. The full Atomize Contrast Audit plugin composites real backgrounds, groups failures by design token (Issues / Atoms / Primitives tabs), and exports JSON or XLSX. --- FULL ATOMIZE FIGMA PLUGIN Install the Atomize plugin in Figma for design-system work at file level: • Find Untokenized Values — scan Selection, Page, or File for hardcoded fills, spacing, radius, typography, and more; suggested tokens; jump to layers; export JSON/XLSX • Contrast Audit — WCAG bulk scan with composited backgrounds and token-level grouping • Font Scanner — full file typography inventory; select matching text layers on the canvas • Find and Replace — search and replace across your file • Coverage Audit — measure how much of your design is bound to Figma Variables • Design token workflows — Primitives, Atoms, import/export, sync options (see atomize.tools) • UI in 11 languages: English, Spanish, Georgian, Japanese, German, French, Chinese (Simplified), Korean, Portuguese (Brazil), Russian, Ukrainian Plugin: https://www.figma.com/community/plugin/1633830079327348736 Feature guides: https://atomize.tools/features/ Blog & guides: https://atomize.tools/blog/ --- HOW TO USE THE EXTENSION 1. Install this Chrome extension. 2. Open Figma in Chrome and open a design file. 3. Click the Atomize icon in the toolbar. 4. Choose Quick Audit, Font Scanner, or Contrast. 5. Run the scan and review results in the popup. 6. For Quick Audit, optionally open the online report link. 7. When you need file-level accuracy, click Install Plugin to get the full Atomize Figma plugin. --- PERMISSIONS • activeTab — interact with the Figma tab you have open • https://www.figma.com/* — inject the content script only on Figma pages The extension does not request access to all websites. It only runs on figma.com. --- PRIVACY & DATA Quick Audit can save summary results to Atomize’s backend so you can open a report URL (session-based link on atomize.tools). Font Scanner and Contrast Audit run locally in your browser tab; results stay in the popup unless you choose to share them. --- WHO IT’S FOR • UI/UX designers and design-system maintainers using Figma in the browser • Teams checking typography drift, contrast risk, or inconsistent styling before a deeper audit • Anyone who wants a quick Atomize preview before installing the full Figma plugin --- Atomize helps design teams keep Figma files tokenized, accessible, and consistent. Start with this Chrome extension for a quick browser preview; scale to the full Figma plugin for audits your team can ship with. Made by Atomize · https://atomize.tools/