figma-code-connect

Create Code Connect template files ( .figma.ts ) that map Figma components to code snippets. Given a Figma URL, follow the steps below to create a template. Note: This project may also contain parser-based .figma.tsx files (using figma.connect() , published via CLI). This skill covers templates files only — .figma.ts files that use the MCP tools to fetch component context from Figma. Extract fileKey and nodeId from the URL: Always convert nodeId hyphens to colons: 1234-5678 → 1234:5678 . Worked example: Given: The user may provide a URL pointing to a frame, instance, or variant — not necessarily a component set or standalone component. Call the MCP tool get_code_connect_suggestions with: This tool identifies published components in the selection that don't yet have Code Connect mappings. Handle the response: Call the MCP tool get_context_for_code_connect with: For multiple components, call the tool once per node ID.