e5b147148e
New 'AI & Automation' top-level nav section with 9 pages: - AI Chat: setup, 87 tools, example prompts - Collaboration: room sharing, cursors, follow mode - JSX Renderer: elements, style props, visual diffing - CLI (4 pages): inspecting, exporting, analyzing, scripting - MCP Server: moved from Reference, setup + 90 tools New CLI reference page in Reference with all 12 commands, every option, alias, and default value. Formatting fixes across all 7 locales: - Wrap enum values in backticks (FRAME, SOLID, ROUND, etc.) - Fix single-backtick code blocks → triple backticks - Use <kbd> for all keyboard shortcuts - Remove implementation details from user guide - Delete stale eval-command.md and mcp-tools.md (14 files) - Update dead links to new locations
1.5 KiB
1.5 KiB
| title | description |
|---|---|
| Pen Tool | Drawing vector paths with bezier curves using the pen tool in OpenPencil. |
Pen Tool
The pen tool creates vector paths using a vector network data model, compatible with Figma's .fig format.
Activating
Press P to activate the pen tool.
Placing Points
- Click to place a corner point (straight-line segment)
- Click + drag to place a curve point with bezier tangent handles — the drag direction and length control the curve shape
Click multiple points to build a path segment by segment. A preview line extends from the last placed point to your cursor as you move.
Closing a Path
Click on the first point of the path to close it into a loop. Closed paths can be filled.
Open Paths
Press Escape to commit the current path as an open path. Open paths render as strokes only — they're not filled.
Vector Networks
Paths in OpenPencil use vector networks — a more flexible model than simple point lists that supports branching paths and complex topology. This is the same model Figma uses, so paths round-trip perfectly in .fig files.
Keyboard Shortcuts
| Action | Mac | Windows / Linux |
|---|---|---|
| Pen tool | P | P |
| Commit open path | Escape | Escape |
Tips
- The preview line always starts from the last placed point — it won't jump to (0,0).
- Drag longer when placing a curve point to make the curve wider.
- After creating a path, use the properties panel to adjust its fill, stroke, and effects.