The UX Challenge

While not one of my typical portfolio pieces, this item is to demonstrate the hands-on creation of an interactive prototype. Using a Home Builder as an example, I’m showcasing the connection of Figma variants and variables in a real-world context.

The UX Approach

Using a stock photo, I attempted use Photoshop’s Generative AI replace to change the countertop material. That went about as well as you probably think. Thankfully the rest of the app’s capabilities still work as they always did.

The UX Impact

Well, Check it out

After getting mixed results using Photoshop’s Generative AI replace feature, I had to old-school it. Find images of the materials I wanted the counter to change to, then distort, mask, and brush them into 3 alternate versions.

I needed a variable to track which image would be displayed, and each radio control needed a variable to set them to on or off.

Next, set up the triggers for the interaction. Each radio sets the image component property to the appropriate number, sets it’s own “selected” property to true, and sets all the others to false.

Give it a spin. If you spend more than 10 seconds on this, you should probably get some sun.