Wow, just found out about Framer. An awesome prototype companion for Photoshop built by Koen Bok. It allows you to create quality interactive mockups in your browser.

Of course, using Layer Comps in Photoshop is a great way to quickly switch between different states of layers and test interaction like moving panels and button hover states. But you can’t “feel” the interaction. With Framer, you can.

Framer reads your Photoshop design, does some slicing and naming magic, and throws it in your browser. Ready for you to add interaction. Each Layer Group you created can be manipulated separately.

Downside is, you need some Javascript knowledge. So it would be nice to have some global scripts that allow you to test common interactions like hover states without the need to code.

With a generic naming scheme for layers you’d only need 1 generic hover script. Because I couldn’t find a script, I decided to give it a try myself. My naming scheme:

Normal layer name: Button
Hover state Layer: Button hover

So for hovers I duplicate a Layer Group, and add ‘ hover’ at the end of its name. A Framer script will automatically hide the hover layers and add the mouseover functionality.

Stuff I’d like to be added:

• cursor change on mouseover
• active states on mousedown, similar to hover states on mouseover
• proper retina viewport scale (workaround: zoom out 4x in Safari with cmd +)

Would love to hear about existing scripts, or ways to improve it.

Read more about Framer on Koen’s announcement on Medium
Download FramerJS and check it out.

Download my app.js hover script and give it a try. It works! Just don’t mind the ugly scripting.