[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-figma-figma-code-connect":3,"mdc--1w8hv-key":37,"related-org-figma-figma-code-connect":9207,"related-repo-figma-figma-code-connect":9369},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":32,"sourceUrl":35,"mdContent":36},"figma-code-connect","map Figma components to code snippets","Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create\u002Fupdate .figma.ts or .figma.js files.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"figma","Figma","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Ffigma.png",[12,16,19,22,23],{"name":13,"slug":14,"type":15},"Design System","design-system","tag",{"name":17,"slug":18,"type":15},"UI Components","ui-components",{"name":20,"slug":21,"type":15},"Frontend","frontend",{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},"Design","design",1805,"https:\u002F\u002Fgithub.com\u002Ffigma\u002Fmcp-server-guide","2026-07-31T05:52:30.590302",null,164,[],{"repoUrl":27,"stars":26,"forks":30,"topics":33,"description":34},[],"A guide on how to use the Figma MCP server","https:\u002F\u002Fgithub.com\u002Ffigma\u002Fmcp-server-guide\u002Ftree\u002FHEAD\u002Fskills\u002Ffigma-code-connect","---\nname: figma-code-connect\ndescription: Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create\u002Fupdate .figma.ts or .figma.js files.\ndisable-model-invocation: false\n---\n\n# Code Connect\n\n## Overview\n\nCreate 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.\n\n> **You write `.figma.ts` template files ONLY — never `.figma.tsx`.** This skill produces *parserless templates*: a `.figma.ts` file whose default export uses a `` figma.code`...` `` tagged template. Do **NOT** write a `.figma.tsx` file and do **NOT** use `figma.connect()` — that is the separate **parser-based** Code Connect format (published a different way) and is the **wrong artifact** for this skill; output written as `.figma.tsx` is rejected outright. If a `.figma.tsx` already exists for a component, leave it untouched and add your `.figma.ts` template alongside it. A capable model may be tempted to reach for the more familiar `.figma.tsx` \u002F `figma.connect()` pattern from memory — resist it; here the correct output is **always** `.figma.ts` + `figma.code`.\n\n## Prerequisites\n\n- **Figma MCP server must be connected** — verify that Figma MCP tools (e.g., `get_code_connect_suggestions`) are available before proceeding. If not, guide the user to enable the Figma MCP server and restart their MCP client.\n- **Components must be published** — Code Connect only works with components published to a Figma team library. If a component is not published, inform the user and stop.\n- **Organization or Enterprise plan required** — Code Connect is not available on Free or Professional plans.\n- **URL must include `node-id`** — the Figma URL must contain the `node-id` query parameter.\n- **TypeScript types** — for editor autocomplete and type checking in `.figma.ts` files `@figma\u002Fcode-connect\u002Ffigma-types` must be added to `types` in `tsconfig.json`:\n  ```json\n  {\n    \"compilerOptions\": {\n      \"types\": [\"@figma\u002Fcode-connect\u002Ffigma-types\"]\n    }\n  }\n  ```\n\n## Step 1: Parse the Figma URL\n\nExtract `fileKey` and `nodeId` from the URL:\n\n| URL Format | fileKey | nodeId |\n|---|---|---|\n| `figma.com\u002Fdesign\u002F:fileKey\u002F:name?node-id=X-Y` | `:fileKey` | `X-Y` → `X:Y` |\n| `figma.com\u002Ffile\u002F:fileKey\u002F:name?node-id=X-Y` | `:fileKey` | `X-Y` → `X:Y` |\n| `figma.com\u002Fdesign\u002F:fileKey\u002Fbranch\u002F:branchKey\u002F:name` | use `:branchKey` | from `node-id` param |\n\nAlways convert `nodeId` hyphens to colons: `1234-5678` → `1234:5678`.\n\n**Worked example:**\n\nGiven: `https:\u002F\u002Fwww.figma.com\u002Fdesign\u002FQiEF6w564ggoW8ftcLvdcu\u002FMyDesignSystem?node-id=4185-3778`\n- `fileKey` = `QiEF6w564ggoW8ftcLvdcu`\n- `nodeId` = `4185-3778` → `4185:3778`\n\n## Step 2: Discover Unmapped Components\n\nThe 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:\n- `fileKey` — from Step 1\n- `nodeId` — from Step 1 (colons format)\n- `excludeMappingPrompt` — `true` (returns a lightweight list of unmapped components)\n\nThis tool identifies published components in the selection that don't yet have Code Connect mappings.\n\n**Handle the response:**\n\n- **\"No published components found in this selection\"** — the node contains no published components. Inform the user they need to publish the component to a team library in Figma first, then stop.\n- **\"All component instances in this selection are already connected to code via Code Connect\"** — everything is already mapped. Inform the user and stop.\n- **Normal response with component list** — extract the `mainComponentNodeId` for each returned component. Use these resolved node IDs (not the original from the URL) for all subsequent steps. If multiple components are returned (e.g. the user selected a frame containing several different component instances), repeat Steps 3–6 for each one.\n\n## Step 3: Fetch Component Properties\n\nCall the MCP tool `get_context_for_code_connect` with:\n- `fileKey` — from Step 1\n- `nodeId` — the resolved `mainComponentNodeId` from Step 2\n- `clientFrameworks` — determine from `figma.config.json` `parser` field (e.g. `\"react\"` → `[\"react\"]`)\n- `clientLanguages` — infer from project file extensions (e.g. TypeScript project → `[\"typescript\"]`, JavaScript → `[\"javascript\"]`)\n\nFor multiple components, call the tool once per node ID.\n\nThe response contains the Figma component's **property definitions** — note each property's name and type:\n- **TEXT** — text content (labels, titles, placeholders)\n- **BOOLEAN** — toggles (show\u002Fhide icon, disabled state)\n- **VARIANT** — enum options (size, variant, state)\n- **INSTANCE_SWAP** — swappable nested instances tied to a specific component (icon, avatar)\n- **SLOT** — flexible content regions (freeform layout, mixed children); use `getSlot()` in templates (not the same as INSTANCE_SWAP)\n\nSave this property list — you will use it in Step 5 to write the template.\n\n## Step 4: Identify the Code Component\n\nIf the user did not specify which code component to connect:\n\n1. Check `figma.config.json` for `paths` and `importPaths` to find where components live\n2. Search the codebase for a component matching the Figma component name. Check common directories (`src\u002Fcomponents\u002F`, `components\u002F`, `lib\u002Fui\u002F`, `app\u002Fcomponents\u002F`) if `figma.config.json` doesn't specify paths\n3. Read candidate files and compare their props interface against the Figma properties from Step 3 — look for matching variant types, size options, boolean flags, and slot props\n4. If multiple candidates match, pick the one with the closest prop-interface match and explain your reasoning to the user\n5. If no match is found, show the 2 closest candidates and ask the user to confirm or provide the correct path\n\n**Confirm with the user** before proceeding to Step 5. Present the match: which code component you found, where it lives, and why it matches (prop correspondence, naming, purpose).\n\nRead `figma.config.json` for import path aliases — the `importPaths` section maps glob patterns to import specifiers, and the `paths` section maps those specifiers to directories.\n\nRead the code component's source to understand its props interface — this informs how to map Figma properties to code props in Step 5.\n\n## Step 5: Create the Template File (.figma.ts)\n\n### File location\n\nPlace the file alongside existing Code Connect files. Check `figma.config.json` `include` patterns for the correct directory. **Name it `ComponentName.figma.ts` — never `ComponentName.figma.tsx`.** The `.figma.tsx` extension is the parser-based format; do not create one or modify an existing one.\n\n### Template structure\n\nEvery template file follows this structure:\n\n```ts\n\u002F\u002F url=https:\u002F\u002Fwww.figma.com\u002Ffile\u002F{fileKey}\u002F{fileName}?node-id={nodeId}\n\u002F\u002F source={path to code component from Step 4}\n\u002F\u002F component={code component name from Step 4}\nimport figma from 'figma'\nconst instance = figma.selectedInstance\n\n\u002F\u002F Extract properties from the Figma component (see property mapping below)\n\u002F\u002F ...\n\nexport default {\n  example: figma.code`\u003CComponent ... \u002F>`,       \u002F\u002F Required: code snippet\n  imports: ['import { Component } from \"...\"'], \u002F\u002F Optional: import statements\n  id: 'component-name',                         \u002F\u002F Required: unique identifier\n  metadata: {                                    \u002F\u002F Optional\n    nestable: true,                              \u002F\u002F true = inline in parent, false = show as pill\n    props: {}                                    \u002F\u002F data accessible to parent templates\n  }\n}\n```\n\n### Property mapping\n\nUse the property list from Step 3 to extract values. For each Figma property type, use the corresponding method:\n\n| Figma Property Type | Template Method | When to Use |\n|---|---|---|\n| TEXT | `instance.getString('Name')` | Labels, titles, placeholder text |\n| BOOLEAN | `instance.getBoolean('Name', { true: ..., false: ... })` | Toggle visibility, conditional props |\n| VARIANT | `instance.getEnum('Name', { 'FigmaVal': 'codeVal' })` | Size, variant, state enums |\n| INSTANCE_SWAP | `instance.getInstanceSwap('Name')` | Swapped instance for a fixed component slot (then `hasCodeConnect()` \u002F `executeTemplate()`) - do not confuse with the SLOT property below |\n| SLOT | `instance.getSlot('Name')` | Freeform slot content only when the Figma property type is **SLOT** \n| (child layer) | `instance.findInstance('LayerName')` | Named child instances without a property |\n| (text layer) | `instance.findText('LayerName')` → `.textContent` | Text content from named layers |\n\n**TEXT** — get the string value directly:\n```ts\nconst label = instance.getString('Label')\n```\n\n**VARIANT** — map Figma enum values to code values:\n```ts\nconst variant = instance.getEnum('Variant', {\n  'Primary': 'primary',\n  'Secondary': 'secondary',\n})\n\nconst size = instance.getEnum('Size', {\n  'Small': 'sm',\n  'Medium': 'md',\n  'Large': 'lg',\n})\n```\n\n**BOOLEAN** — simple boolean or mapped to values:\n```ts\n\u002F\u002F Simple boolean\nconst disabled = instance.getBoolean('Disabled')\n\n\u002F\u002F Mapped to code values (e.g. when the code prop is an enum, not a boolean)\nconst size = instance.getBoolean('Show Label', { true: 'large', false: 'small' })\n```\n\n**Map Figma properties to code props where there's a valid correspondence.** Figma properties and code props don't always line up 1:1 — some Figma properties map directly (by name, or via the API methods above), others have no code equivalent. Where a mapping exists, use it; where none fits, omit the Figma property rather than invent a code prop. Never emit an attribute whose name doesn't appear in the code component's `Props` interface.\n\n### Exhaustive variant handling\n\nWhen a VARIANT property has multiple possible values, the `getEnum` mapping **must list every value** returned by `get_context_for_code_connect`. Don't omit values — an unmapped value silently returns `undefined`, producing broken output.\n\n```ts\n\u002F\u002F WRONG — omits 'Warning', which will render as undefined\nconst status = instance.getEnum('Status', {\n  'Success': 'success',\n  'Error': 'error',\n})\n\n\u002F\u002F CORRECT — every value is mapped\nconst status = instance.getEnum('Status', {\n  'Success': 'success',\n  'Error': 'error',\n  'Warning': 'warning',\n  'Info': 'info',\n})\n```\n\nWhen **two or more VARIANT properties combine** to produce different code output, generate exhaustive conditional branches. For example, 2 variants × 2 values = 4 branches:\n\n```ts\nconst type = instance.getEnum('Type', { 'Filled': 'filled', 'Outlined': 'outlined' })\nconst status = instance.getEnum('Status', { 'Success': 'success', 'Error': 'error' })\n\nlet colorClass\nif (type === 'filled' && status === 'success') {\n  colorClass = 'bg-green-500 text-white'\n} else if (type === 'filled' && status === 'error') {\n  colorClass = 'bg-red-500 text-white'\n} else if (type === 'outlined' && status === 'success') {\n  colorClass = 'bg-transparent border-green-500'\n} else if (type === 'outlined' && status === 'error') {\n  colorClass = 'bg-transparent border-red-500'\n}\n```\n\nIf the combinations produce **repetitive** output (e.g., `Size` doesn't change the snippet structure — it's just passed through as a prop), a single `getEnum` mapping per variant is sufficient — no need for cross-product branches.\n\n**INSTANCE_SWAP** — access swappable component instances:\n```ts\nconst icon = instance.getInstanceSwap('Icon')\nlet iconCode\nif (icon && icon.type === 'INSTANCE') {\n  iconCode = icon.executeTemplate().example\n}\n```\n\n**SLOT** — `getSlot(propName)` is only valid when the Figma component property reported in Step 3 has type **`SLOT`**. Do not use `getSlot()` for **INSTANCE_SWAP** properties (those use `getInstanceSwap()`). Slots are explicit “content regions” in the component definition, not generic nested instances.\n\n- **Signature:** `getSlot(propName: string): ResultSection[] | undefined`\n```ts\n\u002F\u002F Figma property \"Content\" must be type SLOT in component properties\nconst content = instance.getSlot('Content')\n\nexport default {\n  example: figma.code`\u003CCard>${content}\u003C\u002FCard>`,\n  \u002F\u002F ...\n}\n```\n\n### Interpolation in tagged templates\n\nWhen interpolating values in tagged templates, use the correct wrapping:\n- **String values** (`getString`, `getEnum`, `textContent`): wrap in quotes → `variant=\"${variant}\"`\n- **Instance\u002Fsection values** (`executeTemplate().example`): wrap in braces → `icon={${iconCode}}`\n- **Slot sections** (`getSlot()` result — `ResultSection[] | undefined`): interpolate directly inside `` figma.code`...` `` (same shape as nested snippet sections), e.g. `` figma.code`\u003CSelect>${content}\u003C\u002FSelect>` `` — do not treat as a plain string\n- **Boolean bare props**: use conditional → `${disabled ? 'disabled' : ''}`\n\n### Finding descendant layers\n\nWhen you need to access children that aren't exposed as component properties:\n\n| Method | Use when |\n|---|---|\n| `instance.getInstanceSwap('PropName')` | Figma property type is **INSTANCE_SWAP** (fixed swapped instance) |\n| `instance.getSlot('PropName')` | Figma property type is **SLOT** (freeform content region) |\n| `instance.findInstance('LayerName')` | You know the child layer name (no component property) |\n| `instance.findText('LayerName')` → `.textContent` | You need text content from a named text layer |\n| `instance.findConnectedInstance('id')` | You know the child's Code Connect `id` |\n| `instance.findConnectedInstances(fn)` | You need multiple connected children matching a filter |\n| `instance.findLayers(fn)` | You need any layers (text + instances) matching a filter |\n\n### Nested configurable instances\n\nA component may contain child instances that are **not exposed as component properties** (no INSTANCE_SWAP) but are still **independently configurable** — they have their own variants, properties, or swap slots. These must be resolved dynamically, not hardcoded.\n\n1. **Check whether the child already has a Code Connect template** — use `get_code_connect_suggestions` or check existing `.figma.ts` files in the project.\n2. **If no template exists, create one** for the child so it renders correctly both standalone and when nested.\n3. **Reference the child from the parent** using `findInstance()` or `findConnectedInstance()`, then call `executeTemplate()`.\n\n```ts\n\u002F\u002F Parent template — the Badge child isn't a prop, but it's configurable\nconst badge = instance.findInstance('Status Badge')\nlet badgeCode\nif (badge && badge.type === 'INSTANCE') {\n  badgeCode = badge.executeTemplate().example\n}\n\nexport default {\n  example: figma.code`\u003CCard>${badgeCode}\u003C\u002FCard>`,\n  \u002F\u002F ...\n}\n```\n\nThis applies to icons, badges, labels, and any other nested instance that is configurable by itself — always connect them and render dynamically, never hardcode their content.\n\n### Nested component example\n\nFor multi-level nested components or metadata prop passing between templates, see [advanced-patterns.md](references\u002Fadvanced-patterns.md).\n\n```ts\nconst icon = instance.getInstanceSwap('Icon')\nlet iconSnippet\nif (icon && icon.type === 'INSTANCE') {\n  iconSnippet = icon.executeTemplate().example\n}\n\nexport default {\n  example: figma.code`\u003CButton ${iconSnippet ? figma.code`icon={${iconSnippet}}` : ''}>${label}\u003C\u002FButton>`,\n  \u002F\u002F ...\n}\n```\n\n### Conditional props\n\n```ts\nconst variant = instance.getEnum('Variant', { 'Primary': 'primary', 'Secondary': 'secondary' })\nconst disabled = instance.getBoolean('Disabled')\n\nexport default {\n  example: figma.code`\n    \u003CButton\n      variant=\"${variant}\"\n      ${disabled ? 'disabled' : ''}\n    >\n      ${label}\n    \u003C\u002FButton>\n  `,\n  \u002F\u002F ...\n}\n```\n\n## Step 6: Validate\n\nRead back the `.figma.ts` file and review it against the following:\n\n- **Correct file type & format (check this FIRST)** — the file is `ComponentName.figma.ts` (NOT `.figma.tsx`), and its default export is a parserless template using a `` figma.code`...` `` tagged template. It must NOT use `figma.connect()` (the parser-based format). If you wrote `.figma.tsx` or `figma.connect()`, discard it and rewrite as a `.figma.ts` `figma.code` template.\n- **Property coverage** — every Figma property from Step 3 should be accounted for in the template. Flag any that are missing and ask the user if they were intentionally omitted.\n- **Valid, correctly typed code** — all emitted code must be valid and correctly typed against the code component's `Props` interface. Never make up component properties — if a Figma property has no corresponding code prop, omit it rather than invent one.\n- **No hardcoded children** — verify that every INSTANCE_SWAP property and child component slot uses the dynamic APIs (`getInstanceSwap()`, `findInstance()`, `findConnectedInstance()`, etc.) with `executeTemplate()`. No slot should contain hardcoded component content.\n- **Rules and Pitfalls** — check for the common mistakes listed below (string concatenation of template results, unnecessary `hasCodeConnect()` guards, missing `type === 'INSTANCE'` checks, etc.)\n- **Interpolation wrapping** — strings (`getString`, `getEnum`, `textContent`) wrapped in quotes, instance\u002Fsection values (`executeTemplate().example`) wrapped in braces, slot sections (`getSlot`) interpolated as snippet sections inside `` figma.code`...` ``, booleans using conditionals\n\nIf anything looks uncertain, consult [api.md](references\u002Fapi.md) for API details and [advanced-patterns.md](references\u002Fadvanced-patterns.md) for complex nesting.\n\n## Inline Quick Reference\n\n### `instance.*` Methods\n\n| Method | Signature | Returns |\n|---|---|---|\n| `getString` | `(propName: string)` | `string` |\n| `getBoolean` | `(propName: string, mapping?: { true: any, false: any })` | `boolean \\| any` |\n| `getEnum` | `(propName: string, mapping: { [figmaVal]: codeVal })` | `any` |\n| `getInstanceSwap` | `(propName: string)` | `InstanceHandle \\| null` |\n| `getSlot` | `(propName: string)` | `ResultSection[] \\| undefined` |\n| `getPropertyValue` | `(propName: string)` | `string \\| boolean` |\n| `findInstance` | `(layerName: string, opts?: SelectorOptions)` | `InstanceHandle \\| ErrorHandle` |\n| `findText` | `(layerName: string, opts?: SelectorOptions)` | `TextHandle \\| ErrorHandle` |\n| `findConnectedInstance` | `(codeConnectId: string, opts?: SelectorOptions)` | `InstanceHandle \\| ErrorHandle` |\n| `findConnectedInstances` | `(selector: (node) => boolean, opts?: SelectorOptions)` | `InstanceHandle[]` |\n| `findLayers` | `(selector: (node) => boolean, opts?: SelectorOptions)` | `(InstanceHandle \\| TextHandle)[]` |\n\n### InstanceHandle Methods\n\n| Method | Returns |\n|---|---|\n| `hasCodeConnect()` | `boolean` |\n| `executeTemplate()` | `{ example: ResultSection[], metadata: Metadata }` |\n| `codeConnectId()` | `string \\| null` |\n\n### TextHandle Properties\n\n| Property | Type |\n|---|---|\n| `.textContent` | `string` |\n| `.name` | `string` |\n\n### SelectorOptions\n\n```ts\n{ path?: string[], traverseInstances?: boolean }\n```\n\n- `traverseInstances: true` — required when the target lives inside another nested instance. Without it, `findInstance`\u002F`findText` only search the current instance's own layers and stop at nested instance boundaries.\n- `path: string[]` — disambiguates when multiple descendants share the same layer name. Lists parent layer names that must appear on the path to the target.\n\n**Examples:**\n\n```ts\n\u002F\u002F Layer hierarchy:\n\u002F\u002F   A > C (instance) > \"mychild\"\n\u002F\u002F \"mychild\" sits inside nested instance C, so plain findInstance returns ErrorHandle.\ninstance.findInstance('mychild', { traverseInstances: true })\n\n\u002F\u002F Layer hierarchy:\n\u002F\u002F   A > C (instance) > \"mychild\"\n\u002F\u002F   A > D (instance) > \"mychild\"\n\u002F\u002F Two \"mychild\" layers exist — use path to pick the one under C.\ninstance.findInstance('mychild', { traverseInstances: true, path: ['C'] })\n```\n\n**When to reach into a nested instance from a parent template:** only when the parent code component (from Step 4) takes the nested layer as a prop value itself (e.g. `\u003CC show={\u003CB \u002F>} \u002F>` — A forwards B into C). If the parent just composes C and C renders B internally, resolve C with `executeTemplate()` and let C's own template handle B — don't duplicate B's rendering at the parent level.\n\n### Export Structure\n\n```ts\nexport default {\n  example: figma.code`...`,                      \u002F\u002F Required: ResultSection[]\n  id: 'component-name',                         \u002F\u002F Required: string\n  imports: ['import { X } from \"...\"'],          \u002F\u002F Optional: string[]\n  metadata: { nestable: true, props: {} }        \u002F\u002F Optional\n}\n```\n\n## Rules and Pitfalls\n\n1. **Never string-concatenate template results.** `executeTemplate().example` is a `ResultSection[]` object, not a string. Using `+` or `.join()` produces `[object Object]`. Always interpolate inside tagged templates: `` figma.code`${snippet1}${snippet2}` ``\n\n2. **Do not use `hasCodeConnect()` guards.** Call `executeTemplate()` directly on any instance after a `type === 'INSTANCE'` check. The runtime handles instances without Code Connect automatically.\n\n   ```ts\n   \u002F\u002F WRONG — hasCodeConnect() gate drops non-CC instances\n   if (icon && icon.type === 'INSTANCE' && icon.hasCodeConnect()) {\n     iconCode = icon.executeTemplate().example\n   }\n\n   \u002F\u002F CORRECT — let the runtime handle all instances\n   if (icon && icon.type === 'INSTANCE') {\n     iconCode = icon.executeTemplate().example\n   }\n   ```\n\n3. **Check `type === 'INSTANCE'` before calling `executeTemplate()`.** `findInstance()`, `findConnectedInstance()`, and `findText()` return an `ErrorHandle` (truthy, but not a real node) on failure — not `null`. Always add a type check to avoid crashes: `if (child && child.type === 'INSTANCE') { ... }`\n\n4. **Prefer `getInstanceSwap()` over `findInstance()`** when a component property exists for the slot. `findInstance('Star Icon')` breaks when the icon is swapped to a different name; `getInstanceSwap('Icon')` always works regardless of which instance is in the slot.\n\n5. **Use `getSlot()` only when the Figma property type is `SLOT`.** For **INSTANCE_SWAP** props, use `getInstanceSwap()` (returns an `InstanceHandle`). `getSlot()` returns structured slot sections, not instances — never call `executeTemplate()` on its return value.\n\n6. **Property names are case-sensitive** and must exactly match what `get_context_for_code_connect` returns.\n\n7. **Handle multiple template arrays correctly.** When iterating over children, set each result in a separate variable and interpolate them individually — do not use `.map().join()`:\n   ```ts\n   \u002F\u002F Wrong:\n   items.map(n => n.executeTemplate().example).join('\\n')\n\n   \u002F\u002F Correct — use separate variables:\n   const child1 = items[0]?.executeTemplate().example\n   const child2 = items[1]?.executeTemplate().example\n   export default { example: figma.code`${child1}${child2}` }\n   ```\n\n7. **Never hardcode slot or children content.** Always resolve child instances dynamically — use `getInstanceSwap()` for INSTANCE_SWAP properties, `findInstance()`\u002F`findConnectedInstance()` for direct children — and render them via `executeTemplate()`. Never construct JSX from a layer name (e.g., `\u003CStarIcon \u002F>`) or guess import paths. If an instance has no Code Connect, omit it — do not add a hardcoded fallback.\n\n   ```ts\n   \u002F\u002F WRONG — hardcodes the icon from its layer name\n   example: figma.code`\u003CButton icon={\u003CStarIcon \u002F>}>Submit\u003C\u002FButton>`\n\n   \u002F\u002F CORRECT — resolves dynamically, works for any swapped icon\n   const icon = instance.findInstance('Icon')\n   let iconCode\n   if (icon && icon.type === 'INSTANCE') {\n     iconCode = icon.executeTemplate().example\n   }\n   example: figma.code`\u003CButton${iconCode ? figma.code` icon={${iconCode}}` : ''}>...\u003C\u002FButton>`\n   ```\n\n8. **Attempt to represent every Figma property via a code prop.** The code component's `Props` interface (from Step 4) is the authoritative list of attribute names. For each Figma property, figure out the right way to represent it using the API methods from Step 5 — direct name match, value transformation, or whatever fits. If no code prop fits at all, omit it — don't invent a prop name.\n\n## Complete Worked Example\n\nGiven URL: `https:\u002F\u002Ffigma.com\u002Fdesign\u002Fabc123\u002FMyFile?node-id=42-100`\n\n**Step 1:** Parse the URL.\n- `fileKey` = `abc123`\n- `nodeId` = `42-100` → `42:100`\n\n**Step 2:** Call `get_code_connect_suggestions` with `fileKey: \"abc123\"`, `nodeId: \"42:100\"`, `excludeMappingPrompt: true`.\nResponse returns one component with `mainComponentNodeId: \"42:100\"`. If the response were empty, stop and inform the user. If multiple components were returned, repeat Steps 3–6 for each.\n\n**Step 3:** Call `get_context_for_code_connect` with `fileKey: \"abc123\"`, `nodeId: \"42:100\"` (from Step 2), `clientFrameworks: [\"react\"]`, `clientLanguages: [\"typescript\"]`.\n\nResponse includes properties:\n- Label (TEXT)\n- Variant (VARIANT): Primary, Secondary\n- Size (VARIANT): Small, Medium, Large\n- Disabled (BOOLEAN)\n- Has Icon (BOOLEAN)\n- Icon (INSTANCE_SWAP)\n\n**Step 4:** Search codebase → find `Button` component. Read its source to confirm props: `variant`, `size`, `disabled`, `icon`, `children`. Import path: `\"primitives\"`.\n\n**Step 5:** Create `src\u002Ffigma\u002Fprimitives\u002FButton.figma.ts`:\n\n```ts\n\u002F\u002F url=https:\u002F\u002Ffigma.com\u002Fdesign\u002Fabc123\u002FMyFile?node-id=42-100\n\u002F\u002F source=src\u002Fcomponents\u002FButton.tsx\n\u002F\u002F component=Button\nimport figma from 'figma'\nconst instance = figma.selectedInstance\n\nconst label = instance.getString('Label')\nconst variant = instance.getEnum('Variant', {\n  'Primary': 'primary',\n  'Secondary': 'secondary',\n})\nconst size = instance.getEnum('Size', {\n  'Small': 'sm',\n  'Medium': 'md',\n  'Large': 'lg',\n})\nconst disabled = instance.getBoolean('Disabled')\nconst hasIcon = instance.getBoolean('Has Icon')\nconst icon = hasIcon ? instance.getInstanceSwap('Icon') : null\nlet iconCode\nif (icon && icon.type === 'INSTANCE') {\n  iconCode = icon.executeTemplate().example\n}\n\nexport default {\n  example: figma.code`\n    \u003CButton\n      variant=\"${variant}\"\n      size=\"${size}\"\n      ${disabled ? 'disabled' : ''}\n      ${iconCode ? figma.code`icon={${iconCode}}` : ''}\n    >\n      ${label}\n    \u003C\u002FButton>\n  `,\n  imports: ['import { Button } from \"primitives\"'],\n  id: 'button',\n  metadata: { nestable: true }\n}\n```\n\n**Step 6:** Read back file to verify syntax.\n\n## Additional Reference\n\nFor advanced patterns (multi-level nested components, `findConnectedInstances` filtering, metadata prop passing between parent\u002Fchild templates):\n\n- [api.md](references\u002Fapi.md) — Full Code Connect API reference\n- [advanced-patterns.md](references\u002Fadvanced-patterns.md) — Advanced nesting, metadata props, and descendant patterns\n",{"data":38,"body":40},{"name":4,"description":6,"disable-model-invocation":39},false,{"type":41,"children":42},"root",[43,52,59,74,225,231,454,460,481,619,645,653,664,705,711,723,765,770,778,819,825,837,933,938,950,1011,1016,1022,1027,1115,1125,1151,1156,1162,1169,1217,1223,1228,1603,1609,1614,1816,1825,1885,1894,2225,2234,2422,2440,2446,2480,2854,2866,3509,3535,3544,3715,3761,3779,3940,3946,3951,4068,4074,4079,4241,4247,4266,4335,4600,4605,4611,4624,4949,4955,5308,5314,5326,5531,5550,5556,5568,5911,5917,5998,6004,6064,6070,6128,6167,6175,6397,6422,6428,6629,6634,7817,7823,7834,7844,7884,7930,7972,7977,8010,8069,8086,9152,9162,9168,9180,9201],{"type":44,"tag":45,"props":46,"children":48},"element","h1",{"id":47},"code-connect",[49],{"type":50,"value":51},"text","Code Connect",{"type":44,"tag":53,"props":54,"children":56},"h2",{"id":55},"overview",[57],{"type":50,"value":58},"Overview",{"type":44,"tag":60,"props":61,"children":62},"p",{},[63,65,72],{"type":50,"value":64},"Create Code Connect template files (",{"type":44,"tag":66,"props":67,"children":69},"code",{"className":68},[],[70],{"type":50,"value":71},".figma.ts",{"type":50,"value":73},") that map Figma components to code snippets. Given a Figma URL, follow the steps below to create a template.",{"type":44,"tag":75,"props":76,"children":77},"blockquote",{},[78],{"type":44,"tag":60,"props":79,"children":80},{},[81,102,104,110,112,117,119,125,127,132,134,139,141,145,147,153,155,160,162,167,169,174,176,181,183,188,190,195,197,202,204,209,211,216,218,224],{"type":44,"tag":82,"props":83,"children":84},"strong",{},[85,87,92,94,100],{"type":50,"value":86},"You write ",{"type":44,"tag":66,"props":88,"children":90},{"className":89},[],[91],{"type":50,"value":71},{"type":50,"value":93}," template files ONLY — never ",{"type":44,"tag":66,"props":95,"children":97},{"className":96},[],[98],{"type":50,"value":99},".figma.tsx",{"type":50,"value":101},".",{"type":50,"value":103}," This skill produces ",{"type":44,"tag":105,"props":106,"children":107},"em",{},[108],{"type":50,"value":109},"parserless templates",{"type":50,"value":111},": a ",{"type":44,"tag":66,"props":113,"children":115},{"className":114},[],[116],{"type":50,"value":71},{"type":50,"value":118}," file whose default export uses a ",{"type":44,"tag":66,"props":120,"children":122},{"className":121},[],[123],{"type":50,"value":124},"figma.code`...`",{"type":50,"value":126}," tagged template. Do ",{"type":44,"tag":82,"props":128,"children":129},{},[130],{"type":50,"value":131},"NOT",{"type":50,"value":133}," write a ",{"type":44,"tag":66,"props":135,"children":137},{"className":136},[],[138],{"type":50,"value":99},{"type":50,"value":140}," file and do ",{"type":44,"tag":82,"props":142,"children":143},{},[144],{"type":50,"value":131},{"type":50,"value":146}," use ",{"type":44,"tag":66,"props":148,"children":150},{"className":149},[],[151],{"type":50,"value":152},"figma.connect()",{"type":50,"value":154}," — that is the separate ",{"type":44,"tag":82,"props":156,"children":157},{},[158],{"type":50,"value":159},"parser-based",{"type":50,"value":161}," Code Connect format (published a different way) and is the ",{"type":44,"tag":82,"props":163,"children":164},{},[165],{"type":50,"value":166},"wrong artifact",{"type":50,"value":168}," for this skill; output written as ",{"type":44,"tag":66,"props":170,"children":172},{"className":171},[],[173],{"type":50,"value":99},{"type":50,"value":175}," is rejected outright. If a ",{"type":44,"tag":66,"props":177,"children":179},{"className":178},[],[180],{"type":50,"value":99},{"type":50,"value":182}," already exists for a component, leave it untouched and add your ",{"type":44,"tag":66,"props":184,"children":186},{"className":185},[],[187],{"type":50,"value":71},{"type":50,"value":189}," template alongside it. A capable model may be tempted to reach for the more familiar ",{"type":44,"tag":66,"props":191,"children":193},{"className":192},[],[194],{"type":50,"value":99},{"type":50,"value":196}," \u002F ",{"type":44,"tag":66,"props":198,"children":200},{"className":199},[],[201],{"type":50,"value":152},{"type":50,"value":203}," pattern from memory — resist it; here the correct output is ",{"type":44,"tag":82,"props":205,"children":206},{},[207],{"type":50,"value":208},"always",{"type":50,"value":210}," ",{"type":44,"tag":66,"props":212,"children":214},{"className":213},[],[215],{"type":50,"value":71},{"type":50,"value":217}," + ",{"type":44,"tag":66,"props":219,"children":221},{"className":220},[],[222],{"type":50,"value":223},"figma.code",{"type":50,"value":101},{"type":44,"tag":53,"props":226,"children":228},{"id":227},"prerequisites",[229],{"type":50,"value":230},"Prerequisites",{"type":44,"tag":232,"props":233,"children":234},"ul",{},[235,254,264,274,297],{"type":44,"tag":236,"props":237,"children":238},"li",{},[239,244,246,252],{"type":44,"tag":82,"props":240,"children":241},{},[242],{"type":50,"value":243},"Figma MCP server must be connected",{"type":50,"value":245}," — verify that Figma MCP tools (e.g., ",{"type":44,"tag":66,"props":247,"children":249},{"className":248},[],[250],{"type":50,"value":251},"get_code_connect_suggestions",{"type":50,"value":253},") are available before proceeding. If not, guide the user to enable the Figma MCP server and restart their MCP client.",{"type":44,"tag":236,"props":255,"children":256},{},[257,262],{"type":44,"tag":82,"props":258,"children":259},{},[260],{"type":50,"value":261},"Components must be published",{"type":50,"value":263}," — Code Connect only works with components published to a Figma team library. If a component is not published, inform the user and stop.",{"type":44,"tag":236,"props":265,"children":266},{},[267,272],{"type":44,"tag":82,"props":268,"children":269},{},[270],{"type":50,"value":271},"Organization or Enterprise plan required",{"type":50,"value":273}," — Code Connect is not available on Free or Professional plans.",{"type":44,"tag":236,"props":275,"children":276},{},[277,288,290,295],{"type":44,"tag":82,"props":278,"children":279},{},[280,282],{"type":50,"value":281},"URL must include ",{"type":44,"tag":66,"props":283,"children":285},{"className":284},[],[286],{"type":50,"value":287},"node-id",{"type":50,"value":289}," — the Figma URL must contain the ",{"type":44,"tag":66,"props":291,"children":293},{"className":292},[],[294],{"type":50,"value":287},{"type":50,"value":296}," query parameter.",{"type":44,"tag":236,"props":298,"children":299},{},[300,305,307,312,314,320,322,328,330,336,338],{"type":44,"tag":82,"props":301,"children":302},{},[303],{"type":50,"value":304},"TypeScript types",{"type":50,"value":306}," — for editor autocomplete and type checking in ",{"type":44,"tag":66,"props":308,"children":310},{"className":309},[],[311],{"type":50,"value":71},{"type":50,"value":313}," files ",{"type":44,"tag":66,"props":315,"children":317},{"className":316},[],[318],{"type":50,"value":319},"@figma\u002Fcode-connect\u002Ffigma-types",{"type":50,"value":321}," must be added to ",{"type":44,"tag":66,"props":323,"children":325},{"className":324},[],[326],{"type":50,"value":327},"types",{"type":50,"value":329}," in ",{"type":44,"tag":66,"props":331,"children":333},{"className":332},[],[334],{"type":50,"value":335},"tsconfig.json",{"type":50,"value":337},":\n",{"type":44,"tag":339,"props":340,"children":345},"pre",{"className":341,"code":342,"language":343,"meta":344,"style":344},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"compilerOptions\": {\n    \"types\": [\"@figma\u002Fcode-connect\u002Ffigma-types\"]\n  }\n}\n","json","",[346],{"type":44,"tag":66,"props":347,"children":348},{"__ignoreMap":344},[349,361,391,436,445],{"type":44,"tag":350,"props":351,"children":354},"span",{"class":352,"line":353},"line",1,[355],{"type":44,"tag":350,"props":356,"children":358},{"style":357},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[359],{"type":50,"value":360},"{\n",{"type":44,"tag":350,"props":362,"children":364},{"class":352,"line":363},2,[365,370,376,381,386],{"type":44,"tag":350,"props":366,"children":367},{"style":357},[368],{"type":50,"value":369},"  \"",{"type":44,"tag":350,"props":371,"children":373},{"style":372},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[374],{"type":50,"value":375},"compilerOptions",{"type":44,"tag":350,"props":377,"children":378},{"style":357},[379],{"type":50,"value":380},"\"",{"type":44,"tag":350,"props":382,"children":383},{"style":357},[384],{"type":50,"value":385},":",{"type":44,"tag":350,"props":387,"children":388},{"style":357},[389],{"type":50,"value":390}," {\n",{"type":44,"tag":350,"props":392,"children":394},{"class":352,"line":393},3,[395,400,405,409,413,418,422,427,431],{"type":44,"tag":350,"props":396,"children":397},{"style":357},[398],{"type":50,"value":399},"    \"",{"type":44,"tag":350,"props":401,"children":403},{"style":402},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[404],{"type":50,"value":327},{"type":44,"tag":350,"props":406,"children":407},{"style":357},[408],{"type":50,"value":380},{"type":44,"tag":350,"props":410,"children":411},{"style":357},[412],{"type":50,"value":385},{"type":44,"tag":350,"props":414,"children":415},{"style":357},[416],{"type":50,"value":417}," [",{"type":44,"tag":350,"props":419,"children":420},{"style":357},[421],{"type":50,"value":380},{"type":44,"tag":350,"props":423,"children":425},{"style":424},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[426],{"type":50,"value":319},{"type":44,"tag":350,"props":428,"children":429},{"style":357},[430],{"type":50,"value":380},{"type":44,"tag":350,"props":432,"children":433},{"style":357},[434],{"type":50,"value":435},"]\n",{"type":44,"tag":350,"props":437,"children":439},{"class":352,"line":438},4,[440],{"type":44,"tag":350,"props":441,"children":442},{"style":357},[443],{"type":50,"value":444},"  }\n",{"type":44,"tag":350,"props":446,"children":448},{"class":352,"line":447},5,[449],{"type":44,"tag":350,"props":450,"children":451},{"style":357},[452],{"type":50,"value":453},"}\n",{"type":44,"tag":53,"props":455,"children":457},{"id":456},"step-1-parse-the-figma-url",[458],{"type":50,"value":459},"Step 1: Parse the Figma URL",{"type":44,"tag":60,"props":461,"children":462},{},[463,465,471,473,479],{"type":50,"value":464},"Extract ",{"type":44,"tag":66,"props":466,"children":468},{"className":467},[],[469],{"type":50,"value":470},"fileKey",{"type":50,"value":472}," and ",{"type":44,"tag":66,"props":474,"children":476},{"className":475},[],[477],{"type":50,"value":478},"nodeId",{"type":50,"value":480}," from the URL:",{"type":44,"tag":482,"props":483,"children":484},"table",{},[485,507],{"type":44,"tag":486,"props":487,"children":488},"thead",{},[489],{"type":44,"tag":490,"props":491,"children":492},"tr",{},[493,499,503],{"type":44,"tag":494,"props":495,"children":496},"th",{},[497],{"type":50,"value":498},"URL Format",{"type":44,"tag":494,"props":500,"children":501},{},[502],{"type":50,"value":470},{"type":44,"tag":494,"props":504,"children":505},{},[506],{"type":50,"value":478},{"type":44,"tag":508,"props":509,"children":510},"tbody",{},[511,550,584],{"type":44,"tag":490,"props":512,"children":513},{},[514,524,533],{"type":44,"tag":515,"props":516,"children":517},"td",{},[518],{"type":44,"tag":66,"props":519,"children":521},{"className":520},[],[522],{"type":50,"value":523},"figma.com\u002Fdesign\u002F:fileKey\u002F:name?node-id=X-Y",{"type":44,"tag":515,"props":525,"children":526},{},[527],{"type":44,"tag":66,"props":528,"children":530},{"className":529},[],[531],{"type":50,"value":532},":fileKey",{"type":44,"tag":515,"props":534,"children":535},{},[536,542,544],{"type":44,"tag":66,"props":537,"children":539},{"className":538},[],[540],{"type":50,"value":541},"X-Y",{"type":50,"value":543}," → ",{"type":44,"tag":66,"props":545,"children":547},{"className":546},[],[548],{"type":50,"value":549},"X:Y",{"type":44,"tag":490,"props":551,"children":552},{},[553,562,570],{"type":44,"tag":515,"props":554,"children":555},{},[556],{"type":44,"tag":66,"props":557,"children":559},{"className":558},[],[560],{"type":50,"value":561},"figma.com\u002Ffile\u002F:fileKey\u002F:name?node-id=X-Y",{"type":44,"tag":515,"props":563,"children":564},{},[565],{"type":44,"tag":66,"props":566,"children":568},{"className":567},[],[569],{"type":50,"value":532},{"type":44,"tag":515,"props":571,"children":572},{},[573,578,579],{"type":44,"tag":66,"props":574,"children":576},{"className":575},[],[577],{"type":50,"value":541},{"type":50,"value":543},{"type":44,"tag":66,"props":580,"children":582},{"className":581},[],[583],{"type":50,"value":549},{"type":44,"tag":490,"props":585,"children":586},{},[587,596,607],{"type":44,"tag":515,"props":588,"children":589},{},[590],{"type":44,"tag":66,"props":591,"children":593},{"className":592},[],[594],{"type":50,"value":595},"figma.com\u002Fdesign\u002F:fileKey\u002Fbranch\u002F:branchKey\u002F:name",{"type":44,"tag":515,"props":597,"children":598},{},[599,601],{"type":50,"value":600},"use ",{"type":44,"tag":66,"props":602,"children":604},{"className":603},[],[605],{"type":50,"value":606},":branchKey",{"type":44,"tag":515,"props":608,"children":609},{},[610,612,617],{"type":50,"value":611},"from ",{"type":44,"tag":66,"props":613,"children":615},{"className":614},[],[616],{"type":50,"value":287},{"type":50,"value":618}," param",{"type":44,"tag":60,"props":620,"children":621},{},[622,624,629,631,637,638,644],{"type":50,"value":623},"Always convert ",{"type":44,"tag":66,"props":625,"children":627},{"className":626},[],[628],{"type":50,"value":478},{"type":50,"value":630}," hyphens to colons: ",{"type":44,"tag":66,"props":632,"children":634},{"className":633},[],[635],{"type":50,"value":636},"1234-5678",{"type":50,"value":543},{"type":44,"tag":66,"props":639,"children":641},{"className":640},[],[642],{"type":50,"value":643},"1234:5678",{"type":50,"value":101},{"type":44,"tag":60,"props":646,"children":647},{},[648],{"type":44,"tag":82,"props":649,"children":650},{},[651],{"type":50,"value":652},"Worked example:",{"type":44,"tag":60,"props":654,"children":655},{},[656,658],{"type":50,"value":657},"Given: ",{"type":44,"tag":66,"props":659,"children":661},{"className":660},[],[662],{"type":50,"value":663},"https:\u002F\u002Fwww.figma.com\u002Fdesign\u002FQiEF6w564ggoW8ftcLvdcu\u002FMyDesignSystem?node-id=4185-3778",{"type":44,"tag":232,"props":665,"children":666},{},[667,683],{"type":44,"tag":236,"props":668,"children":669},{},[670,675,677],{"type":44,"tag":66,"props":671,"children":673},{"className":672},[],[674],{"type":50,"value":470},{"type":50,"value":676}," = ",{"type":44,"tag":66,"props":678,"children":680},{"className":679},[],[681],{"type":50,"value":682},"QiEF6w564ggoW8ftcLvdcu",{"type":44,"tag":236,"props":684,"children":685},{},[686,691,692,698,699],{"type":44,"tag":66,"props":687,"children":689},{"className":688},[],[690],{"type":50,"value":478},{"type":50,"value":676},{"type":44,"tag":66,"props":693,"children":695},{"className":694},[],[696],{"type":50,"value":697},"4185-3778",{"type":50,"value":543},{"type":44,"tag":66,"props":700,"children":702},{"className":701},[],[703],{"type":50,"value":704},"4185:3778",{"type":44,"tag":53,"props":706,"children":708},{"id":707},"step-2-discover-unmapped-components",[709],{"type":50,"value":710},"Step 2: Discover Unmapped Components",{"type":44,"tag":60,"props":712,"children":713},{},[714,716,721],{"type":50,"value":715},"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 ",{"type":44,"tag":66,"props":717,"children":719},{"className":718},[],[720],{"type":50,"value":251},{"type":50,"value":722}," with:",{"type":44,"tag":232,"props":724,"children":725},{},[726,736,746],{"type":44,"tag":236,"props":727,"children":728},{},[729,734],{"type":44,"tag":66,"props":730,"children":732},{"className":731},[],[733],{"type":50,"value":470},{"type":50,"value":735}," — from Step 1",{"type":44,"tag":236,"props":737,"children":738},{},[739,744],{"type":44,"tag":66,"props":740,"children":742},{"className":741},[],[743],{"type":50,"value":478},{"type":50,"value":745}," — from Step 1 (colons format)",{"type":44,"tag":236,"props":747,"children":748},{},[749,755,757,763],{"type":44,"tag":66,"props":750,"children":752},{"className":751},[],[753],{"type":50,"value":754},"excludeMappingPrompt",{"type":50,"value":756}," — ",{"type":44,"tag":66,"props":758,"children":760},{"className":759},[],[761],{"type":50,"value":762},"true",{"type":50,"value":764}," (returns a lightweight list of unmapped components)",{"type":44,"tag":60,"props":766,"children":767},{},[768],{"type":50,"value":769},"This tool identifies published components in the selection that don't yet have Code Connect mappings.",{"type":44,"tag":60,"props":771,"children":772},{},[773],{"type":44,"tag":82,"props":774,"children":775},{},[776],{"type":50,"value":777},"Handle the response:",{"type":44,"tag":232,"props":779,"children":780},{},[781,791,801],{"type":44,"tag":236,"props":782,"children":783},{},[784,789],{"type":44,"tag":82,"props":785,"children":786},{},[787],{"type":50,"value":788},"\"No published components found in this selection\"",{"type":50,"value":790}," — the node contains no published components. Inform the user they need to publish the component to a team library in Figma first, then stop.",{"type":44,"tag":236,"props":792,"children":793},{},[794,799],{"type":44,"tag":82,"props":795,"children":796},{},[797],{"type":50,"value":798},"\"All component instances in this selection are already connected to code via Code Connect\"",{"type":50,"value":800}," — everything is already mapped. Inform the user and stop.",{"type":44,"tag":236,"props":802,"children":803},{},[804,809,811,817],{"type":44,"tag":82,"props":805,"children":806},{},[807],{"type":50,"value":808},"Normal response with component list",{"type":50,"value":810}," — extract the ",{"type":44,"tag":66,"props":812,"children":814},{"className":813},[],[815],{"type":50,"value":816},"mainComponentNodeId",{"type":50,"value":818}," for each returned component. Use these resolved node IDs (not the original from the URL) for all subsequent steps. If multiple components are returned (e.g. the user selected a frame containing several different component instances), repeat Steps 3–6 for each one.",{"type":44,"tag":53,"props":820,"children":822},{"id":821},"step-3-fetch-component-properties",[823],{"type":50,"value":824},"Step 3: Fetch Component Properties",{"type":44,"tag":60,"props":826,"children":827},{},[828,830,836],{"type":50,"value":829},"Call the MCP tool ",{"type":44,"tag":66,"props":831,"children":833},{"className":832},[],[834],{"type":50,"value":835},"get_context_for_code_connect",{"type":50,"value":722},{"type":44,"tag":232,"props":838,"children":839},{},[840,849,866,907],{"type":44,"tag":236,"props":841,"children":842},{},[843,848],{"type":44,"tag":66,"props":844,"children":846},{"className":845},[],[847],{"type":50,"value":470},{"type":50,"value":735},{"type":44,"tag":236,"props":850,"children":851},{},[852,857,859,864],{"type":44,"tag":66,"props":853,"children":855},{"className":854},[],[856],{"type":50,"value":478},{"type":50,"value":858}," — the resolved ",{"type":44,"tag":66,"props":860,"children":862},{"className":861},[],[863],{"type":50,"value":816},{"type":50,"value":865}," from Step 2",{"type":44,"tag":236,"props":867,"children":868},{},[869,875,877,883,884,890,892,898,899,905],{"type":44,"tag":66,"props":870,"children":872},{"className":871},[],[873],{"type":50,"value":874},"clientFrameworks",{"type":50,"value":876}," — determine from ",{"type":44,"tag":66,"props":878,"children":880},{"className":879},[],[881],{"type":50,"value":882},"figma.config.json",{"type":50,"value":210},{"type":44,"tag":66,"props":885,"children":887},{"className":886},[],[888],{"type":50,"value":889},"parser",{"type":50,"value":891}," field (e.g. ",{"type":44,"tag":66,"props":893,"children":895},{"className":894},[],[896],{"type":50,"value":897},"\"react\"",{"type":50,"value":543},{"type":44,"tag":66,"props":900,"children":902},{"className":901},[],[903],{"type":50,"value":904},"[\"react\"]",{"type":50,"value":906},")",{"type":44,"tag":236,"props":908,"children":909},{},[910,916,918,924,926,932],{"type":44,"tag":66,"props":911,"children":913},{"className":912},[],[914],{"type":50,"value":915},"clientLanguages",{"type":50,"value":917}," — infer from project file extensions (e.g. TypeScript project → ",{"type":44,"tag":66,"props":919,"children":921},{"className":920},[],[922],{"type":50,"value":923},"[\"typescript\"]",{"type":50,"value":925},", JavaScript → ",{"type":44,"tag":66,"props":927,"children":929},{"className":928},[],[930],{"type":50,"value":931},"[\"javascript\"]",{"type":50,"value":906},{"type":44,"tag":60,"props":934,"children":935},{},[936],{"type":50,"value":937},"For multiple components, call the tool once per node ID.",{"type":44,"tag":60,"props":939,"children":940},{},[941,943,948],{"type":50,"value":942},"The response contains the Figma component's ",{"type":44,"tag":82,"props":944,"children":945},{},[946],{"type":50,"value":947},"property definitions",{"type":50,"value":949}," — note each property's name and type:",{"type":44,"tag":232,"props":951,"children":952},{},[953,963,973,983,993],{"type":44,"tag":236,"props":954,"children":955},{},[956,961],{"type":44,"tag":82,"props":957,"children":958},{},[959],{"type":50,"value":960},"TEXT",{"type":50,"value":962}," — text content (labels, titles, placeholders)",{"type":44,"tag":236,"props":964,"children":965},{},[966,971],{"type":44,"tag":82,"props":967,"children":968},{},[969],{"type":50,"value":970},"BOOLEAN",{"type":50,"value":972}," — toggles (show\u002Fhide icon, disabled state)",{"type":44,"tag":236,"props":974,"children":975},{},[976,981],{"type":44,"tag":82,"props":977,"children":978},{},[979],{"type":50,"value":980},"VARIANT",{"type":50,"value":982}," — enum options (size, variant, state)",{"type":44,"tag":236,"props":984,"children":985},{},[986,991],{"type":44,"tag":82,"props":987,"children":988},{},[989],{"type":50,"value":990},"INSTANCE_SWAP",{"type":50,"value":992}," — swappable nested instances tied to a specific component (icon, avatar)",{"type":44,"tag":236,"props":994,"children":995},{},[996,1001,1003,1009],{"type":44,"tag":82,"props":997,"children":998},{},[999],{"type":50,"value":1000},"SLOT",{"type":50,"value":1002}," — flexible content regions (freeform layout, mixed children); use ",{"type":44,"tag":66,"props":1004,"children":1006},{"className":1005},[],[1007],{"type":50,"value":1008},"getSlot()",{"type":50,"value":1010}," in templates (not the same as INSTANCE_SWAP)",{"type":44,"tag":60,"props":1012,"children":1013},{},[1014],{"type":50,"value":1015},"Save this property list — you will use it in Step 5 to write the template.",{"type":44,"tag":53,"props":1017,"children":1019},{"id":1018},"step-4-identify-the-code-component",[1020],{"type":50,"value":1021},"Step 4: Identify the Code Component",{"type":44,"tag":60,"props":1023,"children":1024},{},[1025],{"type":50,"value":1026},"If the user did not specify which code component to connect:",{"type":44,"tag":1028,"props":1029,"children":1030},"ol",{},[1031,1058,1100,1105,1110],{"type":44,"tag":236,"props":1032,"children":1033},{},[1034,1036,1041,1043,1049,1050,1056],{"type":50,"value":1035},"Check ",{"type":44,"tag":66,"props":1037,"children":1039},{"className":1038},[],[1040],{"type":50,"value":882},{"type":50,"value":1042}," for ",{"type":44,"tag":66,"props":1044,"children":1046},{"className":1045},[],[1047],{"type":50,"value":1048},"paths",{"type":50,"value":472},{"type":44,"tag":66,"props":1051,"children":1053},{"className":1052},[],[1054],{"type":50,"value":1055},"importPaths",{"type":50,"value":1057}," to find where components live",{"type":44,"tag":236,"props":1059,"children":1060},{},[1061,1063,1069,1071,1077,1078,1084,1085,1091,1093,1098],{"type":50,"value":1062},"Search the codebase for a component matching the Figma component name. Check common directories (",{"type":44,"tag":66,"props":1064,"children":1066},{"className":1065},[],[1067],{"type":50,"value":1068},"src\u002Fcomponents\u002F",{"type":50,"value":1070},", ",{"type":44,"tag":66,"props":1072,"children":1074},{"className":1073},[],[1075],{"type":50,"value":1076},"components\u002F",{"type":50,"value":1070},{"type":44,"tag":66,"props":1079,"children":1081},{"className":1080},[],[1082],{"type":50,"value":1083},"lib\u002Fui\u002F",{"type":50,"value":1070},{"type":44,"tag":66,"props":1086,"children":1088},{"className":1087},[],[1089],{"type":50,"value":1090},"app\u002Fcomponents\u002F",{"type":50,"value":1092},") if ",{"type":44,"tag":66,"props":1094,"children":1096},{"className":1095},[],[1097],{"type":50,"value":882},{"type":50,"value":1099}," doesn't specify paths",{"type":44,"tag":236,"props":1101,"children":1102},{},[1103],{"type":50,"value":1104},"Read candidate files and compare their props interface against the Figma properties from Step 3 — look for matching variant types, size options, boolean flags, and slot props",{"type":44,"tag":236,"props":1106,"children":1107},{},[1108],{"type":50,"value":1109},"If multiple candidates match, pick the one with the closest prop-interface match and explain your reasoning to the user",{"type":44,"tag":236,"props":1111,"children":1112},{},[1113],{"type":50,"value":1114},"If no match is found, show the 2 closest candidates and ask the user to confirm or provide the correct path",{"type":44,"tag":60,"props":1116,"children":1117},{},[1118,1123],{"type":44,"tag":82,"props":1119,"children":1120},{},[1121],{"type":50,"value":1122},"Confirm with the user",{"type":50,"value":1124}," before proceeding to Step 5. Present the match: which code component you found, where it lives, and why it matches (prop correspondence, naming, purpose).",{"type":44,"tag":60,"props":1126,"children":1127},{},[1128,1130,1135,1137,1142,1144,1149],{"type":50,"value":1129},"Read ",{"type":44,"tag":66,"props":1131,"children":1133},{"className":1132},[],[1134],{"type":50,"value":882},{"type":50,"value":1136}," for import path aliases — the ",{"type":44,"tag":66,"props":1138,"children":1140},{"className":1139},[],[1141],{"type":50,"value":1055},{"type":50,"value":1143}," section maps glob patterns to import specifiers, and the ",{"type":44,"tag":66,"props":1145,"children":1147},{"className":1146},[],[1148],{"type":50,"value":1048},{"type":50,"value":1150}," section maps those specifiers to directories.",{"type":44,"tag":60,"props":1152,"children":1153},{},[1154],{"type":50,"value":1155},"Read the code component's source to understand its props interface — this informs how to map Figma properties to code props in Step 5.",{"type":44,"tag":53,"props":1157,"children":1159},{"id":1158},"step-5-create-the-template-file-figmats",[1160],{"type":50,"value":1161},"Step 5: Create the Template File (.figma.ts)",{"type":44,"tag":1163,"props":1164,"children":1166},"h3",{"id":1165},"file-location",[1167],{"type":50,"value":1168},"File location",{"type":44,"tag":60,"props":1170,"children":1171},{},[1172,1174,1179,1180,1186,1188,1208,1210,1215],{"type":50,"value":1173},"Place the file alongside existing Code Connect files. Check ",{"type":44,"tag":66,"props":1175,"children":1177},{"className":1176},[],[1178],{"type":50,"value":882},{"type":50,"value":210},{"type":44,"tag":66,"props":1181,"children":1183},{"className":1182},[],[1184],{"type":50,"value":1185},"include",{"type":50,"value":1187}," patterns for the correct directory. ",{"type":44,"tag":82,"props":1189,"children":1190},{},[1191,1193,1199,1201,1207],{"type":50,"value":1192},"Name it ",{"type":44,"tag":66,"props":1194,"children":1196},{"className":1195},[],[1197],{"type":50,"value":1198},"ComponentName.figma.ts",{"type":50,"value":1200}," — never ",{"type":44,"tag":66,"props":1202,"children":1204},{"className":1203},[],[1205],{"type":50,"value":1206},"ComponentName.figma.tsx",{"type":50,"value":101},{"type":50,"value":1209}," The ",{"type":44,"tag":66,"props":1211,"children":1213},{"className":1212},[],[1214],{"type":50,"value":99},{"type":50,"value":1216}," extension is the parser-based format; do not create one or modify an existing one.",{"type":44,"tag":1163,"props":1218,"children":1220},{"id":1219},"template-structure",[1221],{"type":50,"value":1222},"Template structure",{"type":44,"tag":60,"props":1224,"children":1225},{},[1226],{"type":50,"value":1227},"Every template file follows this structure:",{"type":44,"tag":339,"props":1229,"children":1233},{"className":1230,"code":1231,"language":1232,"meta":344,"style":344},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F url=https:\u002F\u002Fwww.figma.com\u002Ffile\u002F{fileKey}\u002F{fileName}?node-id={nodeId}\n\u002F\u002F source={path to code component from Step 4}\n\u002F\u002F component={code component name from Step 4}\nimport figma from 'figma'\nconst instance = figma.selectedInstance\n\n\u002F\u002F Extract properties from the Figma component (see property mapping below)\n\u002F\u002F ...\n\nexport default {\n  example: figma.code`\u003CComponent ... \u002F>`,       \u002F\u002F Required: code snippet\n  imports: ['import { Component } from \"...\"'], \u002F\u002F Optional: import statements\n  id: 'component-name',                         \u002F\u002F Required: unique identifier\n  metadata: {                                    \u002F\u002F Optional\n    nestable: true,                              \u002F\u002F true = inline in parent, false = show as pill\n    props: {}                                    \u002F\u002F data accessible to parent templates\n  }\n}\n","ts",[1234],{"type":44,"tag":66,"props":1235,"children":1236},{"__ignoreMap":344},[1237,1246,1254,1262,1296,1328,1338,1347,1356,1364,1382,1433,1478,1513,1536,1564,1587,1595],{"type":44,"tag":350,"props":1238,"children":1239},{"class":352,"line":353},[1240],{"type":44,"tag":350,"props":1241,"children":1243},{"style":1242},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[1244],{"type":50,"value":1245},"\u002F\u002F url=https:\u002F\u002Fwww.figma.com\u002Ffile\u002F{fileKey}\u002F{fileName}?node-id={nodeId}\n",{"type":44,"tag":350,"props":1247,"children":1248},{"class":352,"line":363},[1249],{"type":44,"tag":350,"props":1250,"children":1251},{"style":1242},[1252],{"type":50,"value":1253},"\u002F\u002F source={path to code component from Step 4}\n",{"type":44,"tag":350,"props":1255,"children":1256},{"class":352,"line":393},[1257],{"type":44,"tag":350,"props":1258,"children":1259},{"style":1242},[1260],{"type":50,"value":1261},"\u002F\u002F component={code component name from Step 4}\n",{"type":44,"tag":350,"props":1263,"children":1264},{"class":352,"line":438},[1265,1271,1277,1282,1287,1291],{"type":44,"tag":350,"props":1266,"children":1268},{"style":1267},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[1269],{"type":50,"value":1270},"import",{"type":44,"tag":350,"props":1272,"children":1274},{"style":1273},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[1275],{"type":50,"value":1276}," figma ",{"type":44,"tag":350,"props":1278,"children":1279},{"style":1267},[1280],{"type":50,"value":1281},"from",{"type":44,"tag":350,"props":1283,"children":1284},{"style":357},[1285],{"type":50,"value":1286}," '",{"type":44,"tag":350,"props":1288,"children":1289},{"style":424},[1290],{"type":50,"value":8},{"type":44,"tag":350,"props":1292,"children":1293},{"style":357},[1294],{"type":50,"value":1295},"'\n",{"type":44,"tag":350,"props":1297,"children":1298},{"class":352,"line":447},[1299,1304,1309,1314,1319,1323],{"type":44,"tag":350,"props":1300,"children":1301},{"style":372},[1302],{"type":50,"value":1303},"const",{"type":44,"tag":350,"props":1305,"children":1306},{"style":1273},[1307],{"type":50,"value":1308}," instance ",{"type":44,"tag":350,"props":1310,"children":1311},{"style":357},[1312],{"type":50,"value":1313},"=",{"type":44,"tag":350,"props":1315,"children":1316},{"style":1273},[1317],{"type":50,"value":1318}," figma",{"type":44,"tag":350,"props":1320,"children":1321},{"style":357},[1322],{"type":50,"value":101},{"type":44,"tag":350,"props":1324,"children":1325},{"style":1273},[1326],{"type":50,"value":1327},"selectedInstance\n",{"type":44,"tag":350,"props":1329,"children":1331},{"class":352,"line":1330},6,[1332],{"type":44,"tag":350,"props":1333,"children":1335},{"emptyLinePlaceholder":1334},true,[1336],{"type":50,"value":1337},"\n",{"type":44,"tag":350,"props":1339,"children":1341},{"class":352,"line":1340},7,[1342],{"type":44,"tag":350,"props":1343,"children":1344},{"style":1242},[1345],{"type":50,"value":1346},"\u002F\u002F Extract properties from the Figma component (see property mapping below)\n",{"type":44,"tag":350,"props":1348,"children":1350},{"class":352,"line":1349},8,[1351],{"type":44,"tag":350,"props":1352,"children":1353},{"style":1242},[1354],{"type":50,"value":1355},"\u002F\u002F ...\n",{"type":44,"tag":350,"props":1357,"children":1359},{"class":352,"line":1358},9,[1360],{"type":44,"tag":350,"props":1361,"children":1362},{"emptyLinePlaceholder":1334},[1363],{"type":50,"value":1337},{"type":44,"tag":350,"props":1365,"children":1367},{"class":352,"line":1366},10,[1368,1373,1378],{"type":44,"tag":350,"props":1369,"children":1370},{"style":1267},[1371],{"type":50,"value":1372},"export",{"type":44,"tag":350,"props":1374,"children":1375},{"style":1267},[1376],{"type":50,"value":1377}," default",{"type":44,"tag":350,"props":1379,"children":1380},{"style":357},[1381],{"type":50,"value":390},{"type":44,"tag":350,"props":1383,"children":1385},{"class":352,"line":1384},11,[1386,1392,1396,1400,1404,1409,1414,1419,1423,1428],{"type":44,"tag":350,"props":1387,"children":1389},{"style":1388},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[1390],{"type":50,"value":1391},"  example",{"type":44,"tag":350,"props":1393,"children":1394},{"style":357},[1395],{"type":50,"value":385},{"type":44,"tag":350,"props":1397,"children":1398},{"style":1273},[1399],{"type":50,"value":1318},{"type":44,"tag":350,"props":1401,"children":1402},{"style":357},[1403],{"type":50,"value":101},{"type":44,"tag":350,"props":1405,"children":1407},{"style":1406},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[1408],{"type":50,"value":66},{"type":44,"tag":350,"props":1410,"children":1411},{"style":357},[1412],{"type":50,"value":1413},"`",{"type":44,"tag":350,"props":1415,"children":1416},{"style":424},[1417],{"type":50,"value":1418},"\u003CComponent ... \u002F>",{"type":44,"tag":350,"props":1420,"children":1421},{"style":357},[1422],{"type":50,"value":1413},{"type":44,"tag":350,"props":1424,"children":1425},{"style":357},[1426],{"type":50,"value":1427},",",{"type":44,"tag":350,"props":1429,"children":1430},{"style":1242},[1431],{"type":50,"value":1432},"       \u002F\u002F Required: code snippet\n",{"type":44,"tag":350,"props":1434,"children":1436},{"class":352,"line":1435},12,[1437,1442,1446,1450,1455,1460,1464,1469,1473],{"type":44,"tag":350,"props":1438,"children":1439},{"style":1388},[1440],{"type":50,"value":1441},"  imports",{"type":44,"tag":350,"props":1443,"children":1444},{"style":357},[1445],{"type":50,"value":385},{"type":44,"tag":350,"props":1447,"children":1448},{"style":1273},[1449],{"type":50,"value":417},{"type":44,"tag":350,"props":1451,"children":1452},{"style":357},[1453],{"type":50,"value":1454},"'",{"type":44,"tag":350,"props":1456,"children":1457},{"style":424},[1458],{"type":50,"value":1459},"import { Component } from \"...\"",{"type":44,"tag":350,"props":1461,"children":1462},{"style":357},[1463],{"type":50,"value":1454},{"type":44,"tag":350,"props":1465,"children":1466},{"style":1273},[1467],{"type":50,"value":1468},"]",{"type":44,"tag":350,"props":1470,"children":1471},{"style":357},[1472],{"type":50,"value":1427},{"type":44,"tag":350,"props":1474,"children":1475},{"style":1242},[1476],{"type":50,"value":1477}," \u002F\u002F Optional: import statements\n",{"type":44,"tag":350,"props":1479,"children":1481},{"class":352,"line":1480},13,[1482,1487,1491,1495,1500,1504,1508],{"type":44,"tag":350,"props":1483,"children":1484},{"style":1388},[1485],{"type":50,"value":1486},"  id",{"type":44,"tag":350,"props":1488,"children":1489},{"style":357},[1490],{"type":50,"value":385},{"type":44,"tag":350,"props":1492,"children":1493},{"style":357},[1494],{"type":50,"value":1286},{"type":44,"tag":350,"props":1496,"children":1497},{"style":424},[1498],{"type":50,"value":1499},"component-name",{"type":44,"tag":350,"props":1501,"children":1502},{"style":357},[1503],{"type":50,"value":1454},{"type":44,"tag":350,"props":1505,"children":1506},{"style":357},[1507],{"type":50,"value":1427},{"type":44,"tag":350,"props":1509,"children":1510},{"style":1242},[1511],{"type":50,"value":1512},"                         \u002F\u002F Required: unique identifier\n",{"type":44,"tag":350,"props":1514,"children":1516},{"class":352,"line":1515},14,[1517,1522,1526,1531],{"type":44,"tag":350,"props":1518,"children":1519},{"style":1388},[1520],{"type":50,"value":1521},"  metadata",{"type":44,"tag":350,"props":1523,"children":1524},{"style":357},[1525],{"type":50,"value":385},{"type":44,"tag":350,"props":1527,"children":1528},{"style":357},[1529],{"type":50,"value":1530}," {",{"type":44,"tag":350,"props":1532,"children":1533},{"style":1242},[1534],{"type":50,"value":1535},"                                    \u002F\u002F Optional\n",{"type":44,"tag":350,"props":1537,"children":1539},{"class":352,"line":1538},15,[1540,1545,1549,1555,1559],{"type":44,"tag":350,"props":1541,"children":1542},{"style":1388},[1543],{"type":50,"value":1544},"    nestable",{"type":44,"tag":350,"props":1546,"children":1547},{"style":357},[1548],{"type":50,"value":385},{"type":44,"tag":350,"props":1550,"children":1552},{"style":1551},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[1553],{"type":50,"value":1554}," true",{"type":44,"tag":350,"props":1556,"children":1557},{"style":357},[1558],{"type":50,"value":1427},{"type":44,"tag":350,"props":1560,"children":1561},{"style":1242},[1562],{"type":50,"value":1563},"                              \u002F\u002F true = inline in parent, false = show as pill\n",{"type":44,"tag":350,"props":1565,"children":1567},{"class":352,"line":1566},16,[1568,1573,1577,1582],{"type":44,"tag":350,"props":1569,"children":1570},{"style":1388},[1571],{"type":50,"value":1572},"    props",{"type":44,"tag":350,"props":1574,"children":1575},{"style":357},[1576],{"type":50,"value":385},{"type":44,"tag":350,"props":1578,"children":1579},{"style":357},[1580],{"type":50,"value":1581}," {}",{"type":44,"tag":350,"props":1583,"children":1584},{"style":1242},[1585],{"type":50,"value":1586},"                                    \u002F\u002F data accessible to parent templates\n",{"type":44,"tag":350,"props":1588,"children":1590},{"class":352,"line":1589},17,[1591],{"type":44,"tag":350,"props":1592,"children":1593},{"style":357},[1594],{"type":50,"value":444},{"type":44,"tag":350,"props":1596,"children":1598},{"class":352,"line":1597},18,[1599],{"type":44,"tag":350,"props":1600,"children":1601},{"style":357},[1602],{"type":50,"value":453},{"type":44,"tag":1163,"props":1604,"children":1606},{"id":1605},"property-mapping",[1607],{"type":50,"value":1608},"Property mapping",{"type":44,"tag":60,"props":1610,"children":1611},{},[1612],{"type":50,"value":1613},"Use the property list from Step 3 to extract values. For each Figma property type, use the corresponding method:",{"type":44,"tag":482,"props":1615,"children":1616},{},[1617,1638],{"type":44,"tag":486,"props":1618,"children":1619},{},[1620],{"type":44,"tag":490,"props":1621,"children":1622},{},[1623,1628,1633],{"type":44,"tag":494,"props":1624,"children":1625},{},[1626],{"type":50,"value":1627},"Figma Property Type",{"type":44,"tag":494,"props":1629,"children":1630},{},[1631],{"type":50,"value":1632},"Template Method",{"type":44,"tag":494,"props":1634,"children":1635},{},[1636],{"type":50,"value":1637},"When to Use",{"type":44,"tag":508,"props":1639,"children":1640},{},[1641,1662,1683,1704,1740,1765,1787],{"type":44,"tag":490,"props":1642,"children":1643},{},[1644,1648,1657],{"type":44,"tag":515,"props":1645,"children":1646},{},[1647],{"type":50,"value":960},{"type":44,"tag":515,"props":1649,"children":1650},{},[1651],{"type":44,"tag":66,"props":1652,"children":1654},{"className":1653},[],[1655],{"type":50,"value":1656},"instance.getString('Name')",{"type":44,"tag":515,"props":1658,"children":1659},{},[1660],{"type":50,"value":1661},"Labels, titles, placeholder text",{"type":44,"tag":490,"props":1663,"children":1664},{},[1665,1669,1678],{"type":44,"tag":515,"props":1666,"children":1667},{},[1668],{"type":50,"value":970},{"type":44,"tag":515,"props":1670,"children":1671},{},[1672],{"type":44,"tag":66,"props":1673,"children":1675},{"className":1674},[],[1676],{"type":50,"value":1677},"instance.getBoolean('Name', { true: ..., false: ... })",{"type":44,"tag":515,"props":1679,"children":1680},{},[1681],{"type":50,"value":1682},"Toggle visibility, conditional props",{"type":44,"tag":490,"props":1684,"children":1685},{},[1686,1690,1699],{"type":44,"tag":515,"props":1687,"children":1688},{},[1689],{"type":50,"value":980},{"type":44,"tag":515,"props":1691,"children":1692},{},[1693],{"type":44,"tag":66,"props":1694,"children":1696},{"className":1695},[],[1697],{"type":50,"value":1698},"instance.getEnum('Name', { 'FigmaVal': 'codeVal' })",{"type":44,"tag":515,"props":1700,"children":1701},{},[1702],{"type":50,"value":1703},"Size, variant, state enums",{"type":44,"tag":490,"props":1705,"children":1706},{},[1707,1711,1720],{"type":44,"tag":515,"props":1708,"children":1709},{},[1710],{"type":50,"value":990},{"type":44,"tag":515,"props":1712,"children":1713},{},[1714],{"type":44,"tag":66,"props":1715,"children":1717},{"className":1716},[],[1718],{"type":50,"value":1719},"instance.getInstanceSwap('Name')",{"type":44,"tag":515,"props":1721,"children":1722},{},[1723,1725,1731,1732,1738],{"type":50,"value":1724},"Swapped instance for a fixed component slot (then ",{"type":44,"tag":66,"props":1726,"children":1728},{"className":1727},[],[1729],{"type":50,"value":1730},"hasCodeConnect()",{"type":50,"value":196},{"type":44,"tag":66,"props":1733,"children":1735},{"className":1734},[],[1736],{"type":50,"value":1737},"executeTemplate()",{"type":50,"value":1739},") - do not confuse with the SLOT property below",{"type":44,"tag":490,"props":1741,"children":1742},{},[1743,1747,1756],{"type":44,"tag":515,"props":1744,"children":1745},{},[1746],{"type":50,"value":1000},{"type":44,"tag":515,"props":1748,"children":1749},{},[1750],{"type":44,"tag":66,"props":1751,"children":1753},{"className":1752},[],[1754],{"type":50,"value":1755},"instance.getSlot('Name')",{"type":44,"tag":515,"props":1757,"children":1758},{},[1759,1761],{"type":50,"value":1760},"Freeform slot content only when the Figma property type is ",{"type":44,"tag":82,"props":1762,"children":1763},{},[1764],{"type":50,"value":1000},{"type":44,"tag":490,"props":1766,"children":1767},{},[1768,1773,1782],{"type":44,"tag":515,"props":1769,"children":1770},{},[1771],{"type":50,"value":1772},"(child layer)",{"type":44,"tag":515,"props":1774,"children":1775},{},[1776],{"type":44,"tag":66,"props":1777,"children":1779},{"className":1778},[],[1780],{"type":50,"value":1781},"instance.findInstance('LayerName')",{"type":44,"tag":515,"props":1783,"children":1784},{},[1785],{"type":50,"value":1786},"Named child instances without a property",{"type":44,"tag":490,"props":1788,"children":1789},{},[1790,1795,1811],{"type":44,"tag":515,"props":1791,"children":1792},{},[1793],{"type":50,"value":1794},"(text layer)",{"type":44,"tag":515,"props":1796,"children":1797},{},[1798,1804,1805],{"type":44,"tag":66,"props":1799,"children":1801},{"className":1800},[],[1802],{"type":50,"value":1803},"instance.findText('LayerName')",{"type":50,"value":543},{"type":44,"tag":66,"props":1806,"children":1808},{"className":1807},[],[1809],{"type":50,"value":1810},".textContent",{"type":44,"tag":515,"props":1812,"children":1813},{},[1814],{"type":50,"value":1815},"Text content from named layers",{"type":44,"tag":60,"props":1817,"children":1818},{},[1819,1823],{"type":44,"tag":82,"props":1820,"children":1821},{},[1822],{"type":50,"value":960},{"type":50,"value":1824}," — get the string value directly:",{"type":44,"tag":339,"props":1826,"children":1828},{"className":1230,"code":1827,"language":1232,"meta":344,"style":344},"const label = instance.getString('Label')\n",[1829],{"type":44,"tag":66,"props":1830,"children":1831},{"__ignoreMap":344},[1832],{"type":44,"tag":350,"props":1833,"children":1834},{"class":352,"line":353},[1835,1839,1844,1848,1853,1857,1862,1867,1871,1876,1880],{"type":44,"tag":350,"props":1836,"children":1837},{"style":372},[1838],{"type":50,"value":1303},{"type":44,"tag":350,"props":1840,"children":1841},{"style":1273},[1842],{"type":50,"value":1843}," label ",{"type":44,"tag":350,"props":1845,"children":1846},{"style":357},[1847],{"type":50,"value":1313},{"type":44,"tag":350,"props":1849,"children":1850},{"style":1273},[1851],{"type":50,"value":1852}," instance",{"type":44,"tag":350,"props":1854,"children":1855},{"style":357},[1856],{"type":50,"value":101},{"type":44,"tag":350,"props":1858,"children":1859},{"style":1406},[1860],{"type":50,"value":1861},"getString",{"type":44,"tag":350,"props":1863,"children":1864},{"style":1273},[1865],{"type":50,"value":1866},"(",{"type":44,"tag":350,"props":1868,"children":1869},{"style":357},[1870],{"type":50,"value":1454},{"type":44,"tag":350,"props":1872,"children":1873},{"style":424},[1874],{"type":50,"value":1875},"Label",{"type":44,"tag":350,"props":1877,"children":1878},{"style":357},[1879],{"type":50,"value":1454},{"type":44,"tag":350,"props":1881,"children":1882},{"style":1273},[1883],{"type":50,"value":1884},")\n",{"type":44,"tag":60,"props":1886,"children":1887},{},[1888,1892],{"type":44,"tag":82,"props":1889,"children":1890},{},[1891],{"type":50,"value":980},{"type":50,"value":1893}," — map Figma enum values to code values:",{"type":44,"tag":339,"props":1895,"children":1897},{"className":1230,"code":1896,"language":1232,"meta":344,"style":344},"const variant = instance.getEnum('Variant', {\n  'Primary': 'primary',\n  'Secondary': 'secondary',\n})\n\nconst size = instance.getEnum('Size', {\n  'Small': 'sm',\n  'Medium': 'md',\n  'Large': 'lg',\n})\n",[1898],{"type":44,"tag":66,"props":1899,"children":1900},{"__ignoreMap":344},[1901,1955,1994,2031,2043,2050,2103,2140,2177,2214],{"type":44,"tag":350,"props":1902,"children":1903},{"class":352,"line":353},[1904,1908,1913,1917,1921,1925,1930,1934,1938,1943,1947,1951],{"type":44,"tag":350,"props":1905,"children":1906},{"style":372},[1907],{"type":50,"value":1303},{"type":44,"tag":350,"props":1909,"children":1910},{"style":1273},[1911],{"type":50,"value":1912}," variant ",{"type":44,"tag":350,"props":1914,"children":1915},{"style":357},[1916],{"type":50,"value":1313},{"type":44,"tag":350,"props":1918,"children":1919},{"style":1273},[1920],{"type":50,"value":1852},{"type":44,"tag":350,"props":1922,"children":1923},{"style":357},[1924],{"type":50,"value":101},{"type":44,"tag":350,"props":1926,"children":1927},{"style":1406},[1928],{"type":50,"value":1929},"getEnum",{"type":44,"tag":350,"props":1931,"children":1932},{"style":1273},[1933],{"type":50,"value":1866},{"type":44,"tag":350,"props":1935,"children":1936},{"style":357},[1937],{"type":50,"value":1454},{"type":44,"tag":350,"props":1939,"children":1940},{"style":424},[1941],{"type":50,"value":1942},"Variant",{"type":44,"tag":350,"props":1944,"children":1945},{"style":357},[1946],{"type":50,"value":1454},{"type":44,"tag":350,"props":1948,"children":1949},{"style":357},[1950],{"type":50,"value":1427},{"type":44,"tag":350,"props":1952,"children":1953},{"style":357},[1954],{"type":50,"value":390},{"type":44,"tag":350,"props":1956,"children":1957},{"class":352,"line":363},[1958,1963,1968,1972,1976,1980,1985,1989],{"type":44,"tag":350,"props":1959,"children":1960},{"style":357},[1961],{"type":50,"value":1962},"  '",{"type":44,"tag":350,"props":1964,"children":1965},{"style":1388},[1966],{"type":50,"value":1967},"Primary",{"type":44,"tag":350,"props":1969,"children":1970},{"style":357},[1971],{"type":50,"value":1454},{"type":44,"tag":350,"props":1973,"children":1974},{"style":357},[1975],{"type":50,"value":385},{"type":44,"tag":350,"props":1977,"children":1978},{"style":357},[1979],{"type":50,"value":1286},{"type":44,"tag":350,"props":1981,"children":1982},{"style":424},[1983],{"type":50,"value":1984},"primary",{"type":44,"tag":350,"props":1986,"children":1987},{"style":357},[1988],{"type":50,"value":1454},{"type":44,"tag":350,"props":1990,"children":1991},{"style":357},[1992],{"type":50,"value":1993},",\n",{"type":44,"tag":350,"props":1995,"children":1996},{"class":352,"line":393},[1997,2001,2006,2010,2014,2018,2023,2027],{"type":44,"tag":350,"props":1998,"children":1999},{"style":357},[2000],{"type":50,"value":1962},{"type":44,"tag":350,"props":2002,"children":2003},{"style":1388},[2004],{"type":50,"value":2005},"Secondary",{"type":44,"tag":350,"props":2007,"children":2008},{"style":357},[2009],{"type":50,"value":1454},{"type":44,"tag":350,"props":2011,"children":2012},{"style":357},[2013],{"type":50,"value":385},{"type":44,"tag":350,"props":2015,"children":2016},{"style":357},[2017],{"type":50,"value":1286},{"type":44,"tag":350,"props":2019,"children":2020},{"style":424},[2021],{"type":50,"value":2022},"secondary",{"type":44,"tag":350,"props":2024,"children":2025},{"style":357},[2026],{"type":50,"value":1454},{"type":44,"tag":350,"props":2028,"children":2029},{"style":357},[2030],{"type":50,"value":1993},{"type":44,"tag":350,"props":2032,"children":2033},{"class":352,"line":438},[2034,2039],{"type":44,"tag":350,"props":2035,"children":2036},{"style":357},[2037],{"type":50,"value":2038},"}",{"type":44,"tag":350,"props":2040,"children":2041},{"style":1273},[2042],{"type":50,"value":1884},{"type":44,"tag":350,"props":2044,"children":2045},{"class":352,"line":447},[2046],{"type":44,"tag":350,"props":2047,"children":2048},{"emptyLinePlaceholder":1334},[2049],{"type":50,"value":1337},{"type":44,"tag":350,"props":2051,"children":2052},{"class":352,"line":1330},[2053,2057,2062,2066,2070,2074,2078,2082,2086,2091,2095,2099],{"type":44,"tag":350,"props":2054,"children":2055},{"style":372},[2056],{"type":50,"value":1303},{"type":44,"tag":350,"props":2058,"children":2059},{"style":1273},[2060],{"type":50,"value":2061}," size ",{"type":44,"tag":350,"props":2063,"children":2064},{"style":357},[2065],{"type":50,"value":1313},{"type":44,"tag":350,"props":2067,"children":2068},{"style":1273},[2069],{"type":50,"value":1852},{"type":44,"tag":350,"props":2071,"children":2072},{"style":357},[2073],{"type":50,"value":101},{"type":44,"tag":350,"props":2075,"children":2076},{"style":1406},[2077],{"type":50,"value":1929},{"type":44,"tag":350,"props":2079,"children":2080},{"style":1273},[2081],{"type":50,"value":1866},{"type":44,"tag":350,"props":2083,"children":2084},{"style":357},[2085],{"type":50,"value":1454},{"type":44,"tag":350,"props":2087,"children":2088},{"style":424},[2089],{"type":50,"value":2090},"Size",{"type":44,"tag":350,"props":2092,"children":2093},{"style":357},[2094],{"type":50,"value":1454},{"type":44,"tag":350,"props":2096,"children":2097},{"style":357},[2098],{"type":50,"value":1427},{"type":44,"tag":350,"props":2100,"children":2101},{"style":357},[2102],{"type":50,"value":390},{"type":44,"tag":350,"props":2104,"children":2105},{"class":352,"line":1340},[2106,2110,2115,2119,2123,2127,2132,2136],{"type":44,"tag":350,"props":2107,"children":2108},{"style":357},[2109],{"type":50,"value":1962},{"type":44,"tag":350,"props":2111,"children":2112},{"style":1388},[2113],{"type":50,"value":2114},"Small",{"type":44,"tag":350,"props":2116,"children":2117},{"style":357},[2118],{"type":50,"value":1454},{"type":44,"tag":350,"props":2120,"children":2121},{"style":357},[2122],{"type":50,"value":385},{"type":44,"tag":350,"props":2124,"children":2125},{"style":357},[2126],{"type":50,"value":1286},{"type":44,"tag":350,"props":2128,"children":2129},{"style":424},[2130],{"type":50,"value":2131},"sm",{"type":44,"tag":350,"props":2133,"children":2134},{"style":357},[2135],{"type":50,"value":1454},{"type":44,"tag":350,"props":2137,"children":2138},{"style":357},[2139],{"type":50,"value":1993},{"type":44,"tag":350,"props":2141,"children":2142},{"class":352,"line":1349},[2143,2147,2152,2156,2160,2164,2169,2173],{"type":44,"tag":350,"props":2144,"children":2145},{"style":357},[2146],{"type":50,"value":1962},{"type":44,"tag":350,"props":2148,"children":2149},{"style":1388},[2150],{"type":50,"value":2151},"Medium",{"type":44,"tag":350,"props":2153,"children":2154},{"style":357},[2155],{"type":50,"value":1454},{"type":44,"tag":350,"props":2157,"children":2158},{"style":357},[2159],{"type":50,"value":385},{"type":44,"tag":350,"props":2161,"children":2162},{"style":357},[2163],{"type":50,"value":1286},{"type":44,"tag":350,"props":2165,"children":2166},{"style":424},[2167],{"type":50,"value":2168},"md",{"type":44,"tag":350,"props":2170,"children":2171},{"style":357},[2172],{"type":50,"value":1454},{"type":44,"tag":350,"props":2174,"children":2175},{"style":357},[2176],{"type":50,"value":1993},{"type":44,"tag":350,"props":2178,"children":2179},{"class":352,"line":1358},[2180,2184,2189,2193,2197,2201,2206,2210],{"type":44,"tag":350,"props":2181,"children":2182},{"style":357},[2183],{"type":50,"value":1962},{"type":44,"tag":350,"props":2185,"children":2186},{"style":1388},[2187],{"type":50,"value":2188},"Large",{"type":44,"tag":350,"props":2190,"children":2191},{"style":357},[2192],{"type":50,"value":1454},{"type":44,"tag":350,"props":2194,"children":2195},{"style":357},[2196],{"type":50,"value":385},{"type":44,"tag":350,"props":2198,"children":2199},{"style":357},[2200],{"type":50,"value":1286},{"type":44,"tag":350,"props":2202,"children":2203},{"style":424},[2204],{"type":50,"value":2205},"lg",{"type":44,"tag":350,"props":2207,"children":2208},{"style":357},[2209],{"type":50,"value":1454},{"type":44,"tag":350,"props":2211,"children":2212},{"style":357},[2213],{"type":50,"value":1993},{"type":44,"tag":350,"props":2215,"children":2216},{"class":352,"line":1366},[2217,2221],{"type":44,"tag":350,"props":2218,"children":2219},{"style":357},[2220],{"type":50,"value":2038},{"type":44,"tag":350,"props":2222,"children":2223},{"style":1273},[2224],{"type":50,"value":1884},{"type":44,"tag":60,"props":2226,"children":2227},{},[2228,2232],{"type":44,"tag":82,"props":2229,"children":2230},{},[2231],{"type":50,"value":970},{"type":50,"value":2233}," — simple boolean or mapped to values:",{"type":44,"tag":339,"props":2235,"children":2237},{"className":1230,"code":2236,"language":1232,"meta":344,"style":344},"\u002F\u002F Simple boolean\nconst disabled = instance.getBoolean('Disabled')\n\n\u002F\u002F Mapped to code values (e.g. when the code prop is an enum, not a boolean)\nconst size = instance.getBoolean('Show Label', { true: 'large', false: 'small' })\n",[2238],{"type":44,"tag":66,"props":2239,"children":2240},{"__ignoreMap":344},[2241,2249,2299,2306,2314],{"type":44,"tag":350,"props":2242,"children":2243},{"class":352,"line":353},[2244],{"type":44,"tag":350,"props":2245,"children":2246},{"style":1242},[2247],{"type":50,"value":2248},"\u002F\u002F Simple boolean\n",{"type":44,"tag":350,"props":2250,"children":2251},{"class":352,"line":363},[2252,2256,2261,2265,2269,2273,2278,2282,2286,2291,2295],{"type":44,"tag":350,"props":2253,"children":2254},{"style":372},[2255],{"type":50,"value":1303},{"type":44,"tag":350,"props":2257,"children":2258},{"style":1273},[2259],{"type":50,"value":2260}," disabled ",{"type":44,"tag":350,"props":2262,"children":2263},{"style":357},[2264],{"type":50,"value":1313},{"type":44,"tag":350,"props":2266,"children":2267},{"style":1273},[2268],{"type":50,"value":1852},{"type":44,"tag":350,"props":2270,"children":2271},{"style":357},[2272],{"type":50,"value":101},{"type":44,"tag":350,"props":2274,"children":2275},{"style":1406},[2276],{"type":50,"value":2277},"getBoolean",{"type":44,"tag":350,"props":2279,"children":2280},{"style":1273},[2281],{"type":50,"value":1866},{"type":44,"tag":350,"props":2283,"children":2284},{"style":357},[2285],{"type":50,"value":1454},{"type":44,"tag":350,"props":2287,"children":2288},{"style":424},[2289],{"type":50,"value":2290},"Disabled",{"type":44,"tag":350,"props":2292,"children":2293},{"style":357},[2294],{"type":50,"value":1454},{"type":44,"tag":350,"props":2296,"children":2297},{"style":1273},[2298],{"type":50,"value":1884},{"type":44,"tag":350,"props":2300,"children":2301},{"class":352,"line":393},[2302],{"type":44,"tag":350,"props":2303,"children":2304},{"emptyLinePlaceholder":1334},[2305],{"type":50,"value":1337},{"type":44,"tag":350,"props":2307,"children":2308},{"class":352,"line":438},[2309],{"type":44,"tag":350,"props":2310,"children":2311},{"style":1242},[2312],{"type":50,"value":2313},"\u002F\u002F Mapped to code values (e.g. when the code prop is an enum, not a boolean)\n",{"type":44,"tag":350,"props":2315,"children":2316},{"class":352,"line":447},[2317,2321,2325,2329,2333,2337,2341,2345,2349,2354,2358,2362,2366,2370,2374,2378,2383,2387,2391,2396,2400,2404,2409,2413,2418],{"type":44,"tag":350,"props":2318,"children":2319},{"style":372},[2320],{"type":50,"value":1303},{"type":44,"tag":350,"props":2322,"children":2323},{"style":1273},[2324],{"type":50,"value":2061},{"type":44,"tag":350,"props":2326,"children":2327},{"style":357},[2328],{"type":50,"value":1313},{"type":44,"tag":350,"props":2330,"children":2331},{"style":1273},[2332],{"type":50,"value":1852},{"type":44,"tag":350,"props":2334,"children":2335},{"style":357},[2336],{"type":50,"value":101},{"type":44,"tag":350,"props":2338,"children":2339},{"style":1406},[2340],{"type":50,"value":2277},{"type":44,"tag":350,"props":2342,"children":2343},{"style":1273},[2344],{"type":50,"value":1866},{"type":44,"tag":350,"props":2346,"children":2347},{"style":357},[2348],{"type":50,"value":1454},{"type":44,"tag":350,"props":2350,"children":2351},{"style":424},[2352],{"type":50,"value":2353},"Show Label",{"type":44,"tag":350,"props":2355,"children":2356},{"style":357},[2357],{"type":50,"value":1454},{"type":44,"tag":350,"props":2359,"children":2360},{"style":357},[2361],{"type":50,"value":1427},{"type":44,"tag":350,"props":2363,"children":2364},{"style":357},[2365],{"type":50,"value":1530},{"type":44,"tag":350,"props":2367,"children":2368},{"style":1388},[2369],{"type":50,"value":1554},{"type":44,"tag":350,"props":2371,"children":2372},{"style":357},[2373],{"type":50,"value":385},{"type":44,"tag":350,"props":2375,"children":2376},{"style":357},[2377],{"type":50,"value":1286},{"type":44,"tag":350,"props":2379,"children":2380},{"style":424},[2381],{"type":50,"value":2382},"large",{"type":44,"tag":350,"props":2384,"children":2385},{"style":357},[2386],{"type":50,"value":1454},{"type":44,"tag":350,"props":2388,"children":2389},{"style":357},[2390],{"type":50,"value":1427},{"type":44,"tag":350,"props":2392,"children":2393},{"style":1388},[2394],{"type":50,"value":2395}," false",{"type":44,"tag":350,"props":2397,"children":2398},{"style":357},[2399],{"type":50,"value":385},{"type":44,"tag":350,"props":2401,"children":2402},{"style":357},[2403],{"type":50,"value":1286},{"type":44,"tag":350,"props":2405,"children":2406},{"style":424},[2407],{"type":50,"value":2408},"small",{"type":44,"tag":350,"props":2410,"children":2411},{"style":357},[2412],{"type":50,"value":1454},{"type":44,"tag":350,"props":2414,"children":2415},{"style":357},[2416],{"type":50,"value":2417}," }",{"type":44,"tag":350,"props":2419,"children":2420},{"style":1273},[2421],{"type":50,"value":1884},{"type":44,"tag":60,"props":2423,"children":2424},{},[2425,2430,2432,2438],{"type":44,"tag":82,"props":2426,"children":2427},{},[2428],{"type":50,"value":2429},"Map Figma properties to code props where there's a valid correspondence.",{"type":50,"value":2431}," Figma properties and code props don't always line up 1:1 — some Figma properties map directly (by name, or via the API methods above), others have no code equivalent. Where a mapping exists, use it; where none fits, omit the Figma property rather than invent a code prop. Never emit an attribute whose name doesn't appear in the code component's ",{"type":44,"tag":66,"props":2433,"children":2435},{"className":2434},[],[2436],{"type":50,"value":2437},"Props",{"type":50,"value":2439}," interface.",{"type":44,"tag":1163,"props":2441,"children":2443},{"id":2442},"exhaustive-variant-handling",[2444],{"type":50,"value":2445},"Exhaustive variant handling",{"type":44,"tag":60,"props":2447,"children":2448},{},[2449,2451,2456,2458,2463,2465,2470,2472,2478],{"type":50,"value":2450},"When a VARIANT property has multiple possible values, the ",{"type":44,"tag":66,"props":2452,"children":2454},{"className":2453},[],[2455],{"type":50,"value":1929},{"type":50,"value":2457}," mapping ",{"type":44,"tag":82,"props":2459,"children":2460},{},[2461],{"type":50,"value":2462},"must list every value",{"type":50,"value":2464}," returned by ",{"type":44,"tag":66,"props":2466,"children":2468},{"className":2467},[],[2469],{"type":50,"value":835},{"type":50,"value":2471},". Don't omit values — an unmapped value silently returns ",{"type":44,"tag":66,"props":2473,"children":2475},{"className":2474},[],[2476],{"type":50,"value":2477},"undefined",{"type":50,"value":2479},", producing broken output.",{"type":44,"tag":339,"props":2481,"children":2483},{"className":1230,"code":2482,"language":1232,"meta":344,"style":344},"\u002F\u002F WRONG — omits 'Warning', which will render as undefined\nconst status = instance.getEnum('Status', {\n  'Success': 'success',\n  'Error': 'error',\n})\n\n\u002F\u002F CORRECT — every value is mapped\nconst status = instance.getEnum('Status', {\n  'Success': 'success',\n  'Error': 'error',\n  'Warning': 'warning',\n  'Info': 'info',\n})\n",[2484],{"type":44,"tag":66,"props":2485,"children":2486},{"__ignoreMap":344},[2487,2495,2548,2585,2622,2633,2640,2648,2699,2734,2769,2806,2843],{"type":44,"tag":350,"props":2488,"children":2489},{"class":352,"line":353},[2490],{"type":44,"tag":350,"props":2491,"children":2492},{"style":1242},[2493],{"type":50,"value":2494},"\u002F\u002F WRONG — omits 'Warning', which will render as undefined\n",{"type":44,"tag":350,"props":2496,"children":2497},{"class":352,"line":363},[2498,2502,2507,2511,2515,2519,2523,2527,2531,2536,2540,2544],{"type":44,"tag":350,"props":2499,"children":2500},{"style":372},[2501],{"type":50,"value":1303},{"type":44,"tag":350,"props":2503,"children":2504},{"style":1273},[2505],{"type":50,"value":2506}," status ",{"type":44,"tag":350,"props":2508,"children":2509},{"style":357},[2510],{"type":50,"value":1313},{"type":44,"tag":350,"props":2512,"children":2513},{"style":1273},[2514],{"type":50,"value":1852},{"type":44,"tag":350,"props":2516,"children":2517},{"style":357},[2518],{"type":50,"value":101},{"type":44,"tag":350,"props":2520,"children":2521},{"style":1406},[2522],{"type":50,"value":1929},{"type":44,"tag":350,"props":2524,"children":2525},{"style":1273},[2526],{"type":50,"value":1866},{"type":44,"tag":350,"props":2528,"children":2529},{"style":357},[2530],{"type":50,"value":1454},{"type":44,"tag":350,"props":2532,"children":2533},{"style":424},[2534],{"type":50,"value":2535},"Status",{"type":44,"tag":350,"props":2537,"children":2538},{"style":357},[2539],{"type":50,"value":1454},{"type":44,"tag":350,"props":2541,"children":2542},{"style":357},[2543],{"type":50,"value":1427},{"type":44,"tag":350,"props":2545,"children":2546},{"style":357},[2547],{"type":50,"value":390},{"type":44,"tag":350,"props":2549,"children":2550},{"class":352,"line":393},[2551,2555,2560,2564,2568,2572,2577,2581],{"type":44,"tag":350,"props":2552,"children":2553},{"style":357},[2554],{"type":50,"value":1962},{"type":44,"tag":350,"props":2556,"children":2557},{"style":1388},[2558],{"type":50,"value":2559},"Success",{"type":44,"tag":350,"props":2561,"children":2562},{"style":357},[2563],{"type":50,"value":1454},{"type":44,"tag":350,"props":2565,"children":2566},{"style":357},[2567],{"type":50,"value":385},{"type":44,"tag":350,"props":2569,"children":2570},{"style":357},[2571],{"type":50,"value":1286},{"type":44,"tag":350,"props":2573,"children":2574},{"style":424},[2575],{"type":50,"value":2576},"success",{"type":44,"tag":350,"props":2578,"children":2579},{"style":357},[2580],{"type":50,"value":1454},{"type":44,"tag":350,"props":2582,"children":2583},{"style":357},[2584],{"type":50,"value":1993},{"type":44,"tag":350,"props":2586,"children":2587},{"class":352,"line":438},[2588,2592,2597,2601,2605,2609,2614,2618],{"type":44,"tag":350,"props":2589,"children":2590},{"style":357},[2591],{"type":50,"value":1962},{"type":44,"tag":350,"props":2593,"children":2594},{"style":1388},[2595],{"type":50,"value":2596},"Error",{"type":44,"tag":350,"props":2598,"children":2599},{"style":357},[2600],{"type":50,"value":1454},{"type":44,"tag":350,"props":2602,"children":2603},{"style":357},[2604],{"type":50,"value":385},{"type":44,"tag":350,"props":2606,"children":2607},{"style":357},[2608],{"type":50,"value":1286},{"type":44,"tag":350,"props":2610,"children":2611},{"style":424},[2612],{"type":50,"value":2613},"error",{"type":44,"tag":350,"props":2615,"children":2616},{"style":357},[2617],{"type":50,"value":1454},{"type":44,"tag":350,"props":2619,"children":2620},{"style":357},[2621],{"type":50,"value":1993},{"type":44,"tag":350,"props":2623,"children":2624},{"class":352,"line":447},[2625,2629],{"type":44,"tag":350,"props":2626,"children":2627},{"style":357},[2628],{"type":50,"value":2038},{"type":44,"tag":350,"props":2630,"children":2631},{"style":1273},[2632],{"type":50,"value":1884},{"type":44,"tag":350,"props":2634,"children":2635},{"class":352,"line":1330},[2636],{"type":44,"tag":350,"props":2637,"children":2638},{"emptyLinePlaceholder":1334},[2639],{"type":50,"value":1337},{"type":44,"tag":350,"props":2641,"children":2642},{"class":352,"line":1340},[2643],{"type":44,"tag":350,"props":2644,"children":2645},{"style":1242},[2646],{"type":50,"value":2647},"\u002F\u002F CORRECT — every value is mapped\n",{"type":44,"tag":350,"props":2649,"children":2650},{"class":352,"line":1349},[2651,2655,2659,2663,2667,2671,2675,2679,2683,2687,2691,2695],{"type":44,"tag":350,"props":2652,"children":2653},{"style":372},[2654],{"type":50,"value":1303},{"type":44,"tag":350,"props":2656,"children":2657},{"style":1273},[2658],{"type":50,"value":2506},{"type":44,"tag":350,"props":2660,"children":2661},{"style":357},[2662],{"type":50,"value":1313},{"type":44,"tag":350,"props":2664,"children":2665},{"style":1273},[2666],{"type":50,"value":1852},{"type":44,"tag":350,"props":2668,"children":2669},{"style":357},[2670],{"type":50,"value":101},{"type":44,"tag":350,"props":2672,"children":2673},{"style":1406},[2674],{"type":50,"value":1929},{"type":44,"tag":350,"props":2676,"children":2677},{"style":1273},[2678],{"type":50,"value":1866},{"type":44,"tag":350,"props":2680,"children":2681},{"style":357},[2682],{"type":50,"value":1454},{"type":44,"tag":350,"props":2684,"children":2685},{"style":424},[2686],{"type":50,"value":2535},{"type":44,"tag":350,"props":2688,"children":2689},{"style":357},[2690],{"type":50,"value":1454},{"type":44,"tag":350,"props":2692,"children":2693},{"style":357},[2694],{"type":50,"value":1427},{"type":44,"tag":350,"props":2696,"children":2697},{"style":357},[2698],{"type":50,"value":390},{"type":44,"tag":350,"props":2700,"children":2701},{"class":352,"line":1358},[2702,2706,2710,2714,2718,2722,2726,2730],{"type":44,"tag":350,"props":2703,"children":2704},{"style":357},[2705],{"type":50,"value":1962},{"type":44,"tag":350,"props":2707,"children":2708},{"style":1388},[2709],{"type":50,"value":2559},{"type":44,"tag":350,"props":2711,"children":2712},{"style":357},[2713],{"type":50,"value":1454},{"type":44,"tag":350,"props":2715,"children":2716},{"style":357},[2717],{"type":50,"value":385},{"type":44,"tag":350,"props":2719,"children":2720},{"style":357},[2721],{"type":50,"value":1286},{"type":44,"tag":350,"props":2723,"children":2724},{"style":424},[2725],{"type":50,"value":2576},{"type":44,"tag":350,"props":2727,"children":2728},{"style":357},[2729],{"type":50,"value":1454},{"type":44,"tag":350,"props":2731,"children":2732},{"style":357},[2733],{"type":50,"value":1993},{"type":44,"tag":350,"props":2735,"children":2736},{"class":352,"line":1366},[2737,2741,2745,2749,2753,2757,2761,2765],{"type":44,"tag":350,"props":2738,"children":2739},{"style":357},[2740],{"type":50,"value":1962},{"type":44,"tag":350,"props":2742,"children":2743},{"style":1388},[2744],{"type":50,"value":2596},{"type":44,"tag":350,"props":2746,"children":2747},{"style":357},[2748],{"type":50,"value":1454},{"type":44,"tag":350,"props":2750,"children":2751},{"style":357},[2752],{"type":50,"value":385},{"type":44,"tag":350,"props":2754,"children":2755},{"style":357},[2756],{"type":50,"value":1286},{"type":44,"tag":350,"props":2758,"children":2759},{"style":424},[2760],{"type":50,"value":2613},{"type":44,"tag":350,"props":2762,"children":2763},{"style":357},[2764],{"type":50,"value":1454},{"type":44,"tag":350,"props":2766,"children":2767},{"style":357},[2768],{"type":50,"value":1993},{"type":44,"tag":350,"props":2770,"children":2771},{"class":352,"line":1384},[2772,2776,2781,2785,2789,2793,2798,2802],{"type":44,"tag":350,"props":2773,"children":2774},{"style":357},[2775],{"type":50,"value":1962},{"type":44,"tag":350,"props":2777,"children":2778},{"style":1388},[2779],{"type":50,"value":2780},"Warning",{"type":44,"tag":350,"props":2782,"children":2783},{"style":357},[2784],{"type":50,"value":1454},{"type":44,"tag":350,"props":2786,"children":2787},{"style":357},[2788],{"type":50,"value":385},{"type":44,"tag":350,"props":2790,"children":2791},{"style":357},[2792],{"type":50,"value":1286},{"type":44,"tag":350,"props":2794,"children":2795},{"style":424},[2796],{"type":50,"value":2797},"warning",{"type":44,"tag":350,"props":2799,"children":2800},{"style":357},[2801],{"type":50,"value":1454},{"type":44,"tag":350,"props":2803,"children":2804},{"style":357},[2805],{"type":50,"value":1993},{"type":44,"tag":350,"props":2807,"children":2808},{"class":352,"line":1435},[2809,2813,2818,2822,2826,2830,2835,2839],{"type":44,"tag":350,"props":2810,"children":2811},{"style":357},[2812],{"type":50,"value":1962},{"type":44,"tag":350,"props":2814,"children":2815},{"style":1388},[2816],{"type":50,"value":2817},"Info",{"type":44,"tag":350,"props":2819,"children":2820},{"style":357},[2821],{"type":50,"value":1454},{"type":44,"tag":350,"props":2823,"children":2824},{"style":357},[2825],{"type":50,"value":385},{"type":44,"tag":350,"props":2827,"children":2828},{"style":357},[2829],{"type":50,"value":1286},{"type":44,"tag":350,"props":2831,"children":2832},{"style":424},[2833],{"type":50,"value":2834},"info",{"type":44,"tag":350,"props":2836,"children":2837},{"style":357},[2838],{"type":50,"value":1454},{"type":44,"tag":350,"props":2840,"children":2841},{"style":357},[2842],{"type":50,"value":1993},{"type":44,"tag":350,"props":2844,"children":2845},{"class":352,"line":1480},[2846,2850],{"type":44,"tag":350,"props":2847,"children":2848},{"style":357},[2849],{"type":50,"value":2038},{"type":44,"tag":350,"props":2851,"children":2852},{"style":1273},[2853],{"type":50,"value":1884},{"type":44,"tag":60,"props":2855,"children":2856},{},[2857,2859,2864],{"type":50,"value":2858},"When ",{"type":44,"tag":82,"props":2860,"children":2861},{},[2862],{"type":50,"value":2863},"two or more VARIANT properties combine",{"type":50,"value":2865}," to produce different code output, generate exhaustive conditional branches. For example, 2 variants × 2 values = 4 branches:",{"type":44,"tag":339,"props":2867,"children":2869},{"className":1230,"code":2868,"language":1232,"meta":344,"style":344},"const type = instance.getEnum('Type', { 'Filled': 'filled', 'Outlined': 'outlined' })\nconst status = instance.getEnum('Status', { 'Success': 'success', 'Error': 'error' })\n\nlet colorClass\nif (type === 'filled' && status === 'success') {\n  colorClass = 'bg-green-500 text-white'\n} else if (type === 'filled' && status === 'error') {\n  colorClass = 'bg-red-500 text-white'\n} else if (type === 'outlined' && status === 'success') {\n  colorClass = 'bg-transparent border-green-500'\n} else if (type === 'outlined' && status === 'error') {\n  colorClass = 'bg-transparent border-red-500'\n}\n",[2870],{"type":44,"tag":66,"props":2871,"children":2872},{"__ignoreMap":344},[2873,2998,3117,3124,3137,3201,3227,3296,3320,3387,3411,3478,3502],{"type":44,"tag":350,"props":2874,"children":2875},{"class":352,"line":353},[2876,2880,2885,2889,2893,2897,2901,2905,2909,2914,2918,2922,2926,2930,2935,2939,2943,2947,2952,2956,2960,2964,2969,2973,2977,2981,2986,2990,2994],{"type":44,"tag":350,"props":2877,"children":2878},{"style":372},[2879],{"type":50,"value":1303},{"type":44,"tag":350,"props":2881,"children":2882},{"style":1273},[2883],{"type":50,"value":2884}," type ",{"type":44,"tag":350,"props":2886,"children":2887},{"style":357},[2888],{"type":50,"value":1313},{"type":44,"tag":350,"props":2890,"children":2891},{"style":1273},[2892],{"type":50,"value":1852},{"type":44,"tag":350,"props":2894,"children":2895},{"style":357},[2896],{"type":50,"value":101},{"type":44,"tag":350,"props":2898,"children":2899},{"style":1406},[2900],{"type":50,"value":1929},{"type":44,"tag":350,"props":2902,"children":2903},{"style":1273},[2904],{"type":50,"value":1866},{"type":44,"tag":350,"props":2906,"children":2907},{"style":357},[2908],{"type":50,"value":1454},{"type":44,"tag":350,"props":2910,"children":2911},{"style":424},[2912],{"type":50,"value":2913},"Type",{"type":44,"tag":350,"props":2915,"children":2916},{"style":357},[2917],{"type":50,"value":1454},{"type":44,"tag":350,"props":2919,"children":2920},{"style":357},[2921],{"type":50,"value":1427},{"type":44,"tag":350,"props":2923,"children":2924},{"style":357},[2925],{"type":50,"value":1530},{"type":44,"tag":350,"props":2927,"children":2928},{"style":357},[2929],{"type":50,"value":1286},{"type":44,"tag":350,"props":2931,"children":2932},{"style":1388},[2933],{"type":50,"value":2934},"Filled",{"type":44,"tag":350,"props":2936,"children":2937},{"style":357},[2938],{"type":50,"value":1454},{"type":44,"tag":350,"props":2940,"children":2941},{"style":357},[2942],{"type":50,"value":385},{"type":44,"tag":350,"props":2944,"children":2945},{"style":357},[2946],{"type":50,"value":1286},{"type":44,"tag":350,"props":2948,"children":2949},{"style":424},[2950],{"type":50,"value":2951},"filled",{"type":44,"tag":350,"props":2953,"children":2954},{"style":357},[2955],{"type":50,"value":1454},{"type":44,"tag":350,"props":2957,"children":2958},{"style":357},[2959],{"type":50,"value":1427},{"type":44,"tag":350,"props":2961,"children":2962},{"style":357},[2963],{"type":50,"value":1286},{"type":44,"tag":350,"props":2965,"children":2966},{"style":1388},[2967],{"type":50,"value":2968},"Outlined",{"type":44,"tag":350,"props":2970,"children":2971},{"style":357},[2972],{"type":50,"value":1454},{"type":44,"tag":350,"props":2974,"children":2975},{"style":357},[2976],{"type":50,"value":385},{"type":44,"tag":350,"props":2978,"children":2979},{"style":357},[2980],{"type":50,"value":1286},{"type":44,"tag":350,"props":2982,"children":2983},{"style":424},[2984],{"type":50,"value":2985},"outlined",{"type":44,"tag":350,"props":2987,"children":2988},{"style":357},[2989],{"type":50,"value":1454},{"type":44,"tag":350,"props":2991,"children":2992},{"style":357},[2993],{"type":50,"value":2417},{"type":44,"tag":350,"props":2995,"children":2996},{"style":1273},[2997],{"type":50,"value":1884},{"type":44,"tag":350,"props":2999,"children":3000},{"class":352,"line":363},[3001,3005,3009,3013,3017,3021,3025,3029,3033,3037,3041,3045,3049,3053,3057,3061,3065,3069,3073,3077,3081,3085,3089,3093,3097,3101,3105,3109,3113],{"type":44,"tag":350,"props":3002,"children":3003},{"style":372},[3004],{"type":50,"value":1303},{"type":44,"tag":350,"props":3006,"children":3007},{"style":1273},[3008],{"type":50,"value":2506},{"type":44,"tag":350,"props":3010,"children":3011},{"style":357},[3012],{"type":50,"value":1313},{"type":44,"tag":350,"props":3014,"children":3015},{"style":1273},[3016],{"type":50,"value":1852},{"type":44,"tag":350,"props":3018,"children":3019},{"style":357},[3020],{"type":50,"value":101},{"type":44,"tag":350,"props":3022,"children":3023},{"style":1406},[3024],{"type":50,"value":1929},{"type":44,"tag":350,"props":3026,"children":3027},{"style":1273},[3028],{"type":50,"value":1866},{"type":44,"tag":350,"props":3030,"children":3031},{"style":357},[3032],{"type":50,"value":1454},{"type":44,"tag":350,"props":3034,"children":3035},{"style":424},[3036],{"type":50,"value":2535},{"type":44,"tag":350,"props":3038,"children":3039},{"style":357},[3040],{"type":50,"value":1454},{"type":44,"tag":350,"props":3042,"children":3043},{"style":357},[3044],{"type":50,"value":1427},{"type":44,"tag":350,"props":3046,"children":3047},{"style":357},[3048],{"type":50,"value":1530},{"type":44,"tag":350,"props":3050,"children":3051},{"style":357},[3052],{"type":50,"value":1286},{"type":44,"tag":350,"props":3054,"children":3055},{"style":1388},[3056],{"type":50,"value":2559},{"type":44,"tag":350,"props":3058,"children":3059},{"style":357},[3060],{"type":50,"value":1454},{"type":44,"tag":350,"props":3062,"children":3063},{"style":357},[3064],{"type":50,"value":385},{"type":44,"tag":350,"props":3066,"children":3067},{"style":357},[3068],{"type":50,"value":1286},{"type":44,"tag":350,"props":3070,"children":3071},{"style":424},[3072],{"type":50,"value":2576},{"type":44,"tag":350,"props":3074,"children":3075},{"style":357},[3076],{"type":50,"value":1454},{"type":44,"tag":350,"props":3078,"children":3079},{"style":357},[3080],{"type":50,"value":1427},{"type":44,"tag":350,"props":3082,"children":3083},{"style":357},[3084],{"type":50,"value":1286},{"type":44,"tag":350,"props":3086,"children":3087},{"style":1388},[3088],{"type":50,"value":2596},{"type":44,"tag":350,"props":3090,"children":3091},{"style":357},[3092],{"type":50,"value":1454},{"type":44,"tag":350,"props":3094,"children":3095},{"style":357},[3096],{"type":50,"value":385},{"type":44,"tag":350,"props":3098,"children":3099},{"style":357},[3100],{"type":50,"value":1286},{"type":44,"tag":350,"props":3102,"children":3103},{"style":424},[3104],{"type":50,"value":2613},{"type":44,"tag":350,"props":3106,"children":3107},{"style":357},[3108],{"type":50,"value":1454},{"type":44,"tag":350,"props":3110,"children":3111},{"style":357},[3112],{"type":50,"value":2417},{"type":44,"tag":350,"props":3114,"children":3115},{"style":1273},[3116],{"type":50,"value":1884},{"type":44,"tag":350,"props":3118,"children":3119},{"class":352,"line":393},[3120],{"type":44,"tag":350,"props":3121,"children":3122},{"emptyLinePlaceholder":1334},[3123],{"type":50,"value":1337},{"type":44,"tag":350,"props":3125,"children":3126},{"class":352,"line":438},[3127,3132],{"type":44,"tag":350,"props":3128,"children":3129},{"style":372},[3130],{"type":50,"value":3131},"let",{"type":44,"tag":350,"props":3133,"children":3134},{"style":1273},[3135],{"type":50,"value":3136}," colorClass\n",{"type":44,"tag":350,"props":3138,"children":3139},{"class":352,"line":447},[3140,3145,3150,3155,3159,3163,3167,3172,3176,3180,3184,3188,3192,3197],{"type":44,"tag":350,"props":3141,"children":3142},{"style":1267},[3143],{"type":50,"value":3144},"if",{"type":44,"tag":350,"props":3146,"children":3147},{"style":1273},[3148],{"type":50,"value":3149}," (type ",{"type":44,"tag":350,"props":3151,"children":3152},{"style":357},[3153],{"type":50,"value":3154},"===",{"type":44,"tag":350,"props":3156,"children":3157},{"style":357},[3158],{"type":50,"value":1286},{"type":44,"tag":350,"props":3160,"children":3161},{"style":424},[3162],{"type":50,"value":2951},{"type":44,"tag":350,"props":3164,"children":3165},{"style":357},[3166],{"type":50,"value":1454},{"type":44,"tag":350,"props":3168,"children":3169},{"style":357},[3170],{"type":50,"value":3171}," &&",{"type":44,"tag":350,"props":3173,"children":3174},{"style":1273},[3175],{"type":50,"value":2506},{"type":44,"tag":350,"props":3177,"children":3178},{"style":357},[3179],{"type":50,"value":3154},{"type":44,"tag":350,"props":3181,"children":3182},{"style":357},[3183],{"type":50,"value":1286},{"type":44,"tag":350,"props":3185,"children":3186},{"style":424},[3187],{"type":50,"value":2576},{"type":44,"tag":350,"props":3189,"children":3190},{"style":357},[3191],{"type":50,"value":1454},{"type":44,"tag":350,"props":3193,"children":3194},{"style":1273},[3195],{"type":50,"value":3196},") ",{"type":44,"tag":350,"props":3198,"children":3199},{"style":357},[3200],{"type":50,"value":360},{"type":44,"tag":350,"props":3202,"children":3203},{"class":352,"line":1330},[3204,3209,3214,3218,3223],{"type":44,"tag":350,"props":3205,"children":3206},{"style":1273},[3207],{"type":50,"value":3208},"  colorClass",{"type":44,"tag":350,"props":3210,"children":3211},{"style":357},[3212],{"type":50,"value":3213}," =",{"type":44,"tag":350,"props":3215,"children":3216},{"style":357},[3217],{"type":50,"value":1286},{"type":44,"tag":350,"props":3219,"children":3220},{"style":424},[3221],{"type":50,"value":3222},"bg-green-500 text-white",{"type":44,"tag":350,"props":3224,"children":3225},{"style":357},[3226],{"type":50,"value":1295},{"type":44,"tag":350,"props":3228,"children":3229},{"class":352,"line":1340},[3230,3234,3239,3244,3248,3252,3256,3260,3264,3268,3272,3276,3280,3284,3288,3292],{"type":44,"tag":350,"props":3231,"children":3232},{"style":357},[3233],{"type":50,"value":2038},{"type":44,"tag":350,"props":3235,"children":3236},{"style":1267},[3237],{"type":50,"value":3238}," else",{"type":44,"tag":350,"props":3240,"children":3241},{"style":1267},[3242],{"type":50,"value":3243}," if",{"type":44,"tag":350,"props":3245,"children":3246},{"style":1273},[3247],{"type":50,"value":3149},{"type":44,"tag":350,"props":3249,"children":3250},{"style":357},[3251],{"type":50,"value":3154},{"type":44,"tag":350,"props":3253,"children":3254},{"style":357},[3255],{"type":50,"value":1286},{"type":44,"tag":350,"props":3257,"children":3258},{"style":424},[3259],{"type":50,"value":2951},{"type":44,"tag":350,"props":3261,"children":3262},{"style":357},[3263],{"type":50,"value":1454},{"type":44,"tag":350,"props":3265,"children":3266},{"style":357},[3267],{"type":50,"value":3171},{"type":44,"tag":350,"props":3269,"children":3270},{"style":1273},[3271],{"type":50,"value":2506},{"type":44,"tag":350,"props":3273,"children":3274},{"style":357},[3275],{"type":50,"value":3154},{"type":44,"tag":350,"props":3277,"children":3278},{"style":357},[3279],{"type":50,"value":1286},{"type":44,"tag":350,"props":3281,"children":3282},{"style":424},[3283],{"type":50,"value":2613},{"type":44,"tag":350,"props":3285,"children":3286},{"style":357},[3287],{"type":50,"value":1454},{"type":44,"tag":350,"props":3289,"children":3290},{"style":1273},[3291],{"type":50,"value":3196},{"type":44,"tag":350,"props":3293,"children":3294},{"style":357},[3295],{"type":50,"value":360},{"type":44,"tag":350,"props":3297,"children":3298},{"class":352,"line":1349},[3299,3303,3307,3311,3316],{"type":44,"tag":350,"props":3300,"children":3301},{"style":1273},[3302],{"type":50,"value":3208},{"type":44,"tag":350,"props":3304,"children":3305},{"style":357},[3306],{"type":50,"value":3213},{"type":44,"tag":350,"props":3308,"children":3309},{"style":357},[3310],{"type":50,"value":1286},{"type":44,"tag":350,"props":3312,"children":3313},{"style":424},[3314],{"type":50,"value":3315},"bg-red-500 text-white",{"type":44,"tag":350,"props":3317,"children":3318},{"style":357},[3319],{"type":50,"value":1295},{"type":44,"tag":350,"props":3321,"children":3322},{"class":352,"line":1358},[3323,3327,3331,3335,3339,3343,3347,3351,3355,3359,3363,3367,3371,3375,3379,3383],{"type":44,"tag":350,"props":3324,"children":3325},{"style":357},[3326],{"type":50,"value":2038},{"type":44,"tag":350,"props":3328,"children":3329},{"style":1267},[3330],{"type":50,"value":3238},{"type":44,"tag":350,"props":3332,"children":3333},{"style":1267},[3334],{"type":50,"value":3243},{"type":44,"tag":350,"props":3336,"children":3337},{"style":1273},[3338],{"type":50,"value":3149},{"type":44,"tag":350,"props":3340,"children":3341},{"style":357},[3342],{"type":50,"value":3154},{"type":44,"tag":350,"props":3344,"children":3345},{"style":357},[3346],{"type":50,"value":1286},{"type":44,"tag":350,"props":3348,"children":3349},{"style":424},[3350],{"type":50,"value":2985},{"type":44,"tag":350,"props":3352,"children":3353},{"style":357},[3354],{"type":50,"value":1454},{"type":44,"tag":350,"props":3356,"children":3357},{"style":357},[3358],{"type":50,"value":3171},{"type":44,"tag":350,"props":3360,"children":3361},{"style":1273},[3362],{"type":50,"value":2506},{"type":44,"tag":350,"props":3364,"children":3365},{"style":357},[3366],{"type":50,"value":3154},{"type":44,"tag":350,"props":3368,"children":3369},{"style":357},[3370],{"type":50,"value":1286},{"type":44,"tag":350,"props":3372,"children":3373},{"style":424},[3374],{"type":50,"value":2576},{"type":44,"tag":350,"props":3376,"children":3377},{"style":357},[3378],{"type":50,"value":1454},{"type":44,"tag":350,"props":3380,"children":3381},{"style":1273},[3382],{"type":50,"value":3196},{"type":44,"tag":350,"props":3384,"children":3385},{"style":357},[3386],{"type":50,"value":360},{"type":44,"tag":350,"props":3388,"children":3389},{"class":352,"line":1366},[3390,3394,3398,3402,3407],{"type":44,"tag":350,"props":3391,"children":3392},{"style":1273},[3393],{"type":50,"value":3208},{"type":44,"tag":350,"props":3395,"children":3396},{"style":357},[3397],{"type":50,"value":3213},{"type":44,"tag":350,"props":3399,"children":3400},{"style":357},[3401],{"type":50,"value":1286},{"type":44,"tag":350,"props":3403,"children":3404},{"style":424},[3405],{"type":50,"value":3406},"bg-transparent border-green-500",{"type":44,"tag":350,"props":3408,"children":3409},{"style":357},[3410],{"type":50,"value":1295},{"type":44,"tag":350,"props":3412,"children":3413},{"class":352,"line":1384},[3414,3418,3422,3426,3430,3434,3438,3442,3446,3450,3454,3458,3462,3466,3470,3474],{"type":44,"tag":350,"props":3415,"children":3416},{"style":357},[3417],{"type":50,"value":2038},{"type":44,"tag":350,"props":3419,"children":3420},{"style":1267},[3421],{"type":50,"value":3238},{"type":44,"tag":350,"props":3423,"children":3424},{"style":1267},[3425],{"type":50,"value":3243},{"type":44,"tag":350,"props":3427,"children":3428},{"style":1273},[3429],{"type":50,"value":3149},{"type":44,"tag":350,"props":3431,"children":3432},{"style":357},[3433],{"type":50,"value":3154},{"type":44,"tag":350,"props":3435,"children":3436},{"style":357},[3437],{"type":50,"value":1286},{"type":44,"tag":350,"props":3439,"children":3440},{"style":424},[3441],{"type":50,"value":2985},{"type":44,"tag":350,"props":3443,"children":3444},{"style":357},[3445],{"type":50,"value":1454},{"type":44,"tag":350,"props":3447,"children":3448},{"style":357},[3449],{"type":50,"value":3171},{"type":44,"tag":350,"props":3451,"children":3452},{"style":1273},[3453],{"type":50,"value":2506},{"type":44,"tag":350,"props":3455,"children":3456},{"style":357},[3457],{"type":50,"value":3154},{"type":44,"tag":350,"props":3459,"children":3460},{"style":357},[3461],{"type":50,"value":1286},{"type":44,"tag":350,"props":3463,"children":3464},{"style":424},[3465],{"type":50,"value":2613},{"type":44,"tag":350,"props":3467,"children":3468},{"style":357},[3469],{"type":50,"value":1454},{"type":44,"tag":350,"props":3471,"children":3472},{"style":1273},[3473],{"type":50,"value":3196},{"type":44,"tag":350,"props":3475,"children":3476},{"style":357},[3477],{"type":50,"value":360},{"type":44,"tag":350,"props":3479,"children":3480},{"class":352,"line":1435},[3481,3485,3489,3493,3498],{"type":44,"tag":350,"props":3482,"children":3483},{"style":1273},[3484],{"type":50,"value":3208},{"type":44,"tag":350,"props":3486,"children":3487},{"style":357},[3488],{"type":50,"value":3213},{"type":44,"tag":350,"props":3490,"children":3491},{"style":357},[3492],{"type":50,"value":1286},{"type":44,"tag":350,"props":3494,"children":3495},{"style":424},[3496],{"type":50,"value":3497},"bg-transparent border-red-500",{"type":44,"tag":350,"props":3499,"children":3500},{"style":357},[3501],{"type":50,"value":1295},{"type":44,"tag":350,"props":3503,"children":3504},{"class":352,"line":1480},[3505],{"type":44,"tag":350,"props":3506,"children":3507},{"style":357},[3508],{"type":50,"value":453},{"type":44,"tag":60,"props":3510,"children":3511},{},[3512,3514,3519,3521,3526,3528,3533],{"type":50,"value":3513},"If the combinations produce ",{"type":44,"tag":82,"props":3515,"children":3516},{},[3517],{"type":50,"value":3518},"repetitive",{"type":50,"value":3520}," output (e.g., ",{"type":44,"tag":66,"props":3522,"children":3524},{"className":3523},[],[3525],{"type":50,"value":2090},{"type":50,"value":3527}," doesn't change the snippet structure — it's just passed through as a prop), a single ",{"type":44,"tag":66,"props":3529,"children":3531},{"className":3530},[],[3532],{"type":50,"value":1929},{"type":50,"value":3534}," mapping per variant is sufficient — no need for cross-product branches.",{"type":44,"tag":60,"props":3536,"children":3537},{},[3538,3542],{"type":44,"tag":82,"props":3539,"children":3540},{},[3541],{"type":50,"value":990},{"type":50,"value":3543}," — access swappable component instances:",{"type":44,"tag":339,"props":3545,"children":3547},{"className":1230,"code":3546,"language":1232,"meta":344,"style":344},"const icon = instance.getInstanceSwap('Icon')\nlet iconCode\nif (icon && icon.type === 'INSTANCE') {\n  iconCode = icon.executeTemplate().example\n}\n",[3548],{"type":44,"tag":66,"props":3549,"children":3550},{"__ignoreMap":344},[3551,3601,3613,3669,3708],{"type":44,"tag":350,"props":3552,"children":3553},{"class":352,"line":353},[3554,3558,3563,3567,3571,3575,3580,3584,3588,3593,3597],{"type":44,"tag":350,"props":3555,"children":3556},{"style":372},[3557],{"type":50,"value":1303},{"type":44,"tag":350,"props":3559,"children":3560},{"style":1273},[3561],{"type":50,"value":3562}," icon ",{"type":44,"tag":350,"props":3564,"children":3565},{"style":357},[3566],{"type":50,"value":1313},{"type":44,"tag":350,"props":3568,"children":3569},{"style":1273},[3570],{"type":50,"value":1852},{"type":44,"tag":350,"props":3572,"children":3573},{"style":357},[3574],{"type":50,"value":101},{"type":44,"tag":350,"props":3576,"children":3577},{"style":1406},[3578],{"type":50,"value":3579},"getInstanceSwap",{"type":44,"tag":350,"props":3581,"children":3582},{"style":1273},[3583],{"type":50,"value":1866},{"type":44,"tag":350,"props":3585,"children":3586},{"style":357},[3587],{"type":50,"value":1454},{"type":44,"tag":350,"props":3589,"children":3590},{"style":424},[3591],{"type":50,"value":3592},"Icon",{"type":44,"tag":350,"props":3594,"children":3595},{"style":357},[3596],{"type":50,"value":1454},{"type":44,"tag":350,"props":3598,"children":3599},{"style":1273},[3600],{"type":50,"value":1884},{"type":44,"tag":350,"props":3602,"children":3603},{"class":352,"line":363},[3604,3608],{"type":44,"tag":350,"props":3605,"children":3606},{"style":372},[3607],{"type":50,"value":3131},{"type":44,"tag":350,"props":3609,"children":3610},{"style":1273},[3611],{"type":50,"value":3612}," iconCode\n",{"type":44,"tag":350,"props":3614,"children":3615},{"class":352,"line":393},[3616,3620,3625,3630,3635,3639,3644,3648,3652,3657,3661,3665],{"type":44,"tag":350,"props":3617,"children":3618},{"style":1267},[3619],{"type":50,"value":3144},{"type":44,"tag":350,"props":3621,"children":3622},{"style":1273},[3623],{"type":50,"value":3624}," (icon ",{"type":44,"tag":350,"props":3626,"children":3627},{"style":357},[3628],{"type":50,"value":3629},"&&",{"type":44,"tag":350,"props":3631,"children":3632},{"style":1273},[3633],{"type":50,"value":3634}," icon",{"type":44,"tag":350,"props":3636,"children":3637},{"style":357},[3638],{"type":50,"value":101},{"type":44,"tag":350,"props":3640,"children":3641},{"style":1273},[3642],{"type":50,"value":3643},"type ",{"type":44,"tag":350,"props":3645,"children":3646},{"style":357},[3647],{"type":50,"value":3154},{"type":44,"tag":350,"props":3649,"children":3650},{"style":357},[3651],{"type":50,"value":1286},{"type":44,"tag":350,"props":3653,"children":3654},{"style":424},[3655],{"type":50,"value":3656},"INSTANCE",{"type":44,"tag":350,"props":3658,"children":3659},{"style":357},[3660],{"type":50,"value":1454},{"type":44,"tag":350,"props":3662,"children":3663},{"style":1273},[3664],{"type":50,"value":3196},{"type":44,"tag":350,"props":3666,"children":3667},{"style":357},[3668],{"type":50,"value":360},{"type":44,"tag":350,"props":3670,"children":3671},{"class":352,"line":438},[3672,3677,3681,3685,3689,3694,3699,3703],{"type":44,"tag":350,"props":3673,"children":3674},{"style":1273},[3675],{"type":50,"value":3676},"  iconCode",{"type":44,"tag":350,"props":3678,"children":3679},{"style":357},[3680],{"type":50,"value":3213},{"type":44,"tag":350,"props":3682,"children":3683},{"style":1273},[3684],{"type":50,"value":3634},{"type":44,"tag":350,"props":3686,"children":3687},{"style":357},[3688],{"type":50,"value":101},{"type":44,"tag":350,"props":3690,"children":3691},{"style":1406},[3692],{"type":50,"value":3693},"executeTemplate",{"type":44,"tag":350,"props":3695,"children":3696},{"style":1388},[3697],{"type":50,"value":3698},"()",{"type":44,"tag":350,"props":3700,"children":3701},{"style":357},[3702],{"type":50,"value":101},{"type":44,"tag":350,"props":3704,"children":3705},{"style":1273},[3706],{"type":50,"value":3707},"example\n",{"type":44,"tag":350,"props":3709,"children":3710},{"class":352,"line":447},[3711],{"type":44,"tag":350,"props":3712,"children":3713},{"style":357},[3714],{"type":50,"value":453},{"type":44,"tag":60,"props":3716,"children":3717},{},[3718,3722,3723,3729,3731,3739,3741,3746,3747,3751,3753,3759],{"type":44,"tag":82,"props":3719,"children":3720},{},[3721],{"type":50,"value":1000},{"type":50,"value":756},{"type":44,"tag":66,"props":3724,"children":3726},{"className":3725},[],[3727],{"type":50,"value":3728},"getSlot(propName)",{"type":50,"value":3730}," is only valid when the Figma component property reported in Step 3 has type ",{"type":44,"tag":82,"props":3732,"children":3733},{},[3734],{"type":44,"tag":66,"props":3735,"children":3737},{"className":3736},[],[3738],{"type":50,"value":1000},{"type":50,"value":3740},". Do not use ",{"type":44,"tag":66,"props":3742,"children":3744},{"className":3743},[],[3745],{"type":50,"value":1008},{"type":50,"value":1042},{"type":44,"tag":82,"props":3748,"children":3749},{},[3750],{"type":50,"value":990},{"type":50,"value":3752}," properties (those use ",{"type":44,"tag":66,"props":3754,"children":3756},{"className":3755},[],[3757],{"type":50,"value":3758},"getInstanceSwap()",{"type":50,"value":3760},"). Slots are explicit “content regions” in the component definition, not generic nested instances.",{"type":44,"tag":232,"props":3762,"children":3763},{},[3764],{"type":44,"tag":236,"props":3765,"children":3766},{},[3767,3772,3773],{"type":44,"tag":82,"props":3768,"children":3769},{},[3770],{"type":50,"value":3771},"Signature:",{"type":50,"value":210},{"type":44,"tag":66,"props":3774,"children":3776},{"className":3775},[],[3777],{"type":50,"value":3778},"getSlot(propName: string): ResultSection[] | undefined",{"type":44,"tag":339,"props":3780,"children":3782},{"className":1230,"code":3781,"language":1232,"meta":344,"style":344},"\u002F\u002F Figma property \"Content\" must be type SLOT in component properties\nconst content = instance.getSlot('Content')\n\nexport default {\n  example: figma.code`\u003CCard>${content}\u003C\u002FCard>`,\n  \u002F\u002F ...\n}\n",[3783],{"type":44,"tag":66,"props":3784,"children":3785},{"__ignoreMap":344},[3786,3794,3844,3851,3866,3925,3933],{"type":44,"tag":350,"props":3787,"children":3788},{"class":352,"line":353},[3789],{"type":44,"tag":350,"props":3790,"children":3791},{"style":1242},[3792],{"type":50,"value":3793},"\u002F\u002F Figma property \"Content\" must be type SLOT in component properties\n",{"type":44,"tag":350,"props":3795,"children":3796},{"class":352,"line":363},[3797,3801,3806,3810,3814,3818,3823,3827,3831,3836,3840],{"type":44,"tag":350,"props":3798,"children":3799},{"style":372},[3800],{"type":50,"value":1303},{"type":44,"tag":350,"props":3802,"children":3803},{"style":1273},[3804],{"type":50,"value":3805}," content ",{"type":44,"tag":350,"props":3807,"children":3808},{"style":357},[3809],{"type":50,"value":1313},{"type":44,"tag":350,"props":3811,"children":3812},{"style":1273},[3813],{"type":50,"value":1852},{"type":44,"tag":350,"props":3815,"children":3816},{"style":357},[3817],{"type":50,"value":101},{"type":44,"tag":350,"props":3819,"children":3820},{"style":1406},[3821],{"type":50,"value":3822},"getSlot",{"type":44,"tag":350,"props":3824,"children":3825},{"style":1273},[3826],{"type":50,"value":1866},{"type":44,"tag":350,"props":3828,"children":3829},{"style":357},[3830],{"type":50,"value":1454},{"type":44,"tag":350,"props":3832,"children":3833},{"style":424},[3834],{"type":50,"value":3835},"Content",{"type":44,"tag":350,"props":3837,"children":3838},{"style":357},[3839],{"type":50,"value":1454},{"type":44,"tag":350,"props":3841,"children":3842},{"style":1273},[3843],{"type":50,"value":1884},{"type":44,"tag":350,"props":3845,"children":3846},{"class":352,"line":393},[3847],{"type":44,"tag":350,"props":3848,"children":3849},{"emptyLinePlaceholder":1334},[3850],{"type":50,"value":1337},{"type":44,"tag":350,"props":3852,"children":3853},{"class":352,"line":438},[3854,3858,3862],{"type":44,"tag":350,"props":3855,"children":3856},{"style":1267},[3857],{"type":50,"value":1372},{"type":44,"tag":350,"props":3859,"children":3860},{"style":1267},[3861],{"type":50,"value":1377},{"type":44,"tag":350,"props":3863,"children":3864},{"style":357},[3865],{"type":50,"value":390},{"type":44,"tag":350,"props":3867,"children":3868},{"class":352,"line":447},[3869,3873,3877,3881,3885,3889,3893,3898,3903,3908,3912,3917,3921],{"type":44,"tag":350,"props":3870,"children":3871},{"style":1388},[3872],{"type":50,"value":1391},{"type":44,"tag":350,"props":3874,"children":3875},{"style":357},[3876],{"type":50,"value":385},{"type":44,"tag":350,"props":3878,"children":3879},{"style":1273},[3880],{"type":50,"value":1318},{"type":44,"tag":350,"props":3882,"children":3883},{"style":357},[3884],{"type":50,"value":101},{"type":44,"tag":350,"props":3886,"children":3887},{"style":1406},[3888],{"type":50,"value":66},{"type":44,"tag":350,"props":3890,"children":3891},{"style":357},[3892],{"type":50,"value":1413},{"type":44,"tag":350,"props":3894,"children":3895},{"style":424},[3896],{"type":50,"value":3897},"\u003CCard>",{"type":44,"tag":350,"props":3899,"children":3900},{"style":357},[3901],{"type":50,"value":3902},"${",{"type":44,"tag":350,"props":3904,"children":3905},{"style":1273},[3906],{"type":50,"value":3907},"content",{"type":44,"tag":350,"props":3909,"children":3910},{"style":357},[3911],{"type":50,"value":2038},{"type":44,"tag":350,"props":3913,"children":3914},{"style":424},[3915],{"type":50,"value":3916},"\u003C\u002FCard>",{"type":44,"tag":350,"props":3918,"children":3919},{"style":357},[3920],{"type":50,"value":1413},{"type":44,"tag":350,"props":3922,"children":3923},{"style":357},[3924],{"type":50,"value":1993},{"type":44,"tag":350,"props":3926,"children":3927},{"class":352,"line":1330},[3928],{"type":44,"tag":350,"props":3929,"children":3930},{"style":1242},[3931],{"type":50,"value":3932},"  \u002F\u002F ...\n",{"type":44,"tag":350,"props":3934,"children":3935},{"class":352,"line":1340},[3936],{"type":44,"tag":350,"props":3937,"children":3938},{"style":357},[3939],{"type":50,"value":453},{"type":44,"tag":1163,"props":3941,"children":3943},{"id":3942},"interpolation-in-tagged-templates",[3944],{"type":50,"value":3945},"Interpolation in tagged templates",{"type":44,"tag":60,"props":3947,"children":3948},{},[3949],{"type":50,"value":3950},"When interpolating values in tagged templates, use the correct wrapping:",{"type":44,"tag":232,"props":3952,"children":3953},{},[3954,3990,4013,4052],{"type":44,"tag":236,"props":3955,"children":3956},{},[3957,3962,3964,3969,3970,3975,3976,3982,3984],{"type":44,"tag":82,"props":3958,"children":3959},{},[3960],{"type":50,"value":3961},"String values",{"type":50,"value":3963}," (",{"type":44,"tag":66,"props":3965,"children":3967},{"className":3966},[],[3968],{"type":50,"value":1861},{"type":50,"value":1070},{"type":44,"tag":66,"props":3971,"children":3973},{"className":3972},[],[3974],{"type":50,"value":1929},{"type":50,"value":1070},{"type":44,"tag":66,"props":3977,"children":3979},{"className":3978},[],[3980],{"type":50,"value":3981},"textContent",{"type":50,"value":3983},"): wrap in quotes → ",{"type":44,"tag":66,"props":3985,"children":3987},{"className":3986},[],[3988],{"type":50,"value":3989},"variant=\"${variant}\"",{"type":44,"tag":236,"props":3991,"children":3992},{},[3993,3998,3999,4005,4007],{"type":44,"tag":82,"props":3994,"children":3995},{},[3996],{"type":50,"value":3997},"Instance\u002Fsection values",{"type":50,"value":3963},{"type":44,"tag":66,"props":4000,"children":4002},{"className":4001},[],[4003],{"type":50,"value":4004},"executeTemplate().example",{"type":50,"value":4006},"): wrap in braces → ",{"type":44,"tag":66,"props":4008,"children":4010},{"className":4009},[],[4011],{"type":50,"value":4012},"icon={${iconCode}}",{"type":44,"tag":236,"props":4014,"children":4015},{},[4016,4021,4022,4027,4029,4035,4037,4042,4044,4050],{"type":44,"tag":82,"props":4017,"children":4018},{},[4019],{"type":50,"value":4020},"Slot sections",{"type":50,"value":3963},{"type":44,"tag":66,"props":4023,"children":4025},{"className":4024},[],[4026],{"type":50,"value":1008},{"type":50,"value":4028}," result — ",{"type":44,"tag":66,"props":4030,"children":4032},{"className":4031},[],[4033],{"type":50,"value":4034},"ResultSection[] | undefined",{"type":50,"value":4036},"): interpolate directly inside ",{"type":44,"tag":66,"props":4038,"children":4040},{"className":4039},[],[4041],{"type":50,"value":124},{"type":50,"value":4043}," (same shape as nested snippet sections), e.g. ",{"type":44,"tag":66,"props":4045,"children":4047},{"className":4046},[],[4048],{"type":50,"value":4049},"figma.code`\u003CSelect>${content}\u003C\u002FSelect>`",{"type":50,"value":4051}," — do not treat as a plain string",{"type":44,"tag":236,"props":4053,"children":4054},{},[4055,4060,4062],{"type":44,"tag":82,"props":4056,"children":4057},{},[4058],{"type":50,"value":4059},"Boolean bare props",{"type":50,"value":4061},": use conditional → ",{"type":44,"tag":66,"props":4063,"children":4065},{"className":4064},[],[4066],{"type":50,"value":4067},"${disabled ? 'disabled' : ''}",{"type":44,"tag":1163,"props":4069,"children":4071},{"id":4070},"finding-descendant-layers",[4072],{"type":50,"value":4073},"Finding descendant layers",{"type":44,"tag":60,"props":4075,"children":4076},{},[4077],{"type":50,"value":4078},"When you need to access children that aren't exposed as component properties:",{"type":44,"tag":482,"props":4080,"children":4081},{},[4082,4098],{"type":44,"tag":486,"props":4083,"children":4084},{},[4085],{"type":44,"tag":490,"props":4086,"children":4087},{},[4088,4093],{"type":44,"tag":494,"props":4089,"children":4090},{},[4091],{"type":50,"value":4092},"Method",{"type":44,"tag":494,"props":4094,"children":4095},{},[4096],{"type":50,"value":4097},"Use when",{"type":44,"tag":508,"props":4099,"children":4100},{},[4101,4124,4146,4162,4184,4207,4224],{"type":44,"tag":490,"props":4102,"children":4103},{},[4104,4113],{"type":44,"tag":515,"props":4105,"children":4106},{},[4107],{"type":44,"tag":66,"props":4108,"children":4110},{"className":4109},[],[4111],{"type":50,"value":4112},"instance.getInstanceSwap('PropName')",{"type":44,"tag":515,"props":4114,"children":4115},{},[4116,4118,4122],{"type":50,"value":4117},"Figma property type is ",{"type":44,"tag":82,"props":4119,"children":4120},{},[4121],{"type":50,"value":990},{"type":50,"value":4123}," (fixed swapped instance)",{"type":44,"tag":490,"props":4125,"children":4126},{},[4127,4136],{"type":44,"tag":515,"props":4128,"children":4129},{},[4130],{"type":44,"tag":66,"props":4131,"children":4133},{"className":4132},[],[4134],{"type":50,"value":4135},"instance.getSlot('PropName')",{"type":44,"tag":515,"props":4137,"children":4138},{},[4139,4140,4144],{"type":50,"value":4117},{"type":44,"tag":82,"props":4141,"children":4142},{},[4143],{"type":50,"value":1000},{"type":50,"value":4145}," (freeform content region)",{"type":44,"tag":490,"props":4147,"children":4148},{},[4149,4157],{"type":44,"tag":515,"props":4150,"children":4151},{},[4152],{"type":44,"tag":66,"props":4153,"children":4155},{"className":4154},[],[4156],{"type":50,"value":1781},{"type":44,"tag":515,"props":4158,"children":4159},{},[4160],{"type":50,"value":4161},"You know the child layer name (no component property)",{"type":44,"tag":490,"props":4163,"children":4164},{},[4165,4179],{"type":44,"tag":515,"props":4166,"children":4167},{},[4168,4173,4174],{"type":44,"tag":66,"props":4169,"children":4171},{"className":4170},[],[4172],{"type":50,"value":1803},{"type":50,"value":543},{"type":44,"tag":66,"props":4175,"children":4177},{"className":4176},[],[4178],{"type":50,"value":1810},{"type":44,"tag":515,"props":4180,"children":4181},{},[4182],{"type":50,"value":4183},"You need text content from a named text layer",{"type":44,"tag":490,"props":4185,"children":4186},{},[4187,4196],{"type":44,"tag":515,"props":4188,"children":4189},{},[4190],{"type":44,"tag":66,"props":4191,"children":4193},{"className":4192},[],[4194],{"type":50,"value":4195},"instance.findConnectedInstance('id')",{"type":44,"tag":515,"props":4197,"children":4198},{},[4199,4201],{"type":50,"value":4200},"You know the child's Code Connect ",{"type":44,"tag":66,"props":4202,"children":4204},{"className":4203},[],[4205],{"type":50,"value":4206},"id",{"type":44,"tag":490,"props":4208,"children":4209},{},[4210,4219],{"type":44,"tag":515,"props":4211,"children":4212},{},[4213],{"type":44,"tag":66,"props":4214,"children":4216},{"className":4215},[],[4217],{"type":50,"value":4218},"instance.findConnectedInstances(fn)",{"type":44,"tag":515,"props":4220,"children":4221},{},[4222],{"type":50,"value":4223},"You need multiple connected children matching a filter",{"type":44,"tag":490,"props":4225,"children":4226},{},[4227,4236],{"type":44,"tag":515,"props":4228,"children":4229},{},[4230],{"type":44,"tag":66,"props":4231,"children":4233},{"className":4232},[],[4234],{"type":50,"value":4235},"instance.findLayers(fn)",{"type":44,"tag":515,"props":4237,"children":4238},{},[4239],{"type":50,"value":4240},"You need any layers (text + instances) matching a filter",{"type":44,"tag":1163,"props":4242,"children":4244},{"id":4243},"nested-configurable-instances",[4245],{"type":50,"value":4246},"Nested configurable instances",{"type":44,"tag":60,"props":4248,"children":4249},{},[4250,4252,4257,4259,4264],{"type":50,"value":4251},"A component may contain child instances that are ",{"type":44,"tag":82,"props":4253,"children":4254},{},[4255],{"type":50,"value":4256},"not exposed as component properties",{"type":50,"value":4258}," (no INSTANCE_SWAP) but are still ",{"type":44,"tag":82,"props":4260,"children":4261},{},[4262],{"type":50,"value":4263},"independently configurable",{"type":50,"value":4265}," — they have their own variants, properties, or swap slots. These must be resolved dynamically, not hardcoded.",{"type":44,"tag":1028,"props":4267,"children":4268},{},[4269,4293,4303],{"type":44,"tag":236,"props":4270,"children":4271},{},[4272,4277,4279,4284,4286,4291],{"type":44,"tag":82,"props":4273,"children":4274},{},[4275],{"type":50,"value":4276},"Check whether the child already has a Code Connect template",{"type":50,"value":4278}," — use ",{"type":44,"tag":66,"props":4280,"children":4282},{"className":4281},[],[4283],{"type":50,"value":251},{"type":50,"value":4285}," or check existing ",{"type":44,"tag":66,"props":4287,"children":4289},{"className":4288},[],[4290],{"type":50,"value":71},{"type":50,"value":4292}," files in the project.",{"type":44,"tag":236,"props":4294,"children":4295},{},[4296,4301],{"type":44,"tag":82,"props":4297,"children":4298},{},[4299],{"type":50,"value":4300},"If no template exists, create one",{"type":50,"value":4302}," for the child so it renders correctly both standalone and when nested.",{"type":44,"tag":236,"props":4304,"children":4305},{},[4306,4311,4313,4319,4321,4327,4329,4334],{"type":44,"tag":82,"props":4307,"children":4308},{},[4309],{"type":50,"value":4310},"Reference the child from the parent",{"type":50,"value":4312}," using ",{"type":44,"tag":66,"props":4314,"children":4316},{"className":4315},[],[4317],{"type":50,"value":4318},"findInstance()",{"type":50,"value":4320}," or ",{"type":44,"tag":66,"props":4322,"children":4324},{"className":4323},[],[4325],{"type":50,"value":4326},"findConnectedInstance()",{"type":50,"value":4328},", then call ",{"type":44,"tag":66,"props":4330,"children":4332},{"className":4331},[],[4333],{"type":50,"value":1737},{"type":50,"value":101},{"type":44,"tag":339,"props":4336,"children":4338},{"className":1230,"code":4337,"language":1232,"meta":344,"style":344},"\u002F\u002F Parent template — the Badge child isn't a prop, but it's configurable\nconst badge = instance.findInstance('Status Badge')\nlet badgeCode\nif (badge && badge.type === 'INSTANCE') {\n  badgeCode = badge.executeTemplate().example\n}\n\nexport default {\n  example: figma.code`\u003CCard>${badgeCode}\u003C\u002FCard>`,\n  \u002F\u002F ...\n}\n",[4339],{"type":44,"tag":66,"props":4340,"children":4341},{"__ignoreMap":344},[4342,4350,4400,4412,4465,4501,4508,4515,4530,4586,4593],{"type":44,"tag":350,"props":4343,"children":4344},{"class":352,"line":353},[4345],{"type":44,"tag":350,"props":4346,"children":4347},{"style":1242},[4348],{"type":50,"value":4349},"\u002F\u002F Parent template — the Badge child isn't a prop, but it's configurable\n",{"type":44,"tag":350,"props":4351,"children":4352},{"class":352,"line":363},[4353,4357,4362,4366,4370,4374,4379,4383,4387,4392,4396],{"type":44,"tag":350,"props":4354,"children":4355},{"style":372},[4356],{"type":50,"value":1303},{"type":44,"tag":350,"props":4358,"children":4359},{"style":1273},[4360],{"type":50,"value":4361}," badge ",{"type":44,"tag":350,"props":4363,"children":4364},{"style":357},[4365],{"type":50,"value":1313},{"type":44,"tag":350,"props":4367,"children":4368},{"style":1273},[4369],{"type":50,"value":1852},{"type":44,"tag":350,"props":4371,"children":4372},{"style":357},[4373],{"type":50,"value":101},{"type":44,"tag":350,"props":4375,"children":4376},{"style":1406},[4377],{"type":50,"value":4378},"findInstance",{"type":44,"tag":350,"props":4380,"children":4381},{"style":1273},[4382],{"type":50,"value":1866},{"type":44,"tag":350,"props":4384,"children":4385},{"style":357},[4386],{"type":50,"value":1454},{"type":44,"tag":350,"props":4388,"children":4389},{"style":424},[4390],{"type":50,"value":4391},"Status Badge",{"type":44,"tag":350,"props":4393,"children":4394},{"style":357},[4395],{"type":50,"value":1454},{"type":44,"tag":350,"props":4397,"children":4398},{"style":1273},[4399],{"type":50,"value":1884},{"type":44,"tag":350,"props":4401,"children":4402},{"class":352,"line":393},[4403,4407],{"type":44,"tag":350,"props":4404,"children":4405},{"style":372},[4406],{"type":50,"value":3131},{"type":44,"tag":350,"props":4408,"children":4409},{"style":1273},[4410],{"type":50,"value":4411}," badgeCode\n",{"type":44,"tag":350,"props":4413,"children":4414},{"class":352,"line":438},[4415,4419,4424,4428,4433,4437,4441,4445,4449,4453,4457,4461],{"type":44,"tag":350,"props":4416,"children":4417},{"style":1267},[4418],{"type":50,"value":3144},{"type":44,"tag":350,"props":4420,"children":4421},{"style":1273},[4422],{"type":50,"value":4423}," (badge ",{"type":44,"tag":350,"props":4425,"children":4426},{"style":357},[4427],{"type":50,"value":3629},{"type":44,"tag":350,"props":4429,"children":4430},{"style":1273},[4431],{"type":50,"value":4432}," badge",{"type":44,"tag":350,"props":4434,"children":4435},{"style":357},[4436],{"type":50,"value":101},{"type":44,"tag":350,"props":4438,"children":4439},{"style":1273},[4440],{"type":50,"value":3643},{"type":44,"tag":350,"props":4442,"children":4443},{"style":357},[4444],{"type":50,"value":3154},{"type":44,"tag":350,"props":4446,"children":4447},{"style":357},[4448],{"type":50,"value":1286},{"type":44,"tag":350,"props":4450,"children":4451},{"style":424},[4452],{"type":50,"value":3656},{"type":44,"tag":350,"props":4454,"children":4455},{"style":357},[4456],{"type":50,"value":1454},{"type":44,"tag":350,"props":4458,"children":4459},{"style":1273},[4460],{"type":50,"value":3196},{"type":44,"tag":350,"props":4462,"children":4463},{"style":357},[4464],{"type":50,"value":360},{"type":44,"tag":350,"props":4466,"children":4467},{"class":352,"line":447},[4468,4473,4477,4481,4485,4489,4493,4497],{"type":44,"tag":350,"props":4469,"children":4470},{"style":1273},[4471],{"type":50,"value":4472},"  badgeCode",{"type":44,"tag":350,"props":4474,"children":4475},{"style":357},[4476],{"type":50,"value":3213},{"type":44,"tag":350,"props":4478,"children":4479},{"style":1273},[4480],{"type":50,"value":4432},{"type":44,"tag":350,"props":4482,"children":4483},{"style":357},[4484],{"type":50,"value":101},{"type":44,"tag":350,"props":4486,"children":4487},{"style":1406},[4488],{"type":50,"value":3693},{"type":44,"tag":350,"props":4490,"children":4491},{"style":1388},[4492],{"type":50,"value":3698},{"type":44,"tag":350,"props":4494,"children":4495},{"style":357},[4496],{"type":50,"value":101},{"type":44,"tag":350,"props":4498,"children":4499},{"style":1273},[4500],{"type":50,"value":3707},{"type":44,"tag":350,"props":4502,"children":4503},{"class":352,"line":1330},[4504],{"type":44,"tag":350,"props":4505,"children":4506},{"style":357},[4507],{"type":50,"value":453},{"type":44,"tag":350,"props":4509,"children":4510},{"class":352,"line":1340},[4511],{"type":44,"tag":350,"props":4512,"children":4513},{"emptyLinePlaceholder":1334},[4514],{"type":50,"value":1337},{"type":44,"tag":350,"props":4516,"children":4517},{"class":352,"line":1349},[4518,4522,4526],{"type":44,"tag":350,"props":4519,"children":4520},{"style":1267},[4521],{"type":50,"value":1372},{"type":44,"tag":350,"props":4523,"children":4524},{"style":1267},[4525],{"type":50,"value":1377},{"type":44,"tag":350,"props":4527,"children":4528},{"style":357},[4529],{"type":50,"value":390},{"type":44,"tag":350,"props":4531,"children":4532},{"class":352,"line":1358},[4533,4537,4541,4545,4549,4553,4557,4561,4565,4570,4574,4578,4582],{"type":44,"tag":350,"props":4534,"children":4535},{"style":1388},[4536],{"type":50,"value":1391},{"type":44,"tag":350,"props":4538,"children":4539},{"style":357},[4540],{"type":50,"value":385},{"type":44,"tag":350,"props":4542,"children":4543},{"style":1273},[4544],{"type":50,"value":1318},{"type":44,"tag":350,"props":4546,"children":4547},{"style":357},[4548],{"type":50,"value":101},{"type":44,"tag":350,"props":4550,"children":4551},{"style":1406},[4552],{"type":50,"value":66},{"type":44,"tag":350,"props":4554,"children":4555},{"style":357},[4556],{"type":50,"value":1413},{"type":44,"tag":350,"props":4558,"children":4559},{"style":424},[4560],{"type":50,"value":3897},{"type":44,"tag":350,"props":4562,"children":4563},{"style":357},[4564],{"type":50,"value":3902},{"type":44,"tag":350,"props":4566,"children":4567},{"style":1273},[4568],{"type":50,"value":4569},"badgeCode",{"type":44,"tag":350,"props":4571,"children":4572},{"style":357},[4573],{"type":50,"value":2038},{"type":44,"tag":350,"props":4575,"children":4576},{"style":424},[4577],{"type":50,"value":3916},{"type":44,"tag":350,"props":4579,"children":4580},{"style":357},[4581],{"type":50,"value":1413},{"type":44,"tag":350,"props":4583,"children":4584},{"style":357},[4585],{"type":50,"value":1993},{"type":44,"tag":350,"props":4587,"children":4588},{"class":352,"line":1366},[4589],{"type":44,"tag":350,"props":4590,"children":4591},{"style":1242},[4592],{"type":50,"value":3932},{"type":44,"tag":350,"props":4594,"children":4595},{"class":352,"line":1384},[4596],{"type":44,"tag":350,"props":4597,"children":4598},{"style":357},[4599],{"type":50,"value":453},{"type":44,"tag":60,"props":4601,"children":4602},{},[4603],{"type":50,"value":4604},"This applies to icons, badges, labels, and any other nested instance that is configurable by itself — always connect them and render dynamically, never hardcode their content.",{"type":44,"tag":1163,"props":4606,"children":4608},{"id":4607},"nested-component-example",[4609],{"type":50,"value":4610},"Nested component example",{"type":44,"tag":60,"props":4612,"children":4613},{},[4614,4616,4623],{"type":50,"value":4615},"For multi-level nested components or metadata prop passing between templates, see ",{"type":44,"tag":4617,"props":4618,"children":4620},"a",{"href":4619},"references\u002Fadvanced-patterns.md",[4621],{"type":50,"value":4622},"advanced-patterns.md",{"type":50,"value":101},{"type":44,"tag":339,"props":4625,"children":4627},{"className":1230,"code":4626,"language":1232,"meta":344,"style":344},"const icon = instance.getInstanceSwap('Icon')\nlet iconSnippet\nif (icon && icon.type === 'INSTANCE') {\n  iconSnippet = icon.executeTemplate().example\n}\n\nexport default {\n  example: figma.code`\u003CButton ${iconSnippet ? figma.code`icon={${iconSnippet}}` : ''}>${label}\u003C\u002FButton>`,\n  \u002F\u002F ...\n}\n",[4628],{"type":44,"tag":66,"props":4629,"children":4630},{"__ignoreMap":344},[4631,4678,4690,4741,4777,4784,4791,4806,4935,4942],{"type":44,"tag":350,"props":4632,"children":4633},{"class":352,"line":353},[4634,4638,4642,4646,4650,4654,4658,4662,4666,4670,4674],{"type":44,"tag":350,"props":4635,"children":4636},{"style":372},[4637],{"type":50,"value":1303},{"type":44,"tag":350,"props":4639,"children":4640},{"style":1273},[4641],{"type":50,"value":3562},{"type":44,"tag":350,"props":4643,"children":4644},{"style":357},[4645],{"type":50,"value":1313},{"type":44,"tag":350,"props":4647,"children":4648},{"style":1273},[4649],{"type":50,"value":1852},{"type":44,"tag":350,"props":4651,"children":4652},{"style":357},[4653],{"type":50,"value":101},{"type":44,"tag":350,"props":4655,"children":4656},{"style":1406},[4657],{"type":50,"value":3579},{"type":44,"tag":350,"props":4659,"children":4660},{"style":1273},[4661],{"type":50,"value":1866},{"type":44,"tag":350,"props":4663,"children":4664},{"style":357},[4665],{"type":50,"value":1454},{"type":44,"tag":350,"props":4667,"children":4668},{"style":424},[4669],{"type":50,"value":3592},{"type":44,"tag":350,"props":4671,"children":4672},{"style":357},[4673],{"type":50,"value":1454},{"type":44,"tag":350,"props":4675,"children":4676},{"style":1273},[4677],{"type":50,"value":1884},{"type":44,"tag":350,"props":4679,"children":4680},{"class":352,"line":363},[4681,4685],{"type":44,"tag":350,"props":4682,"children":4683},{"style":372},[4684],{"type":50,"value":3131},{"type":44,"tag":350,"props":4686,"children":4687},{"style":1273},[4688],{"type":50,"value":4689}," iconSnippet\n",{"type":44,"tag":350,"props":4691,"children":4692},{"class":352,"line":393},[4693,4697,4701,4705,4709,4713,4717,4721,4725,4729,4733,4737],{"type":44,"tag":350,"props":4694,"children":4695},{"style":1267},[4696],{"type":50,"value":3144},{"type":44,"tag":350,"props":4698,"children":4699},{"style":1273},[4700],{"type":50,"value":3624},{"type":44,"tag":350,"props":4702,"children":4703},{"style":357},[4704],{"type":50,"value":3629},{"type":44,"tag":350,"props":4706,"children":4707},{"style":1273},[4708],{"type":50,"value":3634},{"type":44,"tag":350,"props":4710,"children":4711},{"style":357},[4712],{"type":50,"value":101},{"type":44,"tag":350,"props":4714,"children":4715},{"style":1273},[4716],{"type":50,"value":3643},{"type":44,"tag":350,"props":4718,"children":4719},{"style":357},[4720],{"type":50,"value":3154},{"type":44,"tag":350,"props":4722,"children":4723},{"style":357},[4724],{"type":50,"value":1286},{"type":44,"tag":350,"props":4726,"children":4727},{"style":424},[4728],{"type":50,"value":3656},{"type":44,"tag":350,"props":4730,"children":4731},{"style":357},[4732],{"type":50,"value":1454},{"type":44,"tag":350,"props":4734,"children":4735},{"style":1273},[4736],{"type":50,"value":3196},{"type":44,"tag":350,"props":4738,"children":4739},{"style":357},[4740],{"type":50,"value":360},{"type":44,"tag":350,"props":4742,"children":4743},{"class":352,"line":438},[4744,4749,4753,4757,4761,4765,4769,4773],{"type":44,"tag":350,"props":4745,"children":4746},{"style":1273},[4747],{"type":50,"value":4748},"  iconSnippet",{"type":44,"tag":350,"props":4750,"children":4751},{"style":357},[4752],{"type":50,"value":3213},{"type":44,"tag":350,"props":4754,"children":4755},{"style":1273},[4756],{"type":50,"value":3634},{"type":44,"tag":350,"props":4758,"children":4759},{"style":357},[4760],{"type":50,"value":101},{"type":44,"tag":350,"props":4762,"children":4763},{"style":1406},[4764],{"type":50,"value":3693},{"type":44,"tag":350,"props":4766,"children":4767},{"style":1388},[4768],{"type":50,"value":3698},{"type":44,"tag":350,"props":4770,"children":4771},{"style":357},[4772],{"type":50,"value":101},{"type":44,"tag":350,"props":4774,"children":4775},{"style":1273},[4776],{"type":50,"value":3707},{"type":44,"tag":350,"props":4778,"children":4779},{"class":352,"line":447},[4780],{"type":44,"tag":350,"props":4781,"children":4782},{"style":357},[4783],{"type":50,"value":453},{"type":44,"tag":350,"props":4785,"children":4786},{"class":352,"line":1330},[4787],{"type":44,"tag":350,"props":4788,"children":4789},{"emptyLinePlaceholder":1334},[4790],{"type":50,"value":1337},{"type":44,"tag":350,"props":4792,"children":4793},{"class":352,"line":1340},[4794,4798,4802],{"type":44,"tag":350,"props":4795,"children":4796},{"style":1267},[4797],{"type":50,"value":1372},{"type":44,"tag":350,"props":4799,"children":4800},{"style":1267},[4801],{"type":50,"value":1377},{"type":44,"tag":350,"props":4803,"children":4804},{"style":357},[4805],{"type":50,"value":390},{"type":44,"tag":350,"props":4807,"children":4808},{"class":352,"line":1349},[4809,4813,4817,4821,4825,4829,4833,4838,4842,4847,4852,4856,4860,4864,4868,4873,4877,4882,4886,4890,4894,4899,4904,4909,4913,4918,4922,4927,4931],{"type":44,"tag":350,"props":4810,"children":4811},{"style":1388},[4812],{"type":50,"value":1391},{"type":44,"tag":350,"props":4814,"children":4815},{"style":357},[4816],{"type":50,"value":385},{"type":44,"tag":350,"props":4818,"children":4819},{"style":1273},[4820],{"type":50,"value":1318},{"type":44,"tag":350,"props":4822,"children":4823},{"style":357},[4824],{"type":50,"value":101},{"type":44,"tag":350,"props":4826,"children":4827},{"style":1406},[4828],{"type":50,"value":66},{"type":44,"tag":350,"props":4830,"children":4831},{"style":357},[4832],{"type":50,"value":1413},{"type":44,"tag":350,"props":4834,"children":4835},{"style":424},[4836],{"type":50,"value":4837},"\u003CButton ",{"type":44,"tag":350,"props":4839,"children":4840},{"style":357},[4841],{"type":50,"value":3902},{"type":44,"tag":350,"props":4843,"children":4844},{"style":1273},[4845],{"type":50,"value":4846},"iconSnippet ",{"type":44,"tag":350,"props":4848,"children":4849},{"style":357},[4850],{"type":50,"value":4851},"?",{"type":44,"tag":350,"props":4853,"children":4854},{"style":1273},[4855],{"type":50,"value":1318},{"type":44,"tag":350,"props":4857,"children":4858},{"style":357},[4859],{"type":50,"value":101},{"type":44,"tag":350,"props":4861,"children":4862},{"style":1406},[4863],{"type":50,"value":66},{"type":44,"tag":350,"props":4865,"children":4866},{"style":357},[4867],{"type":50,"value":1413},{"type":44,"tag":350,"props":4869,"children":4870},{"style":424},[4871],{"type":50,"value":4872},"icon={",{"type":44,"tag":350,"props":4874,"children":4875},{"style":357},[4876],{"type":50,"value":3902},{"type":44,"tag":350,"props":4878,"children":4879},{"style":1273},[4880],{"type":50,"value":4881},"iconSnippet",{"type":44,"tag":350,"props":4883,"children":4884},{"style":357},[4885],{"type":50,"value":2038},{"type":44,"tag":350,"props":4887,"children":4888},{"style":424},[4889],{"type":50,"value":2038},{"type":44,"tag":350,"props":4891,"children":4892},{"style":357},[4893],{"type":50,"value":1413},{"type":44,"tag":350,"props":4895,"children":4896},{"style":357},[4897],{"type":50,"value":4898}," :",{"type":44,"tag":350,"props":4900,"children":4901},{"style":357},[4902],{"type":50,"value":4903}," ''}",{"type":44,"tag":350,"props":4905,"children":4906},{"style":424},[4907],{"type":50,"value":4908},">",{"type":44,"tag":350,"props":4910,"children":4911},{"style":357},[4912],{"type":50,"value":3902},{"type":44,"tag":350,"props":4914,"children":4915},{"style":1273},[4916],{"type":50,"value":4917},"label",{"type":44,"tag":350,"props":4919,"children":4920},{"style":357},[4921],{"type":50,"value":2038},{"type":44,"tag":350,"props":4923,"children":4924},{"style":424},[4925],{"type":50,"value":4926},"\u003C\u002FButton>",{"type":44,"tag":350,"props":4928,"children":4929},{"style":357},[4930],{"type":50,"value":1413},{"type":44,"tag":350,"props":4932,"children":4933},{"style":357},[4934],{"type":50,"value":1993},{"type":44,"tag":350,"props":4936,"children":4937},{"class":352,"line":1358},[4938],{"type":44,"tag":350,"props":4939,"children":4940},{"style":1242},[4941],{"type":50,"value":3932},{"type":44,"tag":350,"props":4943,"children":4944},{"class":352,"line":1366},[4945],{"type":44,"tag":350,"props":4946,"children":4947},{"style":357},[4948],{"type":50,"value":453},{"type":44,"tag":1163,"props":4950,"children":4952},{"id":4951},"conditional-props",[4953],{"type":50,"value":4954},"Conditional props",{"type":44,"tag":339,"props":4956,"children":4958},{"className":1230,"code":4957,"language":1232,"meta":344,"style":344},"const variant = instance.getEnum('Variant', { 'Primary': 'primary', 'Secondary': 'secondary' })\nconst disabled = instance.getBoolean('Disabled')\n\nexport default {\n  example: figma.code`\n    \u003CButton\n      variant=\"${variant}\"\n      ${disabled ? 'disabled' : ''}\n    >\n      ${label}\n    \u003C\u002FButton>\n  `,\n  \u002F\u002F ...\n}\n",[4959],{"type":44,"tag":66,"props":4960,"children":4961},{"__ignoreMap":344},[4962,5081,5128,5135,5150,5178,5186,5212,5251,5259,5274,5282,5294,5301],{"type":44,"tag":350,"props":4963,"children":4964},{"class":352,"line":353},[4965,4969,4973,4977,4981,4985,4989,4993,4997,5001,5005,5009,5013,5017,5021,5025,5029,5033,5037,5041,5045,5049,5053,5057,5061,5065,5069,5073,5077],{"type":44,"tag":350,"props":4966,"children":4967},{"style":372},[4968],{"type":50,"value":1303},{"type":44,"tag":350,"props":4970,"children":4971},{"style":1273},[4972],{"type":50,"value":1912},{"type":44,"tag":350,"props":4974,"children":4975},{"style":357},[4976],{"type":50,"value":1313},{"type":44,"tag":350,"props":4978,"children":4979},{"style":1273},[4980],{"type":50,"value":1852},{"type":44,"tag":350,"props":4982,"children":4983},{"style":357},[4984],{"type":50,"value":101},{"type":44,"tag":350,"props":4986,"children":4987},{"style":1406},[4988],{"type":50,"value":1929},{"type":44,"tag":350,"props":4990,"children":4991},{"style":1273},[4992],{"type":50,"value":1866},{"type":44,"tag":350,"props":4994,"children":4995},{"style":357},[4996],{"type":50,"value":1454},{"type":44,"tag":350,"props":4998,"children":4999},{"style":424},[5000],{"type":50,"value":1942},{"type":44,"tag":350,"props":5002,"children":5003},{"style":357},[5004],{"type":50,"value":1454},{"type":44,"tag":350,"props":5006,"children":5007},{"style":357},[5008],{"type":50,"value":1427},{"type":44,"tag":350,"props":5010,"children":5011},{"style":357},[5012],{"type":50,"value":1530},{"type":44,"tag":350,"props":5014,"children":5015},{"style":357},[5016],{"type":50,"value":1286},{"type":44,"tag":350,"props":5018,"children":5019},{"style":1388},[5020],{"type":50,"value":1967},{"type":44,"tag":350,"props":5022,"children":5023},{"style":357},[5024],{"type":50,"value":1454},{"type":44,"tag":350,"props":5026,"children":5027},{"style":357},[5028],{"type":50,"value":385},{"type":44,"tag":350,"props":5030,"children":5031},{"style":357},[5032],{"type":50,"value":1286},{"type":44,"tag":350,"props":5034,"children":5035},{"style":424},[5036],{"type":50,"value":1984},{"type":44,"tag":350,"props":5038,"children":5039},{"style":357},[5040],{"type":50,"value":1454},{"type":44,"tag":350,"props":5042,"children":5043},{"style":357},[5044],{"type":50,"value":1427},{"type":44,"tag":350,"props":5046,"children":5047},{"style":357},[5048],{"type":50,"value":1286},{"type":44,"tag":350,"props":5050,"children":5051},{"style":1388},[5052],{"type":50,"value":2005},{"type":44,"tag":350,"props":5054,"children":5055},{"style":357},[5056],{"type":50,"value":1454},{"type":44,"tag":350,"props":5058,"children":5059},{"style":357},[5060],{"type":50,"value":385},{"type":44,"tag":350,"props":5062,"children":5063},{"style":357},[5064],{"type":50,"value":1286},{"type":44,"tag":350,"props":5066,"children":5067},{"style":424},[5068],{"type":50,"value":2022},{"type":44,"tag":350,"props":5070,"children":5071},{"style":357},[5072],{"type":50,"value":1454},{"type":44,"tag":350,"props":5074,"children":5075},{"style":357},[5076],{"type":50,"value":2417},{"type":44,"tag":350,"props":5078,"children":5079},{"style":1273},[5080],{"type":50,"value":1884},{"type":44,"tag":350,"props":5082,"children":5083},{"class":352,"line":363},[5084,5088,5092,5096,5100,5104,5108,5112,5116,5120,5124],{"type":44,"tag":350,"props":5085,"children":5086},{"style":372},[5087],{"type":50,"value":1303},{"type":44,"tag":350,"props":5089,"children":5090},{"style":1273},[5091],{"type":50,"value":2260},{"type":44,"tag":350,"props":5093,"children":5094},{"style":357},[5095],{"type":50,"value":1313},{"type":44,"tag":350,"props":5097,"children":5098},{"style":1273},[5099],{"type":50,"value":1852},{"type":44,"tag":350,"props":5101,"children":5102},{"style":357},[5103],{"type":50,"value":101},{"type":44,"tag":350,"props":5105,"children":5106},{"style":1406},[5107],{"type":50,"value":2277},{"type":44,"tag":350,"props":5109,"children":5110},{"style":1273},[5111],{"type":50,"value":1866},{"type":44,"tag":350,"props":5113,"children":5114},{"style":357},[5115],{"type":50,"value":1454},{"type":44,"tag":350,"props":5117,"children":5118},{"style":424},[5119],{"type":50,"value":2290},{"type":44,"tag":350,"props":5121,"children":5122},{"style":357},[5123],{"type":50,"value":1454},{"type":44,"tag":350,"props":5125,"children":5126},{"style":1273},[5127],{"type":50,"value":1884},{"type":44,"tag":350,"props":5129,"children":5130},{"class":352,"line":393},[5131],{"type":44,"tag":350,"props":5132,"children":5133},{"emptyLinePlaceholder":1334},[5134],{"type":50,"value":1337},{"type":44,"tag":350,"props":5136,"children":5137},{"class":352,"line":438},[5138,5142,5146],{"type":44,"tag":350,"props":5139,"children":5140},{"style":1267},[5141],{"type":50,"value":1372},{"type":44,"tag":350,"props":5143,"children":5144},{"style":1267},[5145],{"type":50,"value":1377},{"type":44,"tag":350,"props":5147,"children":5148},{"style":357},[5149],{"type":50,"value":390},{"type":44,"tag":350,"props":5151,"children":5152},{"class":352,"line":447},[5153,5157,5161,5165,5169,5173],{"type":44,"tag":350,"props":5154,"children":5155},{"style":1388},[5156],{"type":50,"value":1391},{"type":44,"tag":350,"props":5158,"children":5159},{"style":357},[5160],{"type":50,"value":385},{"type":44,"tag":350,"props":5162,"children":5163},{"style":1273},[5164],{"type":50,"value":1318},{"type":44,"tag":350,"props":5166,"children":5167},{"style":357},[5168],{"type":50,"value":101},{"type":44,"tag":350,"props":5170,"children":5171},{"style":1406},[5172],{"type":50,"value":66},{"type":44,"tag":350,"props":5174,"children":5175},{"style":357},[5176],{"type":50,"value":5177},"`\n",{"type":44,"tag":350,"props":5179,"children":5180},{"class":352,"line":1330},[5181],{"type":44,"tag":350,"props":5182,"children":5183},{"style":424},[5184],{"type":50,"value":5185},"    \u003CButton\n",{"type":44,"tag":350,"props":5187,"children":5188},{"class":352,"line":1340},[5189,5194,5198,5203,5207],{"type":44,"tag":350,"props":5190,"children":5191},{"style":424},[5192],{"type":50,"value":5193},"      variant=\"",{"type":44,"tag":350,"props":5195,"children":5196},{"style":357},[5197],{"type":50,"value":3902},{"type":44,"tag":350,"props":5199,"children":5200},{"style":1273},[5201],{"type":50,"value":5202},"variant",{"type":44,"tag":350,"props":5204,"children":5205},{"style":357},[5206],{"type":50,"value":2038},{"type":44,"tag":350,"props":5208,"children":5209},{"style":424},[5210],{"type":50,"value":5211},"\"\n",{"type":44,"tag":350,"props":5213,"children":5214},{"class":352,"line":1349},[5215,5220,5225,5229,5233,5238,5242,5246],{"type":44,"tag":350,"props":5216,"children":5217},{"style":357},[5218],{"type":50,"value":5219},"      ${",{"type":44,"tag":350,"props":5221,"children":5222},{"style":1273},[5223],{"type":50,"value":5224},"disabled ",{"type":44,"tag":350,"props":5226,"children":5227},{"style":357},[5228],{"type":50,"value":4851},{"type":44,"tag":350,"props":5230,"children":5231},{"style":357},[5232],{"type":50,"value":1286},{"type":44,"tag":350,"props":5234,"children":5235},{"style":424},[5236],{"type":50,"value":5237},"disabled",{"type":44,"tag":350,"props":5239,"children":5240},{"style":357},[5241],{"type":50,"value":1454},{"type":44,"tag":350,"props":5243,"children":5244},{"style":357},[5245],{"type":50,"value":4898},{"type":44,"tag":350,"props":5247,"children":5248},{"style":357},[5249],{"type":50,"value":5250}," ''}\n",{"type":44,"tag":350,"props":5252,"children":5253},{"class":352,"line":1358},[5254],{"type":44,"tag":350,"props":5255,"children":5256},{"style":424},[5257],{"type":50,"value":5258},"    >\n",{"type":44,"tag":350,"props":5260,"children":5261},{"class":352,"line":1366},[5262,5266,5270],{"type":44,"tag":350,"props":5263,"children":5264},{"style":357},[5265],{"type":50,"value":5219},{"type":44,"tag":350,"props":5267,"children":5268},{"style":1273},[5269],{"type":50,"value":4917},{"type":44,"tag":350,"props":5271,"children":5272},{"style":357},[5273],{"type":50,"value":453},{"type":44,"tag":350,"props":5275,"children":5276},{"class":352,"line":1384},[5277],{"type":44,"tag":350,"props":5278,"children":5279},{"style":424},[5280],{"type":50,"value":5281},"    \u003C\u002FButton>\n",{"type":44,"tag":350,"props":5283,"children":5284},{"class":352,"line":1435},[5285,5290],{"type":44,"tag":350,"props":5286,"children":5287},{"style":357},[5288],{"type":50,"value":5289},"  `",{"type":44,"tag":350,"props":5291,"children":5292},{"style":357},[5293],{"type":50,"value":1993},{"type":44,"tag":350,"props":5295,"children":5296},{"class":352,"line":1480},[5297],{"type":44,"tag":350,"props":5298,"children":5299},{"style":1242},[5300],{"type":50,"value":3932},{"type":44,"tag":350,"props":5302,"children":5303},{"class":352,"line":1515},[5304],{"type":44,"tag":350,"props":5305,"children":5306},{"style":357},[5307],{"type":50,"value":453},{"type":44,"tag":53,"props":5309,"children":5311},{"id":5310},"step-6-validate",[5312],{"type":50,"value":5313},"Step 6: Validate",{"type":44,"tag":60,"props":5315,"children":5316},{},[5317,5319,5324],{"type":50,"value":5318},"Read back the ",{"type":44,"tag":66,"props":5320,"children":5322},{"className":5321},[],[5323],{"type":50,"value":71},{"type":50,"value":5325}," file and review it against the following:",{"type":44,"tag":232,"props":5327,"children":5328},{},[5329,5393,5403,5420,5456,5481],{"type":44,"tag":236,"props":5330,"children":5331},{},[5332,5337,5339,5344,5346,5351,5353,5358,5360,5365,5367,5372,5373,5378,5380,5385,5386,5391],{"type":44,"tag":82,"props":5333,"children":5334},{},[5335],{"type":50,"value":5336},"Correct file type & format (check this FIRST)",{"type":50,"value":5338}," — the file is ",{"type":44,"tag":66,"props":5340,"children":5342},{"className":5341},[],[5343],{"type":50,"value":1198},{"type":50,"value":5345}," (NOT ",{"type":44,"tag":66,"props":5347,"children":5349},{"className":5348},[],[5350],{"type":50,"value":99},{"type":50,"value":5352},"), and its default export is a parserless template using a ",{"type":44,"tag":66,"props":5354,"children":5356},{"className":5355},[],[5357],{"type":50,"value":124},{"type":50,"value":5359}," tagged template. It must NOT use ",{"type":44,"tag":66,"props":5361,"children":5363},{"className":5362},[],[5364],{"type":50,"value":152},{"type":50,"value":5366}," (the parser-based format). If you wrote ",{"type":44,"tag":66,"props":5368,"children":5370},{"className":5369},[],[5371],{"type":50,"value":99},{"type":50,"value":4320},{"type":44,"tag":66,"props":5374,"children":5376},{"className":5375},[],[5377],{"type":50,"value":152},{"type":50,"value":5379},", discard it and rewrite as a ",{"type":44,"tag":66,"props":5381,"children":5383},{"className":5382},[],[5384],{"type":50,"value":71},{"type":50,"value":210},{"type":44,"tag":66,"props":5387,"children":5389},{"className":5388},[],[5390],{"type":50,"value":223},{"type":50,"value":5392}," template.",{"type":44,"tag":236,"props":5394,"children":5395},{},[5396,5401],{"type":44,"tag":82,"props":5397,"children":5398},{},[5399],{"type":50,"value":5400},"Property coverage",{"type":50,"value":5402}," — every Figma property from Step 3 should be accounted for in the template. Flag any that are missing and ask the user if they were intentionally omitted.",{"type":44,"tag":236,"props":5404,"children":5405},{},[5406,5411,5413,5418],{"type":44,"tag":82,"props":5407,"children":5408},{},[5409],{"type":50,"value":5410},"Valid, correctly typed code",{"type":50,"value":5412}," — all emitted code must be valid and correctly typed against the code component's ",{"type":44,"tag":66,"props":5414,"children":5416},{"className":5415},[],[5417],{"type":50,"value":2437},{"type":50,"value":5419}," interface. Never make up component properties — if a Figma property has no corresponding code prop, omit it rather than invent one.",{"type":44,"tag":236,"props":5421,"children":5422},{},[5423,5428,5430,5435,5436,5441,5442,5447,5449,5454],{"type":44,"tag":82,"props":5424,"children":5425},{},[5426],{"type":50,"value":5427},"No hardcoded children",{"type":50,"value":5429}," — verify that every INSTANCE_SWAP property and child component slot uses the dynamic APIs (",{"type":44,"tag":66,"props":5431,"children":5433},{"className":5432},[],[5434],{"type":50,"value":3758},{"type":50,"value":1070},{"type":44,"tag":66,"props":5437,"children":5439},{"className":5438},[],[5440],{"type":50,"value":4318},{"type":50,"value":1070},{"type":44,"tag":66,"props":5443,"children":5445},{"className":5444},[],[5446],{"type":50,"value":4326},{"type":50,"value":5448},", etc.) with ",{"type":44,"tag":66,"props":5450,"children":5452},{"className":5451},[],[5453],{"type":50,"value":1737},{"type":50,"value":5455},". No slot should contain hardcoded component content.",{"type":44,"tag":236,"props":5457,"children":5458},{},[5459,5464,5466,5471,5473,5479],{"type":44,"tag":82,"props":5460,"children":5461},{},[5462],{"type":50,"value":5463},"Rules and Pitfalls",{"type":50,"value":5465}," — check for the common mistakes listed below (string concatenation of template results, unnecessary ",{"type":44,"tag":66,"props":5467,"children":5469},{"className":5468},[],[5470],{"type":50,"value":1730},{"type":50,"value":5472}," guards, missing ",{"type":44,"tag":66,"props":5474,"children":5476},{"className":5475},[],[5477],{"type":50,"value":5478},"type === 'INSTANCE'",{"type":50,"value":5480}," checks, etc.)",{"type":44,"tag":236,"props":5482,"children":5483},{},[5484,5489,5491,5496,5497,5502,5503,5508,5510,5515,5517,5522,5524,5529],{"type":44,"tag":82,"props":5485,"children":5486},{},[5487],{"type":50,"value":5488},"Interpolation wrapping",{"type":50,"value":5490}," — strings (",{"type":44,"tag":66,"props":5492,"children":5494},{"className":5493},[],[5495],{"type":50,"value":1861},{"type":50,"value":1070},{"type":44,"tag":66,"props":5498,"children":5500},{"className":5499},[],[5501],{"type":50,"value":1929},{"type":50,"value":1070},{"type":44,"tag":66,"props":5504,"children":5506},{"className":5505},[],[5507],{"type":50,"value":3981},{"type":50,"value":5509},") wrapped in quotes, instance\u002Fsection values (",{"type":44,"tag":66,"props":5511,"children":5513},{"className":5512},[],[5514],{"type":50,"value":4004},{"type":50,"value":5516},") wrapped in braces, slot sections (",{"type":44,"tag":66,"props":5518,"children":5520},{"className":5519},[],[5521],{"type":50,"value":3822},{"type":50,"value":5523},") interpolated as snippet sections inside ",{"type":44,"tag":66,"props":5525,"children":5527},{"className":5526},[],[5528],{"type":50,"value":124},{"type":50,"value":5530},", booleans using conditionals",{"type":44,"tag":60,"props":5532,"children":5533},{},[5534,5536,5542,5544,5548],{"type":50,"value":5535},"If anything looks uncertain, consult ",{"type":44,"tag":4617,"props":5537,"children":5539},{"href":5538},"references\u002Fapi.md",[5540],{"type":50,"value":5541},"api.md",{"type":50,"value":5543}," for API details and ",{"type":44,"tag":4617,"props":5545,"children":5546},{"href":4619},[5547],{"type":50,"value":4622},{"type":50,"value":5549}," for complex nesting.",{"type":44,"tag":53,"props":5551,"children":5553},{"id":5552},"inline-quick-reference",[5554],{"type":50,"value":5555},"Inline Quick Reference",{"type":44,"tag":1163,"props":5557,"children":5559},{"id":5558},"instance-methods",[5560,5566],{"type":44,"tag":66,"props":5561,"children":5563},{"className":5562},[],[5564],{"type":50,"value":5565},"instance.*",{"type":50,"value":5567}," Methods",{"type":44,"tag":482,"props":5569,"children":5570},{},[5571,5591],{"type":44,"tag":486,"props":5572,"children":5573},{},[5574],{"type":44,"tag":490,"props":5575,"children":5576},{},[5577,5581,5586],{"type":44,"tag":494,"props":5578,"children":5579},{},[5580],{"type":50,"value":4092},{"type":44,"tag":494,"props":5582,"children":5583},{},[5584],{"type":50,"value":5585},"Signature",{"type":44,"tag":494,"props":5587,"children":5588},{},[5589],{"type":50,"value":5590},"Returns",{"type":44,"tag":508,"props":5592,"children":5593},{},[5594,5623,5652,5681,5709,5736,5765,5794,5823,5852,5882],{"type":44,"tag":490,"props":5595,"children":5596},{},[5597,5605,5614],{"type":44,"tag":515,"props":5598,"children":5599},{},[5600],{"type":44,"tag":66,"props":5601,"children":5603},{"className":5602},[],[5604],{"type":50,"value":1861},{"type":44,"tag":515,"props":5606,"children":5607},{},[5608],{"type":44,"tag":66,"props":5609,"children":5611},{"className":5610},[],[5612],{"type":50,"value":5613},"(propName: string)",{"type":44,"tag":515,"props":5615,"children":5616},{},[5617],{"type":44,"tag":66,"props":5618,"children":5620},{"className":5619},[],[5621],{"type":50,"value":5622},"string",{"type":44,"tag":490,"props":5624,"children":5625},{},[5626,5634,5643],{"type":44,"tag":515,"props":5627,"children":5628},{},[5629],{"type":44,"tag":66,"props":5630,"children":5632},{"className":5631},[],[5633],{"type":50,"value":2277},{"type":44,"tag":515,"props":5635,"children":5636},{},[5637],{"type":44,"tag":66,"props":5638,"children":5640},{"className":5639},[],[5641],{"type":50,"value":5642},"(propName: string, mapping?: { true: any, false: any })",{"type":44,"tag":515,"props":5644,"children":5645},{},[5646],{"type":44,"tag":66,"props":5647,"children":5649},{"className":5648},[],[5650],{"type":50,"value":5651},"boolean | any",{"type":44,"tag":490,"props":5653,"children":5654},{},[5655,5663,5672],{"type":44,"tag":515,"props":5656,"children":5657},{},[5658],{"type":44,"tag":66,"props":5659,"children":5661},{"className":5660},[],[5662],{"type":50,"value":1929},{"type":44,"tag":515,"props":5664,"children":5665},{},[5666],{"type":44,"tag":66,"props":5667,"children":5669},{"className":5668},[],[5670],{"type":50,"value":5671},"(propName: string, mapping: { [figmaVal]: codeVal })",{"type":44,"tag":515,"props":5673,"children":5674},{},[5675],{"type":44,"tag":66,"props":5676,"children":5678},{"className":5677},[],[5679],{"type":50,"value":5680},"any",{"type":44,"tag":490,"props":5682,"children":5683},{},[5684,5692,5700],{"type":44,"tag":515,"props":5685,"children":5686},{},[5687],{"type":44,"tag":66,"props":5688,"children":5690},{"className":5689},[],[5691],{"type":50,"value":3579},{"type":44,"tag":515,"props":5693,"children":5694},{},[5695],{"type":44,"tag":66,"props":5696,"children":5698},{"className":5697},[],[5699],{"type":50,"value":5613},{"type":44,"tag":515,"props":5701,"children":5702},{},[5703],{"type":44,"tag":66,"props":5704,"children":5706},{"className":5705},[],[5707],{"type":50,"value":5708},"InstanceHandle | null",{"type":44,"tag":490,"props":5710,"children":5711},{},[5712,5720,5728],{"type":44,"tag":515,"props":5713,"children":5714},{},[5715],{"type":44,"tag":66,"props":5716,"children":5718},{"className":5717},[],[5719],{"type":50,"value":3822},{"type":44,"tag":515,"props":5721,"children":5722},{},[5723],{"type":44,"tag":66,"props":5724,"children":5726},{"className":5725},[],[5727],{"type":50,"value":5613},{"type":44,"tag":515,"props":5729,"children":5730},{},[5731],{"type":44,"tag":66,"props":5732,"children":5734},{"className":5733},[],[5735],{"type":50,"value":4034},{"type":44,"tag":490,"props":5737,"children":5738},{},[5739,5748,5756],{"type":44,"tag":515,"props":5740,"children":5741},{},[5742],{"type":44,"tag":66,"props":5743,"children":5745},{"className":5744},[],[5746],{"type":50,"value":5747},"getPropertyValue",{"type":44,"tag":515,"props":5749,"children":5750},{},[5751],{"type":44,"tag":66,"props":5752,"children":5754},{"className":5753},[],[5755],{"type":50,"value":5613},{"type":44,"tag":515,"props":5757,"children":5758},{},[5759],{"type":44,"tag":66,"props":5760,"children":5762},{"className":5761},[],[5763],{"type":50,"value":5764},"string | boolean",{"type":44,"tag":490,"props":5766,"children":5767},{},[5768,5776,5785],{"type":44,"tag":515,"props":5769,"children":5770},{},[5771],{"type":44,"tag":66,"props":5772,"children":5774},{"className":5773},[],[5775],{"type":50,"value":4378},{"type":44,"tag":515,"props":5777,"children":5778},{},[5779],{"type":44,"tag":66,"props":5780,"children":5782},{"className":5781},[],[5783],{"type":50,"value":5784},"(layerName: string, opts?: SelectorOptions)",{"type":44,"tag":515,"props":5786,"children":5787},{},[5788],{"type":44,"tag":66,"props":5789,"children":5791},{"className":5790},[],[5792],{"type":50,"value":5793},"InstanceHandle | ErrorHandle",{"type":44,"tag":490,"props":5795,"children":5796},{},[5797,5806,5814],{"type":44,"tag":515,"props":5798,"children":5799},{},[5800],{"type":44,"tag":66,"props":5801,"children":5803},{"className":5802},[],[5804],{"type":50,"value":5805},"findText",{"type":44,"tag":515,"props":5807,"children":5808},{},[5809],{"type":44,"tag":66,"props":5810,"children":5812},{"className":5811},[],[5813],{"type":50,"value":5784},{"type":44,"tag":515,"props":5815,"children":5816},{},[5817],{"type":44,"tag":66,"props":5818,"children":5820},{"className":5819},[],[5821],{"type":50,"value":5822},"TextHandle | ErrorHandle",{"type":44,"tag":490,"props":5824,"children":5825},{},[5826,5835,5844],{"type":44,"tag":515,"props":5827,"children":5828},{},[5829],{"type":44,"tag":66,"props":5830,"children":5832},{"className":5831},[],[5833],{"type":50,"value":5834},"findConnectedInstance",{"type":44,"tag":515,"props":5836,"children":5837},{},[5838],{"type":44,"tag":66,"props":5839,"children":5841},{"className":5840},[],[5842],{"type":50,"value":5843},"(codeConnectId: string, opts?: SelectorOptions)",{"type":44,"tag":515,"props":5845,"children":5846},{},[5847],{"type":44,"tag":66,"props":5848,"children":5850},{"className":5849},[],[5851],{"type":50,"value":5793},{"type":44,"tag":490,"props":5853,"children":5854},{},[5855,5864,5873],{"type":44,"tag":515,"props":5856,"children":5857},{},[5858],{"type":44,"tag":66,"props":5859,"children":5861},{"className":5860},[],[5862],{"type":50,"value":5863},"findConnectedInstances",{"type":44,"tag":515,"props":5865,"children":5866},{},[5867],{"type":44,"tag":66,"props":5868,"children":5870},{"className":5869},[],[5871],{"type":50,"value":5872},"(selector: (node) => boolean, opts?: SelectorOptions)",{"type":44,"tag":515,"props":5874,"children":5875},{},[5876],{"type":44,"tag":66,"props":5877,"children":5879},{"className":5878},[],[5880],{"type":50,"value":5881},"InstanceHandle[]",{"type":44,"tag":490,"props":5883,"children":5884},{},[5885,5894,5902],{"type":44,"tag":515,"props":5886,"children":5887},{},[5888],{"type":44,"tag":66,"props":5889,"children":5891},{"className":5890},[],[5892],{"type":50,"value":5893},"findLayers",{"type":44,"tag":515,"props":5895,"children":5896},{},[5897],{"type":44,"tag":66,"props":5898,"children":5900},{"className":5899},[],[5901],{"type":50,"value":5872},{"type":44,"tag":515,"props":5903,"children":5904},{},[5905],{"type":44,"tag":66,"props":5906,"children":5908},{"className":5907},[],[5909],{"type":50,"value":5910},"(InstanceHandle | TextHandle)[]",{"type":44,"tag":1163,"props":5912,"children":5914},{"id":5913},"instancehandle-methods",[5915],{"type":50,"value":5916},"InstanceHandle Methods",{"type":44,"tag":482,"props":5918,"children":5919},{},[5920,5934],{"type":44,"tag":486,"props":5921,"children":5922},{},[5923],{"type":44,"tag":490,"props":5924,"children":5925},{},[5926,5930],{"type":44,"tag":494,"props":5927,"children":5928},{},[5929],{"type":50,"value":4092},{"type":44,"tag":494,"props":5931,"children":5932},{},[5933],{"type":50,"value":5590},{"type":44,"tag":508,"props":5935,"children":5936},{},[5937,5957,5977],{"type":44,"tag":490,"props":5938,"children":5939},{},[5940,5948],{"type":44,"tag":515,"props":5941,"children":5942},{},[5943],{"type":44,"tag":66,"props":5944,"children":5946},{"className":5945},[],[5947],{"type":50,"value":1730},{"type":44,"tag":515,"props":5949,"children":5950},{},[5951],{"type":44,"tag":66,"props":5952,"children":5954},{"className":5953},[],[5955],{"type":50,"value":5956},"boolean",{"type":44,"tag":490,"props":5958,"children":5959},{},[5960,5968],{"type":44,"tag":515,"props":5961,"children":5962},{},[5963],{"type":44,"tag":66,"props":5964,"children":5966},{"className":5965},[],[5967],{"type":50,"value":1737},{"type":44,"tag":515,"props":5969,"children":5970},{},[5971],{"type":44,"tag":66,"props":5972,"children":5974},{"className":5973},[],[5975],{"type":50,"value":5976},"{ example: ResultSection[], metadata: Metadata }",{"type":44,"tag":490,"props":5978,"children":5979},{},[5980,5989],{"type":44,"tag":515,"props":5981,"children":5982},{},[5983],{"type":44,"tag":66,"props":5984,"children":5986},{"className":5985},[],[5987],{"type":50,"value":5988},"codeConnectId()",{"type":44,"tag":515,"props":5990,"children":5991},{},[5992],{"type":44,"tag":66,"props":5993,"children":5995},{"className":5994},[],[5996],{"type":50,"value":5997},"string | null",{"type":44,"tag":1163,"props":5999,"children":6001},{"id":6000},"texthandle-properties",[6002],{"type":50,"value":6003},"TextHandle Properties",{"type":44,"tag":482,"props":6005,"children":6006},{},[6007,6022],{"type":44,"tag":486,"props":6008,"children":6009},{},[6010],{"type":44,"tag":490,"props":6011,"children":6012},{},[6013,6018],{"type":44,"tag":494,"props":6014,"children":6015},{},[6016],{"type":50,"value":6017},"Property",{"type":44,"tag":494,"props":6019,"children":6020},{},[6021],{"type":50,"value":2913},{"type":44,"tag":508,"props":6023,"children":6024},{},[6025,6044],{"type":44,"tag":490,"props":6026,"children":6027},{},[6028,6036],{"type":44,"tag":515,"props":6029,"children":6030},{},[6031],{"type":44,"tag":66,"props":6032,"children":6034},{"className":6033},[],[6035],{"type":50,"value":1810},{"type":44,"tag":515,"props":6037,"children":6038},{},[6039],{"type":44,"tag":66,"props":6040,"children":6042},{"className":6041},[],[6043],{"type":50,"value":5622},{"type":44,"tag":490,"props":6045,"children":6046},{},[6047,6056],{"type":44,"tag":515,"props":6048,"children":6049},{},[6050],{"type":44,"tag":66,"props":6051,"children":6053},{"className":6052},[],[6054],{"type":50,"value":6055},".name",{"type":44,"tag":515,"props":6057,"children":6058},{},[6059],{"type":44,"tag":66,"props":6060,"children":6062},{"className":6061},[],[6063],{"type":50,"value":5622},{"type":44,"tag":1163,"props":6065,"children":6067},{"id":6066},"selectoroptions",[6068],{"type":50,"value":6069},"SelectorOptions",{"type":44,"tag":339,"props":6071,"children":6073},{"className":1230,"code":6072,"language":1232,"meta":344,"style":344},"{ path?: string[], traverseInstances?: boolean }\n",[6074],{"type":44,"tag":66,"props":6075,"children":6076},{"__ignoreMap":344},[6077],{"type":44,"tag":350,"props":6078,"children":6079},{"class":352,"line":353},[6080,6085,6090,6095,6100,6105,6109,6114,6118,6123],{"type":44,"tag":350,"props":6081,"children":6082},{"style":357},[6083],{"type":50,"value":6084},"{",{"type":44,"tag":350,"props":6086,"children":6087},{"style":1273},[6088],{"type":50,"value":6089}," path",{"type":44,"tag":350,"props":6091,"children":6092},{"style":357},[6093],{"type":50,"value":6094},"?:",{"type":44,"tag":350,"props":6096,"children":6097},{"style":1273},[6098],{"type":50,"value":6099}," string",{"type":44,"tag":350,"props":6101,"children":6102},{"style":1388},[6103],{"type":50,"value":6104},"[]",{"type":44,"tag":350,"props":6106,"children":6107},{"style":357},[6108],{"type":50,"value":1427},{"type":44,"tag":350,"props":6110,"children":6111},{"style":1273},[6112],{"type":50,"value":6113}," traverseInstances",{"type":44,"tag":350,"props":6115,"children":6116},{"style":357},[6117],{"type":50,"value":6094},{"type":44,"tag":350,"props":6119,"children":6120},{"style":1273},[6121],{"type":50,"value":6122}," boolean",{"type":44,"tag":350,"props":6124,"children":6125},{"style":357},[6126],{"type":50,"value":6127}," }\n",{"type":44,"tag":232,"props":6129,"children":6130},{},[6131,6156],{"type":44,"tag":236,"props":6132,"children":6133},{},[6134,6140,6142,6147,6149,6154],{"type":44,"tag":66,"props":6135,"children":6137},{"className":6136},[],[6138],{"type":50,"value":6139},"traverseInstances: true",{"type":50,"value":6141}," — required when the target lives inside another nested instance. Without it, ",{"type":44,"tag":66,"props":6143,"children":6145},{"className":6144},[],[6146],{"type":50,"value":4378},{"type":50,"value":6148},"\u002F",{"type":44,"tag":66,"props":6150,"children":6152},{"className":6151},[],[6153],{"type":50,"value":5805},{"type":50,"value":6155}," only search the current instance's own layers and stop at nested instance boundaries.",{"type":44,"tag":236,"props":6157,"children":6158},{},[6159,6165],{"type":44,"tag":66,"props":6160,"children":6162},{"className":6161},[],[6163],{"type":50,"value":6164},"path: string[]",{"type":50,"value":6166}," — disambiguates when multiple descendants share the same layer name. Lists parent layer names that must appear on the path to the target.",{"type":44,"tag":60,"props":6168,"children":6169},{},[6170],{"type":44,"tag":82,"props":6171,"children":6172},{},[6173],{"type":50,"value":6174},"Examples:",{"type":44,"tag":339,"props":6176,"children":6178},{"className":1230,"code":6177,"language":1232,"meta":344,"style":344},"\u002F\u002F Layer hierarchy:\n\u002F\u002F   A > C (instance) > \"mychild\"\n\u002F\u002F \"mychild\" sits inside nested instance C, so plain findInstance returns ErrorHandle.\ninstance.findInstance('mychild', { traverseInstances: true })\n\n\u002F\u002F Layer hierarchy:\n\u002F\u002F   A > C (instance) > \"mychild\"\n\u002F\u002F   A > D (instance) > \"mychild\"\n\u002F\u002F Two \"mychild\" layers exist — use path to pick the one under C.\ninstance.findInstance('mychild', { traverseInstances: true, path: ['C'] })\n",[6179],{"type":44,"tag":66,"props":6180,"children":6181},{"__ignoreMap":344},[6182,6190,6198,6206,6267,6274,6281,6288,6296,6304],{"type":44,"tag":350,"props":6183,"children":6184},{"class":352,"line":353},[6185],{"type":44,"tag":350,"props":6186,"children":6187},{"style":1242},[6188],{"type":50,"value":6189},"\u002F\u002F Layer hierarchy:\n",{"type":44,"tag":350,"props":6191,"children":6192},{"class":352,"line":363},[6193],{"type":44,"tag":350,"props":6194,"children":6195},{"style":1242},[6196],{"type":50,"value":6197},"\u002F\u002F   A > C (instance) > \"mychild\"\n",{"type":44,"tag":350,"props":6199,"children":6200},{"class":352,"line":393},[6201],{"type":44,"tag":350,"props":6202,"children":6203},{"style":1242},[6204],{"type":50,"value":6205},"\u002F\u002F \"mychild\" sits inside nested instance C, so plain findInstance returns ErrorHandle.\n",{"type":44,"tag":350,"props":6207,"children":6208},{"class":352,"line":438},[6209,6214,6218,6222,6226,6230,6235,6239,6243,6247,6251,6255,6259,6263],{"type":44,"tag":350,"props":6210,"children":6211},{"style":1273},[6212],{"type":50,"value":6213},"instance",{"type":44,"tag":350,"props":6215,"children":6216},{"style":357},[6217],{"type":50,"value":101},{"type":44,"tag":350,"props":6219,"children":6220},{"style":1406},[6221],{"type":50,"value":4378},{"type":44,"tag":350,"props":6223,"children":6224},{"style":1273},[6225],{"type":50,"value":1866},{"type":44,"tag":350,"props":6227,"children":6228},{"style":357},[6229],{"type":50,"value":1454},{"type":44,"tag":350,"props":6231,"children":6232},{"style":424},[6233],{"type":50,"value":6234},"mychild",{"type":44,"tag":350,"props":6236,"children":6237},{"style":357},[6238],{"type":50,"value":1454},{"type":44,"tag":350,"props":6240,"children":6241},{"style":357},[6242],{"type":50,"value":1427},{"type":44,"tag":350,"props":6244,"children":6245},{"style":357},[6246],{"type":50,"value":1530},{"type":44,"tag":350,"props":6248,"children":6249},{"style":1388},[6250],{"type":50,"value":6113},{"type":44,"tag":350,"props":6252,"children":6253},{"style":357},[6254],{"type":50,"value":385},{"type":44,"tag":350,"props":6256,"children":6257},{"style":1551},[6258],{"type":50,"value":1554},{"type":44,"tag":350,"props":6260,"children":6261},{"style":357},[6262],{"type":50,"value":2417},{"type":44,"tag":350,"props":6264,"children":6265},{"style":1273},[6266],{"type":50,"value":1884},{"type":44,"tag":350,"props":6268,"children":6269},{"class":352,"line":447},[6270],{"type":44,"tag":350,"props":6271,"children":6272},{"emptyLinePlaceholder":1334},[6273],{"type":50,"value":1337},{"type":44,"tag":350,"props":6275,"children":6276},{"class":352,"line":1330},[6277],{"type":44,"tag":350,"props":6278,"children":6279},{"style":1242},[6280],{"type":50,"value":6189},{"type":44,"tag":350,"props":6282,"children":6283},{"class":352,"line":1340},[6284],{"type":44,"tag":350,"props":6285,"children":6286},{"style":1242},[6287],{"type":50,"value":6197},{"type":44,"tag":350,"props":6289,"children":6290},{"class":352,"line":1349},[6291],{"type":44,"tag":350,"props":6292,"children":6293},{"style":1242},[6294],{"type":50,"value":6295},"\u002F\u002F   A > D (instance) > \"mychild\"\n",{"type":44,"tag":350,"props":6297,"children":6298},{"class":352,"line":1358},[6299],{"type":44,"tag":350,"props":6300,"children":6301},{"style":1242},[6302],{"type":50,"value":6303},"\u002F\u002F Two \"mychild\" layers exist — use path to pick the one under C.\n",{"type":44,"tag":350,"props":6305,"children":6306},{"class":352,"line":1366},[6307,6311,6315,6319,6323,6327,6331,6335,6339,6343,6347,6351,6355,6359,6363,6367,6371,6375,6380,6384,6389,6393],{"type":44,"tag":350,"props":6308,"children":6309},{"style":1273},[6310],{"type":50,"value":6213},{"type":44,"tag":350,"props":6312,"children":6313},{"style":357},[6314],{"type":50,"value":101},{"type":44,"tag":350,"props":6316,"children":6317},{"style":1406},[6318],{"type":50,"value":4378},{"type":44,"tag":350,"props":6320,"children":6321},{"style":1273},[6322],{"type":50,"value":1866},{"type":44,"tag":350,"props":6324,"children":6325},{"style":357},[6326],{"type":50,"value":1454},{"type":44,"tag":350,"props":6328,"children":6329},{"style":424},[6330],{"type":50,"value":6234},{"type":44,"tag":350,"props":6332,"children":6333},{"style":357},[6334],{"type":50,"value":1454},{"type":44,"tag":350,"props":6336,"children":6337},{"style":357},[6338],{"type":50,"value":1427},{"type":44,"tag":350,"props":6340,"children":6341},{"style":357},[6342],{"type":50,"value":1530},{"type":44,"tag":350,"props":6344,"children":6345},{"style":1388},[6346],{"type":50,"value":6113},{"type":44,"tag":350,"props":6348,"children":6349},{"style":357},[6350],{"type":50,"value":385},{"type":44,"tag":350,"props":6352,"children":6353},{"style":1551},[6354],{"type":50,"value":1554},{"type":44,"tag":350,"props":6356,"children":6357},{"style":357},[6358],{"type":50,"value":1427},{"type":44,"tag":350,"props":6360,"children":6361},{"style":1388},[6362],{"type":50,"value":6089},{"type":44,"tag":350,"props":6364,"children":6365},{"style":357},[6366],{"type":50,"value":385},{"type":44,"tag":350,"props":6368,"children":6369},{"style":1273},[6370],{"type":50,"value":417},{"type":44,"tag":350,"props":6372,"children":6373},{"style":357},[6374],{"type":50,"value":1454},{"type":44,"tag":350,"props":6376,"children":6377},{"style":424},[6378],{"type":50,"value":6379},"C",{"type":44,"tag":350,"props":6381,"children":6382},{"style":357},[6383],{"type":50,"value":1454},{"type":44,"tag":350,"props":6385,"children":6386},{"style":1273},[6387],{"type":50,"value":6388},"] ",{"type":44,"tag":350,"props":6390,"children":6391},{"style":357},[6392],{"type":50,"value":2038},{"type":44,"tag":350,"props":6394,"children":6395},{"style":1273},[6396],{"type":50,"value":1884},{"type":44,"tag":60,"props":6398,"children":6399},{},[6400,6405,6407,6413,6415,6420],{"type":44,"tag":82,"props":6401,"children":6402},{},[6403],{"type":50,"value":6404},"When to reach into a nested instance from a parent template:",{"type":50,"value":6406}," only when the parent code component (from Step 4) takes the nested layer as a prop value itself (e.g. ",{"type":44,"tag":66,"props":6408,"children":6410},{"className":6409},[],[6411],{"type":50,"value":6412},"\u003CC show={\u003CB \u002F>} \u002F>",{"type":50,"value":6414}," — A forwards B into C). If the parent just composes C and C renders B internally, resolve C with ",{"type":44,"tag":66,"props":6416,"children":6418},{"className":6417},[],[6419],{"type":50,"value":1737},{"type":50,"value":6421}," and let C's own template handle B — don't duplicate B's rendering at the parent level.",{"type":44,"tag":1163,"props":6423,"children":6425},{"id":6424},"export-structure",[6426],{"type":50,"value":6427},"Export Structure",{"type":44,"tag":339,"props":6429,"children":6431},{"className":1230,"code":6430,"language":1232,"meta":344,"style":344},"export default {\n  example: figma.code`...`,                      \u002F\u002F Required: ResultSection[]\n  id: 'component-name',                         \u002F\u002F Required: string\n  imports: ['import { X } from \"...\"'],          \u002F\u002F Optional: string[]\n  metadata: { nestable: true, props: {} }        \u002F\u002F Optional\n}\n",[6432],{"type":44,"tag":66,"props":6433,"children":6434},{"__ignoreMap":344},[6435,6450,6495,6527,6568,6622],{"type":44,"tag":350,"props":6436,"children":6437},{"class":352,"line":353},[6438,6442,6446],{"type":44,"tag":350,"props":6439,"children":6440},{"style":1267},[6441],{"type":50,"value":1372},{"type":44,"tag":350,"props":6443,"children":6444},{"style":1267},[6445],{"type":50,"value":1377},{"type":44,"tag":350,"props":6447,"children":6448},{"style":357},[6449],{"type":50,"value":390},{"type":44,"tag":350,"props":6451,"children":6452},{"class":352,"line":363},[6453,6457,6461,6465,6469,6473,6477,6482,6486,6490],{"type":44,"tag":350,"props":6454,"children":6455},{"style":1388},[6456],{"type":50,"value":1391},{"type":44,"tag":350,"props":6458,"children":6459},{"style":357},[6460],{"type":50,"value":385},{"type":44,"tag":350,"props":6462,"children":6463},{"style":1273},[6464],{"type":50,"value":1318},{"type":44,"tag":350,"props":6466,"children":6467},{"style":357},[6468],{"type":50,"value":101},{"type":44,"tag":350,"props":6470,"children":6471},{"style":1406},[6472],{"type":50,"value":66},{"type":44,"tag":350,"props":6474,"children":6475},{"style":357},[6476],{"type":50,"value":1413},{"type":44,"tag":350,"props":6478,"children":6479},{"style":424},[6480],{"type":50,"value":6481},"...",{"type":44,"tag":350,"props":6483,"children":6484},{"style":357},[6485],{"type":50,"value":1413},{"type":44,"tag":350,"props":6487,"children":6488},{"style":357},[6489],{"type":50,"value":1427},{"type":44,"tag":350,"props":6491,"children":6492},{"style":1242},[6493],{"type":50,"value":6494},"                      \u002F\u002F Required: ResultSection[]\n",{"type":44,"tag":350,"props":6496,"children":6497},{"class":352,"line":393},[6498,6502,6506,6510,6514,6518,6522],{"type":44,"tag":350,"props":6499,"children":6500},{"style":1388},[6501],{"type":50,"value":1486},{"type":44,"tag":350,"props":6503,"children":6504},{"style":357},[6505],{"type":50,"value":385},{"type":44,"tag":350,"props":6507,"children":6508},{"style":357},[6509],{"type":50,"value":1286},{"type":44,"tag":350,"props":6511,"children":6512},{"style":424},[6513],{"type":50,"value":1499},{"type":44,"tag":350,"props":6515,"children":6516},{"style":357},[6517],{"type":50,"value":1454},{"type":44,"tag":350,"props":6519,"children":6520},{"style":357},[6521],{"type":50,"value":1427},{"type":44,"tag":350,"props":6523,"children":6524},{"style":1242},[6525],{"type":50,"value":6526},"                         \u002F\u002F Required: string\n",{"type":44,"tag":350,"props":6528,"children":6529},{"class":352,"line":438},[6530,6534,6538,6542,6546,6551,6555,6559,6563],{"type":44,"tag":350,"props":6531,"children":6532},{"style":1388},[6533],{"type":50,"value":1441},{"type":44,"tag":350,"props":6535,"children":6536},{"style":357},[6537],{"type":50,"value":385},{"type":44,"tag":350,"props":6539,"children":6540},{"style":1273},[6541],{"type":50,"value":417},{"type":44,"tag":350,"props":6543,"children":6544},{"style":357},[6545],{"type":50,"value":1454},{"type":44,"tag":350,"props":6547,"children":6548},{"style":424},[6549],{"type":50,"value":6550},"import { X } from \"...\"",{"type":44,"tag":350,"props":6552,"children":6553},{"style":357},[6554],{"type":50,"value":1454},{"type":44,"tag":350,"props":6556,"children":6557},{"style":1273},[6558],{"type":50,"value":1468},{"type":44,"tag":350,"props":6560,"children":6561},{"style":357},[6562],{"type":50,"value":1427},{"type":44,"tag":350,"props":6564,"children":6565},{"style":1242},[6566],{"type":50,"value":6567},"          \u002F\u002F Optional: string[]\n",{"type":44,"tag":350,"props":6569,"children":6570},{"class":352,"line":447},[6571,6575,6579,6583,6588,6592,6596,6600,6605,6609,6613,6617],{"type":44,"tag":350,"props":6572,"children":6573},{"style":1388},[6574],{"type":50,"value":1521},{"type":44,"tag":350,"props":6576,"children":6577},{"style":357},[6578],{"type":50,"value":385},{"type":44,"tag":350,"props":6580,"children":6581},{"style":357},[6582],{"type":50,"value":1530},{"type":44,"tag":350,"props":6584,"children":6585},{"style":1388},[6586],{"type":50,"value":6587}," nestable",{"type":44,"tag":350,"props":6589,"children":6590},{"style":357},[6591],{"type":50,"value":385},{"type":44,"tag":350,"props":6593,"children":6594},{"style":1551},[6595],{"type":50,"value":1554},{"type":44,"tag":350,"props":6597,"children":6598},{"style":357},[6599],{"type":50,"value":1427},{"type":44,"tag":350,"props":6601,"children":6602},{"style":1388},[6603],{"type":50,"value":6604}," props",{"type":44,"tag":350,"props":6606,"children":6607},{"style":357},[6608],{"type":50,"value":385},{"type":44,"tag":350,"props":6610,"children":6611},{"style":357},[6612],{"type":50,"value":1581},{"type":44,"tag":350,"props":6614,"children":6615},{"style":357},[6616],{"type":50,"value":2417},{"type":44,"tag":350,"props":6618,"children":6619},{"style":1242},[6620],{"type":50,"value":6621},"        \u002F\u002F Optional\n",{"type":44,"tag":350,"props":6623,"children":6624},{"class":352,"line":1330},[6625],{"type":44,"tag":350,"props":6626,"children":6627},{"style":357},[6628],{"type":50,"value":453},{"type":44,"tag":53,"props":6630,"children":6632},{"id":6631},"rules-and-pitfalls",[6633],{"type":50,"value":5463},{"type":44,"tag":1028,"props":6635,"children":6636},{},[6637,6690,6955,7019,7057,7115,7132,7433,7800],{"type":44,"tag":236,"props":6638,"children":6639},{},[6640,6645,6646,6651,6653,6659,6661,6667,6668,6674,6676,6682,6684],{"type":44,"tag":82,"props":6641,"children":6642},{},[6643],{"type":50,"value":6644},"Never string-concatenate template results.",{"type":50,"value":210},{"type":44,"tag":66,"props":6647,"children":6649},{"className":6648},[],[6650],{"type":50,"value":4004},{"type":50,"value":6652}," is a ",{"type":44,"tag":66,"props":6654,"children":6656},{"className":6655},[],[6657],{"type":50,"value":6658},"ResultSection[]",{"type":50,"value":6660}," object, not a string. Using ",{"type":44,"tag":66,"props":6662,"children":6664},{"className":6663},[],[6665],{"type":50,"value":6666},"+",{"type":50,"value":4320},{"type":44,"tag":66,"props":6669,"children":6671},{"className":6670},[],[6672],{"type":50,"value":6673},".join()",{"type":50,"value":6675}," produces ",{"type":44,"tag":66,"props":6677,"children":6679},{"className":6678},[],[6680],{"type":50,"value":6681},"[object Object]",{"type":50,"value":6683},". Always interpolate inside tagged templates: ",{"type":44,"tag":66,"props":6685,"children":6687},{"className":6686},[],[6688],{"type":50,"value":6689},"figma.code`${snippet1}${snippet2}`",{"type":44,"tag":236,"props":6691,"children":6692},{},[6693,6705,6707,6712,6714,6719,6721],{"type":44,"tag":82,"props":6694,"children":6695},{},[6696,6698,6703],{"type":50,"value":6697},"Do not use ",{"type":44,"tag":66,"props":6699,"children":6701},{"className":6700},[],[6702],{"type":50,"value":1730},{"type":50,"value":6704}," guards.",{"type":50,"value":6706}," Call ",{"type":44,"tag":66,"props":6708,"children":6710},{"className":6709},[],[6711],{"type":50,"value":1737},{"type":50,"value":6713}," directly on any instance after a ",{"type":44,"tag":66,"props":6715,"children":6717},{"className":6716},[],[6718],{"type":50,"value":5478},{"type":50,"value":6720}," check. The runtime handles instances without Code Connect automatically.",{"type":44,"tag":339,"props":6722,"children":6724},{"className":1230,"code":6723,"language":1232,"meta":344,"style":344},"\u002F\u002F WRONG — hasCodeConnect() gate drops non-CC instances\nif (icon && icon.type === 'INSTANCE' && icon.hasCodeConnect()) {\n  iconCode = icon.executeTemplate().example\n}\n\n\u002F\u002F CORRECT — let the runtime handle all instances\nif (icon && icon.type === 'INSTANCE') {\n  iconCode = icon.executeTemplate().example\n}\n",[6725],{"type":44,"tag":66,"props":6726,"children":6727},{"__ignoreMap":344},[6728,6736,6805,6840,6847,6854,6862,6913,6948],{"type":44,"tag":350,"props":6729,"children":6730},{"class":352,"line":353},[6731],{"type":44,"tag":350,"props":6732,"children":6733},{"style":1242},[6734],{"type":50,"value":6735},"\u002F\u002F WRONG — hasCodeConnect() gate drops non-CC instances\n",{"type":44,"tag":350,"props":6737,"children":6738},{"class":352,"line":363},[6739,6743,6747,6751,6755,6759,6763,6767,6771,6775,6779,6783,6787,6791,6796,6801],{"type":44,"tag":350,"props":6740,"children":6741},{"style":1267},[6742],{"type":50,"value":3144},{"type":44,"tag":350,"props":6744,"children":6745},{"style":1273},[6746],{"type":50,"value":3624},{"type":44,"tag":350,"props":6748,"children":6749},{"style":357},[6750],{"type":50,"value":3629},{"type":44,"tag":350,"props":6752,"children":6753},{"style":1273},[6754],{"type":50,"value":3634},{"type":44,"tag":350,"props":6756,"children":6757},{"style":357},[6758],{"type":50,"value":101},{"type":44,"tag":350,"props":6760,"children":6761},{"style":1273},[6762],{"type":50,"value":3643},{"type":44,"tag":350,"props":6764,"children":6765},{"style":357},[6766],{"type":50,"value":3154},{"type":44,"tag":350,"props":6768,"children":6769},{"style":357},[6770],{"type":50,"value":1286},{"type":44,"tag":350,"props":6772,"children":6773},{"style":424},[6774],{"type":50,"value":3656},{"type":44,"tag":350,"props":6776,"children":6777},{"style":357},[6778],{"type":50,"value":1454},{"type":44,"tag":350,"props":6780,"children":6781},{"style":357},[6782],{"type":50,"value":3171},{"type":44,"tag":350,"props":6784,"children":6785},{"style":1273},[6786],{"type":50,"value":3634},{"type":44,"tag":350,"props":6788,"children":6789},{"style":357},[6790],{"type":50,"value":101},{"type":44,"tag":350,"props":6792,"children":6793},{"style":1406},[6794],{"type":50,"value":6795},"hasCodeConnect",{"type":44,"tag":350,"props":6797,"children":6798},{"style":1273},[6799],{"type":50,"value":6800},"()) ",{"type":44,"tag":350,"props":6802,"children":6803},{"style":357},[6804],{"type":50,"value":360},{"type":44,"tag":350,"props":6806,"children":6807},{"class":352,"line":393},[6808,6812,6816,6820,6824,6828,6832,6836],{"type":44,"tag":350,"props":6809,"children":6810},{"style":1273},[6811],{"type":50,"value":3676},{"type":44,"tag":350,"props":6813,"children":6814},{"style":357},[6815],{"type":50,"value":3213},{"type":44,"tag":350,"props":6817,"children":6818},{"style":1273},[6819],{"type":50,"value":3634},{"type":44,"tag":350,"props":6821,"children":6822},{"style":357},[6823],{"type":50,"value":101},{"type":44,"tag":350,"props":6825,"children":6826},{"style":1406},[6827],{"type":50,"value":3693},{"type":44,"tag":350,"props":6829,"children":6830},{"style":1388},[6831],{"type":50,"value":3698},{"type":44,"tag":350,"props":6833,"children":6834},{"style":357},[6835],{"type":50,"value":101},{"type":44,"tag":350,"props":6837,"children":6838},{"style":1273},[6839],{"type":50,"value":3707},{"type":44,"tag":350,"props":6841,"children":6842},{"class":352,"line":438},[6843],{"type":44,"tag":350,"props":6844,"children":6845},{"style":357},[6846],{"type":50,"value":453},{"type":44,"tag":350,"props":6848,"children":6849},{"class":352,"line":447},[6850],{"type":44,"tag":350,"props":6851,"children":6852},{"emptyLinePlaceholder":1334},[6853],{"type":50,"value":1337},{"type":44,"tag":350,"props":6855,"children":6856},{"class":352,"line":1330},[6857],{"type":44,"tag":350,"props":6858,"children":6859},{"style":1242},[6860],{"type":50,"value":6861},"\u002F\u002F CORRECT — let the runtime handle all instances\n",{"type":44,"tag":350,"props":6863,"children":6864},{"class":352,"line":1340},[6865,6869,6873,6877,6881,6885,6889,6893,6897,6901,6905,6909],{"type":44,"tag":350,"props":6866,"children":6867},{"style":1267},[6868],{"type":50,"value":3144},{"type":44,"tag":350,"props":6870,"children":6871},{"style":1273},[6872],{"type":50,"value":3624},{"type":44,"tag":350,"props":6874,"children":6875},{"style":357},[6876],{"type":50,"value":3629},{"type":44,"tag":350,"props":6878,"children":6879},{"style":1273},[6880],{"type":50,"value":3634},{"type":44,"tag":350,"props":6882,"children":6883},{"style":357},[6884],{"type":50,"value":101},{"type":44,"tag":350,"props":6886,"children":6887},{"style":1273},[6888],{"type":50,"value":3643},{"type":44,"tag":350,"props":6890,"children":6891},{"style":357},[6892],{"type":50,"value":3154},{"type":44,"tag":350,"props":6894,"children":6895},{"style":357},[6896],{"type":50,"value":1286},{"type":44,"tag":350,"props":6898,"children":6899},{"style":424},[6900],{"type":50,"value":3656},{"type":44,"tag":350,"props":6902,"children":6903},{"style":357},[6904],{"type":50,"value":1454},{"type":44,"tag":350,"props":6906,"children":6907},{"style":1273},[6908],{"type":50,"value":3196},{"type":44,"tag":350,"props":6910,"children":6911},{"style":357},[6912],{"type":50,"value":360},{"type":44,"tag":350,"props":6914,"children":6915},{"class":352,"line":1349},[6916,6920,6924,6928,6932,6936,6940,6944],{"type":44,"tag":350,"props":6917,"children":6918},{"style":1273},[6919],{"type":50,"value":3676},{"type":44,"tag":350,"props":6921,"children":6922},{"style":357},[6923],{"type":50,"value":3213},{"type":44,"tag":350,"props":6925,"children":6926},{"style":1273},[6927],{"type":50,"value":3634},{"type":44,"tag":350,"props":6929,"children":6930},{"style":357},[6931],{"type":50,"value":101},{"type":44,"tag":350,"props":6933,"children":6934},{"style":1406},[6935],{"type":50,"value":3693},{"type":44,"tag":350,"props":6937,"children":6938},{"style":1388},[6939],{"type":50,"value":3698},{"type":44,"tag":350,"props":6941,"children":6942},{"style":357},[6943],{"type":50,"value":101},{"type":44,"tag":350,"props":6945,"children":6946},{"style":1273},[6947],{"type":50,"value":3707},{"type":44,"tag":350,"props":6949,"children":6950},{"class":352,"line":1358},[6951],{"type":44,"tag":350,"props":6952,"children":6953},{"style":357},[6954],{"type":50,"value":453},{"type":44,"tag":236,"props":6956,"children":6957},{},[6958,6975,6976,6981,6982,6987,6989,6995,6997,7003,7005,7011,7013],{"type":44,"tag":82,"props":6959,"children":6960},{},[6961,6962,6967,6969,6974],{"type":50,"value":1035},{"type":44,"tag":66,"props":6963,"children":6965},{"className":6964},[],[6966],{"type":50,"value":5478},{"type":50,"value":6968}," before calling ",{"type":44,"tag":66,"props":6970,"children":6972},{"className":6971},[],[6973],{"type":50,"value":1737},{"type":50,"value":101},{"type":50,"value":210},{"type":44,"tag":66,"props":6977,"children":6979},{"className":6978},[],[6980],{"type":50,"value":4318},{"type":50,"value":1070},{"type":44,"tag":66,"props":6983,"children":6985},{"className":6984},[],[6986],{"type":50,"value":4326},{"type":50,"value":6988},", and ",{"type":44,"tag":66,"props":6990,"children":6992},{"className":6991},[],[6993],{"type":50,"value":6994},"findText()",{"type":50,"value":6996}," return an ",{"type":44,"tag":66,"props":6998,"children":7000},{"className":6999},[],[7001],{"type":50,"value":7002},"ErrorHandle",{"type":50,"value":7004}," (truthy, but not a real node) on failure — not ",{"type":44,"tag":66,"props":7006,"children":7008},{"className":7007},[],[7009],{"type":50,"value":7010},"null",{"type":50,"value":7012},". Always add a type check to avoid crashes: ",{"type":44,"tag":66,"props":7014,"children":7016},{"className":7015},[],[7017],{"type":50,"value":7018},"if (child && child.type === 'INSTANCE') { ... }",{"type":44,"tag":236,"props":7020,"children":7021},{},[7022,7039,7041,7047,7049,7055],{"type":44,"tag":82,"props":7023,"children":7024},{},[7025,7027,7032,7034],{"type":50,"value":7026},"Prefer ",{"type":44,"tag":66,"props":7028,"children":7030},{"className":7029},[],[7031],{"type":50,"value":3758},{"type":50,"value":7033}," over ",{"type":44,"tag":66,"props":7035,"children":7037},{"className":7036},[],[7038],{"type":50,"value":4318},{"type":50,"value":7040}," when a component property exists for the slot. ",{"type":44,"tag":66,"props":7042,"children":7044},{"className":7043},[],[7045],{"type":50,"value":7046},"findInstance('Star Icon')",{"type":50,"value":7048}," breaks when the icon is swapped to a different name; ",{"type":44,"tag":66,"props":7050,"children":7052},{"className":7051},[],[7053],{"type":50,"value":7054},"getInstanceSwap('Icon')",{"type":50,"value":7056}," always works regardless of which instance is in the slot.",{"type":44,"tag":236,"props":7058,"children":7059},{},[7060,7078,7080,7084,7086,7091,7093,7099,7101,7106,7108,7113],{"type":44,"tag":82,"props":7061,"children":7062},{},[7063,7065,7070,7072,7077],{"type":50,"value":7064},"Use ",{"type":44,"tag":66,"props":7066,"children":7068},{"className":7067},[],[7069],{"type":50,"value":1008},{"type":50,"value":7071}," only when the Figma property type is ",{"type":44,"tag":66,"props":7073,"children":7075},{"className":7074},[],[7076],{"type":50,"value":1000},{"type":50,"value":101},{"type":50,"value":7079}," For ",{"type":44,"tag":82,"props":7081,"children":7082},{},[7083],{"type":50,"value":990},{"type":50,"value":7085}," props, use ",{"type":44,"tag":66,"props":7087,"children":7089},{"className":7088},[],[7090],{"type":50,"value":3758},{"type":50,"value":7092}," (returns an ",{"type":44,"tag":66,"props":7094,"children":7096},{"className":7095},[],[7097],{"type":50,"value":7098},"InstanceHandle",{"type":50,"value":7100},"). ",{"type":44,"tag":66,"props":7102,"children":7104},{"className":7103},[],[7105],{"type":50,"value":1008},{"type":50,"value":7107}," returns structured slot sections, not instances — never call ",{"type":44,"tag":66,"props":7109,"children":7111},{"className":7110},[],[7112],{"type":50,"value":1737},{"type":50,"value":7114}," on its return value.",{"type":44,"tag":236,"props":7116,"children":7117},{},[7118,7123,7125,7130],{"type":44,"tag":82,"props":7119,"children":7120},{},[7121],{"type":50,"value":7122},"Property names are case-sensitive",{"type":50,"value":7124}," and must exactly match what ",{"type":44,"tag":66,"props":7126,"children":7128},{"className":7127},[],[7129],{"type":50,"value":835},{"type":50,"value":7131}," returns.",{"type":44,"tag":236,"props":7133,"children":7134},{},[7135,7140,7142,7148,7149],{"type":44,"tag":82,"props":7136,"children":7137},{},[7138],{"type":50,"value":7139},"Handle multiple template arrays correctly.",{"type":50,"value":7141}," When iterating over children, set each result in a separate variable and interpolate them individually — do not use ",{"type":44,"tag":66,"props":7143,"children":7145},{"className":7144},[],[7146],{"type":50,"value":7147},".map().join()",{"type":50,"value":385},{"type":44,"tag":339,"props":7150,"children":7152},{"className":1230,"code":7151,"language":1232,"meta":344,"style":344},"\u002F\u002F Wrong:\nitems.map(n => n.executeTemplate().example).join('\\n')\n\n\u002F\u002F Correct — use separate variables:\nconst child1 = items[0]?.executeTemplate().example\nconst child2 = items[1]?.executeTemplate().example\nexport default { example: figma.code`${child1}${child2}` }\n",[7153],{"type":44,"tag":66,"props":7154,"children":7155},{"__ignoreMap":344},[7156,7164,7252,7259,7267,7319,7368],{"type":44,"tag":350,"props":7157,"children":7158},{"class":352,"line":353},[7159],{"type":44,"tag":350,"props":7160,"children":7161},{"style":1242},[7162],{"type":50,"value":7163},"\u002F\u002F Wrong:\n",{"type":44,"tag":350,"props":7165,"children":7166},{"class":352,"line":363},[7167,7172,7176,7181,7185,7191,7196,7201,7205,7209,7213,7217,7222,7226,7231,7235,7239,7244,7248],{"type":44,"tag":350,"props":7168,"children":7169},{"style":1273},[7170],{"type":50,"value":7171},"items",{"type":44,"tag":350,"props":7173,"children":7174},{"style":357},[7175],{"type":50,"value":101},{"type":44,"tag":350,"props":7177,"children":7178},{"style":1406},[7179],{"type":50,"value":7180},"map",{"type":44,"tag":350,"props":7182,"children":7183},{"style":1273},[7184],{"type":50,"value":1866},{"type":44,"tag":350,"props":7186,"children":7188},{"style":7187},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[7189],{"type":50,"value":7190},"n",{"type":44,"tag":350,"props":7192,"children":7193},{"style":372},[7194],{"type":50,"value":7195}," =>",{"type":44,"tag":350,"props":7197,"children":7198},{"style":1273},[7199],{"type":50,"value":7200}," n",{"type":44,"tag":350,"props":7202,"children":7203},{"style":357},[7204],{"type":50,"value":101},{"type":44,"tag":350,"props":7206,"children":7207},{"style":1406},[7208],{"type":50,"value":3693},{"type":44,"tag":350,"props":7210,"children":7211},{"style":1273},[7212],{"type":50,"value":3698},{"type":44,"tag":350,"props":7214,"children":7215},{"style":357},[7216],{"type":50,"value":101},{"type":44,"tag":350,"props":7218,"children":7219},{"style":1273},[7220],{"type":50,"value":7221},"example)",{"type":44,"tag":350,"props":7223,"children":7224},{"style":357},[7225],{"type":50,"value":101},{"type":44,"tag":350,"props":7227,"children":7228},{"style":1406},[7229],{"type":50,"value":7230},"join",{"type":44,"tag":350,"props":7232,"children":7233},{"style":1273},[7234],{"type":50,"value":1866},{"type":44,"tag":350,"props":7236,"children":7237},{"style":357},[7238],{"type":50,"value":1454},{"type":44,"tag":350,"props":7240,"children":7241},{"style":1273},[7242],{"type":50,"value":7243},"\\n",{"type":44,"tag":350,"props":7245,"children":7246},{"style":357},[7247],{"type":50,"value":1454},{"type":44,"tag":350,"props":7249,"children":7250},{"style":1273},[7251],{"type":50,"value":1884},{"type":44,"tag":350,"props":7253,"children":7254},{"class":352,"line":393},[7255],{"type":44,"tag":350,"props":7256,"children":7257},{"emptyLinePlaceholder":1334},[7258],{"type":50,"value":1337},{"type":44,"tag":350,"props":7260,"children":7261},{"class":352,"line":438},[7262],{"type":44,"tag":350,"props":7263,"children":7264},{"style":1242},[7265],{"type":50,"value":7266},"\u002F\u002F Correct — use separate variables:\n",{"type":44,"tag":350,"props":7268,"children":7269},{"class":352,"line":447},[7270,7274,7279,7283,7288,7294,7298,7303,7307,7311,7315],{"type":44,"tag":350,"props":7271,"children":7272},{"style":372},[7273],{"type":50,"value":1303},{"type":44,"tag":350,"props":7275,"children":7276},{"style":1273},[7277],{"type":50,"value":7278}," child1 ",{"type":44,"tag":350,"props":7280,"children":7281},{"style":357},[7282],{"type":50,"value":1313},{"type":44,"tag":350,"props":7284,"children":7285},{"style":1273},[7286],{"type":50,"value":7287}," items[",{"type":44,"tag":350,"props":7289,"children":7291},{"style":7290},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[7292],{"type":50,"value":7293},"0",{"type":44,"tag":350,"props":7295,"children":7296},{"style":1273},[7297],{"type":50,"value":1468},{"type":44,"tag":350,"props":7299,"children":7300},{"style":357},[7301],{"type":50,"value":7302},"?.",{"type":44,"tag":350,"props":7304,"children":7305},{"style":1406},[7306],{"type":50,"value":3693},{"type":44,"tag":350,"props":7308,"children":7309},{"style":1273},[7310],{"type":50,"value":3698},{"type":44,"tag":350,"props":7312,"children":7313},{"style":357},[7314],{"type":50,"value":101},{"type":44,"tag":350,"props":7316,"children":7317},{"style":1273},[7318],{"type":50,"value":3707},{"type":44,"tag":350,"props":7320,"children":7321},{"class":352,"line":1330},[7322,7326,7331,7335,7339,7344,7348,7352,7356,7360,7364],{"type":44,"tag":350,"props":7323,"children":7324},{"style":372},[7325],{"type":50,"value":1303},{"type":44,"tag":350,"props":7327,"children":7328},{"style":1273},[7329],{"type":50,"value":7330}," child2 ",{"type":44,"tag":350,"props":7332,"children":7333},{"style":357},[7334],{"type":50,"value":1313},{"type":44,"tag":350,"props":7336,"children":7337},{"style":1273},[7338],{"type":50,"value":7287},{"type":44,"tag":350,"props":7340,"children":7341},{"style":7290},[7342],{"type":50,"value":7343},"1",{"type":44,"tag":350,"props":7345,"children":7346},{"style":1273},[7347],{"type":50,"value":1468},{"type":44,"tag":350,"props":7349,"children":7350},{"style":357},[7351],{"type":50,"value":7302},{"type":44,"tag":350,"props":7353,"children":7354},{"style":1406},[7355],{"type":50,"value":3693},{"type":44,"tag":350,"props":7357,"children":7358},{"style":1273},[7359],{"type":50,"value":3698},{"type":44,"tag":350,"props":7361,"children":7362},{"style":357},[7363],{"type":50,"value":101},{"type":44,"tag":350,"props":7365,"children":7366},{"style":1273},[7367],{"type":50,"value":3707},{"type":44,"tag":350,"props":7369,"children":7370},{"class":352,"line":1340},[7371,7375,7379,7383,7388,7392,7396,7400,7404,7409,7414,7419,7424,7429],{"type":44,"tag":350,"props":7372,"children":7373},{"style":1267},[7374],{"type":50,"value":1372},{"type":44,"tag":350,"props":7376,"children":7377},{"style":1267},[7378],{"type":50,"value":1377},{"type":44,"tag":350,"props":7380,"children":7381},{"style":357},[7382],{"type":50,"value":1530},{"type":44,"tag":350,"props":7384,"children":7385},{"style":1388},[7386],{"type":50,"value":7387}," example",{"type":44,"tag":350,"props":7389,"children":7390},{"style":357},[7391],{"type":50,"value":385},{"type":44,"tag":350,"props":7393,"children":7394},{"style":1273},[7395],{"type":50,"value":1318},{"type":44,"tag":350,"props":7397,"children":7398},{"style":357},[7399],{"type":50,"value":101},{"type":44,"tag":350,"props":7401,"children":7402},{"style":1406},[7403],{"type":50,"value":66},{"type":44,"tag":350,"props":7405,"children":7406},{"style":357},[7407],{"type":50,"value":7408},"`${",{"type":44,"tag":350,"props":7410,"children":7411},{"style":1273},[7412],{"type":50,"value":7413},"child1",{"type":44,"tag":350,"props":7415,"children":7416},{"style":357},[7417],{"type":50,"value":7418},"}${",{"type":44,"tag":350,"props":7420,"children":7421},{"style":1273},[7422],{"type":50,"value":7423},"child2",{"type":44,"tag":350,"props":7425,"children":7426},{"style":357},[7427],{"type":50,"value":7428},"}`",{"type":44,"tag":350,"props":7430,"children":7431},{"style":357},[7432],{"type":50,"value":6127},{"type":44,"tag":236,"props":7434,"children":7435},{},[7436,7441,7443,7448,7450,7455,7456,7461,7463,7468,7470,7476,7478],{"type":44,"tag":82,"props":7437,"children":7438},{},[7439],{"type":50,"value":7440},"Never hardcode slot or children content.",{"type":50,"value":7442}," Always resolve child instances dynamically — use ",{"type":44,"tag":66,"props":7444,"children":7446},{"className":7445},[],[7447],{"type":50,"value":3758},{"type":50,"value":7449}," for INSTANCE_SWAP properties, ",{"type":44,"tag":66,"props":7451,"children":7453},{"className":7452},[],[7454],{"type":50,"value":4318},{"type":50,"value":6148},{"type":44,"tag":66,"props":7457,"children":7459},{"className":7458},[],[7460],{"type":50,"value":4326},{"type":50,"value":7462}," for direct children — and render them via ",{"type":44,"tag":66,"props":7464,"children":7466},{"className":7465},[],[7467],{"type":50,"value":1737},{"type":50,"value":7469},". Never construct JSX from a layer name (e.g., ",{"type":44,"tag":66,"props":7471,"children":7473},{"className":7472},[],[7474],{"type":50,"value":7475},"\u003CStarIcon \u002F>",{"type":50,"value":7477},") or guess import paths. If an instance has no Code Connect, omit it — do not add a hardcoded fallback.",{"type":44,"tag":339,"props":7479,"children":7481},{"className":1230,"code":7480,"language":1232,"meta":344,"style":344},"\u002F\u002F WRONG — hardcodes the icon from its layer name\nexample: figma.code`\u003CButton icon={\u003CStarIcon \u002F>}>Submit\u003C\u002FButton>`\n\n\u002F\u002F CORRECT — resolves dynamically, works for any swapped icon\nconst icon = instance.findInstance('Icon')\nlet iconCode\nif (icon && icon.type === 'INSTANCE') {\n  iconCode = icon.executeTemplate().example\n}\nexample: figma.code`\u003CButton${iconCode ? figma.code` icon={${iconCode}}` : ''}>...\u003C\u002FButton>`\n",[7482],{"type":44,"tag":66,"props":7483,"children":7484},{"__ignoreMap":344},[7485,7493,7530,7537,7545,7592,7603,7654,7689,7696],{"type":44,"tag":350,"props":7486,"children":7487},{"class":352,"line":353},[7488],{"type":44,"tag":350,"props":7489,"children":7490},{"style":1242},[7491],{"type":50,"value":7492},"\u002F\u002F WRONG — hardcodes the icon from its layer name\n",{"type":44,"tag":350,"props":7494,"children":7495},{"class":352,"line":363},[7496,7501,7505,7509,7513,7517,7521,7526],{"type":44,"tag":350,"props":7497,"children":7498},{"style":402},[7499],{"type":50,"value":7500},"example",{"type":44,"tag":350,"props":7502,"children":7503},{"style":357},[7504],{"type":50,"value":385},{"type":44,"tag":350,"props":7506,"children":7507},{"style":1273},[7508],{"type":50,"value":1318},{"type":44,"tag":350,"props":7510,"children":7511},{"style":357},[7512],{"type":50,"value":101},{"type":44,"tag":350,"props":7514,"children":7515},{"style":1406},[7516],{"type":50,"value":66},{"type":44,"tag":350,"props":7518,"children":7519},{"style":357},[7520],{"type":50,"value":1413},{"type":44,"tag":350,"props":7522,"children":7523},{"style":424},[7524],{"type":50,"value":7525},"\u003CButton icon={\u003CStarIcon \u002F>}>Submit\u003C\u002FButton>",{"type":44,"tag":350,"props":7527,"children":7528},{"style":357},[7529],{"type":50,"value":5177},{"type":44,"tag":350,"props":7531,"children":7532},{"class":352,"line":393},[7533],{"type":44,"tag":350,"props":7534,"children":7535},{"emptyLinePlaceholder":1334},[7536],{"type":50,"value":1337},{"type":44,"tag":350,"props":7538,"children":7539},{"class":352,"line":438},[7540],{"type":44,"tag":350,"props":7541,"children":7542},{"style":1242},[7543],{"type":50,"value":7544},"\u002F\u002F CORRECT — resolves dynamically, works for any swapped icon\n",{"type":44,"tag":350,"props":7546,"children":7547},{"class":352,"line":447},[7548,7552,7556,7560,7564,7568,7572,7576,7580,7584,7588],{"type":44,"tag":350,"props":7549,"children":7550},{"style":372},[7551],{"type":50,"value":1303},{"type":44,"tag":350,"props":7553,"children":7554},{"style":1273},[7555],{"type":50,"value":3562},{"type":44,"tag":350,"props":7557,"children":7558},{"style":357},[7559],{"type":50,"value":1313},{"type":44,"tag":350,"props":7561,"children":7562},{"style":1273},[7563],{"type":50,"value":1852},{"type":44,"tag":350,"props":7565,"children":7566},{"style":357},[7567],{"type":50,"value":101},{"type":44,"tag":350,"props":7569,"children":7570},{"style":1406},[7571],{"type":50,"value":4378},{"type":44,"tag":350,"props":7573,"children":7574},{"style":1273},[7575],{"type":50,"value":1866},{"type":44,"tag":350,"props":7577,"children":7578},{"style":357},[7579],{"type":50,"value":1454},{"type":44,"tag":350,"props":7581,"children":7582},{"style":424},[7583],{"type":50,"value":3592},{"type":44,"tag":350,"props":7585,"children":7586},{"style":357},[7587],{"type":50,"value":1454},{"type":44,"tag":350,"props":7589,"children":7590},{"style":1273},[7591],{"type":50,"value":1884},{"type":44,"tag":350,"props":7593,"children":7594},{"class":352,"line":1330},[7595,7599],{"type":44,"tag":350,"props":7596,"children":7597},{"style":372},[7598],{"type":50,"value":3131},{"type":44,"tag":350,"props":7600,"children":7601},{"style":1273},[7602],{"type":50,"value":3612},{"type":44,"tag":350,"props":7604,"children":7605},{"class":352,"line":1340},[7606,7610,7614,7618,7622,7626,7630,7634,7638,7642,7646,7650],{"type":44,"tag":350,"props":7607,"children":7608},{"style":1267},[7609],{"type":50,"value":3144},{"type":44,"tag":350,"props":7611,"children":7612},{"style":1273},[7613],{"type":50,"value":3624},{"type":44,"tag":350,"props":7615,"children":7616},{"style":357},[7617],{"type":50,"value":3629},{"type":44,"tag":350,"props":7619,"children":7620},{"style":1273},[7621],{"type":50,"value":3634},{"type":44,"tag":350,"props":7623,"children":7624},{"style":357},[7625],{"type":50,"value":101},{"type":44,"tag":350,"props":7627,"children":7628},{"style":1273},[7629],{"type":50,"value":3643},{"type":44,"tag":350,"props":7631,"children":7632},{"style":357},[7633],{"type":50,"value":3154},{"type":44,"tag":350,"props":7635,"children":7636},{"style":357},[7637],{"type":50,"value":1286},{"type":44,"tag":350,"props":7639,"children":7640},{"style":424},[7641],{"type":50,"value":3656},{"type":44,"tag":350,"props":7643,"children":7644},{"style":357},[7645],{"type":50,"value":1454},{"type":44,"tag":350,"props":7647,"children":7648},{"style":1273},[7649],{"type":50,"value":3196},{"type":44,"tag":350,"props":7651,"children":7652},{"style":357},[7653],{"type":50,"value":360},{"type":44,"tag":350,"props":7655,"children":7656},{"class":352,"line":1349},[7657,7661,7665,7669,7673,7677,7681,7685],{"type":44,"tag":350,"props":7658,"children":7659},{"style":1273},[7660],{"type":50,"value":3676},{"type":44,"tag":350,"props":7662,"children":7663},{"style":357},[7664],{"type":50,"value":3213},{"type":44,"tag":350,"props":7666,"children":7667},{"style":1273},[7668],{"type":50,"value":3634},{"type":44,"tag":350,"props":7670,"children":7671},{"style":357},[7672],{"type":50,"value":101},{"type":44,"tag":350,"props":7674,"children":7675},{"style":1406},[7676],{"type":50,"value":3693},{"type":44,"tag":350,"props":7678,"children":7679},{"style":1388},[7680],{"type":50,"value":3698},{"type":44,"tag":350,"props":7682,"children":7683},{"style":357},[7684],{"type":50,"value":101},{"type":44,"tag":350,"props":7686,"children":7687},{"style":1273},[7688],{"type":50,"value":3707},{"type":44,"tag":350,"props":7690,"children":7691},{"class":352,"line":1358},[7692],{"type":44,"tag":350,"props":7693,"children":7694},{"style":357},[7695],{"type":50,"value":453},{"type":44,"tag":350,"props":7697,"children":7698},{"class":352,"line":1366},[7699,7703,7707,7711,7715,7719,7723,7728,7732,7737,7741,7745,7749,7753,7757,7762,7766,7771,7775,7779,7783,7787,7791,7796],{"type":44,"tag":350,"props":7700,"children":7701},{"style":402},[7702],{"type":50,"value":7500},{"type":44,"tag":350,"props":7704,"children":7705},{"style":357},[7706],{"type":50,"value":385},{"type":44,"tag":350,"props":7708,"children":7709},{"style":1273},[7710],{"type":50,"value":1318},{"type":44,"tag":350,"props":7712,"children":7713},{"style":357},[7714],{"type":50,"value":101},{"type":44,"tag":350,"props":7716,"children":7717},{"style":1406},[7718],{"type":50,"value":66},{"type":44,"tag":350,"props":7720,"children":7721},{"style":357},[7722],{"type":50,"value":1413},{"type":44,"tag":350,"props":7724,"children":7725},{"style":424},[7726],{"type":50,"value":7727},"\u003CButton",{"type":44,"tag":350,"props":7729,"children":7730},{"style":357},[7731],{"type":50,"value":3902},{"type":44,"tag":350,"props":7733,"children":7734},{"style":1273},[7735],{"type":50,"value":7736},"iconCode ",{"type":44,"tag":350,"props":7738,"children":7739},{"style":357},[7740],{"type":50,"value":4851},{"type":44,"tag":350,"props":7742,"children":7743},{"style":1273},[7744],{"type":50,"value":1318},{"type":44,"tag":350,"props":7746,"children":7747},{"style":357},[7748],{"type":50,"value":101},{"type":44,"tag":350,"props":7750,"children":7751},{"style":1406},[7752],{"type":50,"value":66},{"type":44,"tag":350,"props":7754,"children":7755},{"style":357},[7756],{"type":50,"value":1413},{"type":44,"tag":350,"props":7758,"children":7759},{"style":424},[7760],{"type":50,"value":7761}," icon={",{"type":44,"tag":350,"props":7763,"children":7764},{"style":357},[7765],{"type":50,"value":3902},{"type":44,"tag":350,"props":7767,"children":7768},{"style":1273},[7769],{"type":50,"value":7770},"iconCode",{"type":44,"tag":350,"props":7772,"children":7773},{"style":357},[7774],{"type":50,"value":2038},{"type":44,"tag":350,"props":7776,"children":7777},{"style":424},[7778],{"type":50,"value":2038},{"type":44,"tag":350,"props":7780,"children":7781},{"style":357},[7782],{"type":50,"value":1413},{"type":44,"tag":350,"props":7784,"children":7785},{"style":357},[7786],{"type":50,"value":4898},{"type":44,"tag":350,"props":7788,"children":7789},{"style":357},[7790],{"type":50,"value":4903},{"type":44,"tag":350,"props":7792,"children":7793},{"style":424},[7794],{"type":50,"value":7795},">...\u003C\u002FButton>",{"type":44,"tag":350,"props":7797,"children":7798},{"style":357},[7799],{"type":50,"value":5177},{"type":44,"tag":236,"props":7801,"children":7802},{},[7803,7808,7810,7815],{"type":44,"tag":82,"props":7804,"children":7805},{},[7806],{"type":50,"value":7807},"Attempt to represent every Figma property via a code prop.",{"type":50,"value":7809}," The code component's ",{"type":44,"tag":66,"props":7811,"children":7813},{"className":7812},[],[7814],{"type":50,"value":2437},{"type":50,"value":7816}," interface (from Step 4) is the authoritative list of attribute names. For each Figma property, figure out the right way to represent it using the API methods from Step 5 — direct name match, value transformation, or whatever fits. If no code prop fits at all, omit it — don't invent a prop name.",{"type":44,"tag":53,"props":7818,"children":7820},{"id":7819},"complete-worked-example",[7821],{"type":50,"value":7822},"Complete Worked Example",{"type":44,"tag":60,"props":7824,"children":7825},{},[7826,7828],{"type":50,"value":7827},"Given URL: ",{"type":44,"tag":66,"props":7829,"children":7831},{"className":7830},[],[7832],{"type":50,"value":7833},"https:\u002F\u002Ffigma.com\u002Fdesign\u002Fabc123\u002FMyFile?node-id=42-100",{"type":44,"tag":60,"props":7835,"children":7836},{},[7837,7842],{"type":44,"tag":82,"props":7838,"children":7839},{},[7840],{"type":50,"value":7841},"Step 1:",{"type":50,"value":7843}," Parse the URL.",{"type":44,"tag":232,"props":7845,"children":7846},{},[7847,7862],{"type":44,"tag":236,"props":7848,"children":7849},{},[7850,7855,7856],{"type":44,"tag":66,"props":7851,"children":7853},{"className":7852},[],[7854],{"type":50,"value":470},{"type":50,"value":676},{"type":44,"tag":66,"props":7857,"children":7859},{"className":7858},[],[7860],{"type":50,"value":7861},"abc123",{"type":44,"tag":236,"props":7863,"children":7864},{},[7865,7870,7871,7877,7878],{"type":44,"tag":66,"props":7866,"children":7868},{"className":7867},[],[7869],{"type":50,"value":478},{"type":50,"value":676},{"type":44,"tag":66,"props":7872,"children":7874},{"className":7873},[],[7875],{"type":50,"value":7876},"42-100",{"type":50,"value":543},{"type":44,"tag":66,"props":7879,"children":7881},{"className":7880},[],[7882],{"type":50,"value":7883},"42:100",{"type":44,"tag":60,"props":7885,"children":7886},{},[7887,7892,7893,7898,7900,7906,7907,7913,7914,7920,7922,7928],{"type":44,"tag":82,"props":7888,"children":7889},{},[7890],{"type":50,"value":7891},"Step 2:",{"type":50,"value":6706},{"type":44,"tag":66,"props":7894,"children":7896},{"className":7895},[],[7897],{"type":50,"value":251},{"type":50,"value":7899}," with ",{"type":44,"tag":66,"props":7901,"children":7903},{"className":7902},[],[7904],{"type":50,"value":7905},"fileKey: \"abc123\"",{"type":50,"value":1070},{"type":44,"tag":66,"props":7908,"children":7910},{"className":7909},[],[7911],{"type":50,"value":7912},"nodeId: \"42:100\"",{"type":50,"value":1070},{"type":44,"tag":66,"props":7915,"children":7917},{"className":7916},[],[7918],{"type":50,"value":7919},"excludeMappingPrompt: true",{"type":50,"value":7921},".\nResponse returns one component with ",{"type":44,"tag":66,"props":7923,"children":7925},{"className":7924},[],[7926],{"type":50,"value":7927},"mainComponentNodeId: \"42:100\"",{"type":50,"value":7929},". If the response were empty, stop and inform the user. If multiple components were returned, repeat Steps 3–6 for each.",{"type":44,"tag":60,"props":7931,"children":7932},{},[7933,7938,7939,7944,7945,7950,7951,7956,7958,7964,7965,7971],{"type":44,"tag":82,"props":7934,"children":7935},{},[7936],{"type":50,"value":7937},"Step 3:",{"type":50,"value":6706},{"type":44,"tag":66,"props":7940,"children":7942},{"className":7941},[],[7943],{"type":50,"value":835},{"type":50,"value":7899},{"type":44,"tag":66,"props":7946,"children":7948},{"className":7947},[],[7949],{"type":50,"value":7905},{"type":50,"value":1070},{"type":44,"tag":66,"props":7952,"children":7954},{"className":7953},[],[7955],{"type":50,"value":7912},{"type":50,"value":7957}," (from Step 2), ",{"type":44,"tag":66,"props":7959,"children":7961},{"className":7960},[],[7962],{"type":50,"value":7963},"clientFrameworks: [\"react\"]",{"type":50,"value":1070},{"type":44,"tag":66,"props":7966,"children":7968},{"className":7967},[],[7969],{"type":50,"value":7970},"clientLanguages: [\"typescript\"]",{"type":50,"value":101},{"type":44,"tag":60,"props":7973,"children":7974},{},[7975],{"type":50,"value":7976},"Response includes properties:",{"type":44,"tag":232,"props":7978,"children":7979},{},[7980,7985,7990,7995,8000,8005],{"type":44,"tag":236,"props":7981,"children":7982},{},[7983],{"type":50,"value":7984},"Label (TEXT)",{"type":44,"tag":236,"props":7986,"children":7987},{},[7988],{"type":50,"value":7989},"Variant (VARIANT): Primary, Secondary",{"type":44,"tag":236,"props":7991,"children":7992},{},[7993],{"type":50,"value":7994},"Size (VARIANT): Small, Medium, Large",{"type":44,"tag":236,"props":7996,"children":7997},{},[7998],{"type":50,"value":7999},"Disabled (BOOLEAN)",{"type":44,"tag":236,"props":8001,"children":8002},{},[8003],{"type":50,"value":8004},"Has Icon (BOOLEAN)",{"type":44,"tag":236,"props":8006,"children":8007},{},[8008],{"type":50,"value":8009},"Icon (INSTANCE_SWAP)",{"type":44,"tag":60,"props":8011,"children":8012},{},[8013,8018,8020,8026,8028,8033,8034,8040,8041,8046,8047,8053,8054,8060,8062,8068],{"type":44,"tag":82,"props":8014,"children":8015},{},[8016],{"type":50,"value":8017},"Step 4:",{"type":50,"value":8019}," Search codebase → find ",{"type":44,"tag":66,"props":8021,"children":8023},{"className":8022},[],[8024],{"type":50,"value":8025},"Button",{"type":50,"value":8027}," component. Read its source to confirm props: ",{"type":44,"tag":66,"props":8029,"children":8031},{"className":8030},[],[8032],{"type":50,"value":5202},{"type":50,"value":1070},{"type":44,"tag":66,"props":8035,"children":8037},{"className":8036},[],[8038],{"type":50,"value":8039},"size",{"type":50,"value":1070},{"type":44,"tag":66,"props":8042,"children":8044},{"className":8043},[],[8045],{"type":50,"value":5237},{"type":50,"value":1070},{"type":44,"tag":66,"props":8048,"children":8050},{"className":8049},[],[8051],{"type":50,"value":8052},"icon",{"type":50,"value":1070},{"type":44,"tag":66,"props":8055,"children":8057},{"className":8056},[],[8058],{"type":50,"value":8059},"children",{"type":50,"value":8061},". Import path: ",{"type":44,"tag":66,"props":8063,"children":8065},{"className":8064},[],[8066],{"type":50,"value":8067},"\"primitives\"",{"type":50,"value":101},{"type":44,"tag":60,"props":8070,"children":8071},{},[8072,8077,8079,8085],{"type":44,"tag":82,"props":8073,"children":8074},{},[8075],{"type":50,"value":8076},"Step 5:",{"type":50,"value":8078}," Create ",{"type":44,"tag":66,"props":8080,"children":8082},{"className":8081},[],[8083],{"type":50,"value":8084},"src\u002Ffigma\u002Fprimitives\u002FButton.figma.ts",{"type":50,"value":385},{"type":44,"tag":339,"props":8087,"children":8089},{"className":1230,"code":8088,"language":1232,"meta":344,"style":344},"\u002F\u002F url=https:\u002F\u002Ffigma.com\u002Fdesign\u002Fabc123\u002FMyFile?node-id=42-100\n\u002F\u002F source=src\u002Fcomponents\u002FButton.tsx\n\u002F\u002F component=Button\nimport figma from 'figma'\nconst instance = figma.selectedInstance\n\nconst label = instance.getString('Label')\nconst variant = instance.getEnum('Variant', {\n  'Primary': 'primary',\n  'Secondary': 'secondary',\n})\nconst size = instance.getEnum('Size', {\n  'Small': 'sm',\n  'Medium': 'md',\n  'Large': 'lg',\n})\nconst disabled = instance.getBoolean('Disabled')\nconst hasIcon = instance.getBoolean('Has Icon')\nconst icon = hasIcon ? instance.getInstanceSwap('Icon') : null\nlet iconCode\nif (icon && icon.type === 'INSTANCE') {\n  iconCode = icon.executeTemplate().example\n}\n\nexport default {\n  example: figma.code`\n    \u003CButton\n      variant=\"${variant}\"\n      size=\"${size}\"\n      ${disabled ? 'disabled' : ''}\n      ${iconCode ? figma.code`icon={${iconCode}}` : ''}\n    >\n      ${label}\n    \u003C\u002FButton>\n  `,\n  imports: ['import { Button } from \"primitives\"'],\n  id: 'button',\n  metadata: { nestable: true }\n}\n",[8090],{"type":44,"tag":66,"props":8091,"children":8092},{"__ignoreMap":344},[8093,8101,8109,8117,8144,8171,8178,8225,8276,8311,8346,8357,8408,8443,8478,8513,8524,8571,8620,8685,8697,8749,8785,8793,8801,8817,8845,8853,8877,8902,8938,9002,9010,9026,9034,9046,9083,9112,9144],{"type":44,"tag":350,"props":8094,"children":8095},{"class":352,"line":353},[8096],{"type":44,"tag":350,"props":8097,"children":8098},{"style":1242},[8099],{"type":50,"value":8100},"\u002F\u002F url=https:\u002F\u002Ffigma.com\u002Fdesign\u002Fabc123\u002FMyFile?node-id=42-100\n",{"type":44,"tag":350,"props":8102,"children":8103},{"class":352,"line":363},[8104],{"type":44,"tag":350,"props":8105,"children":8106},{"style":1242},[8107],{"type":50,"value":8108},"\u002F\u002F source=src\u002Fcomponents\u002FButton.tsx\n",{"type":44,"tag":350,"props":8110,"children":8111},{"class":352,"line":393},[8112],{"type":44,"tag":350,"props":8113,"children":8114},{"style":1242},[8115],{"type":50,"value":8116},"\u002F\u002F component=Button\n",{"type":44,"tag":350,"props":8118,"children":8119},{"class":352,"line":438},[8120,8124,8128,8132,8136,8140],{"type":44,"tag":350,"props":8121,"children":8122},{"style":1267},[8123],{"type":50,"value":1270},{"type":44,"tag":350,"props":8125,"children":8126},{"style":1273},[8127],{"type":50,"value":1276},{"type":44,"tag":350,"props":8129,"children":8130},{"style":1267},[8131],{"type":50,"value":1281},{"type":44,"tag":350,"props":8133,"children":8134},{"style":357},[8135],{"type":50,"value":1286},{"type":44,"tag":350,"props":8137,"children":8138},{"style":424},[8139],{"type":50,"value":8},{"type":44,"tag":350,"props":8141,"children":8142},{"style":357},[8143],{"type":50,"value":1295},{"type":44,"tag":350,"props":8145,"children":8146},{"class":352,"line":447},[8147,8151,8155,8159,8163,8167],{"type":44,"tag":350,"props":8148,"children":8149},{"style":372},[8150],{"type":50,"value":1303},{"type":44,"tag":350,"props":8152,"children":8153},{"style":1273},[8154],{"type":50,"value":1308},{"type":44,"tag":350,"props":8156,"children":8157},{"style":357},[8158],{"type":50,"value":1313},{"type":44,"tag":350,"props":8160,"children":8161},{"style":1273},[8162],{"type":50,"value":1318},{"type":44,"tag":350,"props":8164,"children":8165},{"style":357},[8166],{"type":50,"value":101},{"type":44,"tag":350,"props":8168,"children":8169},{"style":1273},[8170],{"type":50,"value":1327},{"type":44,"tag":350,"props":8172,"children":8173},{"class":352,"line":1330},[8174],{"type":44,"tag":350,"props":8175,"children":8176},{"emptyLinePlaceholder":1334},[8177],{"type":50,"value":1337},{"type":44,"tag":350,"props":8179,"children":8180},{"class":352,"line":1340},[8181,8185,8189,8193,8197,8201,8205,8209,8213,8217,8221],{"type":44,"tag":350,"props":8182,"children":8183},{"style":372},[8184],{"type":50,"value":1303},{"type":44,"tag":350,"props":8186,"children":8187},{"style":1273},[8188],{"type":50,"value":1843},{"type":44,"tag":350,"props":8190,"children":8191},{"style":357},[8192],{"type":50,"value":1313},{"type":44,"tag":350,"props":8194,"children":8195},{"style":1273},[8196],{"type":50,"value":1852},{"type":44,"tag":350,"props":8198,"children":8199},{"style":357},[8200],{"type":50,"value":101},{"type":44,"tag":350,"props":8202,"children":8203},{"style":1406},[8204],{"type":50,"value":1861},{"type":44,"tag":350,"props":8206,"children":8207},{"style":1273},[8208],{"type":50,"value":1866},{"type":44,"tag":350,"props":8210,"children":8211},{"style":357},[8212],{"type":50,"value":1454},{"type":44,"tag":350,"props":8214,"children":8215},{"style":424},[8216],{"type":50,"value":1875},{"type":44,"tag":350,"props":8218,"children":8219},{"style":357},[8220],{"type":50,"value":1454},{"type":44,"tag":350,"props":8222,"children":8223},{"style":1273},[8224],{"type":50,"value":1884},{"type":44,"tag":350,"props":8226,"children":8227},{"class":352,"line":1349},[8228,8232,8236,8240,8244,8248,8252,8256,8260,8264,8268,8272],{"type":44,"tag":350,"props":8229,"children":8230},{"style":372},[8231],{"type":50,"value":1303},{"type":44,"tag":350,"props":8233,"children":8234},{"style":1273},[8235],{"type":50,"value":1912},{"type":44,"tag":350,"props":8237,"children":8238},{"style":357},[8239],{"type":50,"value":1313},{"type":44,"tag":350,"props":8241,"children":8242},{"style":1273},[8243],{"type":50,"value":1852},{"type":44,"tag":350,"props":8245,"children":8246},{"style":357},[8247],{"type":50,"value":101},{"type":44,"tag":350,"props":8249,"children":8250},{"style":1406},[8251],{"type":50,"value":1929},{"type":44,"tag":350,"props":8253,"children":8254},{"style":1273},[8255],{"type":50,"value":1866},{"type":44,"tag":350,"props":8257,"children":8258},{"style":357},[8259],{"type":50,"value":1454},{"type":44,"tag":350,"props":8261,"children":8262},{"style":424},[8263],{"type":50,"value":1942},{"type":44,"tag":350,"props":8265,"children":8266},{"style":357},[8267],{"type":50,"value":1454},{"type":44,"tag":350,"props":8269,"children":8270},{"style":357},[8271],{"type":50,"value":1427},{"type":44,"tag":350,"props":8273,"children":8274},{"style":357},[8275],{"type":50,"value":390},{"type":44,"tag":350,"props":8277,"children":8278},{"class":352,"line":1358},[8279,8283,8287,8291,8295,8299,8303,8307],{"type":44,"tag":350,"props":8280,"children":8281},{"style":357},[8282],{"type":50,"value":1962},{"type":44,"tag":350,"props":8284,"children":8285},{"style":1388},[8286],{"type":50,"value":1967},{"type":44,"tag":350,"props":8288,"children":8289},{"style":357},[8290],{"type":50,"value":1454},{"type":44,"tag":350,"props":8292,"children":8293},{"style":357},[8294],{"type":50,"value":385},{"type":44,"tag":350,"props":8296,"children":8297},{"style":357},[8298],{"type":50,"value":1286},{"type":44,"tag":350,"props":8300,"children":8301},{"style":424},[8302],{"type":50,"value":1984},{"type":44,"tag":350,"props":8304,"children":8305},{"style":357},[8306],{"type":50,"value":1454},{"type":44,"tag":350,"props":8308,"children":8309},{"style":357},[8310],{"type":50,"value":1993},{"type":44,"tag":350,"props":8312,"children":8313},{"class":352,"line":1366},[8314,8318,8322,8326,8330,8334,8338,8342],{"type":44,"tag":350,"props":8315,"children":8316},{"style":357},[8317],{"type":50,"value":1962},{"type":44,"tag":350,"props":8319,"children":8320},{"style":1388},[8321],{"type":50,"value":2005},{"type":44,"tag":350,"props":8323,"children":8324},{"style":357},[8325],{"type":50,"value":1454},{"type":44,"tag":350,"props":8327,"children":8328},{"style":357},[8329],{"type":50,"value":385},{"type":44,"tag":350,"props":8331,"children":8332},{"style":357},[8333],{"type":50,"value":1286},{"type":44,"tag":350,"props":8335,"children":8336},{"style":424},[8337],{"type":50,"value":2022},{"type":44,"tag":350,"props":8339,"children":8340},{"style":357},[8341],{"type":50,"value":1454},{"type":44,"tag":350,"props":8343,"children":8344},{"style":357},[8345],{"type":50,"value":1993},{"type":44,"tag":350,"props":8347,"children":8348},{"class":352,"line":1384},[8349,8353],{"type":44,"tag":350,"props":8350,"children":8351},{"style":357},[8352],{"type":50,"value":2038},{"type":44,"tag":350,"props":8354,"children":8355},{"style":1273},[8356],{"type":50,"value":1884},{"type":44,"tag":350,"props":8358,"children":8359},{"class":352,"line":1435},[8360,8364,8368,8372,8376,8380,8384,8388,8392,8396,8400,8404],{"type":44,"tag":350,"props":8361,"children":8362},{"style":372},[8363],{"type":50,"value":1303},{"type":44,"tag":350,"props":8365,"children":8366},{"style":1273},[8367],{"type":50,"value":2061},{"type":44,"tag":350,"props":8369,"children":8370},{"style":357},[8371],{"type":50,"value":1313},{"type":44,"tag":350,"props":8373,"children":8374},{"style":1273},[8375],{"type":50,"value":1852},{"type":44,"tag":350,"props":8377,"children":8378},{"style":357},[8379],{"type":50,"value":101},{"type":44,"tag":350,"props":8381,"children":8382},{"style":1406},[8383],{"type":50,"value":1929},{"type":44,"tag":350,"props":8385,"children":8386},{"style":1273},[8387],{"type":50,"value":1866},{"type":44,"tag":350,"props":8389,"children":8390},{"style":357},[8391],{"type":50,"value":1454},{"type":44,"tag":350,"props":8393,"children":8394},{"style":424},[8395],{"type":50,"value":2090},{"type":44,"tag":350,"props":8397,"children":8398},{"style":357},[8399],{"type":50,"value":1454},{"type":44,"tag":350,"props":8401,"children":8402},{"style":357},[8403],{"type":50,"value":1427},{"type":44,"tag":350,"props":8405,"children":8406},{"style":357},[8407],{"type":50,"value":390},{"type":44,"tag":350,"props":8409,"children":8410},{"class":352,"line":1480},[8411,8415,8419,8423,8427,8431,8435,8439],{"type":44,"tag":350,"props":8412,"children":8413},{"style":357},[8414],{"type":50,"value":1962},{"type":44,"tag":350,"props":8416,"children":8417},{"style":1388},[8418],{"type":50,"value":2114},{"type":44,"tag":350,"props":8420,"children":8421},{"style":357},[8422],{"type":50,"value":1454},{"type":44,"tag":350,"props":8424,"children":8425},{"style":357},[8426],{"type":50,"value":385},{"type":44,"tag":350,"props":8428,"children":8429},{"style":357},[8430],{"type":50,"value":1286},{"type":44,"tag":350,"props":8432,"children":8433},{"style":424},[8434],{"type":50,"value":2131},{"type":44,"tag":350,"props":8436,"children":8437},{"style":357},[8438],{"type":50,"value":1454},{"type":44,"tag":350,"props":8440,"children":8441},{"style":357},[8442],{"type":50,"value":1993},{"type":44,"tag":350,"props":8444,"children":8445},{"class":352,"line":1515},[8446,8450,8454,8458,8462,8466,8470,8474],{"type":44,"tag":350,"props":8447,"children":8448},{"style":357},[8449],{"type":50,"value":1962},{"type":44,"tag":350,"props":8451,"children":8452},{"style":1388},[8453],{"type":50,"value":2151},{"type":44,"tag":350,"props":8455,"children":8456},{"style":357},[8457],{"type":50,"value":1454},{"type":44,"tag":350,"props":8459,"children":8460},{"style":357},[8461],{"type":50,"value":385},{"type":44,"tag":350,"props":8463,"children":8464},{"style":357},[8465],{"type":50,"value":1286},{"type":44,"tag":350,"props":8467,"children":8468},{"style":424},[8469],{"type":50,"value":2168},{"type":44,"tag":350,"props":8471,"children":8472},{"style":357},[8473],{"type":50,"value":1454},{"type":44,"tag":350,"props":8475,"children":8476},{"style":357},[8477],{"type":50,"value":1993},{"type":44,"tag":350,"props":8479,"children":8480},{"class":352,"line":1538},[8481,8485,8489,8493,8497,8501,8505,8509],{"type":44,"tag":350,"props":8482,"children":8483},{"style":357},[8484],{"type":50,"value":1962},{"type":44,"tag":350,"props":8486,"children":8487},{"style":1388},[8488],{"type":50,"value":2188},{"type":44,"tag":350,"props":8490,"children":8491},{"style":357},[8492],{"type":50,"value":1454},{"type":44,"tag":350,"props":8494,"children":8495},{"style":357},[8496],{"type":50,"value":385},{"type":44,"tag":350,"props":8498,"children":8499},{"style":357},[8500],{"type":50,"value":1286},{"type":44,"tag":350,"props":8502,"children":8503},{"style":424},[8504],{"type":50,"value":2205},{"type":44,"tag":350,"props":8506,"children":8507},{"style":357},[8508],{"type":50,"value":1454},{"type":44,"tag":350,"props":8510,"children":8511},{"style":357},[8512],{"type":50,"value":1993},{"type":44,"tag":350,"props":8514,"children":8515},{"class":352,"line":1566},[8516,8520],{"type":44,"tag":350,"props":8517,"children":8518},{"style":357},[8519],{"type":50,"value":2038},{"type":44,"tag":350,"props":8521,"children":8522},{"style":1273},[8523],{"type":50,"value":1884},{"type":44,"tag":350,"props":8525,"children":8526},{"class":352,"line":1589},[8527,8531,8535,8539,8543,8547,8551,8555,8559,8563,8567],{"type":44,"tag":350,"props":8528,"children":8529},{"style":372},[8530],{"type":50,"value":1303},{"type":44,"tag":350,"props":8532,"children":8533},{"style":1273},[8534],{"type":50,"value":2260},{"type":44,"tag":350,"props":8536,"children":8537},{"style":357},[8538],{"type":50,"value":1313},{"type":44,"tag":350,"props":8540,"children":8541},{"style":1273},[8542],{"type":50,"value":1852},{"type":44,"tag":350,"props":8544,"children":8545},{"style":357},[8546],{"type":50,"value":101},{"type":44,"tag":350,"props":8548,"children":8549},{"style":1406},[8550],{"type":50,"value":2277},{"type":44,"tag":350,"props":8552,"children":8553},{"style":1273},[8554],{"type":50,"value":1866},{"type":44,"tag":350,"props":8556,"children":8557},{"style":357},[8558],{"type":50,"value":1454},{"type":44,"tag":350,"props":8560,"children":8561},{"style":424},[8562],{"type":50,"value":2290},{"type":44,"tag":350,"props":8564,"children":8565},{"style":357},[8566],{"type":50,"value":1454},{"type":44,"tag":350,"props":8568,"children":8569},{"style":1273},[8570],{"type":50,"value":1884},{"type":44,"tag":350,"props":8572,"children":8573},{"class":352,"line":1597},[8574,8578,8583,8587,8591,8595,8599,8603,8607,8612,8616],{"type":44,"tag":350,"props":8575,"children":8576},{"style":372},[8577],{"type":50,"value":1303},{"type":44,"tag":350,"props":8579,"children":8580},{"style":1273},[8581],{"type":50,"value":8582}," hasIcon ",{"type":44,"tag":350,"props":8584,"children":8585},{"style":357},[8586],{"type":50,"value":1313},{"type":44,"tag":350,"props":8588,"children":8589},{"style":1273},[8590],{"type":50,"value":1852},{"type":44,"tag":350,"props":8592,"children":8593},{"style":357},[8594],{"type":50,"value":101},{"type":44,"tag":350,"props":8596,"children":8597},{"style":1406},[8598],{"type":50,"value":2277},{"type":44,"tag":350,"props":8600,"children":8601},{"style":1273},[8602],{"type":50,"value":1866},{"type":44,"tag":350,"props":8604,"children":8605},{"style":357},[8606],{"type":50,"value":1454},{"type":44,"tag":350,"props":8608,"children":8609},{"style":424},[8610],{"type":50,"value":8611},"Has Icon",{"type":44,"tag":350,"props":8613,"children":8614},{"style":357},[8615],{"type":50,"value":1454},{"type":44,"tag":350,"props":8617,"children":8618},{"style":1273},[8619],{"type":50,"value":1884},{"type":44,"tag":350,"props":8621,"children":8623},{"class":352,"line":8622},19,[8624,8628,8632,8636,8640,8644,8648,8652,8656,8660,8664,8668,8672,8676,8680],{"type":44,"tag":350,"props":8625,"children":8626},{"style":372},[8627],{"type":50,"value":1303},{"type":44,"tag":350,"props":8629,"children":8630},{"style":1273},[8631],{"type":50,"value":3562},{"type":44,"tag":350,"props":8633,"children":8634},{"style":357},[8635],{"type":50,"value":1313},{"type":44,"tag":350,"props":8637,"children":8638},{"style":1273},[8639],{"type":50,"value":8582},{"type":44,"tag":350,"props":8641,"children":8642},{"style":357},[8643],{"type":50,"value":4851},{"type":44,"tag":350,"props":8645,"children":8646},{"style":1273},[8647],{"type":50,"value":1852},{"type":44,"tag":350,"props":8649,"children":8650},{"style":357},[8651],{"type":50,"value":101},{"type":44,"tag":350,"props":8653,"children":8654},{"style":1406},[8655],{"type":50,"value":3579},{"type":44,"tag":350,"props":8657,"children":8658},{"style":1273},[8659],{"type":50,"value":1866},{"type":44,"tag":350,"props":8661,"children":8662},{"style":357},[8663],{"type":50,"value":1454},{"type":44,"tag":350,"props":8665,"children":8666},{"style":424},[8667],{"type":50,"value":3592},{"type":44,"tag":350,"props":8669,"children":8670},{"style":357},[8671],{"type":50,"value":1454},{"type":44,"tag":350,"props":8673,"children":8674},{"style":1273},[8675],{"type":50,"value":3196},{"type":44,"tag":350,"props":8677,"children":8678},{"style":357},[8679],{"type":50,"value":385},{"type":44,"tag":350,"props":8681,"children":8682},{"style":357},[8683],{"type":50,"value":8684}," null\n",{"type":44,"tag":350,"props":8686,"children":8688},{"class":352,"line":8687},20,[8689,8693],{"type":44,"tag":350,"props":8690,"children":8691},{"style":372},[8692],{"type":50,"value":3131},{"type":44,"tag":350,"props":8694,"children":8695},{"style":1273},[8696],{"type":50,"value":3612},{"type":44,"tag":350,"props":8698,"children":8700},{"class":352,"line":8699},21,[8701,8705,8709,8713,8717,8721,8725,8729,8733,8737,8741,8745],{"type":44,"tag":350,"props":8702,"children":8703},{"style":1267},[8704],{"type":50,"value":3144},{"type":44,"tag":350,"props":8706,"children":8707},{"style":1273},[8708],{"type":50,"value":3624},{"type":44,"tag":350,"props":8710,"children":8711},{"style":357},[8712],{"type":50,"value":3629},{"type":44,"tag":350,"props":8714,"children":8715},{"style":1273},[8716],{"type":50,"value":3634},{"type":44,"tag":350,"props":8718,"children":8719},{"style":357},[8720],{"type":50,"value":101},{"type":44,"tag":350,"props":8722,"children":8723},{"style":1273},[8724],{"type":50,"value":3643},{"type":44,"tag":350,"props":8726,"children":8727},{"style":357},[8728],{"type":50,"value":3154},{"type":44,"tag":350,"props":8730,"children":8731},{"style":357},[8732],{"type":50,"value":1286},{"type":44,"tag":350,"props":8734,"children":8735},{"style":424},[8736],{"type":50,"value":3656},{"type":44,"tag":350,"props":8738,"children":8739},{"style":357},[8740],{"type":50,"value":1454},{"type":44,"tag":350,"props":8742,"children":8743},{"style":1273},[8744],{"type":50,"value":3196},{"type":44,"tag":350,"props":8746,"children":8747},{"style":357},[8748],{"type":50,"value":360},{"type":44,"tag":350,"props":8750,"children":8752},{"class":352,"line":8751},22,[8753,8757,8761,8765,8769,8773,8777,8781],{"type":44,"tag":350,"props":8754,"children":8755},{"style":1273},[8756],{"type":50,"value":3676},{"type":44,"tag":350,"props":8758,"children":8759},{"style":357},[8760],{"type":50,"value":3213},{"type":44,"tag":350,"props":8762,"children":8763},{"style":1273},[8764],{"type":50,"value":3634},{"type":44,"tag":350,"props":8766,"children":8767},{"style":357},[8768],{"type":50,"value":101},{"type":44,"tag":350,"props":8770,"children":8771},{"style":1406},[8772],{"type":50,"value":3693},{"type":44,"tag":350,"props":8774,"children":8775},{"style":1388},[8776],{"type":50,"value":3698},{"type":44,"tag":350,"props":8778,"children":8779},{"style":357},[8780],{"type":50,"value":101},{"type":44,"tag":350,"props":8782,"children":8783},{"style":1273},[8784],{"type":50,"value":3707},{"type":44,"tag":350,"props":8786,"children":8788},{"class":352,"line":8787},23,[8789],{"type":44,"tag":350,"props":8790,"children":8791},{"style":357},[8792],{"type":50,"value":453},{"type":44,"tag":350,"props":8794,"children":8796},{"class":352,"line":8795},24,[8797],{"type":44,"tag":350,"props":8798,"children":8799},{"emptyLinePlaceholder":1334},[8800],{"type":50,"value":1337},{"type":44,"tag":350,"props":8802,"children":8804},{"class":352,"line":8803},25,[8805,8809,8813],{"type":44,"tag":350,"props":8806,"children":8807},{"style":1267},[8808],{"type":50,"value":1372},{"type":44,"tag":350,"props":8810,"children":8811},{"style":1267},[8812],{"type":50,"value":1377},{"type":44,"tag":350,"props":8814,"children":8815},{"style":357},[8816],{"type":50,"value":390},{"type":44,"tag":350,"props":8818,"children":8820},{"class":352,"line":8819},26,[8821,8825,8829,8833,8837,8841],{"type":44,"tag":350,"props":8822,"children":8823},{"style":1388},[8824],{"type":50,"value":1391},{"type":44,"tag":350,"props":8826,"children":8827},{"style":357},[8828],{"type":50,"value":385},{"type":44,"tag":350,"props":8830,"children":8831},{"style":1273},[8832],{"type":50,"value":1318},{"type":44,"tag":350,"props":8834,"children":8835},{"style":357},[8836],{"type":50,"value":101},{"type":44,"tag":350,"props":8838,"children":8839},{"style":1406},[8840],{"type":50,"value":66},{"type":44,"tag":350,"props":8842,"children":8843},{"style":357},[8844],{"type":50,"value":5177},{"type":44,"tag":350,"props":8846,"children":8848},{"class":352,"line":8847},27,[8849],{"type":44,"tag":350,"props":8850,"children":8851},{"style":424},[8852],{"type":50,"value":5185},{"type":44,"tag":350,"props":8854,"children":8856},{"class":352,"line":8855},28,[8857,8861,8865,8869,8873],{"type":44,"tag":350,"props":8858,"children":8859},{"style":424},[8860],{"type":50,"value":5193},{"type":44,"tag":350,"props":8862,"children":8863},{"style":357},[8864],{"type":50,"value":3902},{"type":44,"tag":350,"props":8866,"children":8867},{"style":1273},[8868],{"type":50,"value":5202},{"type":44,"tag":350,"props":8870,"children":8871},{"style":357},[8872],{"type":50,"value":2038},{"type":44,"tag":350,"props":8874,"children":8875},{"style":424},[8876],{"type":50,"value":5211},{"type":44,"tag":350,"props":8878,"children":8880},{"class":352,"line":8879},29,[8881,8886,8890,8894,8898],{"type":44,"tag":350,"props":8882,"children":8883},{"style":424},[8884],{"type":50,"value":8885},"      size=\"",{"type":44,"tag":350,"props":8887,"children":8888},{"style":357},[8889],{"type":50,"value":3902},{"type":44,"tag":350,"props":8891,"children":8892},{"style":1273},[8893],{"type":50,"value":8039},{"type":44,"tag":350,"props":8895,"children":8896},{"style":357},[8897],{"type":50,"value":2038},{"type":44,"tag":350,"props":8899,"children":8900},{"style":424},[8901],{"type":50,"value":5211},{"type":44,"tag":350,"props":8903,"children":8905},{"class":352,"line":8904},30,[8906,8910,8914,8918,8922,8926,8930,8934],{"type":44,"tag":350,"props":8907,"children":8908},{"style":357},[8909],{"type":50,"value":5219},{"type":44,"tag":350,"props":8911,"children":8912},{"style":1273},[8913],{"type":50,"value":5224},{"type":44,"tag":350,"props":8915,"children":8916},{"style":357},[8917],{"type":50,"value":4851},{"type":44,"tag":350,"props":8919,"children":8920},{"style":357},[8921],{"type":50,"value":1286},{"type":44,"tag":350,"props":8923,"children":8924},{"style":424},[8925],{"type":50,"value":5237},{"type":44,"tag":350,"props":8927,"children":8928},{"style":357},[8929],{"type":50,"value":1454},{"type":44,"tag":350,"props":8931,"children":8932},{"style":357},[8933],{"type":50,"value":4898},{"type":44,"tag":350,"props":8935,"children":8936},{"style":357},[8937],{"type":50,"value":5250},{"type":44,"tag":350,"props":8939,"children":8941},{"class":352,"line":8940},31,[8942,8946,8950,8954,8958,8962,8966,8970,8974,8978,8982,8986,8990,8994,8998],{"type":44,"tag":350,"props":8943,"children":8944},{"style":357},[8945],{"type":50,"value":5219},{"type":44,"tag":350,"props":8947,"children":8948},{"style":1273},[8949],{"type":50,"value":7736},{"type":44,"tag":350,"props":8951,"children":8952},{"style":357},[8953],{"type":50,"value":4851},{"type":44,"tag":350,"props":8955,"children":8956},{"style":1273},[8957],{"type":50,"value":1318},{"type":44,"tag":350,"props":8959,"children":8960},{"style":357},[8961],{"type":50,"value":101},{"type":44,"tag":350,"props":8963,"children":8964},{"style":1406},[8965],{"type":50,"value":66},{"type":44,"tag":350,"props":8967,"children":8968},{"style":357},[8969],{"type":50,"value":1413},{"type":44,"tag":350,"props":8971,"children":8972},{"style":424},[8973],{"type":50,"value":4872},{"type":44,"tag":350,"props":8975,"children":8976},{"style":357},[8977],{"type":50,"value":3902},{"type":44,"tag":350,"props":8979,"children":8980},{"style":1273},[8981],{"type":50,"value":7770},{"type":44,"tag":350,"props":8983,"children":8984},{"style":357},[8985],{"type":50,"value":2038},{"type":44,"tag":350,"props":8987,"children":8988},{"style":424},[8989],{"type":50,"value":2038},{"type":44,"tag":350,"props":8991,"children":8992},{"style":357},[8993],{"type":50,"value":1413},{"type":44,"tag":350,"props":8995,"children":8996},{"style":357},[8997],{"type":50,"value":4898},{"type":44,"tag":350,"props":8999,"children":9000},{"style":357},[9001],{"type":50,"value":5250},{"type":44,"tag":350,"props":9003,"children":9005},{"class":352,"line":9004},32,[9006],{"type":44,"tag":350,"props":9007,"children":9008},{"style":424},[9009],{"type":50,"value":5258},{"type":44,"tag":350,"props":9011,"children":9013},{"class":352,"line":9012},33,[9014,9018,9022],{"type":44,"tag":350,"props":9015,"children":9016},{"style":357},[9017],{"type":50,"value":5219},{"type":44,"tag":350,"props":9019,"children":9020},{"style":1273},[9021],{"type":50,"value":4917},{"type":44,"tag":350,"props":9023,"children":9024},{"style":357},[9025],{"type":50,"value":453},{"type":44,"tag":350,"props":9027,"children":9029},{"class":352,"line":9028},34,[9030],{"type":44,"tag":350,"props":9031,"children":9032},{"style":424},[9033],{"type":50,"value":5281},{"type":44,"tag":350,"props":9035,"children":9037},{"class":352,"line":9036},35,[9038,9042],{"type":44,"tag":350,"props":9039,"children":9040},{"style":357},[9041],{"type":50,"value":5289},{"type":44,"tag":350,"props":9043,"children":9044},{"style":357},[9045],{"type":50,"value":1993},{"type":44,"tag":350,"props":9047,"children":9049},{"class":352,"line":9048},36,[9050,9054,9058,9062,9066,9071,9075,9079],{"type":44,"tag":350,"props":9051,"children":9052},{"style":1388},[9053],{"type":50,"value":1441},{"type":44,"tag":350,"props":9055,"children":9056},{"style":357},[9057],{"type":50,"value":385},{"type":44,"tag":350,"props":9059,"children":9060},{"style":1273},[9061],{"type":50,"value":417},{"type":44,"tag":350,"props":9063,"children":9064},{"style":357},[9065],{"type":50,"value":1454},{"type":44,"tag":350,"props":9067,"children":9068},{"style":424},[9069],{"type":50,"value":9070},"import { Button } from \"primitives\"",{"type":44,"tag":350,"props":9072,"children":9073},{"style":357},[9074],{"type":50,"value":1454},{"type":44,"tag":350,"props":9076,"children":9077},{"style":1273},[9078],{"type":50,"value":1468},{"type":44,"tag":350,"props":9080,"children":9081},{"style":357},[9082],{"type":50,"value":1993},{"type":44,"tag":350,"props":9084,"children":9086},{"class":352,"line":9085},37,[9087,9091,9095,9099,9104,9108],{"type":44,"tag":350,"props":9088,"children":9089},{"style":1388},[9090],{"type":50,"value":1486},{"type":44,"tag":350,"props":9092,"children":9093},{"style":357},[9094],{"type":50,"value":385},{"type":44,"tag":350,"props":9096,"children":9097},{"style":357},[9098],{"type":50,"value":1286},{"type":44,"tag":350,"props":9100,"children":9101},{"style":424},[9102],{"type":50,"value":9103},"button",{"type":44,"tag":350,"props":9105,"children":9106},{"style":357},[9107],{"type":50,"value":1454},{"type":44,"tag":350,"props":9109,"children":9110},{"style":357},[9111],{"type":50,"value":1993},{"type":44,"tag":350,"props":9113,"children":9115},{"class":352,"line":9114},38,[9116,9120,9124,9128,9132,9136,9140],{"type":44,"tag":350,"props":9117,"children":9118},{"style":1388},[9119],{"type":50,"value":1521},{"type":44,"tag":350,"props":9121,"children":9122},{"style":357},[9123],{"type":50,"value":385},{"type":44,"tag":350,"props":9125,"children":9126},{"style":357},[9127],{"type":50,"value":1530},{"type":44,"tag":350,"props":9129,"children":9130},{"style":1388},[9131],{"type":50,"value":6587},{"type":44,"tag":350,"props":9133,"children":9134},{"style":357},[9135],{"type":50,"value":385},{"type":44,"tag":350,"props":9137,"children":9138},{"style":1551},[9139],{"type":50,"value":1554},{"type":44,"tag":350,"props":9141,"children":9142},{"style":357},[9143],{"type":50,"value":6127},{"type":44,"tag":350,"props":9145,"children":9147},{"class":352,"line":9146},39,[9148],{"type":44,"tag":350,"props":9149,"children":9150},{"style":357},[9151],{"type":50,"value":453},{"type":44,"tag":60,"props":9153,"children":9154},{},[9155,9160],{"type":44,"tag":82,"props":9156,"children":9157},{},[9158],{"type":50,"value":9159},"Step 6:",{"type":50,"value":9161}," Read back file to verify syntax.",{"type":44,"tag":53,"props":9163,"children":9165},{"id":9164},"additional-reference",[9166],{"type":50,"value":9167},"Additional Reference",{"type":44,"tag":60,"props":9169,"children":9170},{},[9171,9173,9178],{"type":50,"value":9172},"For advanced patterns (multi-level nested components, ",{"type":44,"tag":66,"props":9174,"children":9176},{"className":9175},[],[9177],{"type":50,"value":5863},{"type":50,"value":9179}," filtering, metadata prop passing between parent\u002Fchild templates):",{"type":44,"tag":232,"props":9181,"children":9182},{},[9183,9192],{"type":44,"tag":236,"props":9184,"children":9185},{},[9186,9190],{"type":44,"tag":4617,"props":9187,"children":9188},{"href":5538},[9189],{"type":50,"value":5541},{"type":50,"value":9191}," — Full Code Connect API reference",{"type":44,"tag":236,"props":9193,"children":9194},{},[9195,9199],{"type":44,"tag":4617,"props":9196,"children":9197},{"href":4619},[9198],{"type":50,"value":4622},{"type":50,"value":9200}," — Advanced nesting, metadata props, and descendant patterns",{"type":44,"tag":9202,"props":9203,"children":9204},"style",{},[9205],{"type":50,"value":9206},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":9208,"total":1515},[9209,9217,9232,9243,9254,9270,9284,9297,9319,9329,9345,9356],{"slug":4,"name":4,"fn":5,"description":6,"org":9210,"tags":9211,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9212,9213,9214,9215,9216],{"name":24,"slug":25,"type":15},{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},{"slug":9218,"name":9218,"fn":9219,"description":9220,"org":9221,"tags":9222,"stars":26,"repoUrl":27,"updatedAt":9231},"figma-create-new-file","create new Figma or FigJam files","**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this skill first. Trigger whenever the user wants a new blank Figma file — a new design, FigJam, or Slides file — or when you need a fresh file before calling `use_figma`. Usage — \u002Ffigma-create-new-file [editorType] [fileName] (e.g. \u002Ffigma-create-new-file figjam My Whiteboard, \u002Ffigma-create-new-file slides Q3 Review)",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9223,9224,9225,9228],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":9226,"slug":9227,"type":15},"Ideation","ideation",{"name":9229,"slug":9230,"type":15},"MCP","mcp","2026-04-06T18:11:46.464282",{"slug":9233,"name":9233,"fn":9234,"description":9235,"org":9236,"tags":9237,"stars":26,"repoUrl":27,"updatedAt":9242},"figma-design-to-code","implement Figma designs as code","**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9238,9239,9240,9241],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},"2026-07-10T06:43:51.122606",{"slug":9244,"name":9244,"fn":9245,"description":9246,"org":9247,"tags":9248,"stars":26,"repoUrl":27,"updatedAt":9253},"figma-generate-design","translate code layouts into Figma","Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app\u002Fpage and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code', 'convert this modal\u002Fdialog\u002Fdrawer\u002Fpanel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, or any composed multi-section view in Figma from code or a description. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9249,9250,9251,9252],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},"2026-04-06T18:11:48.952023",{"slug":9255,"name":9255,"fn":9256,"description":9257,"org":9258,"tags":9259,"stars":26,"repoUrl":27,"updatedAt":9269},"figma-generate-diagram","generate flowcharts and architecture diagrams in Figma","MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9260,9263,9264,9267,9268],{"name":9261,"slug":9262,"type":15},"Architecture","architecture",{"name":24,"slug":25,"type":15},{"name":9265,"slug":9266,"type":15},"Diagrams","diagrams",{"name":9,"slug":8,"type":15},{"name":9229,"slug":9230,"type":15},"2026-04-28T05:43:52.834484",{"slug":9271,"name":9271,"fn":9272,"description":9273,"org":9274,"tags":9275,"stars":26,"repoUrl":27,"updatedAt":9283},"figma-generate-library","build Figma design systems from code","Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables\u002Ftokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (light\u002Fdark modes), document foundations, or reconcile gaps between code and Figma. Also use when the user asks to create or generate any component in Figma — even a single one — since components require proper variable foundations, variant states, and design token bindings to be production-quality. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9276,9277,9278,9281,9282],{"name":24,"slug":25,"type":15},{"name":13,"slug":14,"type":15},{"name":9279,"slug":9280,"type":15},"Documentation","documentation",{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},"2026-07-31T05:52:28.587088",{"slug":9285,"name":9285,"fn":9286,"description":9287,"org":9288,"tags":9289,"stars":26,"repoUrl":27,"updatedAt":9296},"figma-implement-motion","implement Figma animations in production code","Translates Figma motion and animations into production-ready application code. Use when implementing animation\u002Fmotion from a Figma design — user mentions \"implement this motion\", \"add animation from Figma\", \"animate this component\", provides a Figma URL whose node is animated, or when `get_design_context` returns motion data or instructs you to call `get_motion_context`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9290,9293,9294,9295],{"name":9291,"slug":9292,"type":15},"Animation","animation",{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15},"2026-06-25T07:13:13.645254",{"slug":9298,"name":9298,"fn":9299,"description":9300,"org":9301,"tags":9302,"stars":26,"repoUrl":27,"updatedAt":9318},"figma-swiftui","translate between Figma designs and SwiftUI code","SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views \u002F screens \u002F tokens back into a Figma file (code → design). Triggers on phrases like 'implement this Figma design in SwiftUI', 'build this screen in Swift', 'push this SwiftUI view to Figma', 'mirror my Swift code in a Figma file', or whenever a Figma URL appears alongside `.swift` files \u002F an `.xcodeproj`. Routes to a direction-specific reference doc; loads alongside `figma-use` for the code → design path.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9303,9304,9305,9306,9309,9312,9315],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15},{"name":9307,"slug":9308,"type":15},"iOS","ios",{"name":9310,"slug":9311,"type":15},"Mobile","mobile",{"name":9313,"slug":9314,"type":15},"SwiftUI","swiftui",{"name":9316,"slug":9317,"type":15},"Visual Design","visual-design","2026-06-09T07:16:28.204756",{"slug":9320,"name":9320,"fn":9321,"description":9322,"org":9323,"tags":9324,"stars":26,"repoUrl":27,"updatedAt":9328},"figma-use","initialize Figma tool usage","**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create\u002Fedit\u002Fdelete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9325,9326,9327],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":9229,"slug":9230,"type":15},"2026-07-31T05:52:29.57808",{"slug":9330,"name":9330,"fn":9331,"description":9332,"org":9333,"tags":9334,"stars":26,"repoUrl":27,"updatedAt":9344},"figma-use-figjam","use Figma tools in FigJam context","This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9335,9338,9339,9342,9343],{"name":9336,"slug":9337,"type":15},"Collaboration","collaboration",{"name":24,"slug":25,"type":15},{"name":9340,"slug":9341,"type":15},"FigJam","figjam",{"name":9,"slug":8,"type":15},{"name":9229,"slug":9230,"type":15},"2026-04-28T05:43:51.600727",{"slug":9346,"name":9346,"fn":9347,"description":9348,"org":9349,"tags":9350,"stars":26,"repoUrl":27,"updatedAt":9355},"figma-use-motion","animate Figma nodes with motion tools","Motion \u002F animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a node.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9351,9352,9353,9354],{"name":9291,"slug":9292,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":9229,"slug":9230,"type":15},"2026-06-25T07:13:12.398176",{"slug":9357,"name":9357,"fn":9358,"description":9359,"org":9360,"tags":9361,"stars":26,"repoUrl":27,"updatedAt":9368},"figma-use-slides","use Figma tools in Slides context","This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the use_figma tool.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9362,9363,9364,9365],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":9229,"slug":9230,"type":15},{"name":9366,"slug":9367,"type":15},"Presentations","presentations","2026-05-14T06:09:42.171824",{"items":9370,"total":1515},[9371,9379,9386,9393,9400,9408,9416],{"slug":4,"name":4,"fn":5,"description":6,"org":9372,"tags":9373,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9374,9375,9376,9377,9378],{"name":24,"slug":25,"type":15},{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},{"slug":9218,"name":9218,"fn":9219,"description":9220,"org":9380,"tags":9381,"stars":26,"repoUrl":27,"updatedAt":9231},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9382,9383,9384,9385],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":9226,"slug":9227,"type":15},{"name":9229,"slug":9230,"type":15},{"slug":9233,"name":9233,"fn":9234,"description":9235,"org":9387,"tags":9388,"stars":26,"repoUrl":27,"updatedAt":9242},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9389,9390,9391,9392],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},{"slug":9244,"name":9244,"fn":9245,"description":9246,"org":9394,"tags":9395,"stars":26,"repoUrl":27,"updatedAt":9253},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9396,9397,9398,9399],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},{"slug":9255,"name":9255,"fn":9256,"description":9257,"org":9401,"tags":9402,"stars":26,"repoUrl":27,"updatedAt":9269},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9403,9404,9405,9406,9407],{"name":9261,"slug":9262,"type":15},{"name":24,"slug":25,"type":15},{"name":9265,"slug":9266,"type":15},{"name":9,"slug":8,"type":15},{"name":9229,"slug":9230,"type":15},{"slug":9271,"name":9271,"fn":9272,"description":9273,"org":9409,"tags":9410,"stars":26,"repoUrl":27,"updatedAt":9283},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9411,9412,9413,9414,9415],{"name":24,"slug":25,"type":15},{"name":13,"slug":14,"type":15},{"name":9279,"slug":9280,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},{"slug":9285,"name":9285,"fn":9286,"description":9287,"org":9417,"tags":9418,"stars":26,"repoUrl":27,"updatedAt":9296},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9419,9420,9421,9422],{"name":9291,"slug":9292,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":20,"slug":21,"type":15}]