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.FeaturesMulti-Provider AI AnalysisChoose your preferred AI provider and model:Anthropic — Claude Opus 4.5, Sonnet 4.5, Haiku 4.5OpenAI — GPT-5.2, GPT-5.2 Pro, GPT-5 MiniGoogle — Gemini 3 Pro, Gemini 2.5 Pro, Gemini 2.5 FlashSwitch providers and models at any time. API keys are stored per provider and auto-detected from key format.Component AnalysisDetects missing interactive states (hover, focus, disabled, pressed, active)Evaluates accessibility against WCAG standards — contrast ratio, touch target size, focus indicators, font sizeChecks component readiness — property configuration, descriptions, structureIdentifies component variants and maps their relationshipsLists nested component instances used within the designDesign Token DetectionDetects Figma Variables, Named Styles, and hard-coded valuesCategorizes tokens by type: colors, spacing, typography, effects, bordersDistinguishes actual design tokens from hard-coded values with per-node deduplicationProvides AI-driven suggestions for mapping hard-coded values to tokensFilters wrapper/boundary elements from scoring to reduce false positivesAuto-FixApply fixes directly from the analysis results: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.)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.Add component properties — Stage recommended Boolean, Text, Instance Swap, or Variant properties from AI suggestions.Batch operations — Fix All buttons to resolve all token or naming issues at once.AI-Powered DescriptionsGenerates structured component descriptions with:Brief summary of the component and its variantsPURPOSE, BEHAVIOR, COMPOSITION, USAGE, and CODE GENERATION NOTES sectionsNested component inventory so AI tools know what sub-components already existComparison UI showing whether the Figma description matches the AI-generated oneSide-by-side review modal for approving description updatesComponent Audit ScoringEach component receives a readiness score based on:Design token adoption (weighted 2x)Interactive state coverage (weighted 3x)Accessibility checks (contrast, touch targets, focus, font size)Component readiness checks (descriptions, property configuration)Score-aware AI Interpretation that adapts messaging to actual resultsDesign Systems ChatA 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 HandoffThree export formats: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.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.JSON — Complete analysis data including metadata, token analysis, audit results, naming issues, and properties for programmatic use.