SkillsAdd

mohitagw15856/pm-claude-skills

figma-spacing-system

Design a spacing and layout token system for a Figma design system.

First seen Apr 10, 2026

Installation

$ npx skills add mohitagw15856/pm-claude-skills --skill figma-spacing-system
View on skills.sh ↗ GitHub repository ↗

Summary

  • 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.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Same topic
anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs
agent-browser Same topic
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Same topic
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Same topic
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-diagnostics Same topic
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs

Also in this package

Other skills from mohitagw15856/pm-claude-skills · top by installs.

npx skills add mohitagw15856/pm-claude-skills
teaching-lesson-plan 150 team-offsite-planner 98 sop-writer 72 patient-communication 67 user-research-synthesis 66 financial-due-diligence 65 competitive-analysis 65 prd-template 64 meeting-notes 62 project-status-report 62

Browse all from mohitagw15856/pm-claude-skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 1.3K
License LICENSE
Default branch main
Open issues 7
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,781 B
  • docs SUMMARY.md 370 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 50 installs

SKILL.md

Figma Spacing System Skill

Produces a complete spacing and layout token system — the foundation that makes a design system consistent and developer handoff unambiguous.

Required Inputs

  • 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")

Output Structure

1. Base Unit

[4px or 8px] with rationale. All values must be multiples.

2. Spacing Scale

Token Value Use case
spacing.none 0px Removing space intentionally
spacing.xs 4/8px Icon padding, tight labels
spacing.sm 8/12px Internal component padding compact
spacing.md 12/16px Internal component padding standard
spacing.lg 16/24px Section padding, card internal
spacing.xl 24/32px Between components
spacing.2xl 32/48px Section separation
spacing.3xl 48/64px Page-level breaks
spacing.4xl 64/96px Hero sections

3. Layout Grid

Mobile (375px): 4 columns, margin [value], gutter [value] Tablet (768px): 8 columns, margin [value], gutter [value] Desktop (1440px): 12 columns, margin [value], gutter [value], max content width [value]

4. Component Spacing Conventions

Context Token Example
Button horizontal padding spacing.md Left/right
Button vertical padding spacing.sm Top/bottom
Card internal padding spacing.lg All sides
Input padding spacing.sm vertical, spacing.md horizontal
Icon gap from label spacing.xs
Section gap spacing.xl

5. Figma Implementation

  1. Create SPACING page documenting each token visually
  2. Resources > Variables > create Number collection named Spacing
  3. Apply variables to Auto Layout padding/gap values
  4. Share token names with engineers as-is or via Tokens Studio

6. Anti-Patterns to Avoid

  • Values not on the scale (13px, 22px) — round to nearest token
  • Absolute pixel values in components instead of tokens
  • Mixing 4px and 8px base units in the same product

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
  • Figma implementation steps included

Anti-Patterns

  • 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

Example Trigger Phrases

  • "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"