시작하기 전에

이 기능을 사용할 수 있는 사용자

Included in a full Design seat on Professional, Organization, and Enterprise plans.

Anyone with access to Dev Mode can use Dev Mode features.

Code Connect는 오거니제이션 및 엔터프라이즈 요금제에서 사용할 수 있으며, 풀 디자인 시트 또는 Dev Mode 시트가 필요합니다.

캔버스에서 개체를 선택하면 Dev Mode의 검사 패널에 코드 스니펫이 나타납니다. Code(코드) 섹션에서는 관련 컴포넌트 세부 정보를 제공하고 Inspect(검사)에서 설정한 선택 사항 및 언어 기본 설정에 따라 코드를 생성합니다.

텍스트를 선택하면 Code(코드) 섹션에 타이포그래피 미리보기가 표시되고 뒤이어 레이아웃, 타이포그래피, 콘텐츠 정보가 표시됩니다.
다른 모든 선택 항목의 경우, 여백, 테두리, 패딩 세부 정보는 물론, 레이아웃 및 스타일 정보가 포함된 상자 모델이 표시됩니다.

참고: Figma의 Code Connect 도구를 사용하면 디자인 시스템 컴포넌트에 대한 코드 스니펫을 사용자 정의할 수 있습니다. Code Connect를 사용하면 개발자는 Dev Mode에서 컴포넌트를 검사할 때 자동 생성된 코드 대신 라이브러리에서 연결된 디자인 시스템 코드를 볼 수 있습니다.

API 문서에서 Code Connect 구현에 대해 자세히 알아보세요 →

언어 환경 설정

Inspect(검사) 패널의 Code settings(코드 설정)에서 코드 스니펫에 대한 기본 언어와 단위를 설정할 수 있습니다. 언어 및 단위 설정은 캔버스에서 선택한 개체에 대해 생성된 모든 코드 스니펫에 적용됩니다.

캔버스에 있는 모든 개체를 선택 해제합니다.
Language(언어) 드롭다운에서 옵션을 선택합니다.
- CSS (웹)
- SwiftUI 또는 UIKit (iOS)
- Compose 또는 XML (Android).
Unit(단위) 드롭다운에서 단위를 선택합니다. 사용 가능한 단위는 선택한 언어에 따라 다릅니다.

언어 및 단위 기본 설정 변경

개체를 선택하고 나면 Inspect(검사) 패널의 Code(코드) 섹션에서 언어 및 단위 선택을 변경할 수 있습니다.

Code(코드) 섹션의 오른쪽 상단에 있는 드롭다운에서 언어를 선택합니다.
Click Inspect settings and select a unit from the dropdown.

단위 크기 설정

단위 크기 조정을 사용하면 지정된 크기를 기준으로 단위 치수를 설정할 수 있습니다. 예를 들어, CSS rems의 루트 글꼴 크기를 설정하거나 iOS 포인트로 치수를 조정하기 위한 배수를 설정할 수 있습니다.

선택한 언어와 단위에 맞게 단위 크기를 조정하려면 다음 안내를 따르세요.

캔버스에서 개체를 선택합니다.
Inspect(검사) 패널의 Code(코드) 섹션에서 language(언어) 드롭다운 옆에 있는 [inspect settings icon] Inspect settings(검사 설정)을 클릭합니다.
Set unit scale…(단위 크기 설정)을 선택합니다.
단위 기본 설정에 따라 Unit scale(단위 크기) 모달에서 크기를 입력하거나 선택합니다.
Click .

코드 스니펫 보기

Dev Mode에서는 캔버스에서 개체를 선택하면 코드 스니펫이 생성됩니다. Code(코드) 섹션에는 선택한 개체 및 언어 유형에 따라 관련 정보가 표시됩니다.

캔버스에 있는 대부분의 개체는 유사한 코드 스니펫을 생성하지만 텍스트 선택은 약간 다릅니다. Code(코드) 섹션에는 상자 모델 대신 타이포그래피 보기가 표시되고, 뒤이어 관련 타이포그래피 정보의 코드 스니펫이 표시됩니다.

선택한 개체에 할당된 모든 변수도 코드 스니펫에 표시됩니다. 코드 구문을 사용하면 원활한 핸드오프 환경을 지원하도록 유효한 변수 이름을 사용하여 코드에서 변수를 표현할 수 있습니다.

Figma Design의 코드 구문과 변수에 대해 자세히 알아보기 ->

팁: 플러그인을 사용하여 코드 스니펫의 기능을 확장하거나 Figma의 플러그인 API를 사용하여 개발용 맞춤형 코드 스니펫을 만들 수 있습니다.

코드 스니펫 복사

코드 스니펫을 복사하여 텍스트 편집기로 전송할 수 있습니다. 코드 스니펫을 복사하려면 다음 안내를 따르세요.

코드를 생성할 개체를 선택합니다.
Inspect(검사) 패널의 Code(코드) 섹션에서 복사하려는 코드 스니펫을 찾습니다.
코드 스니펫 위에 마우스를 올려놓고 오른쪽 상단 모서리에 있는 Copy(복사)를 클릭합니다.

Code Connect

Code Connect는 디자인 시스템 및 엔지니어링 팀이 컴포넌트 코드를 Dev Mode로 가져올 수 있는 도구입니다. 코드 스니펫이 연결된 컴포넌트를 검사할 때 개발자는 자동 생성된 코드 대신 라이브러리에서 디자인 시스템 코드를 볼 수 있습니다.

Code Connect는 Figma API를 기반으로 구축되며 여러 디자인 시스템, 제품, 언어를 지원하도록 완벽하게 사용자 지정할 수 있습니다.

Code Connect 허브를 확인하여 맞춤형 코드 스니펫을 컴포넌트에 동기화하는 방법 알아보기 →

Code Connect가 구현되면 Dev Mode 코드 스니펫이 연결됨으로 표시되고 조직 라이브러리의 스니펫이 표시됩니다.

···

Dev Mode에서 코드 스니펫 사용