How would you do this?

Hello, I am new to Figma. Still studying UI Design but I am vexed by what might be a simple thing for you experienced gurus.
I have a four-way navigation icon. In my prototype, I need to have it change colors when the user clicks on each of the four triangles. When a triangle shape is made in Figma. It seems to be based on a four-sided object. So when I try to implement this in prototype mode. It does not work as expected. I do not know how to explain this better. Anyways, here is a screenshot


. Maybe you can make sense of what I mean. I would be glad to answer any questiions.

Click area in the prototype can only be rectangular. So your best option would probably be to split this control into multiple smaller clickable rectangles so together they are similar to a triangle shape.

Hello Gleb, thank you for taking the time to answer my question. I have spent time attempting to implement your solution. I do realize that this is not really what Figame is meant for. But, I do wish that we could actually create custom clickable area shapes. That would give us endless possibilities in terms of prototyping cool stuff.

@Antonio_Sage Is something like this what you’re looking for:
https://www.figma.com/proto/Klz2Z9oQzoZHtGz24I6GTp/Arrow-Navigation?page-id=0%3A1&node-id=2%3A46&viewport=307%2C48%2C1.02&scaling=min-zoom&starting-point-node-id=2%3A46

Josh, thank you for taking the time. Unfortunately, when I click the link it says that either the file does not exist or I do not have permission to view it. Could you check the link and resend it, please?

Ah sorry refresh and try again

1 Like

Josh, you did it! I have been racking my brain trying to do this? I will look into the file and try to figure out how you achieved it. May I copy it to my Prototype? Thank you so very much!

Yeah sure thing. This should duplicate into your drafts: Figma

1 Like

I’m using interactive components. The clickable area still uses the rectangular bounds of the triangle but as long as you don’t overlap these it should be fine!

1 Like

I was looking at your creative use of rectangular bounds. You seem to be quite experienced. I would love to see your work! I am new to all this and the only thing I can offer in return is maybe I can buy you the equivalent of lunch if in return. If you want to IM me your Paypal. I hope that it is not offensive to ask. I don’t know the rules on here.

Happy to help! I work here at Figma so I definitely know my way around the tool :wink:
And oh no worries and no need.

1 Like

Ah, well very kind of you indeed. Well, I would still buy you lunch! One thing, I cannot figure out how to resize it. I know this is a very basic question.

How to resize the controls?

Well, the entire object. When I hold down shift and grab the handles it changes the size of the frame. But not its contents. Again, I am really new to Figma. I am sure it is a silly question. But, how would I resize everything at once?

Figured it be easier to just record a quick tutorial video:

Hope this helps :slight_smile:

1 Like

Josh, this video taught me so much! I did not realize that one could connect internally. I thought this feature was only available from one component to another Frame. So, that is going to open up new ways of working. Also, holding down K to resize? Priceless! You are so awesome to make have taken the time to make a video. Please let me know if there is something I can do for you in return. I am a Certified Ableton Trainer and would be glad to reciprocate if you happen to be a music maker on the side. Thank you!

1 Like

Of course!!! again happy to help! :smile:

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.