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

What is Framer? Join the Community
Return to index
Andy Ngo
Posted Jun 17 - Read on Facebook

Correct me if I'm wrong but if I'm not mistaken assets that go into Framer from Sketch will have their transparent area trimmed. For example, in the attached photo I want the location indicator icon to have a tappable area of 88px (right image), but when it's imported into Framer its effective tappable area is reduced to 61px (left). I've tried putting a transparent layer with 88px width in the same group as the icon but the result is the same.

Is there anyway for me to change the tappable area size of the layer in Framer? Changing the padding property did not work for me. Thanks!

8 Comments

Jorn van Dijk

Hey Andy, you'll need to mask the arrow to grow the bounding box. I've attached a screenshot of how to set it up and here are the files: http://cl.ly/bfDB

Jorn van Dijk

Star1 on the left is just the star. Star2 has a mask that is bigger (with the red outline in Sketch). I've given both background colors so you can see how they get imported.

Andy Ngo

Thank you! Turns out that my mistake was thinking that a transparent (0% opacity) layer (without masking) below the icon will give it a bigger bounding area. Had to mask it for it to work. :)

Jorn van Dijk

Nice!

Andy Ngo

Oh btw, is there no way to do this by code? It's way faster to iterate in code to find that sweet tappable size than to reimport the assets each time. A layer.tappableArea property would be awesome. :P

Jorn van Dijk

Sure yeah, you can just make a layer in Framer and make that the superLayer to stick your icon in.

Jorn van Dijk
Cemre Güngör

another hack I do is have a rgba(255,255,255,0.01) border around the bounding box :)

Read the entire post on Facebook