INTRODUCTION

Press a key and your Framer prototype becomes its own live, self-documenting, developer-ready spec.

When enabled, Gotcha provides precise information about your project’s elements: from positions and colors to font styling and even component names and relationships. Best of all, Gotcha works seamlessly with Framer Cloud, so the links you send can work as specs, too.

Check out the demo.

Installation

To install manually, download the gotcha.coffee file and drag it into your project’s code editor.

Usage

• Tap anywhere in the Preview window.
• Press ` to enable or disable Gotcha.
• Hover elements to see information about them.
• Select an element by tapping on it, or by pressing / while hovered over it.
• In the spec panel, click any field to copy the field’s value.

Tips

• Gotcha works in the Device Preview window. If your preview window is zoomed in, or if you can’t see a device, you’ll need to select the Toggle Device from the window’s hamburger menu, or press Command + Shift + D.
• Be sure that your Device Preview window is active before hitting the ` key, lest you find your code full of random tick marks.

Planned Features

• Copy formatted CSS from the spec panel.
• Get detailed animation data from a selected element.
• Slow down or speed up Framer’s animation engine.
• Give your components custom properties to display.

Contact

• Follow me at @steveruizok