How To Create a MULTIPLE CHOICE Interactive Component in Figma (Tutorial)
HTML-код
- Опубликовано: 10 сен 2024
- Visit my STORE: bit.ly/mavi-de...
Explore Mavi Design COURSES : bit.ly/mavi-de...
Get FIGMA for FREE: bit.ly/get-sta...
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-p...
Get the SOURCE FILES for this project ($1.99): payhip.com/b/G...
In this interactive component / prototyping Figma tutorial, we're going to take a look at creating an interactive multiple-choice checkbox component that is fully customizable, including text fields and the actual number of options. You'll be able to use this in your website / app / form prototypes and enable your clients / users / stakeholder to actually try out a checkbox form interaction. This will help make your Figma prototypes more interactive, immersive, believable and overall offer great user experience (UX)
Topics: interactive components in Figma, prototyping in Figma, Checkbox in Figma, multiple choice form prototype in Figma
---------
© 2022 Mavi Design
Thank you, for this great tutorial. I was able to adjust my multiple choice option buttons on a form for my hi-fi prototype.
Thank you for the tutorial ! It's very helpful :)
Thanks for the tuto bro !
HI, thanks for this good tut. What I need is, if somebody click on an option, another element e.g. a "pill" with the text of the clicked option should be shown. and if i unselect the option, the element should be hide. Is this possible?
thanks a lot
so can we just add next question by duplicating the main frame and adding next button prototyping it?
Thanks for this tutorial ! How would you enter text from the Design panel on the right instead of directly on the screen text box layer. Do you have a tutorial for this?
Is there a way to show the order in which the user has selected the items? I'm trying to create an app where users can add tasks to a routine, so showing the order in which they've added them would be helpful.
Fantastic. Thanks.
How did you do the copy paste at 3:46 ?
Alt (or option) + drag
@@mavidesignhank you very much. Do you have a video tutorial to how the quiz can result in an answer/reply ?
I don't but you're not the first one to mention this. I'll think about doing this in the future
How to you make it so that if option 1 is clicked, it will show a picture or text, but if it’s turned off, the picture or text will be hidden
How many page I need to create ?
If I have 300 Questions ?
please can someone tell me how he grab the checkbox, without moving the original variant at 3:44 ! When i grab it, i move the parent variant, and when i copy paste it, it makes it a component...
want to know too
Neat, thanks.
if we want to show all the selected options in the field how can we do that? like we have to select multiple states and we have multiple options and using your brief I can make that happen but when I have to show their names in the field how can I do that?
Do you mean how can you change the text contents of one of those options?
@@mavidesign no I mean after multiple selection I want to display the selected options in a text area
Is there a way to make on one box selectable at a time? For instance, if Box A is already selected then you click box B, is there a way to make it uncheck box A? I'm trying to make my table look like it has column filters.
There is, but that would require a different structure. It’s basically a radio button and I’ll be creating a video on that soon :)
@@mavidesign Thanks!
Let's say there are 10 multiple choice questions. If we have to show our users how they performed on the quiz, how can we do that?
Probably create another frame / design a new section and then display that once the user clicks on “confirm” or something along those lines:)
@@mavidesign Cool. Thank you.
Thank u