What do I need to use Figma Spacing System?

Platform; Base unit; Design system name; Component density; Grid requirements.

Is Figma Spacing System free to use?

Yes — run it free in the browser playground (no API key needed for the sponsored trial, or bring any provider key), or install it into Claude Code, Cursor, ChatGPT and more via npx pm-claude-skills. MIT-licensed and open source.

Figma Spacing System

Q: How do I know the Figma Spacing System output is good?

The skill verifies itself against its own quality checks: All token values are multiples of the base unit; Scale covers xs through 4xl; Grid defined for all relevant breakpoints; Component conventions cover common decisions.

🔵 Stable🕐 updated 2026-06-08 🔷 SkillSpec L3 pm-figma

Design a spacing and layout token system for a Figma design system. Use when asked to create a spacing system, define layout tokens, set up a grid system, build a spacing scale, or establish layout foundations for a Figma file. Produces a complete spacing scale, grid definition, component spacing conventions, and Figma implementation guide.

▶ Run it free — no key needed 📝 Grade your existing draft View SKILL.md ↗

🗣 Say this to your agent

“Create a spacing system for our Figma design system”“Define our spacing tokens for Figma”“Set up a grid and spacing scale for [product]”“What spacing values should we use in our design system?”“Help me build the layout foundation for our Figma file”

What to give it

▸Platform — iOS / Android / Web / Multi-platform

▸Base unit — 4px / 8px — default to 8px

▸Design system name — for token naming

▸Component density — compact / standard / comfortable

▸Grid requirements — or "derive from platform standard"

✅ The bar it holds itself to

Every skill in this library self-verifies — these are this skill's own quality checks, straight from its definition.

✓All token values are multiples of the base unit

✓Scale covers xs through 4xl

✓Grid defined for all relevant breakpoints

✓Component conventions cover common decisions

✓Figma implementation steps included

⚠️ What it refuses to do

Do not create a spacing scale with arbitrary values — the scale must follow a consistent mathematical ratio (e.g. 4px base, 8-4-2 system)

Do not define spacing tokens without Figma implementation instructions — token names alone are not actionable

Do not create a spacing system that doesn't account for component-level spacing conventions — global tokens and component usage must both be documented

Do not skip grid definitions — spacing without a grid system is incomplete layout foundation documentation

Do not produce a spacing system that ignores responsive behaviour — define how spacing adapts across breakpoints

Install

npx pm-claude-skills add --agent claude   # or codex · cursor · gemini · hermes
# or one-line MCP (every skill, any client):
claude mcp add pm-skills -- npx -y pm-claude-skills-mcp

Start with

Related skills

🔌 Embed this skill

Drop this on your blog, docs, or site — it renders a "Run this skill" card:

<div data-pm-skill="figma-spacing-system"></div>
<script src="https://mohitagw15856.github.io/pm-claude-skills/embed.js" async></script>

💬 Discussion

Figma Spacing System is one of 1078 open-source professional AI agent skills — all SkillSpec L3. Try them all in the browser · ⭐ Star on GitHub · Browse the full catalog