현지화된 읽기 가이드
figma-code-connect-components목적, 사용법 및 출처
Figma 디자인 구성요소와 Code Connect 매핑 도구를 사용하여 코드 구성요소를 연결합니다. 사용자가 "코드 연결", "이 구성요소를 코드에 연결", "이 구성요소를 매핑", " 구성요소를 코드에 연결", "코드 연결 매핑 생성"과 같은 명령어를 사용하거나 Figma 디자인과 코드 구현 간의 매핑을 설정하려는 경우에 사용합니다. 캔버스 작성 시에는 다음을 통해 사용합니다.use_figma, 사용figma-use.
출처 검색됨:
- 소스 저장소
- openai/skills
- SKILL.md
skills/.curated/figma-code-connect-components/SKILL.md- 저장소 Star
- 28,420
- 저장소 최근 업데이트
- 2026-10-29
- 능력 분류
- 설계
- 최근 수집 시간
라이선스: 명시되지 않음
워크플로 발췌본은 이해를 돕기 위한 자료이며, Codez에서 제공하는 실행 가능한 명령어가 아닙니다. 이 페이지를 생성하는 데 타사 Skill은 사용되지 않았습니다.
아래의 목적 및 워크플로 관련 내용은 읽기 쉽도록 정리 및 번역된 상위 자료입니다. 이는 별도로 분류된 Codez 편집 분석과는 별개입니다.
이 스킬의 기능
Figma 디자인 구성요소와 Code Connect 매핑 도구를 사용하여 코드 구성요소를 연결합니다. 사용자가 "코드 연결", "이 구성요소를 코드에 연결", "이 구성요소를 매핑", " 구성요소를 코드에 연결", "코드 연결 매핑 생성"과 같은 명령어를 사용하거나 Figma 디자인과 코드 구현 간의 매핑을 설정하려는 경우에 사용합니다. 캔버스 작성 시에는 다음을 통해 사용합니다.use_figma, 사용figma-use.
업스트림 워크플로우 작동 방식
개요
이 스킬은 Figma의 코드 연결 기능을 사용하여 Figma 디자인 구성 요소를 해당 코드 구현에 연결하는 데 도움이 됩니다. Figma 디자인 구조를 분석하고, 코드베이스에서 일치하는 구성 요소를 검색하고, 디자인과 코드의 일관성을 유지하는 매핑을 설정합니다.
상류 통로 · L8 ↗단계1CodeConnect 추천 받기
부르다get_code_connect_suggestions매핑되지 않은 모든 구성 요소를 한 번에 식별합니다. 이 도구는 자동으로 다음 작업을 수행합니다. Figma 장면 그래프에서 구성 요소 정보를 가져옵니다. 선택 항목에서 게시된 구성 요소를 식별합니다. 기존 Code Connect 매핑을 확인하고 이미 연결된 구성 요소를 필터링합니다.
get_code_connect_suggestions(fileKey=":fileKey", nodeId="1:2")요구 사항 및 설정
필수 조건
Figma MCP 서버에 연결되어 있고 접근 가능해야 합니다. 사용자는 노드 ID가 포함된 Figma URL을 제공해야 합니다.https://figma.com/design/:fileKey/:fileName?node-id=1-2
제한 사항 및 품질 검사
이 파일에서 별도의 제한 조건 구문이 선택되지 않았습니다. 이는 해당 스킬이 모든 입력 또는 환경에서 안전하다는 것을 의미하지 않습니다. 전체 소스 코드를 검토하고 결과를 직접 확인하십시오.
안전한 시험 사용부터 시작하세요
- 지원되는 호스트와 저장소 설치 지침을 확인하세요. 스킬 디렉토리와 해당 디렉토리에서 참조하는 스크립트, 자산 및 문서를 함께 보관하세요.SKILL.md단독으로는 종속성을 생략할 수 있습니다.
- 에이전트에 실제 입력값, 원하는 출력값 및 승인 기준을 제공하십시오. 호출 구문 및 사용 가능한 도구는 호스트에 따라 다르므로 이 사이트는 범용 설치 명령을 제공하지 않습니다.
- 원본 워크플로를 임시 프로젝트 또는 복사본에서 테스트해 보세요. 파일, 원격 서비스 또는 유료 리소스를 변경하는 작업은 허용하기 전에 검토하십시오.
- 출력 결과를 원본 품질 검사 및 자체 요구 사항에 맞춰 검증하십시오. 트리거가 성공적으로 작동했거나 저장소의 별점 수가 높다고 해서 반드시 올바른 결과가 나오는 것은 아닙니다.
원문에서 더 자세한 내용을 읽어보세요.
- 개요
- 기술 한계
- 필수 조건
- 필수 워크플로
- 단계1CodeConnect 추천 받기
- 옵션 A: 사용
figma-desktopMCP (URL 미제공) - 옵션 B: Figma URL이 제공된 경우
- 단계2코드베이스에서 일치하는 구성 요소를 검색합니다.
- 단계3: 사용자에게 경기 결과를 표시합니다
- 단계4코드 연결 매핑 생성
- 예1버튼 구성 요소 연결하기
- 예2: 부분 선택이 가능한 다중 구성 요소
- 예3: 구성 요소 생성 필요
- 사전 예방적 구성 요소 검색
- 정확한 구조 매칭
- 명확한 의사소통
- 모호성을 처리하세요
- 우아한 타락
- 문제: "이 선택 항목에서 게시된 구성 요소를 찾을 수 없습니다."
- 문제: "Code Connect는 조직 및 엔터프라이즈 요금제에서만 사용할 수 있습니다."
- 문제: 코드베이스에서 일치하는 구성 요소를 찾을 수 없습니다.
- 문제: "게시된 구성 요소를 찾을 수 없습니다"(CODE_CONNECT_ASSET_NOT_FOUND)
- 오류: "컴포넌트가 이미 코드에 매핑되었습니다." (CODE_CONNECT_MAPPING_ALREADY_EXISTS)
- 문제: "매핑을 생성할 권한이 부족합니다" (CODE_CONNECT_INSUFFICIENT_PERMISSIONS)
- 문제: URL 오류로 인해 Code Connect 매핑이 실패합니다.
- 문제: 유사한 구성 요소가 여러 개 발견되었습니다.
- Code Connect 이해하기
- 추가 자료
관련 기술
번역 및 범위
이 독서 안내서는 고정된 상류 지역에서 발췌한 구절들을 소개합니다.SKILL.md본 번역은 보조 번역이며, 완전한 설명서 또는 호환성 테스트를 보장하는 것은 아닙니다. 사용 전에 원본 및 참조 파일을 반드시 읽어 주십시오.
이 소개글은 아래 고정된 버전을 참조하며, 현재 저장소 활동 및 수집 시간은 별도로 표시됩니다.
- 고정된 소스
- 원문을 읽어보세요 ↗
- 출처 검색됨
- 소스 커밋
49f948faa9258a0c61caceaf225e179651397431- 출처 SHA-256
0f19edad8aed28063a3517c419fbcbef5421d024f189fd02a17fae25093ec69d