Skip to main content
Question

Why does the prototype break my existing component states?

  • August 4, 2026
  • 5 replies
  • 45 views

Becky Black

I’m building a prototype using existing components which have hover states, focus states and key pad navigation. I can set the component up and it works perfectly with keyboard navigation, however as soon as it’s in the prototype the keyboard commands stops working.

I’m having the same problem with the slots  independently they work but as soon as I put them in the slot they stop working. Does anyone know why it’s doing this?

5 replies

Jaycee Lewis
Figmate

Hey hey ​@Becky Black 👋 

To help track down what's happening, could you share a short screen recording of the prototype in Present mode? Ideally it shows you clicking into the flow, then attempting the keyboard interaction that isn't registering. That'll show us more and help give you the best answer. — Jaycee

A couple other things worth checking:

  • When you try Tab or Arrow keys in the prototype, does anything visually change (focus ring, outline, state shift) — or is there no response at all?
  • For Slots specifically — one thing worth checking is whether the interactive component still responds to keyboard nav when it's a fresh instance dropped directly on the canvas (not nested in a slot), just to isolate whether the slot itself is the variable

Thanks for the additional information! — Jaycee


Becky Black
  • Author
  • New Member
  • August 5, 2026

Screen Recording 2026-08-04 at 16.39.56.mov

Screen Recording 2026-08-04 at 16.35.56.mov

PW: [REDACTED]

 

  • When you try Tab or Arrow keys in the prototype, does anything visually change (focus ring, outline, state shift) — or is there no response at all?
    The component is set up to have a focus state when you key tab through it. This does not work in the prototype but when I isolate the component(s) it does work.

    In the prototype itself I’ve tried setting and resetting the accessibility settings to prompt the browser/figma default settings but when you open the prototype and try and tab through it nothing happens.


     
  • For Slots specifically — one thing worth checking is whether the interactive component still responds to keyboard nav when it's a fresh instance dropped directly on the canvas (not nested in a slot), just to isolate whether the slot itself is the variable
    For this, I have checked to make sure it’s working on it’s own but when it’s in the slot it stops working. The hover states also stop working when they’re in the slots.

Jaycee Lewis
Figmate

Hey ​@Becky Black 🤩 Thanks for those recordings. I've moved us over to a ticket so we can dig into the file properly, so keep an eye on your inbox (and spam folder as filters can be a bit agro with support emails sometimes) The ID is 2053694 and the subject line is Component states break inside slots — hover, pressed, and focus not firing in prototype.

For anyone else landing here with hover or focus states not firing inside a slot: try running Actions > Regenerate all instances, then make a small edit to save the file and reload Figma. That's resolved
it for a number of folks. — Jaycee


Becky Black
  • Author
  • New Member
  • August 6, 2026

Hi ​@Jaycee Lewis I just tried to send an email to the address in the email but I got a bounce back. Have just responded to that email address


Jaycee Lewis
Figmate

Hey, ​@Becky Black 👋 I see your reply in the ticket. Thanks for adding those details. We’ll let the technical quality team take it from here. Thanks again 🙌 — Jaycee