Design System Compliance Checker

About this plugin

Design System Compliance Checker is a Figma plugin that helps you audit and maintain design system consistency across your Figma files. It scans your design implementation to verify usage of styles and components, ensuring they are correctly linked to your design system libraries.

Features

1. Compliance Dashboard : Get an immediate overview of your design system adoption with a clear "Overall Score".
2. Granular Scanning : Scan specific frames or the entire page.
3. Detailed Breakdowns : Precise audit for:

Colors

Text Styles

Effects

Borders

Radius

Padding & Gaps

Components

1. Status Categorization :

Remote : Correctly linked to an external design library (The Goal!).

Local : Defined locally in the file (Should be minimized).

Unlinked/Detached : Hard-coded values or detached instances.

1. Interactive Report : Click through categories to identify specific layers and styles that need attention.

How to Use

Run the Plugin : Open Design System Compliance Checker from the Plugins menu in Figma.

Select Scope : Select specific frames on your canvas and click "Scan Selected Frames". Or, click "Scan Entire Page" to audit the whole page.

Review Dashboard : Visualise your compliance score and see which categories need the most work.

Drill Down : Click on any category card (e.g., "Colors") to see a detailed list of every style used.

Fix Issues : Use the list to find "Local" or "Unlinked" items and replace them with library variables/styles.

# Configuration: Figma Personal Access Token (PAT)

To unlock the full power of Design System Compliance Checker, you should provide a Figma Personal Access Token (PAT).

## Why do I need this?

By default, Figma plugins cannot see the *names* of files that remote styles belong to. Without a PAT, the plugin will only show "Remote Library" for external assets. Adding a PAT allows the plugin to fetch and display the actual **Library Name** (e.g., "Compass DS v2"), making it much easier to debug sources.

### Generating a PAT & Permissions

1. Go to your **Figma File Browser**.

2. Click on your profile icon in the top-left and select **Settings**.

3. Scroll down to the **Personal access tokens** section.

4. Click **Generate new token**.

5. **Token Name**: Enter a name (e.g., "Design System Compliance Checker Plugin").

6. **Scopes (Permissions)**:

- **CRITICAL**: You must select the **`File content`** scope.

- Ensure **`Read-only`** is selected for this scope.

- *Technical detail: The plugin uses the `files:read` scope to query the Figma API for file metadata.*

7. Click **Generate token**.

8. **Copy the token immediately** (you won't see it again).

### Entering the PAT in Design System Compliance Checker

1. Open the Design System Compliance Checker plugin.

2. Click the **"Setting (API Key)"** link on the home screen (or the settings icon).

3. Paste your token into the input field.

4. Click **Save Token**.