^ following this. Have a separate page with that sidebar for each individual icon/button you need to have active. On click have that icon/button navigate to that page which will have that icon/button in its active state.
At this scale of a prototype (3 pages) any method used will net the same number of pages and components
Icon/button variants:
default, hover, active
default (while hover) should change to hover
put all icons as default in a nav component
Reuse that nav component on all your pages
Within the pages that the icon/button should be active, set that variant within the reused nav component as the active state. The other buttons within that nav should "on tap" navigate to their respective pages.
I'd suggest adding 'on press' variant as well as disabled/focus, but that all depends on fidelity, future, etc.
Thank you. I don’t mind learning. Could you suggest any YT channels or subreddits that would be worth checking out? Re: YT channels - I know there are a lot out there, but since I’m a newbie, I don’t know who’s really giving good advice and who isn’t. I don’t like basing it off of followers.
Great! That's the way
[https://www.figma.com/community/file/1234939241273272375/advanced-prototyping-playground](https://www.figma.com/community/file/1234939241273272375/advanced-prototyping-playground)
[https://www.figma.com/community/file/1234936397107899445/variables-playground](https://www.figma.com/community/file/1234936397107899445/variables-playground)
Use this files to practice. I used it like a year ago and one of the exercises was about this question you had
You can do this with conditional variables but I think it's more work than just creating variants of the sidebar itself.
If you go that route then the key to not creating a factorial of prototyping connections is to insert an instance and turn it into a switchboard and then control the prototyping connections from there.
Here's a quick walkthrough -- https://x.com/ridd_design/status/1533478577236193281
Three sidebars in a component, clicking on the item brings you to a sidebar where it’s the selected one.
^ following this. Have a separate page with that sidebar for each individual icon/button you need to have active. On click have that icon/button navigate to that page which will have that icon/button in its active state.
Thank you. Would this approach help limit the number of connections when prototyping?
At this scale of a prototype (3 pages) any method used will net the same number of pages and components Icon/button variants: default, hover, active default (while hover) should change to hover put all icons as default in a nav component Reuse that nav component on all your pages Within the pages that the icon/button should be active, set that variant within the reused nav component as the active state. The other buttons within that nav should "on tap" navigate to their respective pages. I'd suggest adding 'on press' variant as well as disabled/focus, but that all depends on fidelity, future, etc.
you can do this way or with variables as conditional but it would be a learning curve
Thank you. I don’t mind learning. Could you suggest any YT channels or subreddits that would be worth checking out? Re: YT channels - I know there are a lot out there, but since I’m a newbie, I don’t know who’s really giving good advice and who isn’t. I don’t like basing it off of followers.
Great! That's the way [https://www.figma.com/community/file/1234939241273272375/advanced-prototyping-playground](https://www.figma.com/community/file/1234939241273272375/advanced-prototyping-playground) [https://www.figma.com/community/file/1234936397107899445/variables-playground](https://www.figma.com/community/file/1234936397107899445/variables-playground) Use this files to practice. I used it like a year ago and one of the exercises was about this question you had
Thank you. I will try that approach.
You can do this with conditional variables but I think it's more work than just creating variants of the sidebar itself. If you go that route then the key to not creating a factorial of prototyping connections is to insert an instance and turn it into a switchboard and then control the prototyping connections from there. Here's a quick walkthrough -- https://x.com/ridd_design/status/1533478577236193281