Replacement of components when changing the window width

Hi @APH

I’m assuming when you talk about transition you refer to a prototype transition.
Since you’re resizing the window and you want the component inside that window to behave accordingly to the resize I’ll suggest you try to play with auto-layout.
For the transition part.

1. Go on the prototype panel (Shift+E)
2. Create a link from your first frame to the second one
3. You may choose the event type that will trigger this transition and the type of animation to play. Be aware that for “Smart animate” to works fine you need to respect some rules (maintaining the same tree structure from the frame you came to the frame you’ll end up with + having element with the same name in both frame is not required but will help)
   
   

then when playing prototype it should transition just fine

Let me know if it helped

Thanks for the answer :)… but
This method works well when switching to separate windows. How to force component replacement when changing window size?
An example would be changing the navigation bar on a website from desktop to mobile? I would like this change to be visible in the prototype.

Okay i see.
Unfortunately you cannot trigger a component state change based on resizing its parent in Figma. Prototype condition just work on prototype mode and even tho conditions are not aware of their element states (position, size, and such). The closer you can get is by playing with min/max-width and auto-layout (in order to reorganize the internal structure) but even with that you won’t have the change effect to snap at a certain width.
Other apps might offer this possibility (Framer does)

It’s a pity that there is no such possibility (yet ;)). And the breakpoints plugin doesn’t work on this principle? Unless I’m wrong, I haven’t tested it yet…

This plugin uses a very hacky workaround (flips layers when resizing). You can use it but there is not really a point in that because you only can do it as a designer in the Figma editor and it is not useful for prototyping, developer handoff or anything else.