Framer
Features
  • Features
  • Improvements
Framer
  • Learn
    • Speedruns
    • Starter Kit
    • Examples
    • Tutorials
    • Sessions
  • Teams
    • Teams
    • Enterprise
  • Pricing
  • Blog
  • Updates
  • Support
Features
  • Features
  • Improvements

Latest feature

  • Redesigned preview & custom presentation settings
    December 16, 2020

Previous features

  • Layout grids
    June 22, 2020
  • Interaction Highlights
    June 15, 2020
  • Handoff for Code Components
    June 7, 2020
  • Custom fonts
    June 7, 2020
  • Unsplash integration
    June 1, 2020

Layout grids

June 22, 2020

You can now use layout grids to help organize elements while designing interfaces. Enable layout grids with the shortcut Ctrl + g. Once enabled, a grid property becomes visible under layout in the Properties panel, here you can customize your grid settings.

Choose whether you want horizontal or vertical rows under type. Then decide how many you want and set their width or height, margin, gap, and color. Once you have perfected your settings, it’s easy to copy and paste your grid and reuse it throughout your project.

Try Framer

Bring every idea to life.

Learn more
Pivot: Try Framer

Framer

  • Updates
  • Pricing
  • Tutorials
  • Teams
  • Enterprise
  • Blog
  • Motion

Platforms

  • Web
  • macOS
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing
  • User Testing
  • Desktop PrototypingNew

Resources

  • Examples
  • Sessions
  • SpeedrunsNew
  • Packages
  • Volt
  • API
  • State of Prototyping
  • Wireframing Tool
  • Mockup Tool
  • Dictionary

About

  • Loupe
  • Community
  • Company
  • Careers
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement