Loading
**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 f
The skill file stays in the publisher's repository.
Paste the copied command in a terminal. It installs this SKILL.md into that agent.
npx skills add Devin-AXIS/iPolloWork --skill figma-use -a cursor -y
**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/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.
**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/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.
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/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically."
disable-model-invocation: falseUse the use_figma tool to execute JavaScript in Figma files via the Plugin API. All detailed reference docs live in references/.
Always include figma-use in the comma-separated skillNames parameter when calling use_figma. If this skill was loaded via an MCP resource, you MUST prefix the name with resource: (e.g. resource:figma-use). This is a logging parameter used to track skill usage — it does not affect execution.
If Figma MCP tools appear as deferred tools, batch-load all their schemas in a single ToolSearch call using the select: syntax — e.g. ToolSearch query="select:use_figma,get_screenshot,get_metadata,create_new_file". One round trip beats six.
If the task involves building or updating a full page, screen, or multi-section layout in Figma from code, also load figma-generate-design. It provides the workflow for discovering design system components via search_design_system, importing them, and assembling screens incrementally. Both skills work together: this one for the API rules, that one for the screen-building workflow.
If the task involves creating or building a component in Figma (even a single component), also load figma-generate-library. It provides the component creation workflow — variable foundations, variant sets, design token bindings — that figma-use alone doesn't cover.
Before anything, load plugin-api-standalone.index.md to understand what is possible. When you are asked to write plugin API code, use this context to grep plugin-api-standalone.d.ts for relevant types, methods, and properties. This is the definitive source of truth for the API surface. It is a large typings file, so do not load it all at once, grep for relevant sections as needed.
IMPORTANT: Whenever you work with design systems, start with working-with-design-systems/wwds.md to understand the key concepts, processes, and guidelines for working with design systems in Figma. Then load the more specific references for components, variables, text styles, and effect styles as needed.
return to send data back. The return value is JSON-serialized automatically (objects, arrays, strings, numbers). Do NOT call figma.closePlugin() or wrap code in an async IIFE — this is handled for you.await and return. Code is automatically wrapped in an async context. Do NOT wrap in (async () => { ... })().figma.notify() throws "not implemented" — never use it
3a. getPluginData() / setPluginData() are not supported in use_figma — do not use them. Use getSharedPluginData() / setSharedPluginData() instead (these ARE supported), or track node IDs by returning them and passing them to subsequent calls.console.log() is NOT returned — use return for outputuse_figma calls. Validate after each step. This is the single most important practice for avoiding bugs.{r: 1, g: 0, b: 0} = redawait → mutate → return affected node IDs. Skipping the load throws Cannot write to node with unloaded font "<family> <style>". The rule covers more than characters — it applies to any operation on nodes with unloaded fonts (appendChild, insertChild, setBoundVariable, setExplicitVariableModeForCollection, setValueForMode, findAll callbacks touching text). When mutating existing text, load the node's current fonts via getStyledTextSegments(['fontName']), not a hardcoded default. Inter is preloaded in most environments so other families surface this bug more often — the recipe is the same for every font. Use await figma.listAvailableFontsAsync() first if the style string is unverified. See Canonical text-edit recipe.await figma.setCurrentPageAsync(page) to switch pages and load their content. The sync setter figma.currentPage = page does NOT work and will throw (see Page Rules below)setBoundVariableForPaint returns a NEW paint — must capture and reassigncreateVariable accepts collection object or ID string (object preferred)layoutSizingHorizontal/Vertical is value-restricted by structural context — FIXED always works, HUG and FILL do not. 'HUG' is valid only on an auto-layout frame itself OR on a TEXT child of one. 'FILL' is valid only on a child of an auto-layout frame that is also not absolute-positioned, not inside an immutable frame, and not a canvas-grid child. Practical consequence: append to an auto-layout parent FIRST, then set HUG/FILL — a newly-created or unparented node can't satisfy the rule yet. The property itself exists on every SceneNode; the error is value-rejection, not "no such property". See Gotchas.
12a. Use auto-layout for containers that hold related children. When children have a structural relationship — stacked, side-by-side, aligned, gapped, hugged — wrap them in figma.createAutoLayout(), not figma.createFrame() with absolute x/y. Absolute coordinates govern where a container sits on the canvas; auto-layout governs how its children relate inside it. Skipping the container leaves no protection against text reflow, content changes, or overlap.
12b. layoutSizing* and *AxisSizingMode are different enums — don't cross them. layoutSizingHorizontal/layoutSizingVertical (set on a child) take 'FIXED'|'HUG'|'FILL'; primaryAxisSizingMode/counterAxisSizingMode (set on the frame itself) take 'FIXED'|'AUTO'. So layoutSizingVertical = 'AUTO' is invalid (use 'HUG'), and counterAxisSizingMode = 'FILL' throws Expected 'FIXED' | 'AUTO', received 'FILL' (use 'FIXED'/'AUTO'). Two more errors from the same setter — Error: in set_layoutSizingHorizontal: node must be an auto-layout frame or a child of an auto-layout frame and Error: in set_layoutSizingHorizontal: FILL can only be set on children of auto-layout frames — mean the node isn't in an auto-layout context yet; recommendation: make the parent auto-layout (figma.createAutoLayout()) and appendChild the node before setting (see Rule 12). See Gotchas.figma.currentPage.children to find a clear position (e.g., to the right of the rightmost node). This only applies to page-level nodes — nodes nested inside other frames or auto-layout containers are positioned by their parent. See Gotchas.use_figma error, STOP. Do NOT immediately retry. Failed scripts are atomic — if a script errors, it is not executed at all and no changes are made to the file. Read the error message carefully, fix the script, then retry. See Error Recovery.return ALL created/mutated node IDs. Whenever a script creates new nodes or mutates existing ones on the canvas, collect every affected node ID and return them in a structured object (e.g. return { createdNodeIds: [...], mutatedNodeIds: [...] }). This is essential for subsequent calls to reference, validate, or clean up those nodes.variable.scopes explicitly when creating variables. The default ALL_SCOPES pollutes every property picker — almost never what you want. Use specific scopes like ["FRAME_FILL", "SHAPE_FILL"] for backgrounds, ["TEXT_FILL"] for text colors, ["GAP"] for spacing, etc. See variable-patterns.md for the full list.await every Promise. Never leave a Promise unawaited — unawaited async calls (e.g. figma.loadFontAsync(...) without await, or figma.setCurrentPageAsync(page) without await) will fire-and-forget, causing silent failures or race conditions. The script may return before the async operation completes, leading to missing data or half-applied changes.For detailed WRONG/CORRECT examples of each rule, see Gotchas & Common Mistakes.
Page context resets between use_figma calls — figma.currentPage starts on the first page each time.
Use await figma.setCurrentPageAsync(page) to switch pages and load their content. The sync setter figma.currentPage = page does NOT work — it throws "Setting figma.currentPage is not supported" in use_figma. Always use the async method.
// Switch to a specific page (loads its content)
const targetPage = figma.root.children.find((p) => p.name === "My Page");
await figma.setCurrentPageAsync(targetPage);
// targetPage.children is now populated
setCurrentPageAsync at most once per use_figma invocation — fan multi-page work out in parallelOne script must switch pages at most once. Never loop over figma.root.children and switch pages inside the loop.
If the work spans multiple pages, split it into N use_figma calls (one per target page) and emit them in parallel — a single assistant message containing N use_figma tool-use blocks. The harness runs them concurrently; each script sets currentPage exactly once.
Explicit instruction: when fanning out, you MUST issue the N tool calls in one message. Do not send them across multiple turns. Do not await one before issuing the next. Sequential per-page calls are slower than the in-loop pattern this rule replaces and waste the entire benefit of splitting.
// AVOID — switches pages N times in one script, reloads the file each time
for (const page of figma.root.children) {
await figma.setCurrentPageAsync(page);
// ... touch this page ...
}
// PREFER — read-only discovery call to get page IDs, then in the NEXT message
// emit N parallel use_figma tool calls (one per page), each setting currentPage once.
Default to parallel fan-out for any multi-page work — reads and writes alike. See gotchas.md → Set current page once per use_figma call for the full rationale.
figma.currentPage resets to the first page at the start of each use_figma call. If your workflow spans multiple calls and targets a non-default page, call await figma.setCurrentPageAsync(page) at the start of each invocation.
You can call use_figma multiple times to incrementally build on the file state, or to retrieve information before writing another script. For example, write a script to get metadata about existing nodes, return that data, then use it in a subsequent script to modify those nodes.
return Is Your Output ChannelThe agent sees ONLY the value you return. Everything else is invisible.
return { createdNodeIds: [...], mutatedNodeIds: [...] }. This is a hard requirement, not optional.return { createdNodeIds: [...], count: 5, errors: [] }throw explicitly.console.log() output is never returned to the agentuse_figma works in design mode (editorType "figma", the default). FigJam ("figjam") and Slides ("slides") have different sets of available node types — most design nodes are blocked in FigJam, and FigJam-only nodes are blocked in Slides.
Tell the editor from the URL: Design = figma.com/design/..., FigJam = figma.com/board/..., Slides = figma.com/slides/.... Confirm before assuming an API is available.
Available in design mode: Rectangle, Frame, Component, Text, Ellipse, Star, Line, Vector, Polygon, BooleanOperation, Slice, Page, Section, TextPath.
Blocked in design mode: Sticky, Connector, ShapeWithText, CodeBlock, Slide, SlideRow, SlideGrid, InteractiveSlideElement, Webpage.
Available in Slides mode: Rectangle, Frame, Component, Text, Ellipse, Star, Line, Vector, Polygon, BooleanOperation, Slice, Section, TextPath, Slide, SlideRow, SlideGrid, InteractiveSlideElement.
Blocked in Slides mode: Sticky, Connector, ShapeWithText, CodeBlock, Webpage, Page.
Design-only APIs (not just node types): figma.createPage() is available only in Design files (figma.com/design/...). In both FigJam (figma.com/board/...) and Slides (figma.com/slides/...) it throws TypeError: figma.createPage no such property 'createPage' on the figma global object. Do not emit figma.createPage() in FigJam or Slides workflows.
Slides note: There is no dedicated read tool for Slides files yet. Use
use_figmawith read-only scripts for inspection (see Section 6 "Inspect first" pattern), andget_screenshot/await node.screenshot()for visual context. For Slides-specific API guidance, load the figma-use-slides skill.
These APIs reduce boilerplate, eliminate ordering errors, and compress token output. Always prefer them over the verbose alternatives.
node.query(selector) — CSS-like node searchFind nodes within a subtree using CSS-like selectors. Replaces verbose findAll + filter loops.
// BEFORE — verbose traversal
const texts = frame.findAll(n => n.type === 'TEXT' && n.name === 'Title')
// AFTER — one-liner with query
const texts = frame.query('TEXT[name=Title]')
Selector syntax:
FRAME, TEXT, RECTANGLE, ELLIPSE, COMPONENT, INSTANCE, SECTION (case-insensitive)[name=Card], [visible=true], [opacity=0.5][name*=art] (contains), [name^=Header] (starts-with), [name$=Nav] (ends-with)[fills.0.type=SOLID], [fills.*.type=SOLID] (wildcard index)[mainComponent=nodeId], [mainComponent.name=Button]FRAME > TEXT (direct child), FRAME TEXT (any descendant), A + B (adjacent sibling), A ~ B (general sibling):first-child, :last-child, :nth-child(2), :not(TYPE), :is(FRAME, RECTANGLE), :where(TEXT, ELLIPSE)#nodeId or bare GUIDTEXT, RECTANGLE (union)* (any type)QueryResult methods:
| Method | Description |
|---|---|
.length | Number of matched nodes |
.first() | First matched node (or null) |
.last() | Last matched node (or null) |
.toArray() | Convert to regular array |
.each(fn) | Iterate with callback, returns this for chaining |
.map(fn) | Map to new array |
.filter(fn) | Filter to new QueryResult |
.values(keys) | Extract property values: .values(['name', 'x', 'y']) → [{name, x, y}, ...] |
.set(props) | Set properties on all matched nodes (see node.set() below) |
.query(selector) | Sub-query within matched nodes |
for...of | Iterable — works in for loops |
Scope: node.query() searches within that node's subtree. To search the whole page: figma.currentPage.query('...'). There is no global figma.query().
Examples:
// Recolor all text inside cards
figma.currentPage.query('FRAME[name^=Card] TEXT').set({
fills: [{type: 'SOLID', color: {r: 0.2, g: 0.2, b: 0.8}}]
})
// Get names and positions of all frames
return figma.currentPage.query('FRAME').values(['name', 'x', 'y'])
// Find the first component named "Button"
const btn = figma.currentPage.query('COMPONENT[name=Button]').first()
// Find all instances of a specific component
figma.currentPage.query(`INSTANCE[mainComponent=${compId}]`)
// Find nodes with solid fills using dot-path traversal
figma.currentPage.query('[fills.0.type=SOLID]')
node.set(props) — batch property updatesSet multiple properties in one call. Returns this for chaining.
// BEFORE — one line per property
frame.opacity = 0.5
frame.cornerRadius = 8
frame.name = "Card"
// AFTER — single call
frame.set({ opacity: 0.5, cornerRadius: 8, name: "Card" })
Priority key ordering: layoutMode is always applied before other properties (like width/height) regardless of object key order. This prevents the common bug where resize() behaves differently depending on whether layoutMode is set.
Width/height handling: width and height are routed through node.resize() automatically — setting { width: 200 } calls resize(200, currentHeight).
Chaining with query:
// Find all rectangles named "Divider" and update them
figma.currentPage.query('RECTANGLE[name=Divider]').set({
fills: [{type: 'SOLID', color: {r: 0.9, g: 0.9, b: 0.9}}],
cornerRadius: 2
})
figma.createAutoLayout(direction?, props?) — auto-layout framesCreates a frame with auto-layout already enabled and both axes hugging content. This is the default container whenever children have a structural relationship to each other (see Rule 12a).
// BEFORE — manual setup, easy to get ordering wrong
const frame = figma.createFrame()
frame.layoutMode = 'VERTICAL'
frame.primaryAxisSizingMode = 'AUTO'
frame.counterAxisSizingMode = 'AUTO'
frame.layoutSizingHorizontal = 'HUG'
frame.layoutSizingVertical = 'HUG'
// AFTER — one call, layout ready
const frame = figma.createAutoLayout('VERTICAL')
Children can immediately use layoutSizingHorizontal/Vertical = 'FILL' after being appended — no need to set sizing modes manually.
Accepts an optional props object as the first or second argument:
figma.createAutoLayout({ name: 'Card', itemSpacing: 12 }) // HORIZONTAL + props
figma.createAutoLayout('VERTICAL', { name: 'Column', itemSpacing: 8 }) // VERTICAL + props
node.placeholder — shimmer overlay for AI-in-progress feedbackSets a visual shimmer overlay on a node indicating work is in progress. Always remove the shimmer when done — leftover shimmers confuse users and indicate incomplete work.
// Mark as in-progress
frame.placeholder = true
// ... build out the content ...
// MUST remove when done — never leave shimmers on finished nodes
frame.placeholder = false
When building complex layouts, set placeholder = true on sections before populating them, then set placeholder = false on each section as it's completed.
await node.screenshot(opts?) — inline screenshotsCapture a node as a PNG and return it inline in the response. Eliminates the need for a separate get_screenshot call.
// Take a screenshot of a frame (returned inline in the tool response)
await frame.screenshot()
// Custom scale (default auto-scales: 0.5x or capped so max dimension ≤ 1024px)
await frame.screenshot({ scale: 2 })
// Include overlapping content from sibling nodes
await frame.screenshot({ contentsOnly: false })
When to use: After creating or modifying nodes, call screenshot() to visually verify the result within the same script. No need for a separate get_screenshot call.
Auto-naming: The image caption includes node metadata — "Card (300x150 at 0,60).png" — giving spatial context without parsing the image.
Default scaling: Uses 0.5x scale, but automatically caps so the largest output dimension never exceeds 1024px. Explicit { scale: N } bypasses the cap.
The most common cause of bugs is trying to do too much in a single use_figma call. Work in small steps and validate after each one.
use_figma call. A "logical operation" is creating a node, setting its properties, and parenting it. If you need to create 20 nodes, split across 2-3 calls. Slides override: in Slides files, slides are isolated subtrees — the relevant limit is complexity per slide, not total nodes across slides. Building 3–5 new slides in one call is safe, and so is applying the same edit (e.g. adding a footer, recoloring a heading) across every slide in the deck in a single call. See figma-use-slides for the deck-building workflow.placeholder = true on each section, then incrementally replace placeholders with real content in subsequent calls.use_figma to discover what already exists in the file — pages, components, variables, naming conventions. Match what's there.placeholder = true on each section so the user sees progress.placeholder = false when done. Take a screenshot() to verify.return created node IDs, variable IDs, collection IDs as objects (e.g. return { createdNodeIds: [...] }). You'll need these as inputs to subsequent calls.get_metadata to verify structure (counts, names, hierarchy, positions). Use await node.screenshot() inline or get_screenshot after major milestones to catch visual issues.Step 1: Inspect file — discover existing pages, components, variables, conventions
Step 2: Create tokens/variables (if needed)
→ validate with get_metadata
Step 3: Create individual components
→ validate with get_metadata + get_screenshot
Step 4: Compose layouts from component instances
→ validate with get_screenshot
Step 5: Final verification
| After... | Check with get_metadata | Check with get_screenshot |
|---|---|---|
| Creating variables | Collection count, variable count, mode names | — |
| Creating components | Child count, variant names, property definitions | Variants visible, not collapsed, grid readable |
| Binding variables | Node properties reflect bindings | Colors/tokens resolved correctly |
| Composing layouts | Instance nodes have mainComponent, hierarchy correct | No cropped/clipped text, no overlapping elements, correct spacing |
use_figma is atomic — failed scripts do not execute. If a script errors, no changes are made to the file. The file remains in the same state as before the call. This means there are no partial nodes, no orphaned elements from the failed script, and retrying after a fix is safe.
use_figma returns an errorget_metadata or get_screenshot to understand the current file state.| Error message | Likely cause | How to fix |
|---|---|---|
"not implemented" | Used figma.notify() | Remove it — use return for output |
Error: in set_layoutSizingHorizontal: node must be an auto-layout frame or a child of an auto-layout frame / Error: in set_layoutSizingHorizontal: FILL can only be set on children of auto-layout frames / "HUG can only be set on auto-layout frames or text children of auto-layout frames" / "FILL cannot be set on absolute positioned auto-layout children" / "FILL cannot be set on canvas grid children" | Tried to assign HUG/FILL to a node whose structural context doesn't allow it (e.g. parent isn't auto-layout, ran before appendChild, non-text child trying to HUG, absolute-positioned child trying to FILL) | Make the parent auto-layout via figma.createAutoLayout(); appendChild first; reserve HUG for the auto-layout frame itself or for TEXT children; for absolute/immutable/grid children use FIXED + resize(). See gotchas.md |
"Setting figma.currentPage is not supported" | Used sync page setter (figma.currentPage = page) which does NOT work | Use await figma.setCurrentPageAsync(page) — the only way to switch pages |
| Property value out of range | Color channel > 1 (used 0–255 instead of 0–1) | Divide by 255 |
"Cannot read properties of null" | Node doesn't exist (wrong ID, wrong page) | Check page context, verify ID |
| Script hangs / no response | Infinite loop or unresolved promise | Check for while(true) or missing await; ensure code terminates |
"The node with id X does not exist" | Parent instance was implicitly detached by a child detachInstance(), changing IDs | Re-discover nodes by traversal from a stable (non-instance) parent frame |
get_metadata to check structural correctness (hierarchy, counts, positions).get_screenshot to check visual correctness. Look closely for cropped/clipped text (line heights cutting off content) and overlapping elements — these are common and easy to miss.For the full validation workflow, see Validation & Error Recovery.
Before submitting ANY use_figma call, verify:
return to send data back (NOT figma.closePlugin())return value includes structured data with actionable info (IDs, counts)figma.notify() anywhereconsole.log() as output (use return instead)color objects use {r, g, b} only — no a field (opacity goes at the paint level: { type: 'SOLID', color: {...}, opacity: 0.5 })await figma.setCurrentPageAsync(page) (sync setter figma.currentPage = page does NOT work)layoutSizingVertical/Horizontal = 'FILL' is set AFTER parent.appendChild(child)textAutoResize = 'HEIGHT' and an explicit width ('FIXED' + resize()) — NOT FILL alone, which the default WIDTH_AND_HEIGHT mode ignores, collapsing the node to a near-zero-width thread. Verify node.width > 0loadFontAsync → await → mutate characters/font/size/etc. → return affected node IDs. Works for ANY font family/style, not just Inter (which only happens to be preloaded).listAvailableFontsAsync() — NOT guessed from memory ("SemiBold" vs "Semi Bold" is a common footgun)FONT_FAMILY-scoped variables: every value across every relevant mode is loaded before setBoundVariable("fontFamily", …), setValueForMode, or setExplicitVariableModeForCollectionlineHeight/letterSpacing use {unit, value} format (not bare numbers)resize() is called BEFORE setting sizing modes (resize resets them to FIXED)figma.createAutoLayout(), not absolute x/y (see Rule 12a)return valueloadFontAsync, setCurrentPageAsync, importComponentByKeyAsync, etc.) is awaited — no fire-and-forget PromisesAlways inspect the Figma file before creating anything. Different files use different naming conventions, variable structures, and component patterns. Your code should match what's already there, not impose new conventions.
When in doubt about any convention (naming, scoping, structure), check the Figma file first, then the user's codebase. Only fall back to common patterns when neither exists.
List all pages and top-level nodes:
const pages = figma.root.children.map(p => `${p.name} id=${p.id} children=${p.children.length}`);
return pages.join('\n');
List existing components across all pages:
search_design_system is an option for published components. For on-canvas components, use the two-step fan-out — don't loop pages inside one script.
Step 1: one read-only use_figma to get page IDs:
return figma.root.children.map(p => ({ id: p.id, name: p.name }));
Step 2: in the next assistant turn, emit one use_figma per page in parallel (a single message containing N tool-use blocks). Each runs:
const page = await figma.getNodeByIdAsync(PAGE_ID);
await figma.setCurrentPageAsync(page);
// findAllWithCriteria uses an indexed type lookup — hundreds of times faster
// than the findAll(n => n.type === '…') side-effect-in-predicate antipattern.
const matches = page.findAllWithCriteria({ types: ['COMPONENT', 'COMPONENT_SET'] });
return matches.map(n => ({ page: page.name, name: n.name, type: n.type, id: n.id }));
List existing variable collections and their conventions:
const collections = await figma.variables.getLocalVariableCollectionsAsync();
const results = collections.map(c => ({
name: c.name, id: c.id,
varCount: c.variableIds.length,
modes: c.modes.map(m => m.name)
}));
return results;
Load these as needed based on what your task involves:
| Doc | When to load | What it covers |
|---|---|---|
| gotchas.md | Before any use_figma | Every known pitfall with WRONG/CORRECT code examples — start with the canonical text-edit recipe |
| common-patterns.md | Need working code examples | Script scaffolds: shapes, text, auto-layout, variables, components, multi-step workflows |
| plugin-api-patterns.md | Creating/editing nodes | Fills, strokes, Auto Layout, effects, grouping, cloning, styles |
| api-reference.md | Need exact API surface | Node creation, variables API, core properties, what works and what doesn't |
| validation-and-recovery.md | Multi-step writes or error recovery | get_metadata vs get_screenshot workflow, mandatory error recovery steps |
| component-patterns.md | Creating components/variants | combineAsVariants, component properties, INSTANCE_SWAP, variant layout, discovering existing components, metadata traversal |
| variable-patterns.md | Creating/binding variables | Collections, modes, scopes, aliasing, binding patterns, discovering existing variables |
| text-style-patterns.md | Creating/applying text styles | Type ramps, font discovery via listAvailableFontsAsync, listing styles, applying styles to nodes |
| effect-style-patterns.md | Creating/applying effect styles | Drop shadows, listing styles, applying styles to nodes |
| plugin-api-standalone.index.md | Need to understand the full API surface | Index of all types, methods, and properties in the Plugin API |
| plugin-api-standalone.d.ts | Need exact type signatures | Full typings file — grep for specific symbols, don't load all at once |
You will see snippets throughout documentation here. These snippets contain useful plugin API code that can be repurposed. Use them as is, or as starter code as you go. If there are key concepts that are best documented as generic snippets, call them out and write to disk so you can reuse in the future.