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