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

Practice

1. What does Vector editing mode in Figma allow you to do?

easy

A. Move and adjust points and curves on shapes

B. Change the color of text layers

C. Add new pages to your Figma file

D. Export images in different formats

Solution

1. Step 1: Understand the purpose of Vector editing mode

   Vector editing mode is designed to let you change shapes by moving their points and curves.

2. Step 2: Compare options with the definition

   Only Move and adjust points and curves on shapes describes moving and adjusting points and curves, which matches the purpose of vector editing.

3. Final Answer:

   Move and adjust points and curves on shapes -> Option A

4. Quick Check:

   Vector editing mode = Move points and curves [OK]

Hint: Vector mode edits points and curves on shapes [OK]

Common Mistakes:

• Confusing vector editing with color or text editing
• Thinking vector mode adds pages or exports files

2. Which of the following is the correct way to enter Vector editing mode in Figma?

easy

A. Right-click the canvas and select 'Vector mode'

B. Double-click the shape you want to edit

C. Press Ctrl + V on your keyboard

D. Click the 'Export' button in the toolbar

Solution

1. Step 1: Recall how to enter Vector editing mode

   You enter Vector editing mode by double-clicking the shape you want to edit.

2. Step 2: Evaluate each option

   Only Double-click the shape you want to edit matches the correct method. Options A, C, and D do not trigger vector editing mode.

3. Final Answer:

   Double-click the shape you want to edit -> Option B

4. Quick Check:

   Enter vector mode = Double-click shape [OK]

Hint: Double-click shape to enter vector mode [OK]

Common Mistakes:

• Trying keyboard shortcuts like Ctrl+V which pastes instead
• Looking for vector mode in right-click menu or export options

3. You double-click a star shape in Figma and drag one of its points. What happens?

medium

A. The point moves, changing the star's shape

B. The entire star moves on the canvas

C. The star's fill color changes

D. Nothing happens until you press Enter

Solution

1. Step 1: Understand double-clicking a shape

   Double-clicking enters Vector editing mode, allowing point adjustments.

2. Step 2: Effect of dragging a point in Vector mode

   Dragging a point moves that point, changing the shape's outline.

3. Final Answer:

   The point moves, changing the star's shape -> Option A

4. Quick Check:

   Drag point in vector mode = shape changes [OK]

Hint: Drag points in vector mode to reshape objects [OK]

Common Mistakes:

• Thinking dragging moves the whole shape instead of a point
• Expecting color changes from dragging points
• Believing changes require pressing Enter

4. You try to edit a shape's points but nothing happens. Which is the most likely reason?

medium

A. You are in Prototype mode instead of Design mode

B. You pressed Esc instead of double-clicking

C. You are editing a text layer, not a shape

D. You forgot to double-click the shape to enter Vector editing mode

Solution

1. Step 1: Identify why points don't move

   Points only move in Vector editing mode, which requires double-clicking the shape.

2. Step 2: Check other options

   Pressing Esc exits vector mode, editing text layers doesn't allow point moves, and prototype mode disables editing but the main cause is not entering vector mode.

3. Final Answer:

   You forgot to double-click the shape to enter Vector editing mode -> Option D

4. Quick Check:

   No vector mode = points don't move [OK]

Hint: Double-click shape first to edit points [OK]

Common Mistakes:

• Trying to edit points without entering vector mode
• Confusing Esc key as entry to vector mode
• Editing text instead of shapes

5. You want to customize a dashboard icon by reshaping it precisely. Which steps correctly use Vector editing mode?

hard

A. Right-click the icon, choose 'Edit Color', then drag points

B. Select the icon, press Delete, then redraw with the pen tool

C. Double-click the icon, drag points to reshape, then click outside to exit

D. Click the icon once, drag it to move, then press Esc

Solution

1. Step 1: Enter Vector editing mode correctly

   Double-click the icon to enter Vector editing mode for point editing.

2. Step 2: Modify points and exit properly

   Drag points to reshape, then click outside or press Esc to exit vector mode.

3. Final Answer:

   Double-click the icon, drag points to reshape, then click outside to exit -> Option C

4. Quick Check:

   Double-click + drag points + click outside = correct vector editing [OK]

Hint: Double-click, drag points, click outside to finish [OK]

Common Mistakes:

• Deleting and redrawing instead of editing points
• Trying to edit color instead of shape points
• Dragging whole icon instead of points