#Prototype Mode Question

13 messages · Page 1 of 1 (latest)

short cliff
#

  1. Make a button and another instance of it thats in the hover state

  2. Make a text that you want to appear

  3. Go to prototype mode

  4. Connect the default to the hover button

  5. Set to: On hover, navigate / change to (depending on if its a variant component or not)

  6. Connect the hover button to the text

  7. Make the interaction into “on hover” and open overlay. Change the position to manual to decide where the text would show up

reef edge
#

Animation will be more smooth.

short cliff
#

And how you would want to code it

#

In a way

short cliff
#

Have the text in a frame both with the default and hover buttons each. But on the default button make the frame cut it out and bit click on clip content on the top right corner.

Pros: you have one less interaction to make

Cons: might not be very good if you dont normally want a text to appear on hover buttons, but just in one instance

#

Also imo it is less convenient to code (at least for me)

reef edge
#

I'd recommend learning figma first, just keep playing with the tools & you'll know what & how it works.

short cliff
#

Option 1:
default button has no text, and other button has text with a frame. Put a hover interaction between them

Option 2:
have the text layer in a frame with each of the buttons, have the text in the default button not visible

Interaction:
default -> hover: while hovering, navigate to

Option 3:
In this one you don't need to make the text in the default button invisible, but you need to resize the frame that the button and the text is in. and then check the "clip content" checkbox on the right top.

image.png image.png image.png image.png
short cliff
#

And there is a lot in figma that translates well to coding and vice versa, so hopefully knowing how to code can help you also 🙂