Table Row Filter | Row Filter in table | Progress Bars and percentage indicators in table row

Table Row Filter | Row Filter in table | Progress Bars and percentage indicators in table row

Table Row Filter by using local variables, variable modes and conditional interaction in figma

Table With Progress Bars and percentage indicators

Variable used to set the progress bar length and also the percentage text

variable names — Names of variables used to filter rows

In this video :

Main Topics :

• How to create local variables in figma
• About local variables : String, Number, Boolean
• Pass through layers OR show hide features in figma
• Apply variables like string and number variables
• How to use variable mode in figma
• figma component using variables
• reusable component in figma

About data table construction :

• Step 1. Create Table Header
• Step 2. Create Single Row
• Step 3. Create Local variables for Row content (with string and number variables)
• Step 4. Create dropdown list (for filter options)
• Step 5. Create Local variable collections for dropdown list (for filter options)
• Step 6. Create Local variable for rows
• Step 7. Change mode for each row and their content 
• Step 8. Interactions