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.It analyzes 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.6•Claude Sonnet 4.6•Claude Haiku 4.5OpenAI•GPT-5.4•GPT-5.4 Mini•GPT-5.4 NanoGoogle•Gemini 3.1 Pro•Gemini 3 Flash•Gemini 2.5 FlashSwitch providers and models at any time. API keys are stored per provider and auto-detected from key format.⸻Component Analysis•Detects missing interactive states (hover, focus, disabled, pressed, active)•Evaluates accessibility against WCAG standards (contrast ratio, touch target size, focus indicators, font size)•Checks component readiness (property configuration, descriptions, structure)•Identifies component variants and maps their relationships•Lists nested component instances used within the design•Detects detached component instances on the current page•Flags frames that match the analyzed component name but are no longer linked•Includes click-to-navigate and parent path context for easy identification⸻Design Token Detection•Detects Figma Variables, Named Styles, and hard-coded values•Categorizes tokens by type: colors, spacing, typography, effects, borders•Distinguishes design tokens from hard-coded values with per-node deduplication•Provides AI-driven suggestions for mapping hard-coded values to tokens•Filters wrapper and boundary elements from scoring to reduce false positives⸻Auto-FixApply fixes directly from the analysis results:Token Binding•Bind hard-coded colors and spacing values to design system variables•Uses fuzzy matching with property-aware scoring•Stroke weight maps to stroke tokens•Padding maps to spacing tokensLayer Renaming•Detects generic Figma names (e.g., “Frame 1”, “Rectangle 4”)•Suggests semantic alternatives•Supports six naming strategies:•Semantic•BEM•Prefix-based•Kebab-case•camelCase•snake_case•Recognizes 30+ semantic layer typesComponent Properties•Stage recommended Boolean, Text, Instance Swap, or Variant properties from AI suggestionsBatch Operations•“Fix All” actions to resolve token or naming issues at once⸻AI-Powered DescriptionsGenerates structured component descriptions with:•A brief summary of the component and its variants•Sections for PURPOSE, BEHAVIOR, COMPOSITION, USAGE, and CODE GENERATION NOTES•Nested component inventory for downstream AI tools•Comparison UI showing Figma vs AI-generated descriptions•Side-by-side review modal for approving updates⸻Component 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)Includes score-aware AI interpretation that adapts messaging to actual results.⸻Design Systems ChatA conversational interface for asking questions about your selected component.•Supports multi-turn conversations•Includes context about properties, tokens, states, and structure⸻Developer HandoffThree export formats:Markdown•Comprehensive documentation including:•Variants table•Properties API and quick reference•States with pass/fail status•Slots•Design token breakdown (tokens vs hard-coded values)•Accessibility and audit results•Component readiness•Detached instance warnings•Naming issues•AI interpretation•Compatible with ZeroHeight, Knapsack, and SupernovaAI Prompt•Structured specification for generating production-ready component code•Includes full component spec, design tokens, accessibility requirements, detached instance alerts, and implementation notesJSONComplete analysis data including metadata, token analysis, audit results, naming issues, and properties for programmatic use