Tesla Website: how to recreate Menu button taking over when minimizing the window?

Ask the community
1

Hi, newbie here!

I’m following along a tutorial on how to “recreate” the Tesla Website but I noticed a cool feature that isn’t covered: when you resize the page past a certain point (making it smaller), the nav bar [Model S], [Model 3], [Model X], [Model Y], [Solar Roof], [Solar Panels], [Powerwall], [Shop], [Account] buttons disappear and get taken over by the [Menu] button.

I’m not really sure how to describe the feature in a way that brings up an explanation so I’m hoping someone can tell me how to do this or point me to a good resource. is this a feature within auto layout or do I need to create a different screen with just the [Menu] button and transition between them?

2

You can’t replace content based on frame size natively in Figma. You have to just mock it using components, or use a plugin like this:

1 Like
3

that’s awesome, thanks for sharing the plugin!