nilssonH / Framer-Grid

A flexible Framer Module that creates a grid overlay on top of your prototype.

Framer Grid Overlay Module

A flexible Framer Module that creates a grid overlay on top of your prototype to precisely align content or experiment early on in the design process.

Example

Pttrns website

Prototype of Pttrns to show the overlay on a static image.

Including module

To include this module, download the grid.coffee file and put it in the /modules folder of your prototype.

Then add the following line to your prototype.

gridOverlay = require “grid”

Installation

To create a grid, add this line of code to your prototype.

Grid = new gridOverlay.Grid

Customization

Pass parameters to adjust the grid to your project’s needs.

Note: if you don't change the value of a parameter, the value will be set to default.

Grid = new gridOverlay.Grid
    offset: 190
    amount: 6
    gutWidth: 30
    colWidth: 145
    gridColor: "rgba(22, 89, 240, .5)"

Questions/improvements

If you have questions, please tweet me or send me an email.

If you want to change or improve something, be sure to send a pull request.