작업 방식
Figma Code Connect Components는 화면 생성기가 아니라 매핑 워크플로입니다. Figma 선택 영역에서 매핑되지 않은 게시된 컴포넌트를 찾고, 로컬 코드베이스를 검색하며, 컴포넌트 구조와 속성을 비교합니다. 이름이 같다는 것은 출발점일 뿐이며, 베리언트 옵션, 기본값, 용도도 일치해야 합니다.
소스에 따르면 매핑을 생성하기 전에 제안된 매칭을 반드시 사용자에게 보여 주어야 합니다. 일부만 승인하는 것도 가능하며, 모호하거나 누락된 컴포넌트는 추측하지 않고 보고합니다. 결과물은 찾아볼 수 있는 디자인-코드 연결이며, 양쪽을 자동으로 수정하지 않고 렌더링된 모습이 동일하다는 것을 증명하지도 않습니다.
예상 결과물
- Figma 노드와 코드 컴포넌트의 매칭 제안 목록
- 소스 경로와 프레임워크 라벨이 포함된, 승인된 Code Connect 매핑
- 연결됨, 건너뜀, 실패한 매핑을 구분한 요약
브리프에서 검토까지
- 01게시된 컴포넌트 식별
노드별 Figma 링크 또는 지원되는 데스크톱 선택을 사용해 아직 매핑되지 않은 컴포넌트를 찾습니다.
- 02구현 비교
저장소를 검색하고 실제 export, 속성, 기본값을 확인합니다. 둘 이상의 컴포넌트가 맞을 수 있으면 대안을 함께 제시합니다.
- 03승인된 항목 연결
사용자가 승인한 매핑만 제출한 뒤, 성공한 항목과 실패한 항목을 따로 보고합니다.