open-pencil/open-pencil v0.9.0 on GitHub

XPath query command — open-pencil query design.fig "//FRAME[@width < 300]" to find nodes by type, attributes, and tree structure using XPath selectors
CSS Grid layout mode — select a frame, click the grid icon in the auto layout toolbar to switch from flex to grid. Configure column/row tracks (fr, fixed px, auto), column and row gaps, and per-side padding. Powered by a Yoga fork with cherry-picked CSS Grid PRs from upstream
JSX and Tailwind CSS export for grid layouts — grid grid-cols-N, gap-x-*/gap-y-*, child col-start-*/row-start-*/col-span-*/row-span-*
Multi-provider AI support — connect to Anthropic, OpenAI, Google AI, or any OpenAI-compatible endpoint directly, in addition to OpenRouter. Per-provider API key storage, provider settings popover, automatic migration from single OpenRouter key
Anthropic-compatible provider for custom API endpoints
New AI tools: get_jsx (JSX roundtrip view), diff_jsx (structural diff), describe (semantic role, visual style, layout, design issues)
AI visual verification — export_image returns image content to the model for vision-based review
API type toggle (Completions/Responses) for OpenAI-compatible providers
Figma zoom shortcuts — ⌘0 (100%), ⌘1 (zoom to fit), ⌘2 (zoom to selection), ⇧1/⇧2 alternatives
XPath query tool — query_nodes for AI/MCP with attribute selectors, tree traversal, and type filtering

Serialize variables, collections, and bindings to .fig files — previously lost on save (#65)
Text nodes created via MCP now render in Figma — emit derivedTextData with font metadata and layout size (#64)
Double-click on layer tree no longer toggles expand/collapse — use the chevron instead
Page rename input matches layer rename styling
Fix w="fill"/h="fill" in JSX renderer — now direction-aware based on parent flex axis
Fix text auto-resize defaulting to fixed 100×100 — text without explicit width uses WIDTH_AND_HEIGHT
Fix clipsContent not propagated to Yoga — frames with clip enabled now set Overflow.Hidden
Fix COUNTER_ALIGN_MAP mapping stretch to MIN instead of STRETCH
Fix JSX export omitting x/y for absolute-positioned children
Fix JSX export ignoring textAutoResize for text sizing
Fix drag terminating on mouseleave — drags now continue outside the canvas
Fix export_image stack overflow on large nodes — chunked base64 encoding
Undo support for auto-layout reorder, layer tree reorder, and drag reparent
Page snapshot undo for AI tool mutations
Fix collab sync for same-parent reorder — node:reordered events now propagated to Yjs peers
Fix orphaned instances on clipboard paste — detach to FRAME when component is missing
Fix text typography lost on Figma clipboard import — preserve fontFamily, fontWeight, fontSize, lineHeight
Fix copyFill missing gradientTransform and imageTransform — gradient fills now round-trip correctly

Event-driven rendering and component sync — SceneGraph emits typed events on mutations; requestRender() calls reduced from 94 to 22, component instance sync uses microtask batching with deduplication
Replace structuredClone with typed copy helpers for fills, strokes, effects, and style runs (~24× faster in hot paths)
Filter .fig unzip to only decompress canvas and image entries, skipping metadata cruft
Instance population uses a work queue instead of repeated full graph scans

Padding on a frame auto-enables vertical auto-layout
AI tools run computeAllLayouts after execution — layout updates immediately
Enhanced AI system prompt with full JSX prop reference and verification workflow
Chat panel preserves messages when toggling UI visibility
SceneGraph event bus (nanoevents) — node:created, node:updated, node:deleted, node:reparented, node:reordered events replace monkey-patching in collab sync and manual render invalidation
Replace esbuild-wasm (14 MB) with sucrase (201 KB) for JSX transform — buildComponent() and renderJSX() now synchronous and browser-compatible
useMagicKeys keyboard shortcut system — replaces tinykeys with VueUse built-in, cross-platform Meta/Control handling, modifier exclusion for combo conflicts
Dev-only debug toolbar for copying chat logs
Auto-layout icons in layer tree — vertical (rows), horizontal (columns), and grid icons for auto-layout frames; components keep their purple diamond
Frame titles on canvas are now draggable — clicking a selected top-level frame's name label starts a drag
Compact layout controls — icon-based gap (↔/↕) and padding (T/R/B/L) inputs instead of text labels
Auto-detect horizontal vs vertical direction when wrapping in auto layout (Shift+A)
Fix alignment grid for vertical layouts — visual positions now match spatial axes
Fix grid switch from HUG-sized frames — frame expands to fit children
Remove unwanted white fill when wrapping in auto layout

open-pencil/open-pencil v0.9.0 OpenPencil v0.9.0 on GitHub