agentsclimarketplace
Sign in

Annotations figma

Skill southleft/skills-for-figma/skills/annotations-figma

Read and write designer annotations on Figma nodes — node-level design specs that pin properties (fills, width, fontSize, etc.) and carry plain or markdown notes. Use when the user wants to document or inspect interaction specs, animation timings, easing, accessibility requirements, or implementation notes attached directly to a node. Triggers: 'add an annotation', 'annotate this node/component', 'read the annotations on…', 'what specs are pinned to this element', 'list annotation categories', 'document the focus behavior on this button in Figma'. Annotations are distinct from comments (they pin to design properties) and from the description field. Requires the Figma Desktop app (Plugin API).From its SKILL.md

Install
npx -y skills add southleft/skills-for-figma --skill annotations-figma

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

2 things 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.
  • runs commandsInstructs the agent to run 2 commands, including `scripts/get-annotations.js` and 1 more.

SKILL.md

3.7 KB, 705 tokens by cl100k_base, as published. Nobody here has run it

annotations-figma — read & write node annotations

Annotations are designer-authored specs attached to a node. Each can carry a note (plain label or rich labelMarkdown), a set of pinned properties (fills, width, fontSize, …) that link the note to specific design attributes, and an optional category (interactions, accessibility, dev notes, …). They live on the node, survive edits, and are undoable (Cmd+Z). They are the right place for animation timings, easing curves, interaction behavior, and a11y requirements that don't belong in the component description.

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).
  • Valid property types + shapes → references/annotation-properties.md.
  • Comments (file-level discussion threads, not node specs) are out of scope — use Figma's comments REST API instead.

Workflow

  1. Get the node ID. Use the current selection or a node ID the user gives you. Annotations only apply to nodes whose type supports them (frames, components, instances, shapes, text — not pages).
  2. List categories first when writing categorized annotations. Run the categories snippet so you can pass a real categoryId (category names are per-file and not guessable). See the script.
  3. Read with scripts/get-annotations.js — set INCLUDE_CHILDREN to walk a component tree for full-component documentation.
  4. Write with scripts/set-annotations.js. Choose MODE: 'replace' (default — overwrites all annotations on the node) or 'append' (keeps existing). Pass ANNOTATIONS = [] with 'replace' to clear all annotations.
  5. Validate. Re-run the read script and confirm the annotation count and labels match what you set.

Notes

  • Note any text op needs a font load. Annotations themselves don't render text you author, but if a workflow also writes text nodes, await figma.loadFontAsync(...) first (see conventions).
  • Figma auto-populates BOTH label and labelMarkdown on read, but rejects writing both — when appending, prefer labelMarkdown if present, else label. The append script already does this.
  • properties only pins which attributes the note is about; it does not set their values. Use the exact strings from references/annotation-properties.md.
  • These tools require the Figma Desktop app (the Plugin API isn't available in the browser).

What ships with it: 3 files

6.6 KB alongside SKILL.md, 2 of them executable

references/

scripts/

Gives 0 of the 12 instructions most docs writing skills give in 705 tokens

Counted across 1,951 of the 3,904 authors here whose files we hold, read 2026-09-06

  • Use third-person for skill descriptionsin 54 of 1951, across 35 files
  • Start descriptions with Use whenin 43 of 1951, across 29 files
  • Run baseline scenarios before writing any skillin 40 of 1951, across 26 files
  • Use active voicein 40 of 1951, across 36 files
  • Map file responsibilities before defining tasksin 36 of 1951, across 29 files
  • Use checkbox syntax for tracking stepsin 35 of 1951, across 27 files
  • Ask one question at a timein 35 of 1951
  • Offer execution options after saving the planin 33 of 1951, across 24 files
  • Include complete code in every stepin 33 of 1951, across 27 files
  • Design units with clear boundaries and interfacesin 31 of 1951, across 23 files
  • Announce the skill usage at the startin 30 of 1951
  • Verify agent compliance after adding the skillin 29 of 1951, across 17 files

Said here and by no other author read

  • load the figma-use skill first
  • Get node ID from selection or user
  • List categories before writing categorized annotations
  • Use get-annotations.js to read annotations
  • Use set-annotations.js to write annotations
  • Load fonts before any text operations

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.