a blurry image of a cell phone with a blurry background

Grids and Variants

Build complex layouts faster with advanced grids, manage component variations effortlessly, and create smooth automatic transitions between states.

Build complex layouts faster with advanced grids, manage component variations effortlessly, and create smooth automatic transitions between states.

Updated

Oct 8, 2025

Version

3.8.0

New Features

  • Advanced Grid System: Introduced a powerful 12-column grid system with customizable gutters, breakpoints, and nested grids. Create complex, responsive layouts with visual grid overlays and snap-to-grid functionality.

  • Component Variants: Create multiple versions of components with different states, sizes, and styles. Switch between variants instantly and maintain consistent design systems across your project.

  • Auto-animate Transitions: Pages and components now automatically animate between states with intelligent motion detection. Customize easing, duration, and transition types for polished interactions.

Improvements

  • Enhanced performance when working with large projects (1000+ elements)

  • Improved color picker with HSL, RGB, and HEX input modes

  • Added keyboard shortcuts for faster component creation (Cmd+K for quick actions)

  • Optimized asset loading reducing initial page load time by 40%

Bug Fixes

  • Fixed issue where nested symbols would occasionally lose their overrides

  • Resolved z-index stacking problems in complex layouts

  • Corrected text rendering on Safari for web fonts below 14px

Create a free website with Framer, the website builder loved by startups, designers and agencies.