Spacely

Spacely fills that gap.

Overview

Framer lets you create variables for colors and typography — but not for spacing. Spacely fills that gap. Define reusable spacing values for Gap, Padding, or both, set different values per breakpoint, and apply them across your entire project in seconds. Whether you manage one site or twenty, your spacing stays consistent and scalable.

Responsive Spacing Variables

Create dedicated variables that adapt across Desktop, Tablet, and Mobile — all within a single token. No more manually adjusting spacing on every breakpoint. Define once, apply everywhere, and watch your layout respond fluidly across all screen sizes.

Bulk Apply by Layer Name

Target every layer sharing the same name and apply your spacing variable to all of them at once. Name your layers consistently and Spacely injects the right values on every breakpoint in one click. The bigger the project, the more time you save.

Portable & Organized

Organize variables into folders that feel native to Framer, and export your entire setup as a JSON file. Import it into any new project to start with your proven spacing system instead of rebuilding from scratch. Perfect for agencies maintaining consistency across client sites.

Bring design-system-level spacing control to Framer — without writing a single line of code.