Component with 7*6*5*4*3*2*1 variants

Ask the community
1

Hello Figma Community,
I am relatively new to figma and I am currently working on emulating a certain interface. In one part of that interface you can select an open number of week days (from all 7 to none) in any chosen combination.
This selector itself is just 7 seven circles. If you tap one of the days the circle changes colour to show that you selected (or deselected) a day. So far so simple.
The problem starts with this: When you select two adjacent days (tuesday and wednesday for example) the now coloured circles actually link up (forming a rectangle with rounded corners). This poses a problem. If it were just the circles changing colour one simple component with two variants would do the trick, but now the circles need to react to other circles being pressed, when adjacent.
If I were to emulate this with variants alone, I would need a variant for EVERY possible combination of selected week days (from all 7 to none of them). Unless my math fails me right now, that would be 7! = 7654321 = 5040 variants + 1 for no selected days.
Obviously that seems over the top and originally I was hoping that Figma would allow components in a frame to interact with/react to other component instances in that frame, which would allow a circle component to react, when a adjacent circle component is also selected. A simple third variant with an adapted shape for the circle would have done the trick in that case.
But in the end my googling only found me a forum thread of a lot of people regretting that this functionality doesnt exist. So that looks like a dead end and it honestly leaves like a fish out of water.
Given that Im still very new to Figma I still have the slight hope that there is some trick/functionality Im not aware off, because otherwise this little idea might just die here, at least in its current shape.

Any advice for a new user is welcome.

2

In general I’d think that the ability of components to interact which each other would be neat.
Like imagine if you click a button that leads to a new frame or overlay. On that frame you can select something. After that you go back to the previous frame and see the option you just selected. Of course you could make a third frame for that purpose, but that feels like it would almost always complicate things and sometimes just outright not be practical.

3

I would make a single calendar cell component with three states- rest, hover and selected. For selected one I’d make four alternates. Selected single, selected first, mid and last. After you put them into the grid and make it a calendar component. This is it, now you have something that is perfectly capable to illustrate any use case / scenario you need.

4

And if you want to make an interactive prototype out of it to illustrate how it should work, then you can take few instances of your calendar component and wire them with simple click interactions to show multiple use cases.

5

Quick demo if you like https://www.figma.com/proto/4hX059bZpdsC94LV0iJOD3/Interactive-Calendar?page-id=0%3A1&type=design&node-id=1-2&viewport=732%2C516%2C0.61&scaling=scale-down&starting-point-node-id=1%3A2

6

This might actually be the way to go. Thanks!
I also honestly forgot that it might be unnecessary to make every combination of days clickable. That is also true.