Skip to main content

Hey everyone,

I'm working on a personal UI/UX case study for my portfolio – a redesign of the classic Among Us game interface. I'm running into a really frustrating issue with my component variants that I'm hoping someone can help me solve.

**The Setup:**

I've created a `Character_Card` component. This component has a property called `Status` with three variants:
*   `Status=Crewmate`
*   `Status=Ghost`
*   `Status=Imposter`

Each variant just changes the color of the character and the text label below it. Pretty simple stuff.

**The Problem:**

No matter which variant I select from the dropdown in the design panel, the instance on my screen is always stuck on the `Imposter` variant. It's like the component has decided it's an **among us always imposter** version. I've checked my layer naming conventions a dozen times and they seem correct (`Status=Crewmate`, etc.).

Here's what I've tried:
*   Detaching and re-attaching the instance.
*   Restarting Figma.
*   Checking for any conflicting nested components.

Nothing has worked. It's a simple component, so I feel like I'm missing something really obvious.

**My Question:**

Has anyone else experienced a bug where a component variant gets "stuck" like this? Is there a common mistake in setup that leads to this "always imposter" behavior?

For context, I'm trying to faithfully recreate some of the core UI elements before I start redesigning. The original game's simple but effective UI is my starting point. You can see what I'm referencing here:

https://modhello.com/among-us/

I'm hoping to build out some cool interactive prototypes once I get past this hurdle. Any advice or suggestions would be a huge help!

Thank you!

Be the first to reply!

Reply