Vector editing mode in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a product designer at a startup

📋 Request: Your manager wants you to create a simple dashboard icon using vector editing mode in Figma

📊 Data: You have access to Figma's vector editing tools including pen tool, node editing, and shape tools

🎯 Deliverable: A clean, scalable vector icon representing a dashboard, ready to be used in the product UI

Sample Data

Tool	Description	Shortcut
Pen Tool	Create custom vector shapes by placing nodes	P
Node Selection	Select and move individual points on a vector path	V
Shape Tool	Create basic shapes like rectangles and circles	R (rectangle), O (ellipse)
Boolean Operations	Combine shapes using Union, Subtract, Intersect, Exclude	Shift + Boolean icon
Vector Editing Mode	Edit individual nodes and curves on vector shapes	Double-click shape or press Enter

1

Step 1: Create a rectangle shape to represent the dashboard base

Select Shape Tool (R), draw a rectangle about 120x80 pixels

Expected Result

A rectangle shape appears on the canvas as the dashboard background

2

Step 2: Enter vector editing mode on the rectangle to adjust corners

Double-click the rectangle or press Enter to enter vector editing mode

Expected Result

Nodes appear on the rectangle corners, ready for editing

3

Step 3: Select individual corner nodes and drag them inward to round corners manually

Use Node Selection tool (V), drag corner nodes about 10 pixels inward

Expected Result

Rectangle corners become rounded with smooth curves

4

Step 4: Use the Pen Tool (P) to add a vertical line inside the rectangle representing a sidebar

Select Pen Tool, click two points vertically inside the rectangle about 30 pixels from left edge

Expected Result

A vertical line appears inside the rectangle representing the sidebar

5

Step 5: Add three small rectangles inside the main rectangle to represent dashboard widgets

Use Shape Tool (R), draw three small rectangles spaced evenly inside the main shape

Expected Result

Three small rectangles appear inside the dashboard base representing widgets

6

Step 6: Use Boolean Union to combine all shapes into one vector shape

Select all shapes, click Union boolean operation in toolbar

Expected Result

All shapes merge into a single vector shape for easy scaling

7

Step 7: Exit vector editing mode and check the icon scales cleanly

Press Esc to exit vector editing mode, then resize the icon

Expected Result

Icon scales smoothly without distortion, ready for UI use

Final Result

 _________ 
|  | | |  |
|__|_|_|__|
|  Dashboard |
|  Icon     |
 -----------

✓Vector editing mode allows precise control of shape corners and curves

✓Combining shapes with Boolean operations creates a clean, scalable icon

✓Using simple shapes and lines effectively represents dashboard elements

Bonus Challenge

Create a hover state version of the dashboard icon by changing colors and adding a shadow using vector editing mode

Show Hint

Use Fill color changes and add a subtle shadow shape behind the icon using vector tools