Skip to main content

​
What It Does

Deep Select mode eliminates the need for repeated double-clicks when inspecting nested elements in Figma’s read-only view. When enabled, a single click automatically selects the lowest-level (deepest) node at that position.
Deep select mode enabled in preferences

​
The Problem It Solves

In Figma’s read-only view, selecting deeply nested nodes requires:
  • Double-clicking to drill down through each container level
  • Repeated double-clicks to reach the lowest-level element
  • Or holding ⌘ (Mac) / Ctrl (Windows) while clicking each time
Many users are unaware of the ⌘ + click shortcut, and even when known, it requires an extra key operation for every selection.

​
How to Enable

  1. Open TemPad Dev panel
  2. Click the Preferences icon (gear icon in the top right)
  3. In the Tools section, click the Deep select button to toggle it on
When enabled, the Deep select button appears highlighted

​
How It Works

Once enabled, Deep Select mode automatically:
  1. Intercepts your clicks on the Figma canvas
  2. Simulates ⌘ + click behavior automatically
  3. Selects the deepest element at the click position
  4. Updates the Code panel with the selected element’s styles

​
Technical Implementation

Deep Select mode works by:
  • Monitoring canvas hover state
  • Setting a “lock” on the Meta key (⌘/Ctrl) when hovering over the canvas
  • Releasing the lock when you’re not hovering, pressing Space, or actively clicking
// Simplified implementation reference
function syncMetaLock() {
  const hovered = isCanvasHovered()
  setLockMetaKey(hovered && options.value.deepSelectOn)
}

​
Behavior Details

​
When Deep Select is Active

  • Single click selects the deepest nested element
  • Equivalent to ⌘ + click in normal Figma
  • Updates TemPad Dev code panel immediately

​
When Deep Select is Inactive

Clicking behaves like standard Figma read-only mode:
  • Single click selects the top-level frame or group
  • Double-click to drill down one level
  • Hold ⌘ + click to select deepest element manually

​
Use Cases

Quickly access text styles, icons, or shapes nested deep inside design components without multiple double-clicks.Example: Selecting the icon inside a button inside a card inside a modal
Speed up the process of extracting styles from complex designs by eliminating navigation overhead.Example: Inspecting individual elements in a navigation bar with multiple nested groups
Efficiently verify styling consistency across deeply nested elements in complex layouts.Example: Checking text styles in deeply nested list items

​
Interaction with Other Features

​
Measure Mode

Deep Select and Measure mode can be enabled simultaneously:
  • Deep Select controls click behavior (selects deepest element)
  • Measure mode controls hover behavior (shows spacing automatically)
  • Both work together seamlessly for efficient inspection

​
Scroll Into View

After selecting an element with Deep Select:
  1. The element appears in the Meta section at the top of TemPad Dev
  2. Click the Scroll into view button to center it in the viewport
  3. Learn more in Scroll Selection Into View

​
Compatibility

Deep Select mode only works in Figma’s read-only view or when using TemPad Dev as a browser extension. It does not affect Figma’s desktop app behavior.

​
Supported Platforms

  • Chrome/Edge browser extension (full support)
  • Figma web app in read-only mode (full support)
  • Figma web app with edit access (limited - use native shortcuts)
  • Figma desktop app (not supported - use native shortcuts)

​
Tips and Best Practices

Toggle it on by default - If you frequently inspect nested elements, keep Deep Select enabled to save clicks.
Combine with Measure mode - Enable both features for the fastest inspection workflow: click to select deeply, hover to measure spacing.
Disable when rearranging views - If you need to select parent frames for navigation, temporarily disable Deep Select.
Deep Select temporarily disables itself during certain interactions (space bar for panning, pointer down events) to avoid interfering with normal canvas operations.

​
Keyboard Integration

Deep Select mode integrates with Figma’s keyboard shortcuts:
ShortcutBehavior with Deep Select
Space + dragTemporarily disables Deep Select for panning
Shift + clickAdd deeply nested element to multi-selection
Alt + hoverWorks normally with Measure mode

​
Troubleshooting

Check these:
  • Is the Deep select button highlighted in Preferences?
  • Are you in Figma’s read-only view (not the desktop app)?
  • Are you hovering over the canvas when clicking?
  • Try toggling Deep Select off and on again
Solution: Temporarily disable Deep Select mode when you need to select container frames rather than nested elements.
Normal behavior: Deep Select automatically disables when you press Space and re-enables when you release it.

​
Next Steps

Measure Mode

Automatically show spacing measurements on hover

Scroll Into View

Center selected elements in the viewport

Build docs developers (and LLMs) love

Get started for freeTalk to us