How do I placing a tab switcher within a component?

Hi guys,

I’m new here, and a Figma beginner, so apologies if I’m asking a basic question here.

I’ve created a menu switcher to move between tabs within a web page mockup using this really helpful Mavi design YouTube tutorial

This works great, but I’m now trying to incorporate this “tab switcher” into a wider web page layout. I’ve created a Loom video which hopefully explains my issue. Watch it here:

https://www.loom.com/share/593b9ead237a47448de4de5150a7d671?sid=9a80a5eb-c6d8-4c56-b567-6ac6ee0bc615

The current menu solution relies on moving between different pages which causes problems when I’m trying to incorporate it into an overall single web page design as I’ve explained in the video.

I’m wondering if there is a more appropriate solution for achieving this, or if I can adapt the current solution.

Any advice would be greatly appreciated.

Thanks
Duncan

Hi. Based on your video, the menu component is linked to page 2 and page 3.

image

So, what happens is even if you put it to another frame the menu buttons would still link you to the frames page 2 and page 3 exactly.

What you can do is create 2 more instances of this frame:
image
and link the menu to that page. But, if you are going to put it on another higher form of frame or another template like this one:
image
you’ll have to do the steps again.

Normally, I will use a component for this and use variants and variables, and use conditional event in prototype to achieve the same effect.

Hi @Raphael_M

Thank you very much for the reply. Yes, you got it exactly.

What you said is correct, I can create two more instances of that frame. But then I need to place that frame within another frame as you suggested.

However, there are going to be even more frames than covered here, because I’m going to use another instance of a tab switcher for product description, technical specifications and so on, which will appear further down the page (outside of the instant quote box). It’s going to get very complicated and I’ll be working with a lot of duplicated content across multiple frames.

So I think what you’re saying here is instead of doing this, there is a better way which would use variants and variables with conditional event? Would this avoid lots of frames with duplicate content?

Yes, I believe so. Here is an example of how it will be using variables.