Keyboard shortcuts mastery in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UX designer at a digital agency.

📋 Request: Your manager wants a report showing how keyboard shortcut usage improves design efficiency in Figma projects.

📊 Data: You have data on design tasks completed, time taken, and whether keyboard shortcuts were used for each task.

🎯 Deliverable: Create a dashboard mockup in Figma that compares average task completion time with and without keyboard shortcuts, and shows the percentage of tasks using shortcuts.

Sample Data

Task ID	Designer	Project	Shortcut Used	Time Taken (minutes)
1	Alice	Website Redesign	Yes	15
2	Bob	Mobile App	No	25
3	Alice	Website Redesign	Yes	12
4	Charlie	Marketing Banner	No	20
5	Bob	Mobile App	Yes	18
6	Charlie	Marketing Banner	Yes	14
7	Alice	Website Redesign	No	22
8	Bob	Mobile App	Yes	16
9	Charlie	Marketing Banner	No	21
10	Alice	Website Redesign	Yes	13

1

Step 1: Create a new Figma file and add a dashboard frame using keyboard shortcuts.

Cmd/Ctrl + N (new file), F (Frame tool), drag to create 1440x900 frame. Name it 'Dashboard'. Double-click to enter frame (or Enter).

Expected Result

Dashboard frame ready.

2

Step 2: Create the first card for 'Avg Time with Shortcuts' using shortcuts.

R (Rectangle tool), draw 300x150 rect, V (Move tool), set fill #FFFFFF, stroke #E5E5E5 2px. T (Text tool), type 'Avg Time with Shortcuts: 14.8 min', style bold 24pt #333. Cmd/Ctrl + G (group).

Expected Result

Card 1 showing 14.8 min.

3

Step 3: Duplicate and modify for 'Avg Time without Shortcuts'.

Select group, Cmd/Ctrl + D (duplicate), move with V + arrow keys, edit text to 'Avg Time without Shortcuts: 22 min'.

Expected Result

Card 2 showing 22 min.

4

Step 4: Create donut chart for 'Shortcut Usage %'.

O (Ellipse tool), draw 200x200 circle, no fill, stroke #4CAF50 40px. Duplicate inner smaller circle (scale 60% with Shift+S), fill #FFFFFF, stroke none. T for label '60%', center with V + alignment shortcuts (Opt/Alt + drag). Group all.

Expected Result

Donut chart visual at 60%.

5

Step 5: Arrange visuals in auto-layout and add title.

Select all cards + donut + title text ('Keyboard Shortcut Efficiency Dashboard', T tool, 36pt bold), Shift + click, Cmd/Ctrl + Alt + G (frame selection to auto-layout). Use A for spacing adjustments.

Expected Result

Responsive dashboard layout.

6

Step 6: Enhance with labels, colors, and accessibility notes.

Add subtle shadows (Effects panel, Cmd/Ctrl + E), green/red accents for yes/no. In prototype mode (P), add descriptions for screen readers via properties panel.

Expected Result

Polished, accessible dashboard.

Final Result

+---------------------------+
| Keyboard Shortcut Dashboard |
+---------------------------+
| Avg w/ Shortcuts: 14.8 min | Avg w/o: 22 min     |
|                           |                     |
|            60%             |    [Donut Chart]    |
|       (Green Donut)       |                     |
+---------------------------+---------------------+

✓Tasks with keyboard shortcuts average 14.8 min vs 22 min without – 32% faster!

✓60% task adoption rate for shortcuts.

✓Promote Figma shortcuts (e.g., V, R, T, Cmd+D) to boost efficiency.

Bonus Challenge

Add a bar chart frame showing avg time per project split by shortcut usage, using grouped bars. Use data grouping: Website Redesign (Yes:13.3, No:22), Mobile App (Yes:17, No:25), Marketing Banner (Yes:14, No:20.5).

Show Hint

R for bars, duplicate/resize with shortcuts, color-code Yes (green)/No (red), add legends with T.

Practice

1. Which keyboard shortcut in Figma is used to undo the last action?

easy

A. Ctrl/Cmd + C

B. Ctrl/Cmd + Y

C. Ctrl/Cmd + X

D. Ctrl/Cmd + Z

Solution

1. Step 1: Understand the undo function

   Undo reverses the last change made in the design.

2. Step 2: Identify the standard undo shortcut

   Ctrl (Windows) or Cmd (Mac) plus Z is the universal undo shortcut in most software, including Figma.

3. Final Answer:

   Ctrl/Cmd + Z -> Option D

4. Quick Check:

   Undo = Ctrl/Cmd + Z [OK]

Hint: Undo is always Ctrl/Cmd + Z in most apps [OK]

Common Mistakes:

• Confusing undo with redo
• Using copy shortcut instead
• Mixing up cut and undo

2. Which of the following is the correct shortcut to copy an object in Figma?

easy

A. Ctrl/Cmd + C

B. Ctrl/Cmd + V

C. Ctrl/Cmd + X

D. Ctrl/Cmd + P

Solution

1. Step 1: Recall the copy shortcut

   Copy duplicates the selected object to the clipboard without removing it.

2. Step 2: Match the shortcut to the action

   Ctrl/Cmd + C is the standard shortcut for copy in Figma and most software.

3. Final Answer:

   Ctrl/Cmd + C -> Option A

4. Quick Check:

   Copy = Ctrl/Cmd + C [OK]

Hint: Copy always uses Ctrl/Cmd + C [OK]

Common Mistakes:

• Using paste shortcut instead
• Confusing cut with copy
• Pressing wrong letter key

3. What happens when you press the V key in Figma?

medium

A. Select the Move tool

B. Select the Text tool

C. Open the Vector tool

D. Open the Frame tool

Solution

1. Step 1: Identify the tool shortcut for 'V'

   In Figma, single letter keys select tools quickly.

2. Step 2: Recall the tool assigned to 'V'

   The 'V' key selects the Move tool, allowing you to move objects on the canvas.

3. Final Answer:

   Select the Move tool -> Option A

4. Quick Check:

   V key = Move tool [OK]

Hint: Single letter keys pick tools fast; V is Move tool [OK]

Common Mistakes:

• Confusing V with Vector tool
• Mixing up Text and Frame tools
• Thinking V opens a menu

4. You tried to paste an object using Ctrl + V but nothing happened. What is the most likely reason?

medium

A. The object is locked and cannot be pasted

B. You pressed Ctrl + C instead of Ctrl + V

C. You did not copy anything before pasting

D. Figma does not support paste shortcut

Solution

1. Step 1: Understand paste behavior

   Paste inserts the copied content from the clipboard.

2. Step 2: Identify why paste fails

   If nothing was copied before, the clipboard is empty, so paste does nothing.

3. Final Answer:

   You did not copy anything before pasting -> Option C

4. Quick Check:

   Paste requires prior copy [OK]

Hint: Always copy before pasting [OK]

Common Mistakes:

• Assuming paste works without copy
• Thinking object lock blocks paste
• Believing Figma lacks paste shortcut

5. You want to quickly switch between the Move tool and the Frame tool in Figma using keyboard shortcuts. Which sequence of keys will do this correctly?

hard

A. Press Ctrl + M for Move tool, then Ctrl + F for Frame tool

B. Press V for Move tool, then F for Frame tool

C. Press F for Move tool, then V for Frame tool

D. Press M for Move tool, then R for Frame tool

Solution

1. Step 1: Recall single key shortcuts for tools

   In Figma, 'V' selects the Move tool and 'F' selects the Frame tool.

2. Step 2: Verify the sequence

   Pressing 'V' then 'F' switches tools correctly without modifiers.

3. Final Answer:

   Press V for Move tool, then F for Frame tool -> Option B

4. Quick Check:

   V = Move, F = Frame [OK]

Hint: Use single keys V and F to toggle Move and Frame tools [OK]

Common Mistakes:

• Using wrong keys like M or R
• Adding unnecessary Ctrl modifier
• Mixing tool shortcuts order