Connect an MNEE UI component to Figma via Code Connect so Figma Dev Mode shows accurate live code snippets. Trigger on "connect [component] to Figma", "add Code Connect for [component]", "wire [component] to Figma Dev Mode", "set up Code Connect mapping", or after adding a new component to the design system. Also trigger when the user mentions figma.connect(), .figma.tsx, or wants designers to see code in Figma.
Wires a design system component to Figma Dev Mode via @figma/code-connect so that selecting any instance in Figma Dev Mode shows a live, accurate JSX snippet with that instance's exact prop values.
What you need before starting:
components/ui/<name>.tsxqzjrgEgx4q7MAU9ypgwp48Reference docs:
/figma/code-connect for latest API docs before startingfigma.instance(), figma.children(), figma.nestedProps(), figma.enum(), figma.boolean(), figma.string()Before any Code Connect work, fetch up-to-date API docs to avoid relying on stale knowledge:
resolve-library-id: search for @figma/code-connectquery-docs with libraryId /figma/code-connect for the specific API needed (e.g., "figma.instance nested components", "figma.children child layers", "figma.nestedProps")This ensures correct usage of figma.children() vs figma.instance() vs figma.nestedProps() — these have distinct use cases that are easy to confuse.
Call get_code_connect_suggestions with the Figma file key and the component's node ID if known, or any node in the area of the component if not. This returns the component's properties (variants, booleans, text, nested instances) and confirms what's unmapped.
get_code_connect_suggestions(
fileKey: "qzjrgEgx4q7MAU9ypgwp48",
nodeId: "<node-id>", // hyphens: "73-3681"
clientFrameworks: "react",
clientLanguages: "typescript"
)
If the exact node ID is unknown, start from any known reference node and use get_metadata to explore nearby nodes until you find a <frame> that contains <symbol> children named with property patterns like Size=Lg, Type=Primary, State=Default — that frame is the component set.
Read components/ui/<name>.tsx in parallel to understand the code props (names, types, defaults).
Detecting nested component instances (critical):
When reviewing get_code_connect_suggestions output, specifically look for:
"has Button", "has Icon" — these toggle nested component instances on/offget_metadata output)For each nested instance found:
.figma.tsx Code Connect file in figma/figma.children() / figma.instance() to map itThe most common failure point. Figma URLs usually point to a specific variant (e.g. the default state). Code Connect requires the component set node — the parent frame that contains all variants. Connecting to a variant gives:
"node is not a top level component or component set".
How to identify the component set:
get_design_context on a known variant node. The returned code will contain a data-node-id attribute on the outer wrapper — that outer wrapper ID is the component set.get_metadata on candidate IDs (one step up in the ID sequence) until you find a <frame> that contains multiple <symbol> children with variant-style names.Once found, build the correct URL: