디자인 변형 처리

Figma에서 변형은 다음의 다양한 변형을 그룹화하는 데 사용됩니다. 동일한 구성요소를 함께 사용하는 경우일 수 있습니다. Relay 보존 구성요소의 변형을 생성합니다. 이 섹션에서는 Relay가 설계의 변형을 처리하는 방법을 알아봅니다.

출발지

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

먼저 3개의 프레임이 있는 News Card 구성요소가 포함된 대안:

  • hero-item은 가장 중요한 뉴스 기사에 사용됩니다.
  • article-item은 일반적인 기사용입니다.
  • audio-item은 읽지 않고 듣는 기사입니다.

Figma 복사 예

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

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

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

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

UI 패키지 만들기

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

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

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

    플러그인의 UI 패키지 만들기 버튼

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

    <ph type="x-smartling-placeholder">
    </ph> 플러그인의 요약 상자

이름이 지정된 버전 저장

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

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

  4. 저장을 클릭합니다.

    예시 제목: 새로운 첫 번째 카드

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

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

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

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

Android 스튜디오로 가져오기

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

  1. Figma로 돌아가서 News Card Tutorial Figma 파일의 URL을 복사합니다. 이제 이 URL을 사용하여 구성요소를 가져올 수 있습니다. 오른쪽 상단 모서리에서 Figma에서 Share 버튼을 클릭합니다. 대화상자가 열리면 링크 복사.

    파일 탭의 링크 복사 옵션

  2. Android 스튜디오에서 HelloNews 프로젝트로 전환합니다. 파일 > 신규 > 가져오기 UI Packages...를 선택하여 표시합니다.

    File 메뉴의 Import UI Packages… 옵션

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

    <ph type="x-smartling-placeholder">
    </ph> Import UI Packages 대화상자
    <ph type="x-smartling-placeholder">
    </ph> 키 체인 시스템 대화상자
    1. 파일 가져오기가 완료되면 (시간이 걸릴 수 있음) 완료.
    구성요소 미리보기

  4. 클릭 Make Project 버튼 프로젝트를 빌드합니다 1분 정도 걸릴 수 있습니다.

    <ph type="x-smartling-placeholder">
    </ph> 툴바의 빌드 버튼

앱 미리보기 및 성분

  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 구성요소에 추가합니다.