작업 방식
Figma Implement Design은 선택한 Figma 노드에서 출발해 사용자의 저장소에 들어갈 코드로 작업합니다. 구조화된 디자인 컨텍스트와 스크린샷을 함께 활용하고, 레이아웃, 토큰, 에셋을 프로젝트의 프레임워크에 맞게 조정합니다. 디자인 도구가 생성한 React와 유틸리티 클래스는 하나의 표현일 뿐이며, 애플리케이션의 아키텍처를 대체하라는 지시로 취급하지 않습니다.
소스는 재사용을 강조합니다. 가능한 한 기존 버튼, 입력, 타이포그래피, 레이아웃 기본 요소를 확장해야 합니다. 복잡한 프레임은 응답이 잘릴 때 더 작은 노드 단위로 나누어 조회합니다. 완료 여부는 단순히 컴파일되는 코드를 만드는 것이 아니라, 실제 구현을 참조 디자인과 비교하고 반응형 동작, 상호작용, 에셋을 확인하는 데 달려 있습니다.
예상 산출물
- 선택한 Figma 디자인과 일치하는 애플리케이션 컴포넌트 또는 페이지
- 프로젝트 고유의 토큰 및 컴포넌트 매핑
- 불가피한 차이를 문서화한 시각적 비교
브리프에서 검토까지
- 01정확한 디자인 확보
노드별 링크 또는 지원되는 데스크톱 선택 항목을 확인한 뒤, 구조화된 컨텍스트와 스크린샷을 모두 가져옵니다.
- 02저장소에 맞게 조정
기존 컴포넌트와 토큰을 재사용하고, 제공된 에셋을 가져오며, 라우팅, 상태, 데이터 패칭 관례를 유지합니다.
- 03실행 중인 UI 비교
레이아웃, 타이포그래피, 인터랙션 상태, 반응형 제약, 에셋 렌더링을 선택한 디자인과 비교해 확인합니다.