A Free Figma Plugin Now Runs a Design System Audit in Minutes
A design system audit used to mean hours of clicking through components, checking contrast ratios by eye, and hoping you caught every hard-coded hex value before a developer did. FigmaLint changes that. It’s a free, open source Figma plugin built by design systems agency Southleft that scans your components and tells you exactly where they fall short on tokens, accessibility, and developer readiness, then offers to fix what it finds.
If you run a design team, or you’re the one person doing design and development at a small company, this matters. Broken design systems don’t fail loudly. They fail slowly, one hard-coded color and one missing hover state at a time, until your product looks inconsistent and your developers stop trusting the Figma file.
What a FigmaLint Design System Audit Actually Checks
Select a component, pick an AI provider (Anthropic, OpenAI, or Google all work, and OpenRouter covers teams that need a single billing key across vendors), and FigmaLint gets to work. It checks for missing interactive states like hover, focus, disabled, and pressed. It evaluates accessibility against WCAG standards, covering contrast ratio, touch target size, focus indicators, and font size. It also looks at component readiness, meaning whether your properties are configured and described well enough for another designer, or an AI tool, to understand them without asking you.
Every component gets a readiness score. Design token adoption counts double, and interactive state coverage counts triple, so a component stacked with pretty colors but no focus state still scores poorly. That weighting is the right call. A missing focus indicator is an accessibility failure a user runs into every single day, while a slightly off shade of blue is cosmetic. You can read the full breakdown of checks in FigmaLint’s open source documentation on GitHub.
Why This Saves You From Expensive Rebuilds Later
Here’s the part that should get a business owner’s attention, not just a designer’s. Every hard-coded value that slips from Figma into production becomes a maintenance cost. Someone eventually has to hunt it down, figure out which token it should have been, and patch it without breaking the layout around it. FigmaLint’s auto-fix binds hard-coded colors and spacing to your actual design tokens, searching both local and published library variables and respecting Figma’s variable scopes so it never suggests an opacity variable for a padding value.
It also renames vague layers like “Frame 1” or “Rectangle 4” into something a developer can actually read, using whichever naming convention your team already follows, whether that’s BEM, kebab-case, or camelCase. None of this is glamorous work, but it’s exactly the kind of cleanup that gets skipped under deadline pressure and then costs three times as much to fix after launch. We’ve written before about why a well-structured website helps your business get found by AI chatbots, and the same principle applies one layer up, inside the design file itself. Structure now is cheaper than structure later.
How FigmaLint Fits Next to Other Website Readiness Checks
FigmaLint isn’t the only tool checking whether your work is ready for what comes next. Google’s Lighthouse tool already grades how well your live website performs for AI agents browsing it after launch. FigmaLint does the equivalent check earlier, at the design stage, before a single line of code exists. Catching a missing focus state in Figma costs you a few minutes. Catching the same gap after a Lighthouse audit flags it on your live site costs you a developer ticket, a design review, and a redeploy.
That said, don’t treat AI-assisted tooling as a magic fix for a messy design system. We’ve covered this pattern before with WordPress AI plugins that added more automation without actually improving results. FigmaLint works because it checks your components against real, defined standards. The AI writes the description and the fix suggestions, but the audit criteria come from WCAG guidelines and your own design tokens, not a black box.
Getting Started With Your First Audit
Install FigmaLint from the Figma Community, add an API key from your chosen AI provider, select a component, and press Analyze. A batch mode lets you check several components at once when you’re auditing an entire library rather than one button. Results come with three export formats: a Markdown file ready for documentation tools like ZeroHeight or Supernova, a structured AI prompt you can hand to a coding assistant for implementation, and raw JSON if you want to build your own reporting on top of it.
Frequently Asked Questions
What does a FigmaLint design system audit check for?
It checks four main areas: design token adoption versus hard-coded values, interactive state coverage such as hover and focus, accessibility against WCAG standards including contrast and touch target size, and general component readiness like descriptions and property configuration. Each component receives a weighted readiness score based on those checks.
Is FigmaLint free to use?
Yes. FigmaLint is free and open source under the ISC license. You do need your own API key from Anthropic, OpenAI, Google, or OpenRouter, since the AI analysis calls go directly to whichever provider you choose, and those providers bill you separately for usage.
Do I need to know how to code to use it?
No. FigmaLint runs entirely inside Figma and is built for designers. The technical output, including the AI prompt and JSON export, is meant to be handed to a developer or an AI coding tool afterward. You don’t need to write or understand code to run the audit itself.
Start Your Own Design System Audit Before Your Next Handoff
A design system audit isn’t exciting work, and that’s exactly why it keeps getting skipped. FigmaLint makes it fast enough that there’s no good excuse left. Run it before your next developer handoff, fix what it finds, and you’ll spend a lot less time later explaining why the button on page four looks slightly different from the one on page one.


