Add clickable Prototype export and inline-SVG HTML mode - #1
Merged
Merged
Conversation
Adds an opt-in "Prototype" tab that bundles multiple selected top-level frames into one self-contained HTML file: Figma reactions (Navigate/ Overlay/hover) become real click/hover behavior, and Smart Animate transitions between matched frames tween real CSS properties instead of cutting instantly, with cross-dissolve as the fallback for unmatched layers. Also adds an opt-in "Inline SVG icons" HTML mode: flattened vector-only icons are embedded as real, inspectable <svg> markup instead of an opaque background-image data URI, so their fill/stroke can be styled with CSS. Both are strictly additive per the fixed-pixel converter's invariant - every existing call site and regression assertion is unchanged unless the new options are explicitly passed. Also hardens error handling so a bug in either new path (or the pre-existing describeInstance component-set quirk) can no longer blank every tab.
Adds Settings > Debug Connect (relocated from its old standalone row) and Settings > MCP Connect: a local MCP server (.mcp-server/mcp_server.py, also downloadable/copyable from the panel for Community installs) that bridges an MCP client like Claude Desktop to the live Figma selection. Tools cover the whole selection (code in every output mode, design tokens, reusable-component data, real decoded assets, the prototype bundle) and export_node/export_selection rewrite generated code to reference real asset files instead of leaving them as inline base64. The server's `instructions` steer a connected AI toward pulling actual Figma data (theme, tokens, components, assets) instead of guessing from a screenshot, for both web and mobile output.
get_selection_code lets a client pull code for several selected layers in one call with images stripped to an assets/ placeholder path instead of inline base64, so it stays usable with a small context window. list_page_screens (backed by a new opt-in "Scan page" action, since it exposes the file's whole structure rather than just what's selected) maps every top-level frame on the page, grouped by Figma Section, so a client can plan across a whole app before diving into one screen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
<svg>markup instead of an opaque background-image data URI, so they're stylable via CSS.describeInstance"component set has existing errors" quirk, can no longer blank every tab — errors now surface as a visible message instead of silently reverting to the empty state.Test plan
node --test tests/code-regression.test.js— all existing + new assertions pass