Using Conditional Prototyping on Image Carousel

I’m new-ish to Figma and am trying to wrap my head around using Conditionals while prototyping. I’m re-creating the Jimmy John’s website for practice.

Would it be possible to use Conditionals to make the selection dots change from inactive to active based on a menu option being dragged? I know I would need to make some tokens first. I’m not sure how to link them to conditionals but I’m sure I could figure that out.

For instance, I would want to set this first menu option you see to “on drag”>conditional and then make the first selector circle set to “active” (as I have an inactive and active state in my “selection dots” component. I have 11 other menu items in this carousel.

Other ways of making scrollable image carousels just seem too time-consuming. I’m open to any other creative ideas for this!

I hope this makes sense. I’m new to Figma lingo and am trying my best. :slight_smile: Thanks for reading!

Hi Jen,

Thanks for writing in and thank you for sharing your screenshot!

I came across this Carousel plug-in from Sergei Semenov in our community that seems similar to what you want to achieve.

Open the file in Figma to see how it looks!

Here are some related articles to learn more details:
Smart animate layers between frames
Create interactive components with variants

Hope it helps!
Please do not hesitate to reach out should you require any further assistance or have any questions.

Thanks,
Junko

Thanks, Junko3! I actually already built an image carousel like the one in the link. See below.

I’m just looking for an easier way… or perhaps a more updated way of doing things. I’m trying to stay on top of all the latest features in Figma and I’m wondering if I’m missing out on something.

Thanks for your reply Jen! After discussing with my teammate, we believe that Smart animate and Interactive components are the options for now.
To stay updated on all the latest features in Figma, keep an aye on our Release Notes: https://releases.figma.com/ and Blog: https://www.figma.com/blog/. Happy exploring!