Menus

The menu bar of the Mac app. The web app shows the same menus in its own menu bar, without the items that only the Mac app has. The Project menu shows while a project tab is open. Search any menu item from Help, or press ⌘K for the command palette.

File

Item	Keys	What it does
New	⌘N
New Window	⇧⌘N	Opens another window with its own tabs.
Open	⌘O
Open Recent		Opens a design you had open lately.
Open Project	⇧⌘O	Open a Next.js, Vite, TanStack Start or Expo folder.
Open Project on Another Mac		Open a project from the shared folders of another paired Mac.
Clone from GitHub		Clone one of your repositories.
Logo Generation		Makes logo ideas with Codex, then traces the one you pick into vectors.
CLI Design		Makes ASCII art text in FIGlet fonts, for the output of a command line tool.
Import	⇧⌘I	Imports a .fig, .pen, SVG or image file, or another source from the Import dialog.
Sync with Paper and Pencil		Links frames with Paper and Pencil and brings changes across both ways.
Import Web Page		Captures a live web page as an editable screen.
Import from Safari		Captures the page open in a Safari tab, with what you typed into it.
Import iOS Simulator Screen		Captures the screen of a booted iOS Simulator as an editable screen.
Import Database Schema		Draws a SQL or Convex database schema as a diagram.
Import Component Library		Brings the stories of a Storybook or React Cosmos project in as components.
Save	⌘S
Duplicate	⇧⌘S
Rename	⌥⌘R	Give the design a new name.
Move To		Moves the design to another place to save: on Knighn, This Mac or a file.
Save As	⌥⇧⌘S
Revert To › Revert to Saved		Goes back to the last saved version.
Revert To › Browse All Versions		Shows each saved version of the design, to look at or restore.
Duplicate and Compare	⇧⌘D	Makes a copy of the design and shows the two side by side.
Save as Template		Adds a copy of the design to your templates on Home.
Open in Zed		Opens the design as React source in Zed. A design on Knighn opens from ~/Knighn on a Mac, which keeps it in step with Knighn.
Export Selection › PNG	⇧⌘E
Export Selection › PDF
Export Selection › SVG
Export Selection › PPTX
Export Selection › .fig
Export Selection › .pen
Publish as Storybook		Publishes the components of the design as a Storybook.
Export as React		Turns the design into React code for a project, or a brief for an agent.
Push to Project		Writes the selected screens into a code project open in another tab.
Hand Off to Agent		Gives the design to Claude Code or Codex on your Mac to build it as code.
Share		Makes a link that anyone can open to see the design.
Integrations › Deploy a Preview to Vercel		Deploys the design as a web page to your Vercel account.
Integrations › Open a Pull Request on GitHub		Opens a pull request with the design’s code on GitHub.
Integrations › Bind Layer to Convex Data		Shows a value from your Convex database in the selected layer.
Integrations › Refresh Convex Data		Reads the bound Convex values again.
Launch Assets		Makes the App Store, Google Play and social images and copy for a launch.
Autosave		Saves the design 3 seconds after your last edit.
Close Tab	⌘W

Edit

Item	Keys	What it does
Undo	⌘Z	Undo the last change.
Redo	⇧⌘Z	Do the last undone change again.
Copy	⌘C
Cut	⌘X
Paste	⌘V
Paste to replace	⇧⌘R	Puts what you copied in place of the selected layers.
Copy As › Tailwind JSX	⇧⌘C	Copies the selection as JSX with Tailwind classes.
Copy As › Expo SwiftUI		Copies the selection as an Expo screen with SwiftUI controls.
Copy As › SVG		Copies the selection as SVG.
Copy As › Prompt		Copies the selection as context for an agent.
Copy Style	⌥⌘C	Remember the fill, border, radius, effects and text style of the layer.
Paste Style	⌥⌘V	Give the copied style to each selected layer.
Duplicate	⌘D
Delete	⌫
Rename Selection	⌘R
Ask Claude	⌘J	Asks Claude Code for a change to the selection, in a box beside it.
Select All	⌘A
Select Inverse	⇧⌘A	Selects every layer that is not selected now.

View

Item	Keys	What it does
Zoom to 100%		Show the design at its real size.
Zoom to Fit
Zoom to Selection
Map		Every frame in a grid; click one to zoom to it.
Zoom In	⌘=
Zoom Out	⌘-
Pixel Preview		Shows the canvas as pixels, as it looks at 1x.
Layout Grids	⌃G	Shows the layout grids of frames.
Problems		The lint and accessibility problems of the design, each with its layer.
Component Workbench	⌥⌘W	Try the props of each component and save stories.
Split Right		Shows the design in a second view, to the right.
Split Down		Shows the design in a second view, below.
Multiplayer Cursors
Toggle Full Screen
Preferences › Snap to Geometry		Snaps to the edges and centres of other layers while you drag.
Preferences › Snap to Objects		Snaps to the spacing between layers while you drag.
Preferences › Snap to Pixel Grid		Keeps positions and sizes on whole pixels.
Preferences › Settings	⌘,
Hide Sidebar	⌥⌘S
Hide Inspector	⌥⌘0
Toggle UI	⌘\	Hides every panel, so only the canvas shows.
Components		Shows the components to insert, beside the tool bar.
Icons		Shows the icons to insert, beside the tool bar.
Tokens		Shows the design tokens in the properties panel.
Export		Shows the export options in the properties panel.
Proposals		Shows the rounds of proposals in the properties panel.
Toggle Minimap		Shows or hides the small map of the canvas.
Preview		Shows the selected frame as a working page.
Show History		Shows the undo steps of the design.
Present	⌥⌘Enter	Shows the frames one at a time, full screen.
Command Palette	⌘K	Finds any command, design, tab or place by name.
Home	⇧⌘0
Go to Design	⌘P	Finds a design by name and opens it.
Next Tab	⇧⌘]
Previous Tab	⇧⌘[
Reopen Closed Tab	⇧⌘T	Opens the last tab you closed.
Next Frame	N	Select the next frame and show it.
Previous Frame	⇧N	Select the previous frame and show it.
Developer Tools		Opens the web inspector of the app.

Object

Item	Keys	What it does
Group Selection	⌘G
Frame Selection	⌥⌘G	Puts the selection in a new frame.
Ungroup Selection	⇧⌘G
Use as Mask	⌥⌘M	Uses the bottom layer of the selection as a mask for the others.
Show/Hide	⇧⌘H
Lock/Unlock	⇧⌘L
Flip Horizontal	⇧H
Flip Vertical	⇧V
Layout Grid › 12 Columns
Layout Grid › 8 px Grid
Layout Grid › No Layout Grid
Union selection	⌥⇧U
Subtract selection	⌥⇧S
Intersect selection	⌥⇧I
Exclude selection	⌥⇧E
Flatten	⌥⇧F	Merges the selected shapes into one vector.
Outline text		Turns text into vector shapes.
Outline stroke		Turns a stroke into a filled shape.
Flatten transform		Bakes the rotation and flip into the shape.
Split path		Splits a vector into a path per part.
Simplify path		Removes points the shape does not need.
Generate Image		Makes an image with Codex on your Mac.
Trace Image		Traces an image into vector shapes with potrace.
Logo Pipeline		Makes logo concepts, traces the pick and places the logo lockups.
Review Schema Changes		Shows the changes to a schema diagram as code, to write back.
New Proposal Round		Starts a round of options of the selected screen, in the Proposals section.
Create Component	⌥⌘K	Makes a component from the selection.
Create Component Set		Makes a component with a variant for each selected component.
Create Instance		Places a copy of the component that follows it.
Go to Main Component		Selects the component that this copy follows.
Detach Instance	⌥⌘B	Turns the copy into plain layers.
Reset All Overrides		Undoes every change made to this copy of a component.
Make Colour Token		Makes a theme colour from the selected fill.
Move to Archive		Move the frame to the Archive page.
Bring Forward	⌘]
Bring to Front	]
Send Backward	⌘[
Send to Back	[
Arrange › Wrap in Auto Layout	⇧A	Puts the selection in a frame that lays it out in a row or column.
Arrange › Align Left	⌥A
Arrange › Align Center	⌥H
Arrange › Align Right	⌥D
Arrange › Align Top	⌥W
Arrange › Align Middle	⌥V
Arrange › Align Bottom	⌥S
Arrange › Distribute Horizontal Spacing	⌃⌥H
Arrange › Distribute Vertical Spacing	⌃⌥V
Text › Bold	⌘B
Text › Italic	⌘I
Text › Underline	⌘U
Text › Show Fonts	⌘T

Project

Item	Keys	What it does
Edit Component		Edit the component itself, for every use (or hold Alt).
Viewports		The screen widths of each route in this project.
Ask Claude Code		Ask for a change to the selection.
Open in Zed		Open the selection's source, or the project, in Zed.
Snap to Tokens		Arbitrary values become the nearest project token.
Hide Start-Up Overlays
Agent › Propose Changes		The agent proposes; accept or reject each change.
Agent › Last Turn’s Changes		The classes and JSX it changed.
Find Usages		Every use of the selected component.
Show Everywhere		Every page that uses the selected component, side by side.
Design System › Check Hard-Coded Values		Find classes with values that a token gives.
Design System › Fix Hard-Coded Values		Use the token for each value that a token gives exactly.
Design System › Consistency Audit		Compare panels, headings, fields and buttons across the pages.
Design System › Export Review		One page with each proposal before and after, to share.
Walk Screen on Simulator		Take a new picture of the selected screen's story on the simulator.
Walk All Screens on Simulator		Take a new picture of every story on the simulator.
Restart Dev Server
Install Dependencies
Deploy › Deploy Preview		Deploy the project to Vercel.
Deploy › Deploy to Production		Deploy the project to its Vercel production domain.

Help

Item	Keys	What it does
Knighn Help
Keyboard Shortcuts	⌘/
What's New
Get Started
Install Command Line Tool