Paper Tips

tools & structure

canvas behaviour

• Pixel grid at 600%+Zoom past 600% to get a pixel grid for precision work. Snapping rounds to whole pixels.
• Hide the UIThere's a button as well as the shortcut. Good for reviewing work or presenting. Shift. minimises the UI instead of hiding it outright.
• Resizable panelsThe left sidebar and page list both resize. Pages support drag-and-drop reordering.
• Desktop tabsPaper Desktop supports tabs, so you can keep multiple files open like a browser.

selecting faster

• Marquee to refineDrag a rectangular selection over an existing one to refine it instead of starting over.
• Selection brushBrush across elements to select everything the stroke touches — faster than marquee for scattered layers.
• Recolor in bulkThe Selection colors panel changes every selected element's colors at once. Also how you recolor pasted SVGs.
• The dashboard is a real file managerMulti-select, duplication, search, and folders with subfolders for team files.

arrange

layout & flex

• Gap and padding handles on canvasFlex containers show drag handles for gap and padding directly on the canvas — no panel needed. Negative gap is supported for overlapping layouts.
• Constraints panelControls how children behave when the parent resizes: pin edges, center, or scale.
• Escape flex when you need toAny element inside a flex container can be set to "ignore flex layout" or absolute positioning to break out of flow.
• Wrapping containersFlex containers wrap with automatic line breaks — useful for tag lists and galleries.

• Pen anywhereClick the pen tool outside an existing SVG and Paper auto-creates a new SVG container for the path.
• Recolor SVGs fastSelect a pasted SVG and use the Selection colors panel to edit its colors without digging into the tree.
• Not here yetBoolean operations, shape-to-path conversion, and better snapping are near-term on the roadmap. Vector networks and a shape builder are further out.

working with generated art

• AI edits keep aspect ratioEditing an image with AI preserves its aspect ratio instead of distorting the frame.
• Shaders are parametricEvery shader exposes editable parameters, and the eyedropper pulls reference colors straight into shader settings.
• Shaders export as videoExport any frame, animated shaders included, as MP4 with a duration setting (Pro) from a dedicated Video panel.
• HEIC just worksHEIC and HEIF photos straight off an iPhone drop onto the canvas without conversion.

shader library

• Mesh Gradient
• Grain Gradient
• Liquid Metal
• Halftone CMYK
• Halftone Dots
• Fluted Glass
• Paper Texture
• Image Dithering
• Pulsing Border
• Gem Smoke
• Swirl
• Water
• Heatmap
• Gooey

fills

• Gradients on canvasEdit position, angle, and stops directly on the canvas. The Fill panel adds a numeric angle field and snap points.
• Stack your fillsImage fills compose with other fills — layer a gradient over an image in one element. Drag to reorder fills and shadows.
• Filters & backdropBlur, saturation, grayscale, brightness, sepia, invert, hue rotation — plus backdrop filters for frosted glass.

tokens & themes

• Ten token typesColor, radius, spacing, container, breakpoint, font family, font weight, font size, line height, letter spacing. Create them in the Theme tab.
• Apply from any propertyUse the property's dropdown — for colors, the four-circle icon opens the token list. Detach with the adjacent button or Backspace.
• Copied themes don't stay synced⌘A in the Theme tab, copy, paste into another file — or File › Theme › Copy/Paste theme. The copy is a snapshot, not a link.
• Tokens from your codebaseVia MCP, an agent can generate tokens from your CSS variables or from an existing canvas frame. Tokens flow back out through code export as CSS variables.

output formats

what survives the paste

• Images need the browser extensionFigma image fills require Paper's browser extension connected to a Figma account that can open the source file. Without it the paste succeeds but the images are missing.
• HTML pastes as layersPaste HTML with inline styles and it becomes editable layers. Paper Snapshot goes further: copy an entire webpage as editable layers.
• Snapshotting localhost needs CORSPointing Snapshot at a local dev server requires CORS configured on it — the docs have per-server guides.

• Pin the issues, then send the agent throughComments are for teammates and agents. Mark every problem you see, then ask an agent to read the threads and fix them in one pass.
• Follow a teammateClick a collaborator's cursor to follow their view. Right-click for cursor chat on the canvas.
• Free seats are generousFree teams invite editors at no cost, and viewer roles with folder or file-level access are free too. View-only links work outside the team, anonymous visitors included.
• Agents show presenceWhen an AI agent works in your file over MCP, it appears with a presence indicator like any other collaborator.

setup

# Keep Paper Desktop open with a file loaded.# The server starts automatically:http://127.0.0.1:29979/mcp# Claude Code$ claude mcp add paper --transport http \ http://127.0.0.1:29979/mcp --scope user# Claude Desktop# Add the marketplace paper-design/agent-plugins,# then install the plugin.

living with it

• What agents can doRead selection and file info, take screenshots, export JSX/PNG/SVG/video, create artboards, edit text and styles, and move, duplicate, or delete elements.
• Workflow ideasPull design-system colors from Figma via dual MCPs, fill placeholders with real Notion content, or convert canvas designs into React and Tailwind pages.
• Wrong file getting edited?The MCP server always targets the currently active file. Ask the agent to call get_basic_info to confirm which one that is.
• Connection stale?Restart the agent session first, then Paper Desktop. Behind a proxy or VPN, allowlist *.paper.design.