figma-skill_skill

Overview

This skill reads Figma files, exports design assets, lists components and styles, and helps manage comments. It connects to the Figma API using a personal access token and produces machine-readable JSON for integration. The tool is CLI-driven and designed to fit into automation scripts, CI pipelines, or developer workflows. It supports image exports in png, jpg, svg, and pdf formats.

How this skill works

The skill authenticates with Figma using a personal access token stored in a local config file. It calls Figma endpoints to fetch file metadata, node structures, components, styles, and comments, then prints structured JSON. Export commands request rendered images for node IDs and return download URLs or image data depending on the command. Comment commands list and create comments tied to file or node IDs.

When to use it

• When you need to extract images or assets from a Figma file programmatically.
• When you want an inventory of components, styles, or design tokens in a file or team.
• When automating design handoff or generating assets for builds and documentation.
• When reviewing or creating comments on a file as part of a feedback workflow.
• When integrating Figma data into scripts, CI pipelines, or content generators.

Best practices

• Create a dedicated Figma personal access token and store it in ~/.claude/skills/figma-skill/config.json with restrictive file permissions.
• Use file keys directly from Figma URLs (figma.com/file/FILE_KEY/...) to target files unambiguously.
• Query node lists (get FILE_KEY) first to discover node IDs before exporting or commenting on nodes.
• Batch requests by IDs when possible to reduce API calls and stay within rate limits.
• Always validate the returned JSON and handle missing nodes or permission errors gracefully.

Example use cases

• Export retina assets for production builds: export image nodes as PNG at scale 2 for mobile assets.
• Generate a component inventory: list components and styles to create a design-system audit or documentation page.
• Automate QA screenshots: pull page snapshots or frame exports to compare visual diffs in CI.
• Add reviewer comments: post comments to specific node IDs during design review or handoff.
• Pull version history: fetch file versions to track changes or trigger rollback workflows.