About figma-skill
figma-skill is a design skill that finds relevant Figma Community files, extracts design tokens, and generates implementation code for a selected framework. It is intended for project-context-based discovery and code generation, rather than reading or editing a user's official Figma files.
Key features
- 01Finds relevant Figma Community files
- 02Extracts design tokens
- 03Generates framework-specific code
- 04Supports 7 frameworks
Use cases
- 01Finding Community resources for a project
- 02Extracting tokens from reference files
- 03Turning design resources into implementation code
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/figma-skillin Claude Code to confirm it loaded.
Bundled filesstub.yaml
Details
From the project READMEfigma-skill
Catalogue stub — full package: nafiurrahmanniloy/figma-skill
Decision tree
-
Is the skill already installed? Check
~/.design-agent-skills/skills/forfigma-skillor related directories.- Yes → invoke and proceed
- No → go to step 2
-
Shell access? Yes → install below. No → show user the command (Claude Code: send with
!as a chat message — add-gfor global or omit for project-only).
Install command
npx skills add nafiurrahmanniloy/figma-skill
Invoke after install
- Skill name:
figma-skill - Triggers: "figma-skill", "Figma API extract", "Figma to framework", "Figma Community resources"
What it does
Connects to the Figma API to discover Community file resources that match your project context, extracts design tokens from those files, and generates framework-specific implementation code. Supports 7 frameworks — covering major React, Vue, Angular, and native ecosystems.
When NOT to use
- Official Figma file operations (reading/writing your files) — use the Figma MCP (
figma-official-skills) - Design system token enforcement in Figma — use
claude2figma - Token architecture without Figma — use
design-tokens-skill