This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Walter Coots
Posted Dec 05 - Read on Facebook

Workflow question: I’m importing a design from Sketch with a lot of hover states. Framer seems to import each individual Sketch group as its own PNG, flattening whatever the transparency may be (e.g. if something’s opacity is set to 0, it will import as a completely transparent PNG.) For this reason, it seems the best workflow is to make separate layers in Sketch for each hover state, and turn the visibility off. Then to achieve a hover effect, attach a mouseOver event to the layer representing the inactive state, and a mouseOut event to the layer representing the hover state (which would cover the inactive state after the mouseOver event fires). This seems a little cumbersome. Is there a better way?


Taylor Palmer

I can't picture exactly what you're describing, but if you're only working with opacity why not bring the layer in at 100% opacity and then manipulate it in Framer?

Walter Coots

That's basically how I've been doing it. I import everything with 100% opacity and visibility, then at the top of my code, I ensure it's set to what should be its default state. I guess it would be nice if I could set things to their default state in Sketch instead of Framer so there aren't a bunch of elements covering each other.

Zack Gemmell

Could you show us an example of the normal and hover states? You may be able to use the same layer for both and just change the properties of the layer depending on whether the cursor is over or not.

Read the entire post on Facebook