agentsclimarketplace
Sign in

Component properties figma

Skill southleft/skills-for-figma/skills/component-properties-figma

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 must be added to the parent COMPONENT_SET, not individual variants. NOT covered by the native MCP's read-only get_design_context/get_metadata.From its SKILL.md

Install
npx -y skills add southleft/skills-for-figma --skill component-properties-figma

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 12 stars12 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

4.6 KB, 953 tokens by cl100k_base, as published. Nobody here has run it

component-properties-figma — 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 analyze-component-set-figma or deep-component-figma.
  • These are design-system authoring writes the native MCP's get_design_context / get_metadata (read-only) do not cover.

Property types

TypeWhat it controlsdefaultValueNotes
TEXTA text-layer string override"Label"Bind in UI to a text node's characters
BOOLEANShow/hide a layertrue/falseBind to a layer's visibility
INSTANCE_SWAPWhich sub-component fills a slota component keyPass preferredValues to populate the picker
VARIANTA variant axis (Size, State…)one option stringOnly meaningful on a COMPONENT_SET

Workflow — authoring properties

  1. Target the COMPONENT_SET (or standalone COMPONENT). You cannot add properties to an individual variant — the script errors and tells you to use the parent set.
  2. Add with scripts/add-property.js (use_figma, skillNames: "component-properties-figma"). Set NODE_ID, PROPERTY_NAME, PROPERTY_TYPE, DEFAULT_VALUE. addComponentProperty returns a name with a #id suffix — capture it.
  3. Edit / delete by reusing the same script's editComponentProperty(name, {...}) / deleteComponentProperty(name) calls (commented variants are in the script). Use the suffixed name returned at creation for edits/deletes of non-variant props.
  4. Verify by re-reading node.componentPropertyDefinitions (the script returns it).

Workflow — instantiate + set instance properties

  1. Get a component identity. A published library componentKey (preferred) and/or a local nodeId. Pass both when you have them — the script tries the library import first, then the local node.
  2. Run scripts/instantiate-and-set.js. Set COMPONENT_KEY / COMPONENT_ID, optional VARIANT (e.g. { Size: "md", State: "default" }), OVERRIDES, POSITION, and PARENT_ID.
  3. Set properties on an existing instance with the same script's setProperties path — it loads the main component, then matches plain names and Name#id-suffixed names automatically.

Notes

  • Instance property keys carry #nodeId suffixes for TEXT/BOOLEAN/INSTANCE_SWAP ("Label#12:3"); VARIANT props use the bare name. The instantiate script resolves both, so you can pass the human name (Label) and it finds the suffixed key.
  • Direct text editing of an instance's text layer fails silently — always go through setProperties / instance properties, never set .characters on a nested instance text node.
  • componentKey only works for published components. For local/unpublished ones use nodeId.

What ships with it: 2 files

7.8 KB alongside SKILL.md, 2 of them executable

scripts/

Gives 0 of the 12 instructions most images graphics skills give in 953 tokens

Counted across 341 of the 354 authors here whose files we hold, read 2026-09-06

  • Generate images via gemini_generate_imagein 14 of 341, across 10 files
  • Set the aspect ratio via set_aspect_ratioin 14 of 341, across 10 files
  • Verify MCP image tools are available before generatingin 13 of 341, across 9 files
  • Show estimated cost before generatingin 13 of 341, across 9 files
  • Run the post-generation SEO checklistin 13 of 341, across 9 files
  • Structure prompts as subject, setting, style, lighting, compositionin 10 of 341, across 5 files
  • Infer the brand strategy before generatingin 9 of 341, across 5 files
  • Use at most two logo concept methodsin 9 of 341, across 5 files
  • Use one dominant palette with repeating accentsin 9 of 341, across 5 files
  • Extract fileKey and nodeId from the Figma URLin 9 of 341
  • Read product marketing context before asking questionsin 8 of 341, across 3 files
  • Keep the logo simple, symbolic, and ownablein 8 of 341, across 4 files

Said here and by no other author read

  • Inline script inputs as constants at the top
  • On script failure, fix and retry
  • Add properties to the parent COMPONENT_SET
  • Capture the suffixed name returned by addComponentProperty
  • Use the suffixed name for edits and deletes
  • Verify by re-reading componentPropertyDefinitions

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.