figma-component-properties

Installation
SKILL.md

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 (read-only) do not cover.

Property types

Installs
41
GitHub Stars
51
First Seen
Jun 1, 2026
figma-component-properties — southleft/figma-console-mcp-skills