Vector editing mode in Figma - Dashboard Guide

Dashboard Mode - Vector editing mode

Goal

Understand how to use vector editing mode in Figma to create and modify shapes for data visualization elements.

Sample Data

Month	Sales	Profit
January	100	30
February	150	50
March	200	70
April	180	60
May	220	80

Dashboard Components

• KPI Card: Displays total sales.
  Formula: Sum of Sales = 100 + 150 + 200 + 180 + 220 = 850
• Bar Chart: Shows monthly sales using rectangles.
  Vector shapes created and edited in vector editing mode to adjust bar heights proportional to sales values.
• Profit Line: A line shape created with vector editing mode connecting profit points over months.
• Legend: Vector shapes (circle and rectangle) edited to represent sales and profit colors.

Dashboard Layout

+----------------------+----------------------+
|      KPI Card        |      Legend          |
|  Total Sales: 850    |  ■ Sales (Blue)      |
|                      |  ● Profit (Green)    |
+----------------------+----------------------+
|                      Bar Chart (Sales)       |
|  Jan  Feb  Mar  Apr  May                      |
|  █    ███  ████ ███  █████                     |
|                                              |
|               Profit Line Chart               |
|  ●----●-----●-----●-----●                      |
+----------------------------------------------+

Interactivity

Filter by Month: Selecting a month updates the KPI card, bar chart, and profit line to show data only for that month.

Color toggle: Clicking legend shapes toggles visibility of sales bars or profit line.

Self Check

If you add a filter to show only March and April, which components update?

• KPI Card updates total sales to 200 + 180 = 380.
• Bar Chart shows bars only for March and April.
• Profit Line connects only profit points for March and April.
• Legend remains unchanged.

Key Result

A dashboard showing total sales, monthly sales bars, and profit line created and edited using vector editing mode in Figma.