TL;DR on this feature: the model of CaaStle’s clothing rental services is receiving any three items out of a collection the user has previously selected, her Closet. The user doesn’t know which three she is receiving until the items ship. However, for a fee and subject to availability, she has the option to choose the next three items, a feature called Dart.
Part of the design-engineering handoff is providing thorough prototypes for each user path and interaction. While working on a new addition to Dart, one of the interactions I wanted to illustrate was the selecting and deselecting of items, and the preview of said items. Moreover, I wanted the user of the prototype to be able to choose three items in any order and the preview would reflect the correct order of the items selected and deselected.
Fortunately, and thankfully, Figma added the feature of variables and conditional logic, allowing this to be possible. Previously, to show our prototype, we would have to choose a specific flow and go in a specific order, making the prototype fragile. Now with variables, the experience is a little more realistic, not having to adhere to a specific order.
Sounds cool! …but how do you do it?
There are two challenges with trying to achieve this realness: (1) when the order summary shows, does it reflect the order in which we chose the items; and (2) when we deselect items, does the order summary reflect this as well?
Pseudo code logic (left) and the moment I realized I needed one more variable (right)
To achieve (1), we need to keep track of how many items we’ve added. By doing this, we initialize the variable coaching-bar and increment it every time we select an item and decrement it every time we deselect an item. Every time coaching-bar changes, we do a conditional check: if it’s at 1, then we set that product to the summary-1 position, likewise for 2 and 3 to summary-2 and summary-3 respectively.
When the first item is selected:
coaching-bar variable is incremented
coaching-bar is at 1, then this is the first item, and the first position, summary-1, should be set to the assigned number of the item, in this case, 1. The position of the specific item, pd-1-position, should also be stored to do the comparison in case its deselected.What if you try to remove items?
To achieve (2), we need to introduce a variable that stores the position of each product in the summary. Each product will have a pd-*-position variable associated with it, and will set it to the same number as the coaching-bar variable when coaching-bar is incremented.
When a product is deselected:
coaching-bar variable is decremented
coaching-bar. If it is not, that means it was the item most recently added and no changes need to be made.
summary-1 equal to summary-2. What this is doing is taking the product that is in the second position in the order summary and moving it to the first position.(Note: we aren’t considering the third position in this context because once the third position is set, we cannot deselect items.)
Considerations
Figma’s release of variables and conditional logic is instrumental to creating robust and non-fragile prototypes, but the implementation is still in its infancy. Along with bugs, like how some interactions don’t work in conditional statements, the work space given to write and construct all these things is very small. There isn’t a full fledged text editor and the window isn’t expandable (to the point where I couldn't take proper screenshots of my conditional statements above). I’m hoping that upcoming changes will improve upon this to make it much more user friendly to write multiple statements in one interaction.