SS

southleft/skills-for-figma

Developer tools

이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기

20 stars 1 forks 품질 63 트렌드 14MIT

네이티브 Figma MCP 서버에 대한 오픈 소스 에이전트 기술 - 디자인 토큰, 구성 요소, 접근성, 슬라이드 및 FigJam.

개요

오픈 소스 에이전트 기술의 컬렉션 . 각 기술은 Figma에 초점을 맞춘 디자인 시스템 작업을 수행하기 위해 에이전트 (Claude, Codex, Gemini, Copilot)을 가르치고 설계 토큰을 수출하고 수입, 분석 구성 요소 세트, WCAG 및 디자인 시스템 준수, 감사 접근성, 건물 슬라이드 및 FigJam 콘텐츠 등을 제공합니다. 모든 기술은 Figma MCP의 use figma 도구 (Plugin API 실행)를 통해 실행되며 계획 된 API가 필요하지 않습니다. - 토큰은 플러그인 API를 사용하므로 Figma 플랜에서 작동합니다. 이 기술은 Figma-MCP 중심의 하위 세트이며, 커뮤니티 친화적 인 이름과 함께 여기에 재 포장됩니다. 전체 컬렉션 (REST-API 기반 버전의 역사, 변화, 비난, 의견 기술 포함)은 저장소에 살고. - 연결된 에이전트 호스트 (예 : Claude Code, Claude Desktop, Codex, Gemini). - use figma 플러그인 API 컨벤션을 가르치는 공식 기술. 모든 기술이 먼저로드합니다.

개요(AI 번역)

**native Figma MCP 서버 **를 위한 오픈 소스 에이전트 기술 컬렉션. 각 기술은 에이전트 (Claude, Codex, Gemini, Copilot)를 가르치고 집중된 설계 시스템 작업을 수행합니다. Figma - 설계 토큰을 수출 및 수입, 분석 부품 세트, WCAG 및 디자인 시스템을 위한 리딩 준수, 접근성 감사, 건물 슬라이드 및 FigJam 콘텐츠, 그리고 더.

모든 기술은 Figma MCP의 use_figma] 도구 (Plugin API 실행)를 통해 실행되며 계획이 없습니다. APIs - 토큰은 플러그인 API를 사용하여 Figma 플랜에서 작동합니다.

이 기술은 ** 왼쪽/figma-console-mcp-skills**의 Figma-MCP 중심의 서브셋입니다. 커뮤니티 친화적 인 이름과 함께 재 포장. 전체 수집 (REST-API 기반 버전 역사를 포함, Changelog, 비난, 그리고 의견 기술) 그 저장소에 살고.

요구 사항

  • **Figma MCP 서버 ** 연결 된 에이전트 호스트 (예 : Claude Code, Claude Desktop, Codex, Gemini).
  • 공식 figma-use 기술, 이는 use_figma] 플러그인 API 협약을 가르칩니다. 모든 기술 여기에 그것을 첫째로 적재하십시오.

설치

npx — 어떤 대리인 (Claude 부호, Codex, Cursor, Gemini CLI, …)

이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요.

README

원문 README의 일부입니다. 원문 보기.

Skills for Figma

A collection of open-source agent skills for the native Figma MCP server. Each skill teaches an agent (Claude, Codex, Gemini, Copilot) to perform a focused design-systems task in Figma — exporting and importing design tokens, analyzing component sets, linting for WCAG and design-system compliance, auditing accessibility, building Slides and FigJam content, and more.

Every skill runs through the Figma MCP’s use_figma tool (Plugin API execution) and requires no plan-gated APIs — token reads use the Plugin API, so they work on any Figma plan.

These skills are a Figma-MCP-focused subset of southleft/figma-console-mcp-skills, repackaged here with community-friendly names. The full collection (including REST-API-based version history, changelog, blame, and comments skills) lives in that repository.

Requirements

  • An agent host with the Figma MCP server connected (e.g. Claude Code, Claude Desktop, Codex, Gemini).
  • The official figma-use skill, which teaches the use_figma Plugin API conventions. Every skill here loads it first.

Install

npx — any agent (Claude Code, Codex, Cursor, Gemini CLI, …)

npx skills add southleft/skills-for-figma          # install all skills
npx skills add southleft/skills-for-figma --list   # preview without installing
npx skills add southleft/skills-for-figma --skill export-tokens-figma   # just one

Powered by the skills CLI — it detects your agent and drops each skill into the right directory.

Claude Code plugin (one command)

/plugin marketplace add southleft/skills-for-figma
/plugin install skills-for-figma@skills-for-figma

Manual (any host)

git clone https://github.com/southleft/skills-for-figma.git
cd skills-for-figma
cp -R skills/* ~/.claude/skills/

For other hosts, drop the folders from skills/ into that tool’s skills directory (e.g. .codex/skills/, .gemini/skills/). Once installed, an agent auto-selects a skill from your request, or you can invoke one explicitly with /skill-name.

Skills

Tokens & variables

  • export-tokens-figma — Export Figma variables to DTCG, CSS custom properties, Tailwind, SCSS, TypeScript, JSON, Style Dictionary, or Tokens Studio, with multi-mode and alias resolution.
  • import-tokens-figma — Create and update Figma variables from DTCG token files, with multi-mode values, alias resolution, and non-destructive in-place matching.
  • setup-design-tokens-figma — Bootstrap a complete token system (a collection, its modes, and all variables with per-mode values) in one atomic operation.
  • manage-variables-figma — Create, update, rename, and delete variables, collections, and modes, including batch create/update.
GitHub에서 전체 README 보기

설치

npx skills add southleft/skills-for-figma # install all skills
MCP 초보자라면? mcpskill.org 가이드부터 시작하세요 →