Code Connect
Code Connect는 구성요소 코드베이스에서 Figma로의 개발자 연결 도구입니다. Code Connect를 사용하면 디자인 시스템 구성요소 코드를 Figma의 개발 모드로 직접 가져올 수 있습니다. 프로덕션 코드의 프레임워크를 반영하는 예제 구성요소를 미리 볼 수 있습니다.
Code Connect를 사용할 때 개발 모드에서는 개발 모드가 기본적으로 제공하는 자동 생성 코드 스니펫 대신 디자인 시스템에서 정의한 실제 코드 스니펫을 표시합니다. Code Connect는 구성요소 정의를 연결하는 것 외에도 코드에서 Figma로 속성을 매핑하여 동적이고 올바른 스니펫을 가능하도록 할 수 있습니다.
Code Connect는 기존 설계 시스템이 있고 디자인 및 엔지니어링 전반에 걸쳐 해당 디자인 시스템을 일관되고 올바르게 채택하고자 할 때 특히 유용합니다.
개요
Code Connect를 설정하는 정확한 단계는 디자인 시스템 및 코드베이스의 아키텍처에 따라 달라집니다. 예를 들어 SwiftUI를 사용하는 경우 Figma에서 제공하는 SwiftUI 리소스를 사용하도록 접근 방식을 계획해야 합니다.
일반적으로 조직은 다음 단계에 따라 시작합니다.
-
구현 계획을 세웁니다. 일반적으로 다음을 포함합니다.
- 프런트엔드 개발자의 요구 사항(예: React 또는 SwiftUI에 대한 지원 필요 여부)을 파악합니다.
- 코드베이스에서 개발 모드와 통합하려는 구성요소를 식별합니다.
- Code Connect의 구성과 구성요소 매핑을 계획합니다.
-
Code Connect 리포지토리를 가져옵니다. Code Connect는 다음을 지원합니다.
- React
- SwiftUI
- Jetpack Compose
- Custom implementations
- 구성요소 매핑을 구현합니다. 매핑을 구축하는 정확한 방법은 코드베이스와 디자인 시스템에 따라 다르지만 대체로 프로세스에는 디자인 시스템 구성요소의 속성을 FIgma의 속성으로 매핑하는 것이 포함됩니다. 이를 통해 Code Connect는 구성요소의 아키텍처로 Figma의 값을 매핑하는 코드 스니펫을 생성한 다음 개발 모드 내에서 해당 스니펫을 표시할 수 있습니다.
- 개발 모드에서 검토합니다. 개발 모드에서 개발자, 디자이너와 함께 Code Connect 출력을 검토하여 구성요소 예제의 실제 사용성과 표현이 정확한지 확인합니다.
Code Connect를 최대한 활용하려면 디자인 시스템 구성요소를 담당하는 개발자가 디자이너와 협력하여 프로덕션 코드베이스에서 Figma로 매핑을 구현해야 합니다.
무엇이 제공되나요?
Code Connect를 시작하려면 GitHub의 Code Connect 리포지토리에 제공된 자세한 README를 확인하세요.
Code Connect는 다음을 지원합니다.
개인정보 보호 및 Code Connect
Figma는 인터페이스에서 Code Connect를 활성화하는 데 필요한 최소한의 데이터만 수집합니다. Code Connect 명령줄 인터페이스를 사용하여 figma connect를 실행하면 Figma는 다음 데이터를 가져옵니다.
- 추가된 구성 요소의 경로
- Code Connect 구성 요소가 구현된 리포지토리 URL
- .figma 파일의 속성 및 코드
Figma는 Code Connect 사용을 이해하기 위한 기본 이벤트만 기록합니다. 구성 요소가 게시되거나 게시 취소되는 경우와 명령줄 인터페이스를 사용할 때 Figma 데이터를 가져오도록 호출하는 경우가 해당됩니다.
Figma의 개인정보 보호 접근 방식에 대한 자세한 내용은 Figma의 개인정보 보호 정책을 참조하세요.