Obsługa wariantów projektowych

Na Figmie warianty służą do grupowania różnych wariantów tego samego komponentu, np. różnych stanów lub rozmiarów. Usługa przekaźnika zachowuje warianty komponentu po przekształceniu na kod. W tej sekcji zobaczymy, jak usługa Relay obsługuje warianty w projektach.

Punkt początkowy

Zaczniemy od pliku Figma zawierającego komponent karty wiadomości z 3 wariantami:

• Atrybut hero-item jest przeznaczony dla najważniejszego artykułu z wiadomościami.
• article-item dotyczy typowego artykułu,
• Atrybut audio-item dotyczy artykułu, którego możesz posłuchać, a nie przeczytać.

Skopiuj przykład aplikacji Figma

W tym samouczku użyjemy istniejącego pliku Figma. Zaloguj się na konto Figma.

1. Pobierz plik HelloNews.fig na komputer.

2. Otwórz przeglądarkę plików w aplikacji Figma. Po lewej stronie najedź na opcję Wersje robocze. Gdy pojawi się ikona +, kliknij ikonę + i wybierz Importuj. Wybierz pobrany przed chwilą plik HelloNews.fig. Może to potrwać od 10 sekund do minuty.

   

3. Otwórz zaimportowany plik w aplikacji Figma.

Utwórz pakiet UI

Wtyczka Relay for Figma dodaje do komponentu dodatkowe informacje, dzięki czemu możemy współpracować z programistami, którzy wybiorą go w swoim kodzie.

1. Otwórz w pliku wtyczkę Relay for Figma (na pasku menu: Plugins > Relay for Figma). Kliknij Rozpocznij.

2. Wybierz komponent i kliknij Create UI Package (Utwórz pakiet interfejsu).

   

3. Po wybraniu pakietu UI dodaj opis w polu podsumowania. Na przykład: „Komponent Karta wiadomości służy do wyświetlania wiadomości na liście”.

   

Zapisz wersję z nazwą

Po utworzeniu pakietu UI przygotuj komponent, aby udostępnić go zespołowi programistów.

1. Otwórz wtyczkę Figma Relay, jeśli nie jest jeszcze otwarta.
2. Kliknij Udostępnij deweloperowi.
3. Na ekranie Udostępnij deweloperowi w sekcji Zapisz historię zmian możesz wpisać nową nazwę i opis wersji.

4. Kliknij Zapisz.

   Przykładowy tytuł: Nowa nowa karta

   Przykładowy opis: pierwsze wystąpienie artykułów z wiadomościami

Pobierz projekt Android Studio

W części tego samouczka użyjemy wstępnie skonfigurowanego projektu Android Studio. Ten projekt obejmuje aplikację, która wyświetla artykuły z wiadomościami w formacie zwykłego tekstu.

1. Pobierz przykładowy plik HelloNews.zip.
2. Kliknij plik dwukrotnie, aby go rozpakować. Zostanie utworzony folder o nazwie HelloNews. Przenieś go do folderu głównego.
3. Wróć do Android Studio. Przejdź do Plik > Otwórz, przejdź do folderu głównego, wybierz HelloNews i kliknij Otwórz.
4. Gdy otworzysz projekt, Android Studio zapyta, czy ufasz mu. Kliknij Trust Project.

Zaimportuj do Android Studio

Zaimportujmy do projektu komponent Figma.

1. Wróć do aplikacji Figma i skopiuj adres URL pliku z samouczkiem dotyczącym kart wiadomości. Użyjemy go do zaimportowania naszych komponentów. W prawym górnym rogu aplikacji Figma kliknij przycisk Udostępnij. W oknie, które się otworzy, kliknij Kopiuj link.

   

2. Przełącz się na projekt HelloNews w Android Studio. Wybierz Plik > Nowy > Importuj pakiety UI... na pasku menu Android Studio.

   

3. Wklej adres URL pliku Figma i kliknij Dalej.

   

   

   1. Po zakończeniu pobierania pliku (co może zająć trochę czasu) kliknij Zakończ.

   

4. Kliknij , aby utworzyć projekt. Może to potrwać około minuty.

   

Podgląd aplikacji i komponentu

1. W widoku Androida otwórz app/java/com/example/hellonews/ui/home/HomeScreen.kt. Zobaczysz podgląd aplikacji. Znajdziesz w niej kilka artykułów z wiadomościami w formacie zwykłego tekstu, a nad materiałami audio drukowanymi literami.

   

2. Otwórz aplikację app/java (generated)/com/example/hellonews/newscard/NewsCard.kt. To jest wygenerowany kod Jetpack Compose dla naszego komponentu Figma. Na podglądzie widać, że 3 warianty komponentu NewsCard zostały przetłumaczone z Figmy na kod. Przyjrzyjmy się kodowi.

   

3. Lista View umożliwia wybór wariantu, którego mamy używać w przypadku tego komponentu. Nazwa wyliczenia i jej wartości pochodzą z wariantów naszego komponentu Figma. Jest on używany w parametrze view w komponencie NewsCard.

   

4. Obiekt kompozycyjny NewsCard został wygenerowany na podstawie pakietu interfejsu użytkownika. Zawiera on parametr typu View, który ustawia wariant karty wiadomości na instancję.

   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
   ) {...}
   
   

Następny

Nie jesteśmy jeszcze gotowi do korzystania z karty NewsCard. Komponent nie wie, jak wyświetlać różne artykuły, tylko ten sam kodowany na stałe w Figmie. Gdyby dodać teraz komponent, uzyskalibyśmy tylko powtórzenie tego samego artykułu. Potrzebujemy sposobu określania, które części obiektu NewsCard mają zostać wypełnione danymi dynamicznymi.

Parametry treści

W tej sekcji dodamy do komponentu NewsCard parametry treści.

Polecane dla Ciebie

• Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
• Parametry treści
• Przewijanie
• Korzystanie z opcji Utwórz w widokach