Przekonwertuj projekty na kod w Android Studio

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.

1. Pobierz wstępnie skonfigurowany plik ZIP projektu w Android Studio (jest to ten sam projekt co na stronie Zainstaluj usługę przekaźnika).

2. Kliknij dwukrotnie plik, aby go rozpakować. Spowoduje to utworzenie folderu o nazwie HelloFigma. Przenieś go do folderu głównego...

3. Wróć do Android Studio. Wybierz File > Open (Plik > Otwórz), przejdź do folderu głównego, wybierz HelloFigma i kliknij Open (Otwórz).

4. Gdy otworzysz projekt, Android Studio może zapytać, czy ufasz mu. Kliknij Trust Project.

5. W Android Studio wybierz Plik > Nowy > Importuj pakiety UI...

   

6. W oknie importowania pakietów interfejsu użytkownika wklej adres URL pliku Figma i kliknij Dalej.

   

   

7. 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

1. Kliknij , aby utworzyć projekt.

   

2. Aby wyświetlić wynik kompilacji, kliknij kartę Kompilacja.

   

3. 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.

4. 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.

1. W app/java/com/example/hellofigma/MainActivity.kt dodaj do sekcji importowania na górze strony:

   import com.example.hellofigma.hellocard.HelloCard
   

2. 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
                   }
               }
           }
       }
   }
   

3. Dalej w tym samym pliku, w podglądzie elementu kompozycyjnego, zmień jeden wiersz:

   @Preview(showBackground = true)
   @Composable
   fun DefaultPreview() {
       HelloFigmaTheme {
           HelloCard() // Change this line
       }
   }
   

4. Wybierz urządzenie na pasku narzędzi.

5. 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.