Figma tutorial: Checkbox tree

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


Hop around ⇩
00:00 - Getting started
01:08 - Parent and child item icons
03:35 - Checkbox component
05:04 - "Icon” component
05:45 - Text component
06:00 - Assembling item component
07:10 - Boolean property to hide icon from item
07:48 - Boolean property to hide checkbox
08:07 - Variants for expanded parent view and child view
09:01 - Hover variants + interactions for parent icon buttons
12:33 - Hover interactions for the checkbox part
15:35 - Variants for checkbox states
17:15 - Click interactions for checking items on/off
18:30 - Variants for levels
19:58 - Example
21:42 - Wrapping up

🎶 Music from Uppbeat:

#figma #figmatutorial #uidesign
  1. masha
  2. figma
  3. figma design
  4. figma tutorial
  5. auto layout
  6. figma component properties
Рекомендации по теме
Figma tutorial: Checkbox 0:22:52

Figma tutorial: Checkbox tree

Organize the tree 0:00:13

Organize the tree page in Figma

How to design 0:03:01

How to design checkbox in Figma

Advanced Tree View 0:00:16

Advanced Tree View Component in Figma #uikit #responsivedesign

Figma tutorial: Checkbox 0:11:33

Figma tutorial: Checkbox with interactions

CheckBox in Figma 0:02:54

CheckBox in Figma | Figma Tutorial 🤘

Checkbox: Indeterminate | 0:04:32

Checkbox: Indeterminate | Learn Figma for Beginners

Tree Menu Animation 0:00:59

Tree Menu Animation in Figma #shorts

Figma Design - 0:00:14

Figma Design - Checkbox animate prototype

How to design 0:43:14

How to design checkboxes in Figma #MateriaDesign

Create a DROPDOWN 0:14:01

Create a DROPDOWN MENU in Figma (Tutorial)

How to Create 0:07:19

How to Create Animated Multiple Checkbox & Selection in FIgma | Figma Tutorial

MASTER Figma Components 0:09:28

MASTER Figma Components in 10 Minutes (Everything You Need To Know)

How to Design 0:08:00

How to Design an Interactive Checkbox in Figma | Beginners Tutorial

Refactoring the Checkbox 0:21:42

Refactoring the Checkbox Component | Design System in Figma | No Talkin' | Just Clickin'

Powerful Button Components 0:00:58

Powerful Button Components in Figma⚡️

Figma in 55 0:00:56

Figma in 55 Seconds: Tables with auto layout and variants

Figma illustration | 0:00:25

Figma illustration | Bonsai Tree

The Figma Tech 0:05:19

The Figma Tech Tree - Analysing your design file's technical and systemic maturity in figma.

Checkbox Component | 1:07:53

Checkbox Component | Design System in Figma | No Talkin' | Just Clickin'

Создаем дерево чекбоксов 0:15:21

Создаем дерево чекбоксов

Drop down menu 0:00:16

Drop down menu - link is in comment👇 #figma #effect #list #selectdox #figmaanimation#figmacomponents...

Creating Animated Shapes 0:10:29

Creating Animated Shapes (Circles) using Figma

Connect Figma Variable 0:16:39

Connect Figma Variable to Variant | Connect a component to a variable | Prototype with Variables

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

Hop around ⇩
00:00 - Getting started
01:08 - Parent and child item icons
03:35 - Checkbox component
05:04 - "Icon” component
05:45 - Text component
06:00 - Assembling item component
07:10 - Boolean property to hide icon from item
07:48 - Boolean property to hide checkbox
08:07 - Variants for expanded parent view and child view
09:01 - Hover variants + interactions for parent icon buttons
12:33 - Hover interactions for the checkbox part
15:35 - Variants for checkbox states
17:15 - Click interactions for checking items on/off
18:30 - Variants for levels
19:58 - Example
21:42 - Wrapping up

mash
Автор

Thanks for sharing! It's always nice to see how other designers structure their components and variants. It gave me a good idea of how to improve my workflow (:

obrenomartins
Автор

Never knew there was an 'Add variant' button turning a component into a component set 😅. Overall love it and really like how the component interactions hold 💪

alexzlatkus