Using Napukin

Napukin provides a full canvas-based wireframing editor in your browser. Here's an overview of the main features.

The Canvas

The canvas is your main workspace. You can:

  • Pan by holding Space and dragging, or using the middle mouse button
  • Zoom with Cmd/Ctrl + scroll wheel, or pinch-to-zoom on touch devices

Drawing Shapes

Select a tool from the toolbar and click-drag on the canvas to draw:

  • Rectangle (R) — Rectangles with optional corner radius and fill
  • Ellipse (O) — Circles and ovals
  • Line (L) — Straight lines
  • Arrow (A) — Lines with arrowheads
  • Star — Multi-pointed stars
  • Polygon — Regular polygons with configurable sides
  • Triangle — Shortcut for 3-sided polygons

Text

Press T to activate the text tool, then click on the canvas to place a text layer. You can configure the font family, size, weight, alignment, and color in the properties panel.

Pen & Pencil

  • Pen (P) — Click to place anchor points. Drag to create bezier curves. Click the first point to close the path.
  • Pencil (N) — Freehand drawing with automatic path simplification.

Images

Press I to use the image tool, or drag and drop an image file onto the canvas. You can also paste images from your clipboard.

More Features