Skip to main content

I have been asked to prototype something like this in Figma. I need to be able to have all these variables interact with one another. I haven’t been able to find a tutorial for something this complex on Skillshare, or YouTube. Does anyone else have a tutorial I haven’t found?


I started this morning trying to get variables going to simply set an active state on a swatch. That was all fine and dandy until I realized I couldn’t get selecting one variable to deselect another variable. I spent hours trying to figure that out and ended up breaking what I had


How would you approach setting up these variables?


Possible interactions include:


Customer selects a material base

Customer selects a finish for findings

Customer selects a dimension

Making a selection shows specific SKU

If selection is on sale, change the price accordingly

Why would you want to use variables for this? I’d make multiple designs to reflect all necessary states and wire them together with simple interactions


More advanced technique would be to use smaller interactive components, bundle up them into larger pieces and you are going to be good


Thanks for your response, Pavel. I ended up doing just that for the hover states, and then doing the rest with layer visibility and booleans.


Wiring multiple designs together is fine, but I work in ecommerce and we have banks of 2 to 40 color swatches, then length input, metal finishes, etc. Plus, I’ll have to build interactions like this often. That’s why I’d like to find a way that scales better than wiring together.


I’ve been thinking about the smaller interactive components… I could put a rectangle with border properties into each ‘X’ number of swatches and enable them on click… but how do I get them to go disabled when another is clicked without creating ‘X’ different hover state components for each? Not possible, right?


Reply