이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Relay 설치

Relay는 다음 세 부분으로 구성되며, 각각 따로 설치해야 합니다.

Figma용 Relay 플러그인
Android 스튜디오용 Relay 플러그인
Relay Gradle 플러그인

기본 요건

Figma 계정에 로그인해야 합니다.
Android 스튜디오 2022.2.1 Flamingo 이상이 설치되어 있어야 합니다.
자바 런타임이 설치되어 있어야 합니다.
Jetpack Compose 버전 1.2 이상을 사용 중입니다.
Gradle 플러그인 버전 8.0 이상을 사용 중입니다.

Figma용 Relay 플러그인 설치

Figma용 Relay 플러그인을 사용하면 Figma로 작업하는 누구나 디자인에 주석을 달고 이를 Android 스튜디오 및 Jetpack Compose를 사용하는 개발자와 공유할 수 있습니다.

Figma용 Relay 플러그인은 Figma의 커뮤니티 플러그인 마켓플레이스에 게시되어 있습니다. 플러그인을 설치하려면 다음 단계를 따르세요.

Figma 웹사이트에서 Figma용 Relay 플러그인 페이지로 이동합니다.
페이지 오른쪽 상단에서 Try it out을 클릭합니다.
플러그인을 사용할지 묻는 대화상자가 표시될 수 있습니다. 대화상자에서 조직을 선택합니다. 드물지만 조직에서 공개 플러그인을 사용 중지할 수 있습니다. 이 경우 External teams 옵션을 선택합니다.

그러면 플러그인 정보 페이지가 표시된 Figma 파일이 열립니다. ...을 클릭하고 Save를 선택하여 플러그인을 쉽게 재사용할 수 있도록 합니다.
이제 Run을 클릭합니다.

Figma 캔버스에서 플러그인이 실행되는 것을 확인할 수 있습니다.

Android 스튜디오용 Relay 플러그인 설치

Android 스튜디오용 Relay 플러그인을 사용하면 Android 스튜디오로 작업하는 개발자가 Figma용 Relay 플러그인을 사용하여 디자인 인텐트 정보로 주석이 달린 디자인을 가져올 수 있습니다. 플러그인은 Android 스튜디오 플러그인 마켓플레이스에 게시됩니다. 설치하려면 다음 단계를 따르세요.

Android 스튜디오를 엽니다.
기본 메뉴에서 다음을 실행합니다.
- macOS의 경우 Android Studio > Preferences를 선택합니다.
- Windows 및 Linux의 경우 File > Settings를 선택합니다.
Plugins를 선택합니다.
Marketplace 탭을 선택하고 'Relay for Android Studio'를 검색한 다음 Google에서 게시한 플러그인을 선택합니다.
Install을 클릭합니다.
설치가 완료되면 Restart IDE를 클릭합니다.
설치가 완료되었는지 확인하려면 Preferences 또는 Settings를 열고 Plugins로 이동합니다. Installed 섹션에 Relay for Android Studio가 표시됩니다.

Relay Gradle 플러그인 설치

Relay Gradle 플러그인은 Figma용 Relay 플러그인을 사용하여 디자인 인텐트 정보로 주석이 달린 Figma의 디자인이 빌드 중에 코드로 올바르게 변환되도록 합니다.

Relay Gradle 플러그인은 많은 Gradle 플러그인이 포함된 서버인 Google Maven에 게시됩니다. Android 스튜디오는 기본적으로 Gradle 작업을 호출하며, 이러한 작업에는 프로젝트에서 참조하는 종속 항목을 다운로드하고 설치하는 작업이 포함됩니다.

Android 스튜디오, 그리고 더 나아가 Gradle 자체에서 Relay Gradle 플러그인을 다운로드하고 설치하도록 하려면 프로젝트에서, 특히 모듈의 디렉터리에 있는 build.gradle 파일에서 플러그인을 종속 항목으로 지정해야 합니다. 일반적으로 app/build.gradle에 있습니다.

app/build.gradle 파일 상단에는 사용 중인 모든 플러그인이 나열된 섹션이 있습니다. 이 목록에 Relay Gradle 플러그인을 추가하면 Gradle에서 다운로드와 설치를 처리합니다. 예:

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'com.google.relay' version '0.3.11'
}

또한 settings.gradle 파일에 다음 섹션이 있는지 확인합니다.

pluginManagement {
    repositories {
        gradlePluginPortal()
        google()
        mavenCentral()
    }
}

위에 언급된 구성이 포함된 사전 구성된 프로젝트를 사용할 수도 있습니다.

Figma 액세스 설정

Relay는 Figma 디자인을 다운로드하여 코드로 변환할 수 있도록 Figma 개인 액세스 토큰이 필요합니다. 아직 토큰이 없다면 다음 단계를 따르세요.

Figma를 열고 Figma에 로그인합니다.
파일 브라우저로 이동합니다.
계정 아이콘을 클릭하고 Settings를 선택합니다.
Personal access tokens 섹션까지 아래로 스크롤합니다.
토큰 설명(예: 'Relay')을 입력하고 Return을 입력합니다. 토큰이 생성됩니다. Copy this token을 클릭합니다.
Android 스튜디오의 기본 메뉴에서 Tools > Relay Settings를 선택합니다.
이전에 macOS에서 Figma 액세스 토큰을 설정한 경우 다음 대화상자가 표시될 수 있습니다. 이 대화상자를 통해 Android 스튜디오가 기존 Figma 액세스 토큰을 사용하고 있음을 알 수 있습니다. 비밀번호를 입력하고 Always Allow를 클릭합니다.
Figma 액세스 토큰을 Figma Access Token 입력에 붙여넣습니다. Figma 액세스 토큰을 처음 설정하는 경우가 아니라면 Existing Figma Access Token 입력이 표시될 수 있습니다.
OK를 클릭합니다.

사전 구성된 프로젝트 다운로드 및 설정

사전 구성된 프로젝트를 다운로드하고 설정하려면 다음 단계를 따르세요.

프로젝트 ZIP 파일을 다운로드합니다.
파일을 더블클릭하여 압축을 풀면 HelloFigma라는 폴더가 생성됩니다. 이를 홈 폴더로 옮깁니다.
Android 스튜디오로 돌아갑니다. File > Open으로 가서 홈 폴더로 이동하고 HelloFigma를 선택한 후 Open을 클릭합니다.
프로젝트를 열면 Android 스튜디오에서 프로젝트를 신뢰할 수 있는지 묻는 메시지가 표시됩니다. Trust Project를 클릭합니다.

사전 구성된 프로젝트 실행

에뮬레이터나 기기에서 앱을 실행합니다. 빈 화면에 'Hello, Android!'가 표시됩니다.

다음 단계

이제 Relay를 사용하여 첫 번째 디자인을 만들 준비가 되었습니다.

기본 튜토리얼