figma-spacing-system
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
- Create SPACING page documenting each token visually
- Resources > Variables > create Number collection named Spacing
- Apply variables to Auto Layout padding/gap values
- 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
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"
More from mohitagw15856/pm-claude-skills
user-research-synthesis
Analyze and synthesize user research findings into structured, actionable insights. Use when given user research data, interview transcripts, survey results, or user feedback that needs to be analyzed and summarised. Produces a themed synthesis with prevalence data, supporting quotes, pain points analysis, feature request prioritisation, and recommended next steps.
26prd-template
Create a Product Requirements Document following proven PM template structure. Use when asked to write a PRD, product spec, feature specification, or requirements document for a new feature or product. Produces a complete PRD with problem statement, user stories, functional requirements, technical considerations, and success metrics.
20stakeholder-update
Create executive stakeholder updates following proven communication frameworks. Use when the user needs to create a status update, progress report, executive summary, or communication for leadership, stakeholders, or executives.
19competitive-analysis
Analyze competitors and create competitive landscape documentation with feature matrices, positioning maps, and strategic recommendations. Use when asked to analyze competitors, create competitive analysis, compare features with competitors, build a competitive landscape, track competitive positioning, or prepare sales battlecard inputs. Produces structured competitor profiles, feature comparison matrix, win/loss analysis, and prioritised strategic recommendations.
18meeting-notes
Structure and format meeting notes following PM best practices. Use when asked to create meeting notes, format discussion notes, capture action items, or document decisions from any meeting type. Produces structured notes with decisions, action items (owner + deadline), open questions, and next steps.
17executive-summary
Write an executive summary for any document, report, or proposal. Use when asked to write an executive summary, management summary, briefing paper, or one-pager for senior stakeholders. Produces a structured summary that busy executives can read in under 3 minutes and act on.
15