디자인 변형 처리

Figma에서 변형은 동일한 구성요소의 다양한 변형(예: 다양한 상태 또는 크기)을 함께 그룹화하는 데 사용됩니다. Relay는 코드로 변환될 때 구성요소의 변형을 유지합니다. 이 섹션에서는 Relay가 디자인의 변형을 처리하는 방법을 알아봅니다.

시작점

트리 변형이 포함된 뉴스 카드

먼저 세 가지 변형이 있는 News Card 구성요소가 포함된 Figma 파일로 시작합니다.

  • hero-item은 가장 중요한 뉴스 기사에 사용됩니다.
  • article-item은 일반적인 기사에 사용됩니다.
  • audio-item은 읽는 대신 듣는 기사를 위한 항목입니다.

Figma 복사 예

기존 Figma 파일을 이 튜토리얼의 예로 사용하겠습니다. Figma 계정에 로그인해야 합니다.

  1. 컴퓨터에 HelloNews.fig를 다운로드합니다.

  2. Figma에서 파일 브라우저로 이동합니다. 왼쪽에 있는 임시보관함에 마우스를 가져갑니다. + 아이콘이 표시되면 + 아이콘을 클릭한 다음 가져오기를 클릭합니다. 방금 다운로드한 HelloNews.fig 파일을 선택합니다. 10초에서 1분 정도 걸릴 수 있습니다.

  3. Figma에서 가져온 파일을 엽니다.

UI 패키지 만들기

Figma용 Relay 플러그인은 구성요소에 추가 정보를 추가하므로 코드에서 구성요소를 사용할 개발자와 함께 작업할 수 있습니다.

  1. 파일 (메뉴 바에서 Plugins > Relay for Figma)에서 Figma용 Relay 플러그인을 엽니다. 시작하기를 클릭합니다.

  2. 구성요소를 선택하고 Create UI Package를 클릭합니다.

    플러그인의 Create UI Package 버튼

  3. UI 패키지를 선택한 상태에서 요약 상자에 설명을 추가합니다. '목록의 뉴스 항목을 표시하기 위한 뉴스 카드 구성요소'를 예로 들 수 있습니다.

    플러그인의 요약 상자

이름이 지정된 버전 저장

이제 UI 패키지를 만들었으므로 구성요소를 준비하여 개발팀과 공유할 수 있습니다.

  1. Figma Relay 플러그인을 엽니다(아직 열려 있지 않은 경우).
  2. 개발자와 공유를 클릭합니다.
  3. 개발자와 공유 화면에서 버전 기록 저장 섹션에 새 버전의 이름과 설명을 입력할 수 있습니다.

  4. 저장을 클릭합니다.

    제목 예: 첫 새 카드

    설명 예: 뉴스 기사 항목의 첫 번째 반복

Android 스튜디오 프로젝트 다운로드

이 튜토리얼의 Android 스튜디오 부분에서는 사전 구성된 Android 스튜디오 프로젝트를 사용합니다. 이 프로젝트에는 뉴스 기사를 일반 텍스트 형식으로 표시하는 앱이 포함되어 있습니다.

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

Android 스튜디오로 가져오기

Figma 구성요소를 프로젝트로 가져오겠습니다.

  1. Figma로 돌아가서 News Card 튜토리얼 Figma 파일의 URL을 복사합니다. 이 URL을 사용하여 구성요소를 가져옵니다. Figma의 오른쪽 상단에서 Share 버튼을 클릭합니다. 대화상자가 열리면 Copy Link(링크 복사)를 클릭합니다.

    파일 탭의 링크 복사 옵션

  2. Android 스튜디오에서 HelloNews 프로젝트로 전환합니다. Android 스튜디오 메뉴 바에서 File > New > Import UI Packages...로 이동합니다.

    File 메뉴의 Import UI Packages… 옵션

  3. Figma 파일의 URL을 붙여넣고 Next를 클릭합니다.

    Import UI Packages 대화상자
    키 체인 시스템 대화상자
    1. 파일 가져오기가 완료되면 (다소 시간이 걸릴 수 있음) Finish를 클릭합니다.
    구성요소 미리보기

  4. Make Project 버튼를 클릭하여 프로젝트를 빌드합니다. 1분 정도 소요될 수 있습니다.

    툴바의 빌드 버튼

앱 및 구성요소 미리보기

  1. Android 뷰에서 app/java/com/example/hellonews/ui/home/HomeScreen.kt를 열면 앱의 미리보기가 표시됩니다. 이 앱은 오디오 기사 위에 인쇄 기사와 함께 일반 텍스트 형식으로 여러 뉴스 기사를 표시합니다.

    앱 미리보기

  2. app/java (generated)/com/example/hellonews/newscard/NewsCard.kt. 다음은 Figma 구성요소용으로 생성된 Jetpack Compose 코드입니다. 미리보기에서 NewsCard 구성요소의 세 가지 변형이 Figma에서 코드로 변환되었음을 확인할 수 있습니다. 코드를 자세히 살펴보겠습니다.

    NewsCard 구성요소 미리보기

  3. View enum을 사용하면 이 구성요소에 사용할 변형을 선택할 수 있습니다. enum의 이름과 값은 Figma 구성요소의 변형에서 파생되었습니다. 이는 NewsCard 컴포저블의 view 매개변수에서 사용됩니다.

    Figma의 변형 및 상응하는 View enum

  4. NewsCard 컴포저블은 UI 패키지에서 생성되었습니다. 여기에는 인스턴스화할 뉴스 카드의 변형을 설정하는 View 유형의 매개변수가 포함됩니다.

    package com.example.myapplication.newscard

import ...

// Design to select for NewsCard
enum class View {
    HeroItem,
    ArticleItem,
    AudioItem
}

/**
* News card component intended to display news items for a list.
*
* This composable was generated from the UI Package 'news_card'.
* Generated code; do not edit directly
*/
@Composable
fun NewsCard(
    modifier: Modifier = Modifier,
    view: View = View.HeroItem
) {...}

다음 단계

아직 NewsCard를 사용할 준비가 되지 않았습니다. 구성요소는 여러 뉴스 기사를 표시하는 방법을 알지 못하며 Figma에서 동일한 하드코딩된 뉴스만 표시됩니다. 따라서 지금 구성요소를 추가하면 동일한 뉴스 기사만 반복됩니다. NewsCard의 어떤 부분을 동적 데이터로 채워야 하는지 지정하는 방법이 필요합니다.

콘텐츠 매개변수

이 섹션에서는 NewsCard 구성요소에 콘텐츠 매개변수를 추가합니다.