0
0
Figmabi_tool~15 mins

Keyboard shortcuts mastery in Figma - Real Business Scenario

Choose your learning style9 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash
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.
Progress0 / 6 steps
Sample Data
Task IDDesignerProjectShortcut UsedTime Taken (minutes)
1AliceWebsite RedesignYes15
2BobMobile AppNo25
3AliceWebsite RedesignYes12
4CharlieMarketing BannerNo20
5BobMobile AppYes18
6CharlieMarketing BannerYes14
7AliceWebsite RedesignNo22
8BobMobile AppYes16
9CharlieMarketing BannerNo21
10AliceWebsite RedesignYes13
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.