Execute JavaScript in Figma files via the Plugin API to create and edit design nodes.
npx skills add https://github.com/UlaYuga/promo-preflight --skill figma-use-ulayuga
Please help me install this Agent Skill. Skill: figma-use Source: https://github.com/UlaYuga/promo-preflight/tree/main/.agents/skills/figma-use Command: npx skills add https://github.com/UlaYuga/promo-preflight --skill figma-use-ulayuga
use_figma tool call so scripts execute correctly the first time. ## Core Features & Use Cases - Critical API Rules: Enforces 17 hard rules covering return values, font loading, page switching via setCurrentPageAsync, color ranges, and atomic error recovery. - Efficient API Patterns: Teaches concise helpers like node.query() selectors, node.set() batch updates, figma.createAutoLayout(), and inline node.screenshot() verification. - Incremental Workflow Guidance: Prescribes a build-validate-fix loop with a pre-flight checklist and step-by-step validation tables for variables, components, and layouts. - Use Case: When asked to build a button component set with variants and bound color variables in Figma, load this Skill first to discover existing conventions, create variables with correct scopes, combine variants, lay them out in a grid, and return all node IDs for follow-up edits. ## Quick Start Load the figma-use skill before calling use_figma, then ask the AI to create an auto-layout card component with a text label in the current Figma file.High-intent search queries and answers about installing and using this skill.
Use the use_figma tool with plain JavaScript using top-level await and return. The return value is JSON-serialized back to the agent, so always return structured data like created node IDs rather than relying on console.log.
Create ComponentNodes with figma.createComponent(), name them with Property=Value syntax, then call figma.combineAsVariants(). Afterward you must manually position children in a grid and resize the set, since variants stack at (0,0) by default.
The sync setter figma.currentPage = page throws in use_figma. You must use await figma.setCurrentPageAsync(page), which switches the page and loads its content. Page context also resets to the first page between calls.
layoutSizingHorizontal or layoutSizingVertical set to FILL only works after the node is appended to an auto-layout parent. Call parent.appendChild(child) first, then set the sizing mode, and ensure the parent itself is FIXED or FILL rather than HUG.
figma.notify() throws not implemented, figma.showUI() and figma.openExternal() are no-ops, and getPluginData/setPluginData are unsupported. Use getSharedPluginData/setSharedPluginData or return node IDs to track state across calls.
Call figma.variables.setBoundVariableForPaint with a SOLID paint and the variable, then capture the returned new paint and assign it to node.fills. The method returns a new paint object, so ignoring the return value leaves the fill unbound.
Martino17xRun Figma Plugin API scripts for canvas writes, inspections, and design-system work.
PytaichukBohdanAssemble Figma screens from design system components, tokens, and styles.
89jobrienGenerate full-page Figma screens from code or descriptions using a shared design system.
Umbral-BotInteract with the Figma REST API to read file structures and export assets.