8px Lint

A Figma plugin that audits selected frames for spacing issues against an 8px system.

Why It Exists

Spacing drift is easy to miss in complex Figma files, especially when frames contain nested Auto Layout groups. 8px Lint gives designers a quick way to check whether selected frames use spacing values that align with a shared grid.

The first release is intentionally focused: scan the current selection, report Auto Layout spacing issues, and make the affected layer easy to find.

Features

• Scans the current Figma selection and nested children.
• Checks Auto Layout spacing properties:
  • itemSpacing
  • paddingTop
  • paddingRight
  • paddingBottom
  • paddingLeft
• Reports values that are not divisible by the configured grid size.
• Suggests the nearest grid-aligned value.
• Shows issue count, affected layer, property name, current value, and suggested value.
• Includes a "Select layer" action for each issue.
• Supports a configurable grid size, defaulting to 8px.
• Uses TypeScript, Figma Plugin API typings, and a simple local HTML/CSS UI.

MVP Limitations

• Only Auto Layout spacing values are checked.
• Absolute spacing between arbitrary layers is not checked yet.
• The plugin does not draw overlays.
• The plugin does not auto-fix spacing.
• There is no backend, database, analytics, or external service.

Installation For Local Figma Development

Install dependencies:

npm install

Build the plugin:

npm run build

For development, rebuild on changes:

npm run watch

How To Import Into Figma

1. Open Figma Desktop.
2. Go to Plugins -> Development -> Import plugin from manifest....
3. Select this project's manifest.json.
4. Run Plugins -> Development -> 8px Lint.
5. Select one or more frames or layers and click Scan selection.

The manifest points to dist/code.js, so run npm run build before importing or testing changes.

How To Run

npm install
npm run typecheck
npm run build

Roadmap

• Add optional checks for gaps between sibling layers where the geometry is straightforward.
• Add filtering and grouping for large issue lists.
• Add optional one-click fixes after the audit behavior is stable.
• Add visual highlights for issue locations.
• Prepare a Figma Community listing after broader testing.

Contributing

Contributions are welcome. Keep changes focused, readable, and useful for designers working with spacing systems.

Before opening a pull request:

npm run typecheck
npm run build

License

MIT