Importuj projekt z Figmy
Teraz dodamy pakiet UI utworzony w Figmie do projektu Android Studio. Aby zastosować pakiet UI, skopiuj URL udostępniania wygenerowany w poprzedniej sekcji do kreatora importowania w Android Studio.
Pobierz wstępnie skonfigurowany plik ZIP projektu w Android Studio (jest to ten sam projekt co na stronie Zainstaluj usługę przekaźnika).
Kliknij dwukrotnie plik, aby go rozpakować. Spowoduje to utworzenie folderu o nazwie HelloFigma. Przenieś go do folderu głównego...
Wróć do Android Studio. Wybierz File > Open (Plik > Otwórz), przejdź do folderu głównego, wybierz HelloFigma i kliknij Open (Otwórz).
Gdy otworzysz projekt, Android Studio może zapytać, czy ufasz mu. Kliknij Trust Project.
W Android Studio wybierz Plik > Nowy > Importuj pakiety UI...
W oknie importowania pakietów interfejsu użytkownika wklej adres URL pliku Figma i kliknij Dalej.
Poczekaj, aż plik zostanie pobrany. Po pobraniu wyświetli się podgląd komponentu. Kliknij Utwórz.
Zwróć uwagę, że do Twojego projektu zostały dodane nowe pliki – powinny one zostać objęte kontrolą źródła w ramach projektu. W widoku Androida w projekcie zobaczysz:
app/ui-packages/hello_card/*
Wszystkie zasoby źródłowe wymagane do opisania komponentu w kodzie. Pliki te służą do generowania kodu na etapie kompilacji.app/ui-packages/hello_card/hello_card.json
Plik JSON zawierający definicję komponentu (w tym jego układ i inne właściwości).app/ui-packages/hello_card/fonts/*
Wszystkie pliki czcionek wymagane do obsługi komponentu w Jetpack Compose.app/ui-packages/hello_card/*.png
lub*.jpeg
Wszystkie komponenty z obrazem wymagane do obsługi komponentu.app/ui-packages/hello_card/VERSION.txt
Wersja wtyczki Relay for Android Studio użyta do zaimportowania pakietu UI.app/ui-packages/hello_card/config.json
Motyw używany do podglądu.
Tworzenie i generowanie kodu
Kliknij , aby utworzyć projekt.
Aby wyświetlić wynik kompilacji, kliknij kartę Kompilacja.
Wygenerowany kod zostanie dodany do projektu. Jest to kod wygenerowany, więc nie należy przypisywać go do kontroli źródła w ramach projektu. W widoku Androida w projekcie możesz wyświetlić:
app/java (generated)/com/example/hellofigma/hellocard
Wygenerowany kod i czcionki w Jetpack Compose.app/java (generated)/com/google/relay/compose
Wspólny kod środowiska wykonawczego używany we wszystkich pakietach UI.
Otwórz pokój
app/java (generated)/com/example/hellofigma/hellocard/HelloCard.kt
. To jest wygenerowana funkcja Jetpack Compose dla komponentu Figma. Możesz też wyświetlić podgląd komponentu.Informacje o układzie, zasobach i stylu są teraz przenoszone z aplikacji Figma do kodu.
Podsumowanie dodane w Figmie jest teraz przekształcane w komentarz znajdujący się nad wygenerowanym elementem kompozycyjnym.
/** * Hello Card component used to display the image and the title content * * This composable was generated from the UI package ‘ hello_card’ * Generated code; do not edit directly */ @Composable fun HelloCard(modifier: Modifier = Modifier) {...
Zintegruj komponenty i uruchom aplikację
Teraz zintegrujmy komponent z głównym działaniem.
W
app/java/com/example/hellofigma/MainActivity.kt
dodaj do sekcji importowania na górze strony:import com.example.hellofigma.hellocard.HelloCard
Poniżej w tym samym pliku zmień ten kod w klasie
MainActivity
:class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { HelloFigmaTheme { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme.colors.background) { // Greeting("Android") // Delete this line HelloCard() // Add this line } } } } }
Dalej w tym samym pliku, w podglądzie elementu kompozycyjnego, zmień jeden wiersz:
@Preview(showBackground = true) @Composable fun DefaultPreview() { HelloFigmaTheme { HelloCard() // Change this line } }
Wybierz urządzenie na pasku narzędzi.
Aby uruchomić projekt, kliknij ▶ na pasku narzędzi.
Emulator uruchomi się, projekt zostanie skompilowany i uruchomi się aplikacja.
Gratulacje! Udało Ci się dodać pierwszy komponent Figma do aplikacji Jetpack Compose.
Następny krok
Wprowadzanie i rozpowszechnianie aktualizacji projektu
Teraz gdy masz już w pełni działający przykład, zobaczmy, jak zaktualizować oryginalny projekt i ponownie wygenerować kod.
Polecane dla Ciebie
- Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
- Parametry treści
- Wprowadzanie i rozpowszechnianie aktualizacji projektu
- Obsługa wariantów projektowych