FigmaLint

About this plugin

FigmaLint is an AI-powered Figma plugin that audits components for design system compliance, accessibility, and developer readiness — then helps you fix what it finds.

FigmaLint analyzes your components against real standards, surfaces hard-coded values and naming issues, and produces structured documentation ready for developer handoff or AI code generation.

Features

Multi-Provider AI Analysis

Choose your preferred AI provider and model:

1. Anthropic — Claude Opus 4.5, Sonnet 4.5, Haiku 4.5
2. OpenAI — GPT-5.2, GPT-5.2 Pro, GPT-5 Mini
3. Google — Gemini 3 Pro, Gemini 2.5 Pro, Gemini 2.5 Flash

Switch providers and models at any time. API keys are stored per provider and auto-detected from key format.

Component Analysis

1. Detects missing interactive states (hover, focus, disabled, pressed, active)
2. Evaluates accessibility against WCAG standards — contrast ratio, touch target size, focus indicators, font size
3. Checks component readiness — property configuration, descriptions, structure
4. Identifies component variants and maps their relationships
5. Lists nested component instances used within the design

Design Token Detection

1. Detects Figma Variables, Named Styles, and hard-coded values
2. Categorizes tokens by type: colors, spacing, typography, effects, borders
3. Distinguishes actual design tokens from hard-coded values with per-node deduplication
4. Provides AI-driven suggestions for mapping hard-coded values to tokens
5. Filters wrapper/boundary elements from scoring to reduce false positives

Auto-Fix

Apply fixes directly from the analysis results:

1. Token binding — Bind hard-coded colors and spacing values to design system variables. Fuzzy matching finds the closest token with property-aware scoring (stroke weight matches stroke tokens, padding matches spacing tokens, etc.)
2. Layer renaming — Detects generic Figma names (Frame 1, Rectangle 4) and suggests semantic alternatives. Six naming strategies: Semantic, BEM, prefix-based, kebab-case, camelCase, snake_case. Recognizes 30+ semantic layer types.
3. Add component properties — Stage recommended Boolean, Text, Instance Swap, or Variant properties from AI suggestions.
4. Batch operations — Fix All buttons to resolve all token or naming issues at once.

AI-Powered Descriptions

Generates structured component descriptions with:

1. Brief summary of the component and its variants
2. PURPOSE, BEHAVIOR, COMPOSITION, USAGE, and CODE GENERATION NOTES sections
3. Nested component inventory so AI tools know what sub-components already exist
4. Comparison UI showing whether the Figma description matches the AI-generated one
5. Side-by-side review modal for approving description updates

Component Audit Scoring

Each component receives a readiness score based on:

1. Design token adoption (weighted 2x)
2. Interactive state coverage (weighted 3x)
3. Accessibility checks (contrast, touch targets, focus, font size)
4. Component readiness checks (descriptions, property configuration)
5. Score-aware AI Interpretation that adapts messaging to actual results

Design Systems Chat

A conversational interface for asking questions about your selected component. Supports multi-turn conversation with context about the component's properties, tokens, states, and structure.

Developer Handoff

Three export formats:

1. Markdown — Comprehensive documentation with variants table, properties API, property quick reference, states with pass/fail status, slots, design token breakdown (tokens in use vs hard-coded), accessibility info and audit results, component readiness, naming issues, and AI interpretation. Ready for ZeroHeight, Knapsack, or Supernova.
2. AI Prompt — A structured specification you can paste into any AI tool to generate production-ready component code. Includes the full component spec, design tokens, accessibility requirements, and implementation notes.
3. JSON — Complete analysis data including metadata, token analysis, audit results, naming issues, and properties for programmatic use.