gotcha's Introduction

Gotcha 👌

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

Download the gotcha.coffee file and drag it into your project's code editor.

Usage

In the Preview window...

Hover a Layer to get information about it
Tap a Layer to select it

On your keyboard...

Press ` or < to enable or disable Gotcha
Press / or > to select or deselect a Layer
Press . to simulate a tap on a hovered Layer
Press \ to pause all animations

In the spec panel...

click any field to copy the field's value
Slow down the global animation speed using the Speed slider
Change devices using the Devices dropdown

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 pressing any keys, lest you find your code full of random tick marks.

Planned Features

Copy formatted CSS from the spec panel.
Give your components custom properties to display.

Contact

Follow me at @steveruizok

gotcha's People

Contributors

Stargazers

Watchers

gotcha's Issues

Screen background color resets on device change

Changing the deviceType sets Screen.backgroundColor to default (black). Add a step to preserve this during device change.

spec panel is partially hidden

Many thanks :)

There is a small issue. I designed for a custom screen size. The spec panel gets hidden behind the preview.

When I 'toggle device', the spec panel becomes visible

I strongly suspect this behavior is due to the custom device being used. The code is:

# Define and set custom device
Framer.Device.customize
	deviceType: Framer.Device.Type.Tablet
	devicePixelRatio: 1
	screenWidth: 1024
	screenHeight: 600

Framer Module Error

When trying to install via framer module, I get the following error:

A JavaScript error occured in the main process

Uncaught Exception:
TypeError: Cannot read property 'forEach' of undefined
    at updateFoldRanges (/Applications/Framer Modules.app/Contents/Resources/app.asar/app/core/prototype-actions/updateRequireCommand.js:50:35)
    at updateRequireCommand (/Applications/Framer Modules.app/Contents/Resources/app.asar/app/core/prototype-actions/updateRequireCommand.js:90:13)
    at /Applications/Framer Modules.app/Contents/Resources/app.asar/app/core/prototype-actions/installRemove.js:214:56
    at next (/Applications/Framer Modules.app/Contents/Resources/app.asar/node_modules/rimraf/rimraf.js:74:7)
    at FSReqWrap.CB [as oncomplete] (/Applications/Framer Modules.app/Contents/Resources/app.asar/node_modules/rimraf/rimraf.js:110:9)```

Recommend Projects

steveruizok / gotcha Goto Github PK