Create a CHECKBOX DROPDOWN MENU in Figma (Tutorial)

preview_player
Показать описание


In this video we're going to create a functional checkbox dropdown menu prototype using components and various Figma prototyping tools. This dropdown menu also has functional "select all" and "deselect all" buttons, approaching the real thing as much as possible.

This is a step-by-step, full process Figma prototyping explanation tutorial with source files available.

————————
© 2023 Mavi Design
  1. Mavi Design
Рекомендации по теме
Create a CHECKBOX 0:30:16

Create a CHECKBOX DROPDOWN MENU in Figma (Tutorial)

Create Multi-checkbox dropdown 0:10:46

Create Multi-checkbox dropdown lists

Create drop down 0:01:36

Create drop down list with checkbox in Excel

Create a DROPDOWN 0:14:01

Create a DROPDOWN MENU in Figma (Tutorial)

How to Make 0:07:51

How to Make Multiple Selections in a Drop-Down List in Excel - No Duplicates Allowed - VBA Code inc

Multiple Select Dropdown 0:15:09

Multiple Select Dropdown With Checkbox Using HTML CSS and JavaScript

How to Insert 0:11:26

How to Insert Checkbox in Excel

create multi checkbox 0:03:59

create multi checkbox dropdown lists

How to Make 0:09:30

How to Make a Simple Checklist in Excel

How to Create 0:03:44

How to Create A MULTI-SELECT Drop-Down List in Excel!

Create checkbox in 0:00:27

Create checkbox in dropdown list html #html #shortvideo #shorts

Create checkbox in 0:00:27

Create checkbox in dropdown list html #html #shortvideo #shorts

Google Sheets Checkbox 0:00:56

Google Sheets Checkbox - Apply Conditional Formatting across entire row

Multiple Options Select 0:22:00

Multiple Options Select Menu in HTML CSS & JavaScript

How To Create 0:05:35

How To Create a Multi-Select Checkbox Dropdown With Searching On Web Page

How to create 0:35:27

How to create a Multiple Checkbox Dropdown using JavaScript | JavaScript Mini-Project | Step by Step

How to Create 0:38:05

How to Create a Dropdown Menu with Selectable Checkboxes in Flutter | Step-by-Step Tutorial

CSS : How 0:00:57

CSS : How to create checkbox inside dropdown?

Multiple Select Dropdown 0:00:27

Multiple Select Dropdown With Checkbox Using HTML and CSS #shorts #dropdown #checkbox

Multi Select Checkbox 0:14:04

Multi Select Checkbox in Power Apps

Create Checkbox in 0:07:00

Create Checkbox in Figma | Figma Prototype | Figma tutorial for beginners | MrSid

create multi checkbox 0:07:02

create multi checkbox dropdown lists

Smart To-do List 0:12:26

Smart To-do List with Excel's New Checkbox Feature

Multiselect dropdown with 0:02:41

Multiselect dropdown with checkbox in Angular

Комментарии
Автор

This is a fantastic, clear, very detailed, step-by-step tutorial that I found HUGELY valuable. I really appreciate your incredibly lucid and natural tone, your attention to the kinds of gaps and errors that happen BETWEEN prototype actions, and your walking through the actual thinking process that happens while you're making things. As much as I like most of the tutorials made by Figma, they frequently are missing this sort of real-world workflow process. Very appreciated.👍

elegantscience
Автор

Wonder if you could do the select all and deselect all with variables and condition statements

Charlieussery
Автор

how do you then go about changing the item names from checkbox to what you actually need in your design. I need multiple dropdowns all with different item names

feargalcassidy
Автор

everything is perfect, except the overlay interaction isn't working for me :'( any idea why?
thanks for this amazing video!

nynlou
Автор

thanks, it was a great tutorial, I will definitely use it. it was fun to watch the moment of discovery :)

i have a question; when I put a few of the dropdowns on the bottom and do the layout, the tab that opens stays under the dropdown header at the bottom, does not rise above it. it's so complicated. is there anyone who can help?

caglagunay
Автор

Hello

That is a great tutorial. For example, in the video it is shown a list of 5 checkboxes. If the first option in the list was "add friend" instead of one checkbox and the user clicked there, I need it to open an overlay. I couldnt find a way to make it work.
Would anyone know if there is a way to make it work?

andregfernandes
Автор

Thanks for the good toutorial could you du some App toutorials soone? 😊

theah
Автор

Figma source file for fee community....

designsghosts