Przepływ pracy w Android Studio

Importuj pakiet UI

Po utworzeniu pakietu UI w Figmie możesz go zaimportować do projektu Android Studio. Po utworzeniu projektu usługa Relay wygeneruje kod Jetpack Compose.

Aby zaimportować pakiet UI do projektu Android Studio:

1. Wybierz Plik > Nowy > Importuj pakiety UI...

   

2. Wpisz adres URL pliku Figma zawierającego pakiet UI.

   

3. Kliknij Dalej.

4. Wybierz pakiety UI, które chcesz zaimportować. Wyświetlane komponenty zależą od tego, czy został wklejony komponent, strona lub link do pliku. Jeśli pakiet UI został już zaimportowany, ma etykietę „UPDATED”. W przeciwnym razie wyświetla się jako „NOWY”.

   

5. Kliknij Zakończ, aby zaimportować wybrane pakiety i ich zależności do folderu ui-packages.

Ekran importowania pakietów w interfejsie

Ekran importowania zawiera te informacje:

• Obraz podglądu komponentu i jego wersji.
• Tytuł i opis.
• Lista wariantów i ich właściwości.
• Lista parametrów treści i ich typów.
• Lista modułów obsługi interakcji i ich typów.

Okno narzędzia pakietu UI Package

Wtyczka Android Studio dodaje okno narzędzia o nazwie Pakiet interfejsu użytkownika. Otwiera się za każdym razem, gdy wybierzesz plik w folderze z pakietami UI (np. app/src/main/ui-packages/mycomponent/). W oknie narzędzia wyświetli się podsumowanie pakietu UI i jego zawartości.

Utwórz projekt na Androida

Gdy tworzysz projekt Android Studio zawierający pakiet UI, wtyczka Relay Gradle generuje kod z tego pakietu i kompiluje go. Są też pobierane i kopiowane do projektu zasoby czcionek.

Jeśli chcesz kompilować tylko zaimportowane pakiety UI, a nie cały projekt, możesz uruchomić te zadania Gradle:

• generateDebugRelayCode lub generateReleaseRelayCode generuje wersje do debugowania lub wydania kodu pozyskane z pakietu UI.
• generateRelayRuntimeCode tworzy bibliotekę środowiska wykonawczego używaną przez wygenerowany kod.

Podczas tworzenia:

1. Kod jest generowany z pakietu UI i przechowywany w osobnych folderach.
2. Obrazy i czcionki są kopiowane do wspólnego generowanego folderu zasobów.

Lokalizację folderów znajdziesz w sekcji Omówienie pakietu UI i wygenerowanego kodu.

Aktualizowanie pakietu UI

Gdy nowa wersja projektu będzie gotowa, projektant powinien utworzyć nową nazwaną wersję pliku Figma.

W Android Studio sprawdź, czy okno narzędzia Projekt jest ustawione w widoku Androida.

1. W folderze ui-packages w module kliknij prawym przyciskiem myszy folder Pakiety UI, które chcesz zaktualizować, a następnie wybierz Aktualizuj pakiety UI. W tym przykładzie wybraliśmy 5 pakietów UI do zaktualizowania.

   

2. Możesz też kliknąć prawym przyciskiem myszy folder ui-packages, aby zaktualizować wszystkie pakiety UI.

   

Polecane dla Ciebie

• Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
• Informacje o pakiecie UI i wygenerowanym kodzie
• Ograniczenia i rozwiązywanie problemów
• Mapowanie komponentów na istniejący kod