southleft/skills-for-figma

create-figjam-content

Author FigJam boards with granular control — sticky notes (single + batch), connectors between nodes, shapes-with-text, sections, tables, code blocks, and auto-arrange — plus read back board contents and the connection graph.

Voir la source

Mode d’emploi

  1. Copiez la commande et examinez le paquet avant de l’installer dans votre environnement agent.
  2. Consultez le document original pour les outils, identifiants et environnements requis.
  3. Décrivez les entrées et le livrable souhaité ; comparez la sortie aux sources.
npx skills add https://github.com/southleft/skills-for-figma --skill create-figjam-content

Avant de commencer

  • L’installation n’inclut ni abonnement au modèle, ni quota API, ni accès aux fichiers.
  • Étoiles et installations reflètent l’activité, pas un test indépendant de qualité ou de sécurité.
Document Skill original

Rendu depuis le dépôt source en conservant titres, exemples, code, tableaux, liens et images.

create-figjam-content — author & read FigJam boards

Build FigJam boards one element at a time and read them back. Covers stickies (single + batch), connectors, shapes-with-text, sections, tables, code blocks, auto-arrange, plus get board contents and get connections. This gives you fine-grained control when the native one-shot generate_diagram is too coarse (e.g. you want specific colors, positions, magnets, or to extend an existing board).

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).
  • One complete snippet per operation → references/figjam-snippets.md.
  • Whole-diagram generation in one call → use the native generate_diagram tool instead.

Workflow

  1. Confirm it's a FigJam file. Every op throws outside FigJam. Check first:

return { editorType: figma.editorType }; — it must be 'figjam'.

  1. Pick the operation from references/figjam-snippets.md: create

sticky / stickies / connector / shape-with-text / section / table / code block, auto-arrange, or read board contents / connections.

  1. Run the snippet via use_figma (skillNames: "create-figjam-content"), editing the inlined

constants (text, position, color, node IDs).

  1. Connectors need real node IDs. Create the nodes first, capture their returned IDs, then create

connectors referencing those IDs (start/end + magnets).

  1. Return created IDs and, after a batch, read the board back (get board contents) to confirm.

Notes

  • Fonts must be loaded before text. Stickies, shapes-with-text, table cells, and connector labels

all write text — each snippet await figma.loadFontAsync(...) before setting .characters, with an Inter fallback where the default font may be unavailable.

  • Sticky colors use a named palette (YELLOW, BLUE, GREEN, PINK, ORANGE, PURPLE, RED,

LIGHT_GRAY, GRAY); other colors fall back to the default sticky fill.

  • Shape shapeType values: SQUARE, ROUNDED_RECTANGLE, ELLIPSE, DIAMOND, TRIANGLE_UP,

TRIANGLE_DOWN, PARALLELOGRAM_RIGHT, PARALLELOGRAM_LEFT, etc.

  • Connector magnets: AUTO, TOP, BOTTOM, LEFT, RIGHT.
  • These tools require the Figma Desktop app (the Plugin API isn't available in the browser).

Tâches connexes

du même dépôt

Autres Skills

Tous les Skills
southleft
Communauté

analyze-component-set-figma

Analyze a Figma COMPONENTSET as a state machine for code generation — extract variant axes (state/size/etc.), map state variants to CSS pseudo-classes (hover→:hover, focus→:focus-visible, disabled→:disabled, error→[aria-invalid]), and compute per-variant visual diffs (only what changes per state). Use when generating an interactive component from a Figma variant set — triggers: 'analyze this component set', 'turn these variants into CSS states', 'generate a button/input/checkbox from Figma varia

installations
1
GitHub Stars
14
Mis à jour
1 juin
southleft
Communauté

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', '

installations
1
GitHub Stars
14
Mis à jour
1 juin
southleft
Communauté

audit-accessibility-figma

Deep accessibility scorecard for a single Figma component or component set — state coverage (default/hover/focus/disabled/error/active/loading), focus-indicator quality and contrast, non-color state differentiation, target size, annotation completeness, and color-blind simulation (protanopia/deuteranopia/tritanopia), all rolled into per-category 0–100 scores and prioritized recommendations. Use when the user wants to vet ONE component before shipping it: triggers 'audit this component', 'accessi

installations
1
GitHub Stars
14
Mis à jour
1 juin
southleft
Communauté

check-design-parity-figma

Compare a Figma node's actual specs against a code spec (the values your component renders) and get a 0–100 parity score, a list of discrepancies, and fix suggestions. Use to detect design-to-code DRIFT: triggers 'check design parity', 'does my code match the Figma', 'compare this component to the design', 'is my implementation faithful', 'find differences between design and code', 'verify the build matches Figma', 'design QA against code', 'parity score'. Reads the node's visual / typography /

installations
1
GitHub Stars
14
Mis à jour
1 juin