The opportunity
I worked on a platform project which enabled devs to create and maintain networks on blockchain. This is was still in its infancy and there were only a few tools which served this purpose. In summary the platform allowed developers to create projects share their project and components (channels, smart contracts etc ) with their peers in the network and thus arrive at a consensus for any transaction, be it a shipping event or an invoice paid.
We will talk about that project in detail in another post but I would like to elaborate on how I used figma variables to supercharge a clickthrough interaction
Prototyping the onboarding flow
so the problem in hand was to demo the onboarding process to the engineering team. The process is a complex multi step operation which was new to everyone. That was the time figma introduced variables
I was thinking how to utilize variables to design the prototype with minimal art-board duplication
It's not all rainbows and butterflies
Figma variables are no was perfect and I'm not endorsing it for anything other than simple prototyping tricks. Anyway here is what I did
Getting my hands dirty
I identified the opportunities. Below is the anatomy of the page
I identified number of things that have to change state during the onboarding process. then moved on to setting up the variables. Its a lot and below are the variable groups
Variable groups
I'm skipping rest of the variable details and letting you experience the click through. Entire onboarding flow was achieved with a mere 11 artboards
The prototype
Just follow the instructions on screen. BTW it is also responsive, go full screen and switch to responsive using 'z' key
Notice how you can come back to the dashboard/main page at any stage in the onboarding process and it maintains the state. Its the power of variables