Frame Navigator

About this 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

1. Quick Frame Navigation: Navigate between frames using intuitive controls (First, Previous, Next, Last)
2. Smart Search: Filter frames by name with real-time search
3. Keyboard Shortcuts: Navigate efficiently using arrow keys, Home, End, and more
4. Frame Renaming: Double-click any frame name to rename it instantly
5. Fit All Frames: View all frames at once with a single click
6. Visual Feedback: See which frame is currently selected with clear highlighting
7. Responsive Design: Clean, modern, theme-aware interface that works seamlessly in Figma

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

ㅤ

ㅤ

➋ Navigating Between Frames

🅰 Using Navigation Buttons

The plugin provides five navigation buttons at the bottom:

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

🅱 Using Keyboard Shortcuts

For faster navigation, use these keyboard shortcuts:

1. Arrow Left or Arrow Up: Previous frame
2. Arrow Right or Arrow Down: Next frame
3. Home: First frame
4. End: Last frame
5. Escape: Close the plugin

ㅤ

ㅤ

➌ 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

➎ 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

ㅤ

ㅤ

➏ Viewing All Frames

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.

ㅤ

ㅤ

☻ Tips & Tricks

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

Use Cases

🅰 Design Reviews

1. Quickly navigate through all screens in a design system or user flow during presentations or reviews.

🅱 Prototyping

1. Jump between different states or screens while building interactive prototypes.

🅲 Organization

1. Use the search feature to find specific frames in large files with dozens or hundreds of frames.

ㅤ

ㅤ

Need more design tools? Visit Samolevsky.com to discover more plugins and resources.

ㅤ

ㅤ