A powerful Figma plugin that serves as an intelligent design system auditor and educational companion. FigmaLint bridges the gap between design and development by analyzing components against best practices and providing actionable feedback.
FigmaLint empowers designers to create development-ready components by providing real-time analysis and educational feedback. Unlike traditional plugins that modify your designs, FigmaLint acts as a knowledgeable reviewer that helps you understand and implement best practices.
- Educational First: Learn while you design with contextual feedback
- Non-Destructive: Analyzes without modifying your components
- Developer-Friendly: Ensures components meet engineering requirements
- AI-Powered: Leverages Claude AI for intelligent, context-aware analysis
- Analyzes selected Figma components for completeness
- Identifies missing interactive states (hover, focus, disabled)
- Checks for proper naming conventions
- Validates accessibility considerations
- Detects both Figma Variables and Named Styles
- Identifies hard-coded values that should use tokens
- Categorizes tokens by type (colors, spacing, typography, effects, borders)
- Provides recommendations for token usage
- States Audit: Shows missing interactive states for buttons, inputs, etc.
- Accessibility Audit: Flags potential accessibility issues
- Naming Audit: Suggests improvements to layer naming
- Token Opportunities: Recommends where to use design tokens
- Lists actual Figma component properties and variants
- Shows available values for each property
- Provides context for how properties should be used
- Comprehensive Analysis: Automatically detects Figma Variables, Named Styles, and hard-coded values
- Contextual Recommendations: Suggests semantic token names based on component context
- Visual Feedback: Color swatches and visual previews for detected tokens
- Detailed Reporting: Shows exactly where hard-coded values exist in your component hierarchy
- State Completeness: Identifies missing interactive states (hover, focus, disabled, etc.)
- Accessibility Validation: Checks against WCAG guidelines and best practices
- Naming Conventions: Suggests improvements for layer and component naming
- Component Structure: Validates proper hierarchy and organization
src/
├── types.ts # TypeScript definitions
├── api/claude.ts # AI analysis integration
├── core/
│ ├── component-analyzer.ts # Component analysis logic
│ └── token-analyzer.ts # Token detection & analysis
├── utils/figma-helpers.ts # Figma API utilities
├── ui/message-handler.ts # UI communication
├── code.ts # Plugin entry point
└── ui.html # Plugin interface
- Visit FigmaLint on Figma Community
- Click "Install" to add to your Figma workspace
- Clone this repository
- Run
npm installto install dependencies - Run
npm run buildto compile the plugin - In Figma: Plugins → Development → Import plugin from manifest
- Select the
manifest.jsonfile from the project root
- Select a component - Choose any Frame, Component, Component Set, or Instance
- Launch FigmaLint - Run from Plugins menu
- Configure API - Add your Claude API key (one-time setup)
- Analyze - Click "Analyze Component" for instant feedback
- Review & Export - Study recommendations and export metadata as needed
- Node.js 16+ and npm
- TypeScript knowledge helpful but not required
- Claude API key from Anthropic Console
# Install dependencies
npm install
# Development build with watch mode
npm run dev
# Production build
npm run build
# Type checking
npm run lint
# Clean build artifacts
npm run cleansrc/core/- Core analysis logicsrc/api/- Claude AI integrationsrc/ui/- User interface componentssrc/utils/- Helper utilitiesdist/- Compiled plugin files
- Learning Tool: Understand design system best practices
- Quality Assurance: Validate components before handoff
- Documentation: Generate component specifications automatically
- Consistency: Ensure adherence to design system standards
- Design System Audits: Assess component library health
- Onboarding: Help new team members learn standards
- Migration Planning: Identify token adoption opportunities
- Quality Gates: Establish component review standards
- Metadata Export: Structured JSON for development
- State Documentation: Complete interaction specifications
- Token Mapping: Clear design token references
- Accessibility Notes: WCAG compliance information
FigmaLint is designed with privacy in mind:
- Local Storage: API keys stored securely in Figma's local storage
- No Data Retention: Component data is never stored externally
- Direct API Calls: Analysis happens directly through Claude API
- Read-Only: Plugin only reads components, never modifies them
- Open Source: Full transparency through open source code
Contributions are welcome! Whether you're fixing bugs, adding features, or improving documentation:
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the ISC License - see the LICENSE file for details.
- Built with Claude AI by Anthropic
- Inspired by the design systems community
- Thanks to all contributors and users
- Issues: Report bugs and request features through GitHub Issues
- Discussions: Share ideas and get help from the community
- Contributing: See our Contributing section above
Made with ❤️ for the design community