figma-spacing-system
OfficialStandardize spacing tokens and grid in Figma.
System Documentation
What problem does it solve?
It solves inconsistent spacing and layout decisions in a design system by providing a single, tokenized spacing scale and grid foundation that teams can apply consistently in Figma.
Core Features & Use Cases
- Tokenized spacing scale: Produces a complete set of spacing tokens (including none through 4xl) so components share the same measurable gaps and padding.
- Responsive layout grid: Defines a practical column-based grid for common breakpoints (mobile/tablet/desktop) with clear margin, gutter, and max content width targets.
- Component spacing conventions + handoff guide: Establishes repeatable padding/gap rules for buttons, cards, inputs, icons, and sections, plus step-by-step Figma implementation using Variables.
Use it when you need to create spacing and layout foundations for a new or existing Figma design system, especially when engineers need unambiguous token names and values.
Quick Start
Ask the skill to create the spacing system for your Figma design system by providing your platform, base unit (4px or 8px), design system name, component density, and whether grid requirements should be derived from platform standards.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: figma-spacing-system Download link: https://github.com/spontus-reach/spontus/archive/main.zip#figma-spacing-system Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.