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.
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.
Download my app.js hover script and give it a try. It works! Just don’t mind the ugly scripting.