Skip to main content
Solved

How would you do this?


Antonio_Sage

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.

Best answer by Josh

@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

View original
This topic has been closed for comments

17 replies

Gleb
  • Power Member
  • 4706 replies
  • January 25, 2022

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.


Antonio_Sage

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.


Josh
  • Former Community Manager
  • 1019 replies
  • Answer
  • January 26, 2022

Antonio_Sage

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?


Josh
  • Former Community Manager
  • 1019 replies
  • January 26, 2022

Ah sorry refresh and try again


Antonio_Sage

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!


Josh
  • Former Community Manager
  • 1019 replies
  • January 26, 2022

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


Josh
  • Former Community Manager
  • 1019 replies
  • January 26, 2022

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!


Antonio_Sage

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.


Josh
  • Former Community Manager
  • 1019 replies
  • January 26, 2022

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


Antonio_Sage

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.


Josh
  • Former Community Manager
  • 1019 replies
  • January 26, 2022

How to resize the controls?


Antonio_Sage

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?


Josh
  • Former Community Manager
  • 1019 replies
  • January 26, 2022

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

Loom

Hope this helps πŸ™‚


Antonio_Sage

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!


Josh
  • Former Community Manager
  • 1019 replies
  • January 26, 2022

Of course!!! again happy to help! πŸ˜€


  • 0 replies
  • February 25, 2022

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings