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.4 KiB
1.4 KiB
| title | description |
|---|---|
| Exporting | Render .fig files to PNG, JPG, WEBP, SVG, or JSX with Tailwind classes. |
Exporting
Export designs from the terminal — raster images, vectors, or JSX code.
Image Export
open-pencil export design.fig # PNG (default)
open-pencil export design.fig -f jpg -s 2 -q 90 # JPG at 2×, quality 90
open-pencil export design.fig -f webp -s 3 # WEBP at 3×
open-pencil export design.fig -f svg # SVG vector
Options:
-f— format:png,jpg,webp,svg,jsx-s— scale:1–4-q— quality:0–100(JPG/WEBP only)-o— output path--page— page name--node— specific node ID
JSX Export
Export as JSX with Tailwind utility classes:
open-pencil export design.fig -f jsx --style tailwind
Output:
<div className="flex flex-col gap-4 p-6 bg-white rounded-xl">
<p className="text-2xl font-bold text-[#1D1B20]">Card Title</p>
<p className="text-sm text-[#49454F]">Description text</p>
</div>
Also supports --style openpencil for the native JSX format (see JSX Renderer).
Thumbnails
open-pencil export design.fig --thumbnail --width 1920 --height 1080
Live App Mode
Omit the file to export from the running app:
open-pencil export -f png # screenshot the current canvas