Create Pages

Build a clean Figma file structure in one click.

Create Pages is a Figma plugin that generates consistent page structures for design, feedback, and handoff workflows. Select a template and instantly organize your file.

Install in Figma Download Plugin View Templates
Offline ready
No build step
5 page templates
Figma files only

What it does

Choose a workflow and Create Pages will rename your first page to Cover, remove all other pages, and build the new page set automatically.

Running the plugin resets the file structure. Use it on a fresh file or make a backup first.

Features

One-click templates

Pick from Design Web, Design App, Feedback, Dev Web, or Dev App templates.

Consistent structure

Standardizes page order with separators so teams start every project the same way.

Simple UI

Clear card-based selection with one primary action.

No dependencies

Runs entirely offline with plain HTML, CSS, and JavaScript.

Page Templates

Design Web

  • Cover
  • -----
  • Mood-board
  • Information Architecture
  • User Flow
  • -----
  • Wireframe
  • -----
  • Draft
  • Web UI
  • Responsive UI
  • -----
  • Prototyping Web
  • Prototyping Responsive
  • -----
  • Archive

Design App

  • Cover
  • -----
  • User Research
  • Persona
  • User Flow
  • -----
  • Wireframe - Mobile
  • Wireframe - Tablet
  • -----
  • UI Design
  • Dark Mode
  • -----
  • Prototyping
  • -----
  • Archive

Feedback

  • Cover
  • -----
  • Web UI
  • -----
  • Archive

Dev Web

  • Cover
  • -----
  • Web UI (prefixed with laptop emoji in the current code)
  • Responsive UI (prefixed with phone emoji in the current code)
  • -----
  • Prototyping Web
  • Prototyping Responsive
  • -----
  • Archive

Dev App

  • Cover
  • -----
  • Mobile UI - Light
  • Mobile UI - Dark
  • -----
  • Tablet UI - Light
  • Tablet UI - Dark
  • -----
  • Prototyping

How to Use in Figma

1
Open the Figma desktop app.
2
Go to Plugins > Development > Import plugin from manifest.
3
Select the manifest.json file from this repo.
4
Run the plugin from Plugins > Development > Create Pages.
5
Select a template and click Create Pages.

Start Development

Requirements

  • Figma desktop app
  • No build step or dependencies

Workflow

  • Clone or download this repo
  • Edit code.js and ui.html
  • Reload the plugin in Figma to see changes

Project Structure

manifest.json

Plugin metadata, permissions, and entry points.

code.js

Creates pages and handles UI messages.

ui.html

Plugin interface and styling.

Notes

Document access is set to dynamic-page, and the plugin only runs in Figma files (not FigJam). The Dev Web template currently includes emoji prefixes in page names. Update code.js if you want plain text names.