Figma Compliance Checker

Design Compliance Checker

A tool to verify Figma designs against design guidelines like Material Design 3 or Apple Human Interface Guidelines.

Overview

This project consists of two parts:

1. Figma Plugin - Scans your Figma designs and checks them against design guidelines
2. Web Dashboard - Manage custom guidelines and view detailed compliance reports

Features

Figma Plugin

• Spacing Checker - Verifies padding, margins, and gaps against your spacing grid (e.g., 4px or 8px base unit)
• Typography Checker - Validates fonts, sizes, line heights, and weights against type scales
• Color Checker - Ensures colors match your design palette
• Corner Radius Checker - Validates border radius values
• Touch Target Checker - Flags interactive elements that are too small

Web Dashboard

• Browse and manage design guidelines
• Visual editor to create custom guidelines
• Import and view compliance reports
• Export reports as HTML or PDF

Getting Started

Figma Plugin

cd figma-plugin
npm install
npm run build

Then in Figma:

1. Go to Plugins > Development > Import plugin from manifest
2. Select the figma-plugin/manifest.json file

Web Dashboard

cd web-dashboard
npm install
npm run dev

Open http://localhost:3000 in your browser.

Pre-built Guidelines

The tool comes with pre-built guidelines for:

• Material Design 3 - Google's latest design system
• Apple Human Interface Guidelines - iOS/macOS design standards

You can also create custom guidelines through the web dashboard.

How It Works

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│  Figma Design   │────▶│  Figma Plugin    │────▶│  Compliance     │
│                 │     │  (Scans nodes)   │     │  Report (JSON)  │
└─────────────────┘     └──────────────────┘     └────────┬────────┘
                                                          │
                        ┌──────────────────┐              │
                        │  Web Dashboard   │◀─────────────┘
                        │  (View reports)  │
                        └──────────────────┘

Guidelines Schema

Guidelines are defined as JSON with the following structure:

{
  "id": "my-design-system",
  "name": "My Design System",
  "version": "1.0.0",
  "rules": {
    "spacing": {
      "baseUnit": 4,
      "allowedValues": [0, 4, 8, 12, 16, 24, 32, 48, 64],
      "tolerance": 1
    },
    "typography": {
      "fontFamilies": ["Inter", "Roboto"],
      "scales": {
        "heading1": { "size": 32, "lineHeight": 40, "weight": 700 },
        "body": { "size": 16, "lineHeight": 24, "weight": 400 }
      }
    },
    "colors": {
      "palette": {
        "primary": ["#6750A4", "#EADDFF"],
        "error": ["#B3261E", "#F9DEDC"]
      }
    },
    "cornerRadius": {
      "allowedValues": [0, 4, 8, 16, 9999]
    },
    "touchTargets": {
      "minimum": 48
    }
  }
}

Project Structure

design-compliance-checker/
├── figma-plugin/
│   ├── manifest.json
│   ├── src/
│   │   ├── main.ts           # Plugin entry point
│   │   ├── scanner.ts        # Node tree scanner
│   │   ├── types.ts          # TypeScript types
│   │   ├── checkers/         # Individual rule checkers
│   │   │   ├── spacing.ts
│   │   │   ├── colors.ts
│   │   │   ├── typography.ts
│   │   │   ├── cornerRadius.ts
│   │   │   └── touchTargets.ts
│   │   ├── guidelines/       # Pre-built guidelines
│   │   │   ├── material3.ts
│   │   │   └── appleHIG.ts
│   │   └── ui/               # Plugin UI
│   │       └── index.tsx
│   └── dist/
│       ├── main.js
│       ├── ui.js
│       └── ui.html
│
└── web-dashboard/
    ├── src/
    │   ├── pages/
    │   │   ├── Guidelines.tsx
    │   │   ├── Editor.tsx
    │   │   └── Reports.tsx
    │   ├── data/
    │   │   └── presets.ts
    │   └── types.ts
    └── index.html

License

MIT