What I’m trying to do:
I have three tilted banners, created with each their own vector. I want the user to be able to press one of the banners, to direct them further into the page. Essentially, I want the banners to act as buttons.
My problem:
The bounding box seems to decide the “press” boundry, instead of the vector shape, resulting in the user can press outside of the banner to activiate the navigation. Flatten was suggested somewhere, but that does only reduce boundrybox to a minumim rectangular shape.
Screenshots As a new user i can only porvide 1 screenshot per post, so here I’ve combined the four screenshots I prepared into one
I’m looking forwards to any answers you might have
// Lars!
I have tried searching terms like boundry box navigation; banner as buttons; ignore empty space in polygons; remove box; and much more with no luck… but maybe it’s just so simple i’m the only one asking?
What is the purpose of the prototype? Are you planning to do some user testing or is it simply to show a client/test yourself?
This could help indicate a solution too, as it might be that you can use some invisible interaction boxes purely to dictate the click but not show in the visuals.
Also, if you were planning to put any text or a button in these banners, you could just link those elements up instead of the entire element.
Thanks for responding MattyH! Here is my very late response - hope to catch you
The idea behind the prototype, was so each banner was a “slice” of another page, seemingly behind the front page. So the banner would be an openning/expanding to reveal the other page as a whole. The feel of the pages being a layer behind, I think is an integral part of the design and i want to test this out before going into HTML/CSS to do this, at it will be a cumbersome task for me in there aswell
I think the solution will be an invisible elemant I press to test the interaction and feel of the transitions - this is circumventing the problem, and not solving it - which is also nice and allows the work to go on. Yet I still think this reveals a usecase for figuring out how to make the vector-shape-box take priority over the bounding box, in prototyping
You’re right in saying that the ideal scenario would be for the vector shape/skewed object itself to be the interaction rather than the area around it too, hopefully this is something Figma tweaks in the future - after all this is how it works in build so it would replicate the real life scenario better.
It sounds as though providing you’re not expecting other people to interact with it you should be ok to run with it as it is for now
When you get it built be sure to share it back here!
Just stumbled across this post and it’s good to see that this was already raised as an issue before. I opened a new post yesterday under ‘Share an idea’ section with some use-cases. Please do add any references or links to that post so everything is at one place when someone from Figma looks into the issue.
@LPJC@MattyH Have you guys found a workaround to achieve this in the meantime?
