figma-use

Overview of figma-use skill

What figma-use is for

figma-use is the required skill for calling use_figma safely and correctly in Figma plugin API workflows. It is built for agents that need to write, update, inspect, or structure Figma files with JavaScript rather than by hand. If your task includes editing nodes, binding variables, adjusting auto layout, creating components, or programmatically reading file structure, this skill is the right entry point.

Who should install it

Install the figma-use skill if you need reliable Figma file operations in agent runs, especially for Design Implementation work where prompt-only guidance is too vague. It is most useful when the output depends on file context, existing components, or Figma-specific constraints that generic coding prompts often miss.

Why it matters in practice

The main value of figma-use is not just API access; it is the guardrail around when to call use_figma and what context to load first. That reduces broken calls, missing prerequisites, and wasted iterations. It is especially helpful when you need predictable execution on live Figma files, where order of operations and file state can change the result.

How to Use figma-use skill

Install and load it first

Use the install path provided by your skills manager, then make sure the agent loads figma-use before any use_figma tool call. The repository’s own rule is explicit: pass skillNames: "figma-use" when invoking use_figma. If the task is a full page or multi-section screen build, also load figma-generate-design so you can combine API rules with the screen-building workflow.

Start with the right files

For figma-use usage, read references/plugin-api-standalone.index.md first to understand the API surface, then check references/common-patterns.md, references/gotchas.md, and references/validation-and-recovery.md before writing code. If you are working with components, variables, or styles, jump next to the relevant pattern docs instead of scanning the whole repo.

Turn a rough request into a usable prompt

Strong input to figma-use should name the target file area, the object types, and the expected change. For example: “In the selected frame, create a 3-card horizontal layout using existing local components, keep spacing consistent with the current page, and return the created node IDs.” That is better than “make this prettier,” because the skill needs actionable structure, not subjective direction.

Workflow that improves output quality

A good figma-use workflow is: inspect the file or selected nodes, confirm available components/styles, make the smallest safe change, then validate the result. For Design Implementation, prefer incremental assembly over one-shot generation. Read agents/openai.yaml for the tool context, then use the references folder as the source of truth for API behavior and common failure cases.

figma-use skill FAQ

Is figma-use only for writing code?

No. The figma-use skill is for any Figma operation that requires the Plugin API in JavaScript, including unique reads such as programmatic file inspection or structure discovery. If the task depends on live document state, it belongs here.

When should I not use it?

Do not use figma-use for simple static advice, rough design critique, or tasks that can be completed without touching the file. If you are not actually calling use_figma, the skill adds little value and may slow the workflow.

Is it beginner-friendly?

Yes, if you follow the repository order and keep requests specific. Beginners usually struggle when they ask for a finished design without supplying the target frame, existing component choices, or constraints. The skill is easier to use when you start from the current file state and a narrow goal.

How is it different from a normal prompt?

A normal prompt can describe intent; figma-use helps execute against Figma’s actual API rules. That matters for Design Implementation because many Figma actions depend on node types, page context, or supported Plugin API methods. The skill reduces guesswork by anchoring the workflow in documented patterns and gotchas.

How to Improve figma-use skill

Give better file context

The biggest improvement comes from naming what already exists: selected frame, page name, component library, variable collection, or local style set. If you omit that, the agent has to guess whether to create new assets or reuse existing ones. For figma-use usage, context usually matters more than verbosity.

Specify structure, not just aesthetics

Requests like “make it cleaner” are weak. Better inputs look like: “Convert the selected marketing section into a 12-column responsive frame, reuse local text styles, and keep the CTA aligned with the existing button component.” This helps figma-use choose the right API path and avoids output that looks polished but doesn’t fit the file system.

Watch for the common failure modes

The most common issues are calling use_figma without loading the skill, skipping the API reference index, and trying to do too much in one pass. Another frequent problem is not checking gotchas around node placement, component properties, or variable modes. If a result is off, inspect the references that match the failed operation before retrying.

Iterate with concrete corrections

After the first output, improve by stating what to keep, what to replace, and what must remain untouched. For example: “Keep the current component instances, reduce vertical spacing by 8px, and change only the secondary label text style.” This kind of correction makes figma-use stronger on the second pass than asking for a fresh redesign.