figma-component-properties
Add, edit, and delete Figma component properties (TEXT, BOOLEAN, INSTANCE_SWAP, VARIANT) on a COMPONENT or COMPONENT_SET, and instantiate a component then set its instance properties. Use when authoring or wiring up a component's API in Figma — triggers: 'add a component property', 'add a boolean prop to this component', 'make this text a component property', 'add an instance-swap slot', 'create a variant property', 'rename/delete a component property', 'place an instance of this component', 'instantiate this component and set its label/state', 'set properties on this instance'. Properties mus
npx skills add southleft/figma-console-mcp-skills --skill figma-component-properties --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# figma-component-properties — define a component's API + instantiate it Two related jobs: 1. **Author the component's property API** — add/edit/delete `TEXT`, `BOOLEAN`, `INSTANCE_SWAP`, and `VARIANT` properties so the component exposes the right knobs (the Figma equivalent of a React component's props). 2. **Use the component** — create an instance and set its properties (label text, boolean toggles, variant selection, swapped sub-instances). ## Skill boundaries - **`use_figma` rules** — load the official **`figma-use`** skill first; it is the full Figma Plugin API reference. Essentials these scripts rely on: plain JS with top-level `await` + `return` (no IIFE, no `figma.closePlugin()`; `console.log` is not returned), inputs inlined as `const` at the top of each script, colors in 0–1 range, load fonts before any text op, `await figma.getNodeByIdAsync(...)`, and **atomic errors** (a failed script applies nothing — read the error, fix, retry). - **Reading a component's existing property definitions / state machine** → use `figma-analyze-component-set` or `figma-deep-component`. - These are **design-system authoring writes** the native MCP's `get_design_context` / `get_metadata` (re
- Skill boundaries
- Property types
- Workflow — authoring properties
- Workflow — instantiate + set instance properties
- Notes
What does the figma-component-properties skill do?
Add, edit, and delete Figma component properties (TEXT, BOOLEAN, INSTANCE_SWAP, VARIANT) on a COMPONENT or COMPONENT_SET, and instantiate a component then set its instance properties. Use when authoring or wiring up a component's API in Figma — triggers: 'add a component property', 'add a boolean prop to this component', 'make this text a component property', 'add an instance-swap slot', 'create a variant property', 'rename/delete a component property', 'place an instance of this component', 'instantiate this component and set its label/state', 'set properties on this instance'. Properties mus
How do I install it?
Run `npx skills add southleft/figma-console-mcp-skills --skill figma-component-properties --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From southleft/figma-console-mcp-skills, a repository with 67 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.