figcraft/docs/dev-mode-parity.md

Dev Mode parity

Last reviewed: 2026-10-10 · Last updated: 2026-10-22 · Change: minor (ArkUI code and code connect; the assets list shows a preview, the name and an export format per asset) · Target: Figma Design Dev Mode (desktop app 126.10.7)

Breadth ~96%, ready ~72% (estimated). The inspect surface is broad, components connect to the code components of a repository and layers carry dev resources links; left: import lines inside generated layer trees. Remaining: 0–1 h.

Feature	Status	Notes
Dev Mode toggle (Shift+D), Inspect panel	done
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), HarmonyOS (ArkUI)	done	plus HTML, React and Leptos (ours; Leptos: #[component] functions with #[prop] defaults, variant enums and view! markup; ArkUI: @Component structs with @Prop parameters, enums, @BuilderParam for instance swaps and slots); 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) as a list of a preview, the name and a format to pick (its first export setting's until changed); a click exports the asset in that format, "Export all" uses each layer's own export settings; the icon rule is ours
Annotations: pinned properties, categories, coloured callouts, filter	done
Ready for dev list, statuses, "Changed" after edits	done
Focus view (one frame, previous / next)	done
Compare changes (before/after side by side or overlaid, property diffs)	done	only against the snapshot taken when a frame was marked ready; not against any named version
Code connect (map components to repository code)	done	per language (React, Leptos, SwiftUI, Compose, ArkUI): 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. Inside a generated layer tree, connected instances' imports aren't collected
Plugins in Dev Mode (Jira, GitHub, etc.)	partial	FigCraft's own WASM plugins that only read run from the Inspect tab; no plugin UI at run time, no third-party integrations
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-22	minor	ArkUI (HarmonyOS) as a code language: inspect.code {language: arkui} and inspect.componentCode generate ArkTS — Column/Row/Stack for auto layout and free children (.position), Text with its font, Ellipse, boxes for rectangles, colours as '#RRGGBB'/'#AARRGGBB', radii, borders, shadows, rotation; a component becomes @Component export struct with @Prop parameters, variant enums, and @BuilderParam builders for instance swaps and slots, instances become object-literal calls (Card({ title: "Buy" })); code connect works per language with an ArkTS import and template. Tests in codegen::tests::arkui_for_an_auto_layout_card, component_codegen_tests, code_connect_tests
2026-10-22	minor	The Inspect tab's assets are a list of a thumbnail, the name and a format dropdown, instead of a name with a text summary: a slice shows the page content under it (as its export does), the format starts from the asset's first export setting and picking another exports that asset in it; "Export all" is unchanged (dev_mode_tests::the_assets_list_shows_a_slice_with_a_preview_name_and_export_format)
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