[17] 241121 Figma [Goorm All-In-One Pass! AI Project Master - 4th Session, Day 17]

To make the hover function, make the frame first and then use 'hover'. 

---

https://www.figma.com/design/x9I3zqiXNpMzFkT60TwfGs/Alpha-Pose?node-id=0-1&node-type=canvas&t=zgwkPw2U2OPpBQIV-0

---

https://www.figma.com/proto/x9I3zqiXNpMzFkT60TwfGs/Alpha-Pose?node-id=22-25&node-type=canvas&t=zgwkPw2U2OPpBQIV-0&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1

---

Yes, that's correct! To create a hover interaction in Figma, you need to first set up frames for the different states (e.g., default and hover states) and then connect them using the Prototype feature with the "While Hovering" trigger.

Here’s how you can do it step-by-step:

---

1. Create Frames for Default and Hover States

Frame for the Default State

1. Add the First Frame:
   • Select the Frame Tool (press F) or use the top-left toolbar.
   • Draw a frame on the canvas or choose a preset size (e.g., Desktop or Custom).
2. Add Elements to the Frame:
   • Insert the 1st image, white background, and buttons (촬영 and 업로드).
   • Align them properly inside the frame.
3. Name the Frame:
   • In the Layers Panel, rename the frame to something like Default State.

Frame for the Hover State

1. Duplicate the First Frame:
   • Select the Default State frame in the Layers Panel.
   • Duplicate it by pressing Ctrl + D (Windows) or Cmd + D (Mac).
   • Rename the new frame to Hover State.
2. Replace the Image in the Hover Frame:
   • Select the 1st image in the Hover State frame.
   • Replace it with the 2nd image (drag and drop or use the Replace Image option in the right-hand panel).
3. Keep Buttons and Background Consistent:
   • Ensure the white background and buttons remain exactly the same in both frames (size, position, and alignment).

---

2. Combine the Frames into a Component

1. Select Both Frames:
   • Hold Shift and click both the Default State and Hover State frames in the Layers Panel.
2. Convert to a Component:
   • Press Ctrl + Alt + K (Windows) or Cmd + Option + K (Mac) to create a Component.
   • This will group both frames into a single reusable component.
3. Add Variants:
   • With the Component selected, click + Add Variant in the right-hand panel.
   • Figma will create a Default State and Hover State as Variants.

---

3. Set Up the Hover Interaction

1. Switch to the Prototype Tab:
   • Select the Component and go to the Prototype tab in the right-hand panel.
2. Connect the Variants:
   • Drag a connection from Default State to Hover State.
3. Set Interaction Details:
   • Trigger: While Hovering.
   • Action: Change to Variant 2 (Hover State).
   • Animation: Instant (or Smart Animate for a smooth transition).

---

4. Test the Hover Interaction

1. Click the Present Button:
   • At the top-right of Figma, click Present to start the prototype.
2. Hover Over the First Image:
   • Move your mouse over the frame with the 1st image, and it should change to the 2nd image along with the background and buttons staying consistent.

---

Tips for Smooth Hover Transitions

• Consistent Layout: Make sure the white background and buttons are perfectly aligned in both variants.
• Hide/Show Images: Instead of replacing, you can hide the 1st image in the hover state (use the eye icon in the Layers Panel).
• Animation Options: Experiment with Smart Animate for smoother transitions if needed.