CSS properties export in Figma - Dashboard Guide

Dashboard Mode - CSS properties export

Dashboard Goal

Understand how to export CSS properties from Figma designs to use in web development.

Sample Data: CSS Properties from Figma Export

Property	Value	Description
font-family	"Roboto", sans-serif	Font used for text
font-size	16px	Size of the text
color	#333333	Text color
background-color	#FFFFFF	Background color of the element
border-radius	8px	Rounded corners radius
box-shadow	0 2px 4px rgba(0,0,0,0.1)	Shadow effect around the element
padding	12px 16px	Space inside the element around content

Dashboard Components

• KPI Card: Shows the total number of CSS properties exported (7 properties).
• Bar Chart: Visualizes the frequency of CSS property types (e.g., colors, sizes, fonts).
• Data Table: Displays the detailed CSS properties with their values and descriptions.

Formulas/Expressions:

• Total CSS Properties = COUNTROWS('CSS Properties Table') — counts all CSS properties exported.
• Color Properties = COUNTROWS(FILTER('CSS Properties Table', CONTAINSSTRING([Property], "color"))) — counts properties related to color.
• Size Properties = COUNTROWS(FILTER('CSS Properties Table', OR(CONTAINSSTRING([Property], "size"), CONTAINSSTRING([Property], "padding"), CONTAINSSTRING([Property], "radius")))) — counts size-related properties.

Dashboard Layout

+----------------------+-----------------------+
|      KPI Card        |      Bar Chart        |
|  (Total Properties)  |  (Property Types)     |
+----------------------+-----------------------+
|                  Data Table                  |
|          (CSS Properties Details)            |
+---------------------------------------------+

Interactivity

The dashboard includes a filter to select CSS property categories (e.g., colors, sizes, fonts). When a category is selected:

• The KPI Card updates to show the count of properties in that category.
• The Bar Chart highlights the selected category's frequency.
• The Data Table filters to show only properties matching the selected category.

This helps users focus on specific CSS property groups exported from Figma.

Self Check

Try this: Apply a filter to show only "color" properties.

Question: Which components update and what changes do you see?

• KPI Card: Updates to show the count of color-related properties (2 in sample data).
• Bar Chart: Highlights the "color" category bar.
• Data Table: Filters to show only rows with properties containing "color" (color, background-color).

Key Result

Dashboard showing CSS properties exported from Figma with counts, categories, and details.