Figma Spacing System

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 in the Playground View SKILL.md ↗

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

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"

Related skills

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