Wardn HubTrusted MCP server directory.

Registry

  • MCP Servers
  • Skills
  • Categories

Resources

  • API docs
  • Score method

Contribute

  • Submit server
  • Advertise
© 2026 Wardn Hub
Wardn Hub
MCP ServersSkillsCategoriesAPI docsSubmit server
Submit server
skills/mohitagw15856/pm-claude-skills/figma-spacing-system

figma-spacing-system

1
mohitagw15856/pm-claude-skills·Audit passed·Snapshot 4b7aa8a9e755

Summary

This source did not publish a separate summary. Review SKILL.md before using the skill.

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

TokenValueUse case
spacing.none0pxRemoving space intentionally
spacing.xs4/8pxIcon padding, tight labels
spacing.sm8/12pxInternal component padding compact
spacing.md12/16pxInternal component padding standard
spacing.lg16/24pxSection padding, card internal
spacing.xl24/32pxBetween components
spacing.2xl32/48pxSection separation
spacing.3xl48/64pxPage-level breaks
spacing.4xl64/96pxHero 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

ContextToken
Example
Button horizontal paddingspacing.mdLeft/right
Button vertical paddingspacing.smTop/bottom
Card internal paddingspacing.lgAll sides
Input paddingspacing.sm vertical, spacing.md horizontal
Icon gap from labelspacing.xs
Section gapspacing.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"

Related skills

capacity-planningcompetitor-teardowncontext-engineering-reviewrunbook-writerreceipts-audit