Let's have just a little bit more fun with this task list by making each of these available to be checked off and crossed out, but then also be able to undo that if we accidentally check something off that we didn't need to. So what I'm going to do is select everything I need, which are the checkboxes and the names of the tasks. Hold Alt on your keyboard and then drag to the side so we make a duplicate of everything. And as you can see, I already have my check. We're ready to add into, excuse me, the other variants of these. And I'm going to hold Alt again because any two versions of bees, I need wine that is unchecked and uncross stuff. And then I'm going to make these variants are the ones that are, are crossed off and check. So I'm going to select all of my text and use a little bit of a shortcut here to cross everything out by clicking these three dots at the bottom of the text options and clicking strikethrough. Now everything's crossed out. I'll have to do is add our check in here. So I'm going to grab this checkbox here. Place one. And I'll hold Alt while I have that selected, click and drag and duplicate this one. Same thing here. And lastly there. Well, now I have four versions that are finished and four verses that are not. So we have to now tell a sigma that this one and this one are the same thing. And clicking on this one, we'll turn it into this. Why don't you turn to this sauna and so on and so on, so on. So first thing we're gonna do is highlight these two things, the box and the name of the task. Right-click and frame it. And do the same thing here, right-click and frame it. That's not what I meant to do, obviously, where did my checks go? Right-click frame. Okay. I don't know why that happened, but it's all about I have a text box. Right-click frame. Text box, right-click frame, texts, thoughts, frame. Thanks. Thanks. All right. And that is either very tedious but super-helpful thing naming all of these frames. Because we definitely want to be able to have everything readily available to make a dick upon itself. This one here, which it's Frame 7, Let's actually called checked protons. And frame 8, we're going to name unchecked times. Frame 6 is expected to be my panel here with with a bunch of empty phrase. Now, not that one on here, which is fine. Check first the baseline which is checked and unchecked. Now I think we have a little bit of a mistake here. Now, this one, good, This one is unchecked. Assignment one. So if this box here, WE DO need to add this vector into frame two. This is that, that there. There we go. Now we have our correct frame here, which is kept Sinai. And I'm going to, whoops, see, now these are all each and forams, I'm going to select all of the frames and my layers panel by holding command or control Y. Click them. All. Right-click. And I'm going to click the drop-down under the Component button and create a component set. S is going to be my task list items. And we're going to build in the functions here. And now. So what we're going to first grab, it's a great assignment 6, the unchecked assignment. And we're going to say that on tap, it changes to check the assignment. But then we want to check the assignment on tap to change to uncheck the assignment. So now if we click this mistake, we check it up. We can click it again and it'll read set name itself to not be checked anymore. Same thing here on tap. This is going to change to checked Atlanta. And the spine up on top will change to on-chip to plan. So in theory, do this for all of these. I'm not going to waste the time by doing it all over again, but let's check it out by going to our assets. We can see our testlets are here, drag it in. I have graded assignments 6. I can replace this one with. Now we have the component and we should be able to prototype this task list. Check off the class, but then uncheck it. Awesome.
Figma Demo: Checking Off or Unchecking Tasks
From Lukas Emory April 28, 2022
21 plays
21
0 comments
0
You unliked the media.
Here is how to use component variants to check a task as complete or uncheck it to mark it as incomplete.
…Read more
Less…
- Tags
- Appears In
Link to Media Page
Loading
Add a comment