Figma released a shed full of powerful new features at Config 2023. The addition of variables & conditional prototyping will make design & code even more intertwined and allow for more realistic prototyping than was ever previously possible in Figma.
Forcing designers to think in code is no bad thing. I haven’t gotten to fully digest it all yet, but the early indications are that the possibilities are near endless.
Let's look at one very specific example of where variables and conditionals will enhance workflows - counters.
Firstly, The Old Way
Previously, to create a counter of any description, you’d have to create a separate component variant for each counter value and wire up all the variants to move between them. If you wanted a working percentage upload indicator, here's what a fraction of that component would have looked like:
Now you could say that this isn't a realistic level of fidelity to expect from a Figma prototype. But perhaps we want or need it for some reason, who knows? You can see how it'd quickly become completely unmanageable and an absolute head wreck.
This Is The (New) Way...
Thankfully, with our new Figma features, this just became a lot easier. Let's build a simple made-up component where you click a button to 'upload' a non-descript item, you then get a percentage progress indicator for the upload, then once complete it switches to a success message.
Firstly, let’s create a new number variable named ‘percentage’. We’ll set the value to 0 to begin with, but we’ll soon change that.
Next, let’s create the component with a few variants:
- A button to initiate
- 2 loading variants to create a loop between. This bit is important. Currently (as of June 2023), you need to have 2 component variants to create a timing loop between them. We’ll keep switching back and forth between them to create a conditional loop.
- A success message for when the upload is done
We’ll add a click interaction to the button, and switch to the first loading variant.
Now we need to set up that timing loop. We’ll add an 80ms on-delay interaction with 3 conditional nested interactions to the first loading variant. Note that ALL of these must be their own separate 'sub-interaction', as having 2+ actions under the 1 condition currently doesn’t work for some reason. If it's a bug then I imagine Figma fixes this very soon as I’ve seen it flagged several times. Anyways, here are the 3 interactions:
CONDITION: If the percentage variable is <= 100 (less than or equal to 100): Change to the second loading variant Bump the percentage variable by 1. (percentage = percentage + 1).
CONDITION: If the percentage == 100: Change to the success message variant.
Then, for the second variant, we add the exact same 3 interactions, with the first interaction instead linking back to the first variant.
To Summarise What We're Actually Doing Here
Each time, we initially check if the percentage has reached 100 yet. If it hasn’t, then we add 1 to the percentage value and throw it back to the other loading variant. The other loading variant then does the same thing and throws back to the initial loading variant. This happens on a loop until we finally reach 100%. When we do, we switch to the success message. And that's it!
Throw your component instance in a frame and see it work.
