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.
- Pobierz plik HelloNews.fig na komputer.
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.
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.
- Otwórz w pliku wtyczkę Relay for Figma (na pasku menu: Plugins > Relay for Figma). Kliknij Rozpocznij.
Wybierz komponent i kliknij Create UI Package (Utwórz pakiet interfejsu).
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.
- Otwórz wtyczkę Figma Relay, jeśli nie jest jeszcze otwarta.
- Kliknij Udostępnij deweloperowi.
- Na ekranie Udostępnij deweloperowi w sekcji Zapisz historię zmian możesz wpisać nową nazwę i opis wersji.
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.
- Pobierz przykładowy plik HelloNews.zip.
- Kliknij plik dwukrotnie, aby go rozpakować. Zostanie utworzony folder o nazwie HelloNews. Przenieś go do folderu głównego.
- Wróć do Android Studio. Przejdź do Plik > Otwórz, przejdź do folderu głównego, wybierz HelloNews i kliknij Otwórz.
- Gdy otworzysz projekt, Android Studio zapyta, czy ufasz mu. Kliknij Trust Project.
Zaimportuj do Android Studio
Zaimportujmy do projektu komponent Figma.
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.
Przełącz się na projekt HelloNews w Android Studio. Wybierz Plik > Nowy > Importuj pakiety UI... na pasku menu Android Studio.
Wklej adres URL pliku Figma i kliknij Dalej.
- Po zakończeniu pobierania pliku (co może zająć trochę czasu) kliknij Zakończ.
Kliknij , aby utworzyć projekt. Może to potrwać około minuty.
Podgląd aplikacji i komponentu
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.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.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 parametrzeview
w komponencie NewsCard.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.
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