@Pixsel_Academy One approach is to add an on-click to your “Start the Course” button within the component that navigates to another page.

Here is an example:

→ View Prototype

→ View File

This is one option, however if the main component with it’s variants is in a separate page, this is not possible. This solution is only good if the components and the variants are in the same page!

Maybe using variables?

Let me know if there is a solution, because i’m interested in the topic!

@MartinBajac Correct, the previous method only works if the master component is on the same page as the prototype.

But if your master component is on a different page (or library), there is a way to accomplish similar. You can add “navigate to page 2” to the variant interactions of a variant state of a button instance. Then at the start of the prototype, you can change the variant state of the button to the “Start” or default state by setting a variable.

I’ve added another page/example to the previous file on how this could be set up.

→ View prototype using a variable

→ Get the file

Actually the problem is all my components like header, search bar, Buttons, Input field, etc. are on other file let me share you a screenshot

the design system has all the components and other file has all the pages

is there any way i can achieve that navigation

I also would like to thank for your effort, the second method that you suggested is still helpful, I can just create the button on the same file but different page, But please look if there is any way to achieve it through different files, maybe variables?

@Pixsel_Academy The second method should still work if your button component in from another file/library. Just make sure to add the local variable to the file where you are setting up your interactions/prototyping.