Skip to main content

Hi! I’m new to figma. I’m trying to design a todo list app that utilizes checkboxes. I can make the checkbox alternate states, but I also want to add a select all/unselect all option. Is there a way to do a chain reaction so that if I click one item it can impact multiple other items? I also want the checkbox selection to change the status displayed as incomplete/complete. I know I can do this by creating a and making variants for every possible scenario, but this is quite time consuming. I’m hoping there is another way to do this.


Also, is there a way to make a component or multiple components be hidden from view or disappear even onClick as well? I’m also looking for easier ways to implement a delete option.

I would say if you make all of the tickboxes components individually and have one state as unticked and another as ticked (you could do this quicker by copy and paste one but make sure to rename them after so they have different names) and then put them together in a group and then in prototype you should be able to say when clicked to change to the other state etc.


Also if you were to design another button labelled show/hide checkboxes then you could add another state to the components where the opacity for them is 0% and then when you click on the button it would navigate to the 0% opacity state. Same with select all, another button for it and then click the group of components not the individual component and prototype that.


Main point, i believe if you group components or put them in a frame you should be able to do them together


Hope this helps a little

So, first, I have checkboxes that alternate states between checked and unchecked. Can you explain more about the 0% opacity state and how to trigger that on click? Also, does this allow for the select all button to change to a unselect all button as soon as one item is clicked? and remains so until all items are uncheked?

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Terms & ConditionsCookie settings