Skip to main content
Solved

Stuck on avatars visible selection state and showing typed name on profile

  • May 8, 2025
  • 1 reply
  • 59 views

isabelleintven

Hi! I’m working on a prototype in Figma and could really use some help with two things:

1. Clickable avatars with visible selection state

I’ve set up a screen where users can choose an avatar, and that choice correctly shows up later on the profile screen — so that part works!
The problem: I want to visually indicate which avatar was selected (like showing a border around the chosen one, or lowering the opacity of the others). But the component already uses a variable to define which avatar is shown on the profile, so I can't figure out how to also show a visual selection state in the avatar grid at the same time.

2. Showing typed name on profile

I have a text input field where users can enter their name. When you type and press Enter, the name gets stored — that part works.
But I don’t know how to show that input value under the profile photo on the profile page.
I’m not sure which layer to bind to the variable, or how to display the entered name properly.

Here’s my file if you want to check it out: 

https://www.figma.com/design/Lw036O0ErJvc9NPyE54g0E/Help-me?node-id=0-1&t=IlURZzeupWpPzRbQ-1

 

 

If anyone could help or even show me how to fix this directly in my file, I’d seriously appreciate it — I’ve been stuck on this for days. 🙏Thanks in advance.

Best answer by Ondrej_Pavlicek

Hi there! 😊

I had a look at what you've set up, and I think this could be one way to handle the avatar selection and name input. It’s probably not the perfect solution, but it should work well enough for what you’re trying to do.

1. Avatar Selection with Focus Ring

To make the avatar selection clear, you can add a focus ring to each avatar and ensure it appears only on the selected one. This provides a clear visual indication of which avatar is chosen.
 


How to Set It Up:

  1. For each avatar, create a focus ring layer around it. This can be a simple shape (like a border or glow) positioned directly over the avatar.

  2. Set the focus ring to be hidden by default. This ensures it only appears on the selected avatar.

     

  3. For each avatar, set an interaction:

    • Trigger: On click.

    • Action: Ensure the focus ring of the selected avatar is shown, while all others are hidden.

  4. Repeat this process for each avatar. This way, only one focus ring is visible at a time, making it clear which avatar is selected.

     

2. Name Input Using an Invisible Field

For the user to enter their name, you can use an invisible input field. This keeps the interface clean but allows users to easily enter their name.

How to Set It Up:

  1. You already have an invisible frame where the input field is placed.

  2. Set an interaction so that this frame becomes visible when the user clicks on a placeholder (like "Enter your name").

  3. Within this frame, add an input field where the user can type their name.

  4. Once the user types their name and presses Enter, the name should appear on the profile page below the avatar.

This method is a bit manual but keeps everything under your control and ensures that it works as expected.

Hope this helps at least a little bit! 😊

View original

Ondrej_Pavlicek

Hi there! 😊

I had a look at what you've set up, and I think this could be one way to handle the avatar selection and name input. It’s probably not the perfect solution, but it should work well enough for what you’re trying to do.

1. Avatar Selection with Focus Ring

To make the avatar selection clear, you can add a focus ring to each avatar and ensure it appears only on the selected one. This provides a clear visual indication of which avatar is chosen.
 


How to Set It Up:

  1. For each avatar, create a focus ring layer around it. This can be a simple shape (like a border or glow) positioned directly over the avatar.

  2. Set the focus ring to be hidden by default. This ensures it only appears on the selected avatar.

     

  3. For each avatar, set an interaction:

    • Trigger: On click.

    • Action: Ensure the focus ring of the selected avatar is shown, while all others are hidden.

  4. Repeat this process for each avatar. This way, only one focus ring is visible at a time, making it clear which avatar is selected.

     

2. Name Input Using an Invisible Field

For the user to enter their name, you can use an invisible input field. This keeps the interface clean but allows users to easily enter their name.

How to Set It Up:

  1. You already have an invisible frame where the input field is placed.

  2. Set an interaction so that this frame becomes visible when the user clicks on a placeholder (like "Enter your name").

  3. Within this frame, add an input field where the user can type their name.

  4. Once the user types their name and presses Enter, the name should appear on the profile page below the avatar.

This method is a bit manual but keeps everything under your control and ensures that it works as expected.

Hope this helps at least a little bit! 😊


Reply


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