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.
npx skills add mohitagw15856/pm-claude-skills --skill figma-spacing-system --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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]
- Required Inputs
- Output Structure
- 1. Base Unit
- 2. Spacing Scale
- 3. Layout Grid
- 4. Component Spacing Conventions
- 5. Figma Implementation
- 6. Anti-Patterns to Avoid
- Quality Checks
- Anti-Patterns
- Example Trigger Phrases
What does the figma-spacing-system skill do?
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.
How do I install it?
Run `npx skills add mohitagw15856/pm-claude-skills --skill figma-spacing-system --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mohitagw15856/pm-claude-skills, a repository with 1,255 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.