figcraft/docs/dev-mode-parity.md

Dev Mode parity

Last reviewed: 2026-10-24 · Last updated: 2026-10-24 · Change: minor (measurements kept on the canvas; a read-only layers panel in Dev Mode; earlier: import lines in generated layer trees; compare with any saved version; Dev Mode behaviour suite: an inspect-only canvas, Changed in the ready list, statuses only on frames and sections; plugin panels from the Inspect tab) · Target: Figma Design Dev Mode (desktop app 126.10.7)

Breadth ~98%, ready ~78% (estimated). The inspect surface is broad, components connect to the code components of a repository (with their imports, also inside generated layer trees), changes compare with any saved version, the canvas and the layers panel only inspect in Dev Mode, and measurements stay on the canvas for everyone. Left: publishing mappings from the code repository, third-party integrations. Remaining: 1–2 h.

Feature	Status	Notes
Dev Mode toggle (Shift+D), Inspect panel	done	the canvas only inspects: presses select, pan and comment but never move, resize, draw or edit text and vectors; menus and shortcuts refuse design edits with a note (Dev Mode's annotations, statuses, dev resources, measurements, code connections and comments still work); a drawing tool chosen in the toolbar goes back to the design. The layers panel only selects and expands (no renaming, reordering, hiding or locking; a double click says why); files dropped on the canvas still edit (ours to tighten)
Properties with their styles and variables; redlines on hover	done	positions from the frame around the layer (groups aren't frames), rotation, radius (CSS corner order), opacity, blend; colours in hex, RGB, CSS, HSL or HSB (inspect.properties {colorFormat}, the Inspect tab's Color format)
Code: CSS, iOS (SwiftUI), Android (Compose)	done	plus HTML, React and Leptos (ours; Leptos: #[component] functions with #[prop] defaults, variant enums and view! markup); components take properties as parameters, instances are calls; CSS in px or rem (inspect.code {unit, rootFontSize}), with rotation, blend modes, gradient directions and kinds (linear, radial, conic), text alignment, case and decoration
Assets list with export	done	layers with export settings, icons (small, vector shapes only: SVG) and images (PNG); the icon rule is ours
Annotations: pinned properties, categories, coloured callouts, filter	done
Ready for dev list, statuses, "Changed" after edits	done	the list filters Ready for dev, Changed, Completed or any, and badges changed ones (inspect.readyForDev {status: changed}, changed per item); only sections and frames at the top of a page or section take a status (others are refused)
Focus view (one frame, previous / next)	done
Compare changes (before/after side by side or overlaid, property diffs)	done	against the snapshot taken when a frame was first changed after it was marked ready, or any saved version (dev.compare {version}; the view's Compare with menu); a frame that isn't ready for dev compares with versions
Code connect (map components to repository code)	done	per language (React, Leptos, SwiftUI, Compose): import path, name and a template with {property} and {property ? "a" : "b"} placeholders; instances (also inside generated layer trees) show the snippet with their values; edited in the Inspect panel with a live preview; figcraft.connect.json export/import; generated layer trees bring the import lines of the connected components they call (also in definitions, slots and swapped-in instances) once each at the top, per language. No CLI publishing mappings from the code repository
Plugins in Dev Mode (Jira, GitHub, etc.)	partial	FigCraft's own WASM plugins that only read run from the Inspect tab, with their panels (callbacks can only read); no third-party integrations
Measurements (redlines on hover, Alt in the design)	done	distances between the selection and the hovered layer, its parent or a guide, auto layout padding and gaps (Shift+Alt); measurements kept on the canvas (devMode.addMeasurement between two layers, along a side or to the layer around it; stored on the layer, saved, synced, undoable) drawn in Dev Mode as labelled redlines that follow the layers, listed, placed and removed in the Inspect tab; a measurement whose other layer was deleted isn't drawn until an undo brings it back
VS Code extension	out of scope	FigCraft's MCP server and control channel already serve design data, code and connected snippets to agents and editors
Dev resources links on layers	done	a URL and a name per link on any layer (devResource.*, saved, synced, undoable); instances list their main component's (and its set's) read-only; URLs checked as http/https and never fetched (no page titles: a link without a name is named after its URL); the Inspect tab lists, adds, edits and removes them; get_node returns them

Revision history

Date	Change	Summary
2026-10-24	minor	Measurements kept on the canvas (gap 16): devMode.addMeasurement {from?, to?, side?} places one between two layers, along one side of a layer or (neither) to the layer around it, stored on the layer it starts from (saved in .figcraft, synced, undoable; old files open without them); Dev Mode draws them as labelled redlines that follow the layers, the Inspect tab lists them (those of the selected layer, or every one on the page), places and removes them; devMode.removeMeasurement and devMode.measurements remove and list them; a copy keeps those to layers copied with it. The layers panel is read-only in Dev Mode: rows select and expand, but don't rename, reorder, hide or lock. Breadth 97% → 98%, ready 76% → 78%, 2–4 h → 1–2 h
2026-10-15	minor	Dev Mode tail (gap 16): generated layer trees (React, Leptos, SwiftUI, Compose) start with the import lines of the connected components they call, once each, also those in a component's definition, in slots an instance fills and placed by a connected template's instance swaps; Compare changes takes any saved version as the before (dev.compare {version}, the view's Compare with menu; frames that aren't ready for dev compare with versions). Behaviour suite (5 tests; 4 failed before the fixes): the Dev Mode canvas only inspects (no moving, resizing, drawing, text or vector editing; menus, shortcuts, nudges, opacity keys and paste refuse design edits with a note; toolbar drawing tools go back to the design), the ready list filters and badges Changed items, statuses are refused on layers inside frames. Read-only plugins run from the Inspect tab show their panels (the runtime's panels, reused). Breadth 96% → 97% (measurements kept on the canvas and the read-only layers panel counted as missing), ready 72% → 76%, 0–1 h → 2–4 h
2026-10-12	minor	Dev resources (gap 16): links for developers (a URL and a name) on any layer: devResource.add / edit / remove / list, undoable, saved and synced; an instance also lists its main component's (and that component's set's) links read-only with where they come from, and layers inside an instance show their main layer's; URLs are checked as web links (http or https, a host, no spaces, at most 2,048 characters) and never fetched (a link added without a name is named after its URL), opened only when clicked; the Inspect tab lists, adds, edits and removes them; get_node and inspect_document return them as devResources. The editor extension stays out of scope (the MCP server serves agents and editors). Dev Mode breadth 93% → 96%, ready 70% → 72%, 1–3 h → 0–1 h; feature breadth (~82%) and ready for real work (~51%) unchanged at this rounding; full parity ~304–593 h → ~303–591 h
2026-10-11	minor	Export and inspect behaviour suite written from the public documentation (139 cases in 19 tests; 47 failed before the fixes) and its fixes: an export covers what the layer paints, so a drop shadow adds room only where it falls, strokes on boxes and ellipses reach their real width (they added up to four times as much), hidden layers take no room and a mask group exports the mask's area; a slice exports everything under it; slashes in layer names export into folders; Copy as PNG copies the whole selection. Added: the export settings' contents only and include bounding box, and for SVG outline text (off writes <text>), unique id attributes and simplified strokes (stroke attributes where exact); Inspect colour formats (hex, RGB, CSS, HSL, HSB), CSS in rem, a Blend row, positions measured from the frame around a layer (groups aren't frames), CSS for rotation, blend modes, gradient directions and kinds, text alignment, case and decoration; icons and images in the asset list (file.exportLayers {assets}). Dev Mode breadth 90% → 93%, ready 64% → 70%, hours unchanged (1–3, dev resources); feature breadth and ready for real work unchanged at this rounding
2026-10-11	minor	Code connect and Dev Mode plugins (gap 16): a component or set links to its code component per language (import path, name, a template with {property} and {property ? "a" : "b"} placeholders); inspect.code, inspect.componentCode and the Inspect panel show that snippet with the instance's values (also inside generated layer trees), edited in Connect to code with a live preview; links are saved, synced and undoable, and travel as figcraft.connect.json (codeConnect.export / codeConnect.import). Plugins that only read run from the Inspect tab. Dev Mode breadth 80% → 90%, ready 62% → 64%, 4–8 h → 1–3 h; feature breadth (~79%) and ready for real work (~47%) unchanged; full parity ~380–725 h → ~375–720 h
2026-10-10	major	Created from the 2026-10-10 re-measure