Frame Navigator

Figma Plugin

ㅤ

Description

A powerful Figma plugin that provides intuitive navigation controls for top-level frames. Quickly browse, search, and navigate between frames in your Figma designs with keyboard shortcuts and a clean interface.

ㅤ

Features

• Quick Frame Navigation: Navigate between frames using intuitive controls (First, Previous, Next, Last)
• Smart Search: Filter frames by name with real-time search
• Keyboard Shortcuts: Navigate efficiently using arrow keys, Home, End, and more
• Frame Renaming: Double-click any frame name to rename it instantly
• Fit All Frames: View all frames at once with a single click
• Visual Feedback: See which frame is currently selected with clear highlighting
• Nested Frames (Optional): Toggle to include child frames under top-level frames, labeled as 1.1, 1.2, etc

ㅤ

Using the Plugin

ㅤ

Opening the Plugin

1. Open any Figma file with frames
2. Go to Plugins → Frame Navigator
3. The plugin panel will appear on the right side of your screen:

ㅤ

➊ Searching for Frames

1. Click on the search box at the top of the plugin
2. Type any part of a frame name
3. The list will filter in real-time to show matching frames
4. The plugin will automatically zoom to the first matching frame
5. Click the × button or clear the text to reset the search

➋ Selecting Frames from the List

1. Browse the frame list in the middle section
2. Click any frame to navigate to it
3. The currently selected frame is highlighted in blue
4. Each frame shows its number and name
5. When "Include nested frames" is enabled, child frames are labeled using parent-child numbering like 1.1, 1.2

➌ Navigating Between Frames

Using Navigation Buttons

The plugin provides five navigation buttons at the bottom:

• ⏮️ First: Jump to the first frame
• ◀️ Previous: Go to the previous frame
• ⏹️ Fit All: Zoom to fit all frames in view
• ▶️ Next: Go to the next frame
• ⏭️ Last: Jump to the last frame

ㅤ

Using Keyboard Shortcuts

For faster navigation, use these keyboard shortcuts:

• Arrow Left or Arrow Up: Previous frame
• Arrow Right or Arrow Down: Next frame
• Home: First frame
• End: Last frame
• Escape: Close the plugin

ㅤ

Nested Frames

Tip: Click the Fit All button (center button with the frame icon) to zoom out and see all frames at once. This is useful for getting an overview of your entire design.

Renaming Frames

1. Double-click on any frame name in the list
2. An input field will appear
3. Type the new name
4. Press Enter to save or Escape to cancel
5. The frame will be renamed in your Figma file

Nested Frames

If your designs include frames nested inside top-level frames, enable the Include nested frames toggle under the search bar:

• The list will display child frames directly under their parent
• Navigation and search continue to work without disrupting existing behaviors

Tips & Tricks

• Cyclic Navigation: When you reach the last frame and press Next, it wraps around to the first frame (and vice versa)
• Search While Navigating: Keep the search active while using arrow keys to navigate only through filtered frames
• Quick Access: Use keyboard shortcuts for the fastest navigation experience
• Frame Numbers: Each frame shows its position number for easy reference

☻ Summary

Frame Navigator is a Figma plugin that streamlines frame navigation with keyboard shortcuts, real-time search, and quick browsing controls. Perfect for designers working with multi-screen workflows, prototypes, and design systems.

ㅤ

ㅤ