0
0
Figmabi_tool~8 mins

Color styles in Figma - Dashboard Guide

Choose your learning style9 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash
Dashboard Mode - Color styles
Dashboard Goal

Help users understand how to apply and manage color styles in Figma to create consistent and accessible BI dashboards.

Sample Data: Color Styles
Style NameHex CodeUsageContrast Ratio
Primary Blue#1E90FFButtons, Links4.5:1
Secondary Gray#6E6E6EText, Icons7:1
Success Green#28A745Success Messages5.2:1
Warning Orange#FFC107Warnings3.8:1
Error Red#DC3545Error Messages4.6:1
Background Light#F8F9FABackgrounds12:1
Background Dark#343A40Backgrounds15:1
Dashboard Components
  • KPI Card: Shows Primary Blue color swatch with hex code and usage. This card uses the Primary Blue style as background.
  • Color Palette Table: Displays all color styles with their hex codes, usage, and contrast ratio for accessibility.
  • Contrast Bar Chart: Bar chart visualizing contrast ratios of each color style to highlight accessibility compliance. Bars colored with their respective color styles.
  • Accessibility Warning: Text box that highlights any color styles with contrast ratio below 4.5:1, indicating they may not meet accessibility standards.
Dashboard Layout
+----------------------+--------------------------+
|      KPI Card        |    Accessibility Warning  |
|  (Primary Blue)      |  (Contrast below 4.5:1)   |
+----------------------+--------------------------+
|                  Color Palette Table               |
+---------------------------------------------------+
|                 Contrast Bar Chart                 |
+---------------------------------------------------+
Interactivity

User can select a color style from the Color Palette Table. When selected, the KPI Card updates to show that color's swatch, hex code, and usage. The Contrast Bar Chart highlights the selected color's bar with a border. The Accessibility Warning updates to show if the selected color's contrast ratio is below 4.5:1.

Self Check

Add a filter to select the Warning Orange color style. Which components update and how?

  • KPI Card: Updates background and details to Warning Orange (#FFC107).
  • Contrast Bar Chart: Highlights the Warning Orange bar.
  • Accessibility Warning: Shows a warning because Warning Orange has contrast ratio 3.8:1, below 4.5:1.
  • Color Palette Table: Highlights the selected row.
Key Result
A Figma dashboard demonstrating how to use and manage color styles with accessibility contrast insights.