Skip to main content
Question

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

  • May 31, 2023
  • 2 replies
  • 379 views

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?

This topic has been closed for replies.

2 replies

Avokadomos
  • Active Member
  • June 7, 2023

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:

Figma

  • Author
  • July 5, 2023

that’s awesome, thanks for sharing the plugin!