Scroll Selection Into View

What It Does

Scroll Selection Into View centers the currently selected element in the Figma viewport at 100% zoom. This provides a better inspection experience than Figma’s native ⇧2 shortcut, which zooms to fill the viewport.

Scroll selection into view button in the Meta section

The Problem It Solves

When inspecting elements in Figma:

Selected elements may be off-screen or at the edge of the viewport
Figma’s native ⇧2 shortcut zooms to fill, which often over-zooms
You need to manually pan and zoom to get the right view
Switching between elements requires repeated repositioning

TemPad Dev’s Scroll Into View feature solves this by:

Centering the selection in the viewport
Maintaining 100% zoom for pixel-perfect inspection
One-click access from the panel header

How to Use

Select an element in your Figma file (or use Deep Select)
The element name appears in the Meta section at the top of TemPad Dev
Hover over the element name area
Click the Scroll into view button (appears on hover)

Select an element

Click on any layer in your Figma file

Locate the scroll button

Look for the icon that appears when hovering over the Meta section header

Click to center

The viewport smoothly scrolls and zooms to center your selection at 100%

Button Location

The Scroll into view button appears in the Meta section header:

┌─────────────────────────────────────┐
│ Layer Name                      [⌖] │ ← Scroll button appears here
└─────────────────────────────────────┘

The button is only visible when:

An element is selected
You hover over the Meta section
You’re using TemPad Dev in a Figma file (not view-only without API)

How It Works

The feature uses Figma’s Plugin API to provide better viewport control:

function scrollIntoView() {
  if (!window?.figma || selection.value.length === 0) {
    return
  }
  window.figma.viewport.scrollAndZoomIntoView(selection.value)
}

This API call:

Centers the selected nodes in the viewport
Zooms to 100% (1:1 pixel ratio)
Animates smoothly to the new position

Comparison with Figma’s Native Shortcut

Feature	`⇧2` (Figma)	Scroll Into View (TemPad Dev)
Centers selection	✓	✓
Zoom behavior	Fills viewport	100% zoom
Best for	Overview of large elements	Pixel-perfect inspection
Access	Keyboard only	One-click button

Use Cases

Multi-Element Inspection

When inspecting multiple elements across a large canvas:Workflow:

Select first element (e.g., button in header)
Click Scroll into view → Element centered
Copy CSS from Code panel
Select next element (e.g., button in footer)
Click Scroll into view → New element centered
Repeat for efficient inspection

Nested Component Inspection

After using Deep Select to access nested elements:Example:

Enable Deep Select mode
Click on icon deep inside a card component
Icon is selected but may be in a zoomed-out view
Click Scroll into view
Icon is now centered at 100% for detailed inspection

Design Review Sessions

During developer handoff or design QA:Scenario:

Designer shares file link
Developer opens in TemPad Dev
Clicks through elements in layer list
Uses Scroll into view for each to center and inspect
Maintains consistent 100% zoom throughout

Integration with Other Features

Deep Select + Scroll Into View

Perfect workflow for inspecting nested elements:

Enable Deep Select in preferences
Click on a complex component → Deepest element selected
Click Scroll into view → Element centered and zoomed to 100%
Inspect code, spacing, and styles in the panel

Measure Mode + Scroll Into View

Efficient spacing verification:

Select element (manually or with Deep Select)
Click Scroll into view → Element centered
Enable Measure mode → Spacing shown as you hover
Verify measurements at 100% zoom for accuracy

Code Inspection + Scroll Into View

Precise style extraction:

Select element from layer panel or canvas
Scroll into view → Element centered
Zoom in if needed for fine details
Extract CSS with accurate visual reference

Visual Feedback

Before Scroll Into View

┌─────────────────────────────────────────┐
│                                         │
│     [Small Element]                     │ ← Element is small/off-center
│                                         │
│                                         │
└─────────────────────────────────────────┘
       Viewport at 25% zoom

After Scroll Into View

┌─────────────────────────────────────────┐
│                                         │
│          ┌──────────────┐              │
│          │   Element    │              │ ← Element centered at 100%
│          │   (actual    │              │
│          │    size)     │              │
│          └──────────────┘              │
│                                         │
└─────────────────────────────────────────┘
       Viewport at 100% zoom

Behavior with Multiple Selections

When multiple elements are selected:

The Scroll into view button still appears
Clicking it centers all selected elements as a group
Zoom level is set to show all elements while maintaining visibility

Example:

Selected: Button, Icon, Text (3 elements)
Result: All three elements centered in viewport
Zoom: 100% or adjusted to fit all comfortably

Availability

This feature requires access to the Figma Plugin API (window.figma). It may not work in certain viewing modes.

When Available

Works in these scenarios:

Figma files where you have edit access
Browser extension with plugin API available
Figma web app (non-view-only mode)

When Unavailable

Limited or unavailable in these scenarios:

Figma view-only mode (without window.figma API)
Certain browser configurations that block the plugin API
Quirks mode (when window.figma is unavailable)

The button will not appear if window.figma is unavailable:

const showFocusButton = computed(
  () => window.figma && selection.value && selection.value.length > 0
)

Tips and Best Practices

Use as a “reset” button - When you’ve zoomed and panned around, click Scroll into view to quickly return to a standard inspection view.

Combine with layer panel - Select elements from the layer panel, then use Scroll into view to find them on the canvas.

Keyboard + click workflow - Use arrow keys to navigate between elements, click Scroll into view each time for consistent inspection.

The feature always zooms to 100%, which is ideal for inspecting pixels, fonts, and spacing. If you need an overview of a large component, use Figma’s native ⇧2 instead.

Troubleshooting

Button doesn't appear

Possible causes:

No element is selected
You’re in view-only mode without plugin API
window.figma is not available in your environment

Try:

Select an element first
Check if you have edit access to the file
Refresh the page

Nothing happens when clicking

Check:

Is there a valid selection?
Does the console show any errors? (Open browser DevTools)
Try selecting a different element

Zoom level seems wrong

Expected behavior:

Single element: Zooms to 100%
Multiple elements: Zooms to fit all elements while maintaining visibility
Very large elements: May zoom out slightly to fit

If unexpected:

Try selecting just one element
Report the issue if zoom behavior is consistently wrong

Keyboard Alternative

While TemPad Dev provides a button, you can also use Figma’s native shortcuts:

Shortcut	Behavior
`⇧2`	Zoom to fit selection (fills viewport)
`⇧1`	Zoom to fit all (shows entire canvas)
`⌘ + 0`	Reset zoom to 100% (doesn’t center)

TemPad Dev’s Scroll into view combines the best aspects: centers selection AND maintains 100% zoom.

API Reference

For plugin developers or those interested in the implementation:

// Figma Plugin API method used
window.figma.viewport.scrollAndZoomIntoView(nodes: SceneNode[])

Parameters:

nodes: Array of SceneNode objects to center in viewport

Behavior:

Centers the bounding box of all provided nodes
Sets zoom to 100% for single nodes
Adjusts zoom to fit multiple nodes comfortably

Next Steps

Deep Select

Select nested elements quickly before scrolling into view

Inspect Code

Extract styles after centering elements for inspection

Get Started

Core Features

Plugins

MCP Server

Configuration

Scroll Selection Into View

What It Does

The Problem It Solves

How to Use

Button Location

How It Works

Comparison with Figma’s Native Shortcut

Use Cases

Integration with Other Features

Deep Select + Scroll Into View

Measure Mode + Scroll Into View

Code Inspection + Scroll Into View

Visual Feedback

Before Scroll Into View

After Scroll Into View

Behavior with Multiple Selections

Availability

When Available

When Unavailable

Tips and Best Practices

Troubleshooting

Keyboard Alternative

API Reference

Next Steps

Deep Select

Inspect Code

Build docs developers (and LLMs) love

Get Started

Core Features

Plugins

MCP Server

Configuration

​What It Does

​The Problem It Solves

​How to Use

​Button Location

​How It Works

​Comparison with Figma’s Native Shortcut

​Use Cases

​Integration with Other Features

​Deep Select + Scroll Into View

​Measure Mode + Scroll Into View

​Code Inspection + Scroll Into View

​Visual Feedback

​Before Scroll Into View

​After Scroll Into View

​Behavior with Multiple Selections

​Availability

​When Available

​When Unavailable

​Tips and Best Practices

​Troubleshooting

​Keyboard Alternative

​API Reference

​Next Steps

Deep Select

Inspect Code

Build docs developers (and LLMs) love

What It Does

The Problem It Solves

How to Use

Button Location

How It Works

Comparison with Figma’s Native Shortcut

Use Cases

Integration with Other Features

Deep Select + Scroll Into View

Measure Mode + Scroll Into View

Code Inspection + Scroll Into View

Visual Feedback

Before Scroll Into View

After Scroll Into View

Behavior with Multiple Selections

Availability

When Available

When Unavailable

Tips and Best Practices

Troubleshooting

Keyboard Alternative

API Reference

Next Steps