What if we can use Variables (Boolean) to control Appearance of an object?
What I mean by appearance is the hide & show function and not the opacity of an object. I have went down the rabit hole of finding a suitable solution to this, but it’s been tedious and long and nerve-wracking. lol.
Sometimes, seeing the connecting lines in prototyping form a web frustrates me. I mean, you’ve just connected 10 screens with their varying possible interactions, and before you know it, you have spiderman’s web across your workspace. Not that it’s bad, but it’s… you know.
So when Components & Variants came along in Figma, it became the best thing after slice bread for me, because it typically means less number of screens and less clustered spiderman’s web. But that wasn’t the case. At least, not until Figma Variable came. Variable changed the way I prototyped, and I believe it can be better.
When it comes to prototyping in Figma using the Figma variable, I have explored quite a number of ways to optimize my process, reducing number of repetitive screens and as well ensuring the prototype mimic the functionality of a real application as much as possible (a simple explanation is the ability of a button to be able to direct users to a unique page depending on the condition(s) they meet).
While this has been possible so far, combining Variables (Boolean particularly) and its associated prototyping functions (set variable, change variable mode, and conditional), there’s still one issue that I usually face when prototyping that I believe when solved, would really add much benefit to advanced prototyping in Figma.
And it’s being able to control “Appearance” of an object through a boolean variable. I have 3 examples to demonstrated how I currently do this and what the setbacks are.
Example 1
What I did above is to repeat the same page with different variation of the forms, and when you select either of the options and click on continue, (with variable handling the two options) you are directed to the page with the option you have selected. However, the primary issue I have here is that I still have to repeat screens. This might not seem much because it’s a single page navigation, but think of when the screens are a lot, repeating screens just make design workspace hectic.
Find the prototype for example 1 below.
Example 2
In example 2, I did two things:
First is I made the form field a component set with 2 variants; 3 input fields and 4 input fields. So that my main workspace is just two screens and the component can be somewhere else, making the main workspace neater. The issue with this, though biased, is that I have to create a component set to achieve this. On a small scale, it works perfectly, but on a large scale, it’s a lot of repetition (that I want to be able to avoid).
Second is the title of the page which is supposed to now be dynamic due to the option they have selected. I handled this using variable to change the opacity based on the option selected. The issue with this will be emphasized in Example 3.
Find the prototype for example 2 below.
Example 3
This is almost what I want to achieve; Two screens without a component set (unless strongly needed for complex one) to show when one option is selected or not. Here, I solely relied on opacity to show or hide when an option is selected. So when 3 input field option is selected, it shows just 3 input fields and vice versa. The issue with this is that though the object or element is no longer visible when 3 input field is selected, but it still occupies that space within the (auto)layout. That means the layout will not adjust its height because though the object is not visible, but it’s still there.
Find the prototype for Example 3 below:
Summary
Appearance in Figma is either hide or see, such that if you hide one element within an auto layout, that dimension resizes and all other elements within the auto layout fall in place. Imagine being able to use Variable (Boolean) to control that function in Prototyping, that is really going to be sweeet. It means less number of screens and by extension (component sets) while achieving the utmost for your Prototyping.
The image below gives a context to this; when Input 2 is set to 0% opacity and when the appearance is hidden.
What has currently worked so far for me is Example 2. Component sets, Variables and its associated functions. All of these have significantly reduced the number of screens I have to repeat and make the spiderman’s web a little less chaotic. But hey, could it still be better? I believe so.
PS: If you have done this in a much simpler way, tell me about how you went about it, let me learn from you.
