Page Navigator

About this plugin

Overview

Page Navigator is a tool that helps you organize and navigate through complex Figma documents. It provides both page management features and the ability to create beautiful navigation indexes that make it easy for users to jump between pages.

Key Features

Navigation Index Generation

- Create comprehensive page indexes with clickable navigation links

- Smart positioning: places index at document start or after cover page

- Professional table layout with clean typography and alternating row colors

- Updates existing indexes instead of creating duplicates

- Intelligent page classification with automatic numbering

- Real-time navigation to any page with direct links

Smart Page Management

- Add, rename, duplicate, and delete pages

- Drag & drop reordering

- Bulk operations with multi-select

- Real-time search and filtering

How to Use

Creating a Navigation Index

1. **Open the Plugin**: Launch "Page Navigator" from the Figma plugins menu

2. **Click "Create Navigation Index"**: This generates a new page with a comprehensive index

3. **Navigate**: Click any "🔗 Go to Page" link in the generated index to jump directly to that page

Section Organizers (Not Linked)

- Pages starting with folder icon 📂 or down arrow ↓

- Behavior: Listed in index but not numbered and no clickable links

- Purpose: Used for visual organization and section breaks

Special Pages (Linked but Not Numbered)

- Pages named: cover, changelog, contents, design language, resource links (case insensitive)

- Also includes variations: Cover Page, CHANGELOG, Table of Contents, Design System, etc.

- Example: Cover, COVER PAGE, Changelog, Contents, Design Language

- Behavior: Listed with clickable links but not numbered

- Purpose: Important pages that don't need sequential numbering

Hidden Pages (Linked but Not Numbered)

- Pages starting with . (period)

- Example: .template, .archive, .backup

- Behavior: Listed with clickable links but not numbered

- Purpose: Utility pages that should be accessible but not prominent

Regular Content Pages (Numbered and Linked)

- All other pages

- Example: Homepage, Product Details, User Dashboard

- Behavior: Numbered sequentially (1, 2, 3...) with clickable links

- Purpose: Main content pages in your design system

Automatically Excluded

- Divider pages: Pages with names consisting only of dashes (-, --, ---, ——, –, etc.)

- The navigation index itself: Prevents self-referencing

Managing Pages

Adding Pages

1. Enter a page name in the input field

2. Click "Add Page" or press Enter

3. The new page is created and you're automatically switched to it

Renaming Pages

1. Click the "Rename" button next to any page

2. Edit the name inline

3. Press Enter to save or Escape to cancel

Reordering Pages

1. Use the drag handle next to any page name

2. Drag to the desired position

3. Pages are reordered in real-time

Deleting Pages

1. Select pages using checkboxes

2. Click "Delete Selected"

3. Confirm deletion (at least one page must remain)

Tips for Best Results

Naming Conventions

- Use Folder Section Name for major sections

- Use Down Arrow Subsection for subsections

- Name key pages cover, contents, etc. for special treatment

- Use .utility-name for templates and archives

Index Placement

- The index page is automatically placed at the beginning of your document

- If you have a page named "cover", the index is placed right after it

- This ensures logical document flow for viewers

Updating Indexes

- Re-run "Create Navigation Index" to update existing indexes

- The plugin detects existing indexes and updates them instead of creating duplicates

- Perfect for keeping navigation current as your document evolves

- Click "Add Page" to create a new page

- Enter the page name in the modern modal dialog

- The new page will be created and automatically selected

- Press Enter to create or Escape to cancel

- No more browser popup blocking issues

Duplicate Pages

- Click the duplicate button next to any page

- Creates an exact copy with " Copy" appended to the name

- Works with all page types including divider pages

Smart Page Features

- Divider Pages: Pages with only dashes (---, ——, –, etc.) are displayed as "Divider" but retain their original functionality

- Current Page Protection: The currently active page is highlighted and cannot be deleted but can be renamed, duplicated, and reordered

- Auto-Update: UI automatically updates when you switch pages in Figma

- Bulk Operations: Select multiple pages for efficient batch operations

Mini Table of Contents (Mini TOC) for Folder Pages

- If you use a page name starting with a folder icon (📂 or 📁), the plugin will automatically generate a mini table of contents (Mini TOC) for all immediately following pages that start with ↳ (arrow) in their name.

- The Mini TOC is inserted directly into the folder page and lists all subpages (↳ pages) as clickable links.

- Divider pages (pages with only dashes) between folder and subpages are ignored, so all consecutive ↳ pages are included even if separated by dividers.

- The Mini TOC is automatically updated or removed if you re-run the index generation, ensuring it always matches your document structure.

- The Mini TOC is never created for the index page itself, and is only created if the folder page is valid and present.

- If a folder page or subpage is deleted or renamed, re-run "Create Navigation Index" to update the Mini TOC.