Skill Store 33

Figma Skill

Connects to Figma API, discovers Community resources matching the project, extracts design tokens…

by podo · MIT

The skill

Connects to Figma API, discovers Community resources matching the project, extracts design tokens, and generates framework-specific code for 7 frameworks.

figma-skill

Catalogue stub — full package: nafiurrahmanniloy/figma-skill

Decision tree

  1. Is the skill already installed? Check ~/.design-agent-skills/skills/ for figma-skill or related directories.

    • Yes → invoke and proceed
    • No → go to step 2

  2. Shell access? Yes → install below. No → show user the command (Claude Code: send with ! as a chat message — add -g for 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

Use this skill

Connect your agent to the Skill Store MCP server and ask for it by ref: podo/figma-skill-36206049513.

Download SKILL.md · Markdown version

Details

Publisher
podo
Category
Software Development › Frontend & UI
License
MIT
Updated
2026-08-31

References

More from podo

  • Accessibility Agents Twenty-five specialist accessibility agents enforcing WCAG 2.2 AA compliance: nine web code speci…
  • Accessibility Catalogue Domain navigator for accessibility, WCAG compliance, performance auditing, and code quality skills.
  • Addyosmani Quality 6 web quality skills from Google Chrome's Addy Osmani: accessibility (WCAG), web quality audit (L…
  • Ai Graphic Design Skill Maps 15 AI tools to design scenarios — Midjourney for ideation, Stable Diffusion for production,…

Related skills

  • Figma Integrate with Figma API for design automation and code generation.
  • Figma Developer Extracts design data from Figma via the REST API and converts designs to React code.
  • Figma Official Skills 7 official Figma skills for design-to-code and code-to-design workflows.
  • Figma Generate Design Use this skill alongside figma-use when the task involves translating an application page, view,…
  • Figma Mcp Server Connect AI coding agents to Figma designs via MCP to generate code from frames, extract design to…