code-connect-components

작성자: figma

Figma 디자인 컴포넌트와 코드 구현 간의 양방향 링크를 Code Connect를 사용하여 구축합니다. Figma MCP 서버 연결과 Organization 또는 Enterprise 플랜에서 게시된 컴포넌트가 필요합니다. Figma 선택 항목에서 매핑되지 않은 컴포넌트를 자동으로 식별한 후, 이름, 구조, props를 기준으로 코드베이스에서 일치하는 코드 컴포넌트를 스캔합니다. 매핑을 생성하기 전에 일치하는 컴포넌트를 검토용으로 제시하여 선택적으로 수락하거나 거부할 수 있습니다. 여러 개를 지원합니다...

npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components

ZIP 다운로드 GitHub

figma의 다른 스킬

video-interaction-mapper

이 스킬은 사용자가 UI 화면 녹화를 분석하고 상호작용 상태를 Figma에 매핑해 달라고 요청할 때 사용해야 합니다. "비디오를 넣어줘..."와 같은 요청에 의해 트리거됩니다.

figma-code-connect

Figma 컴포넌트를 코드 스니펫에 매핑하는 Figma Code Connect 템플릿 파일을 생성하고 유지 관리합니다. 사용자가 Code Connect, Figma 컴포넌트를 언급할 때 사용합니다.

create-design-system-rules

프로젝트 전반에 걸쳐 일관된 Figma-to-code 구현을 위한 맞춤형 디자인 시스템 규칙입니다. 컴포넌트 구성, 스타일링, 디자인 토큰, 에셋 처리를 위한 프로젝트별 규칙을 생성하여 AI 에이전트가 일관된 코드를 생성하도록 안내합니다. CLAUDE.md(Claude Code용), AGENTS.md(Codex CLI용), .cursor/rules/figma-design-system.mdc(Cursor용)의 세 가지 규칙 파일 형식을 지원합니다. 규칙 생성을 위해 Figma MCP 서버 연결과 기존 패턴을 발견하기 위한 코드베이스 분석이 필요합니다...

figma-implement-motion

Figma의 모션과 애니메이션을 프로덕션에 바로 적용 가능한 애플리케이션 코드로 변환합니다. Figma 디자인에서 애니메이션/모션을 구현할 때 사용하세요 — 사용자가 언급하는 경우…

SwiftUI ↔ Figma 변환. 사용자가 Swift, SwiftUI, iOS, iPhone 또는 iPad를 언급할 때마다 사용하세요 — 어느 방향이든 — Figma 디자인을 변환하여…

figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

figma-use-slides

이 스킬은 에이전트가 Slides 컨텍스트에서 Figma의 use_figma MCP 도구를 사용할 수 있도록 도와줍니다. Figma 사용에 대한 기본 컨텍스트를 제공하는 figma-use와 함께 사용할 수 있습니다.

figma-use-figjam

이 스킬은 에이전트가 FigJam 컨텍스트에서 Figma의 use_figma MCP 도구를 사용할 수 있도록 도와줍니다. 사용에 대한 기본 컨텍스트를 제공하는 figma-use와 함께 사용할 수 있습니다…