Pobierz wstępnie skonfigurowany plik Figma
Zacznijmy od utworzenia komponentu w aplikacji Figma. W tym samouczku jako przykład użyjemy istniejącego pliku Figma. Ten plik zawiera ramkę układu automatycznego z obrazem i tytułem. Zaloguj się na konto Figma.
- Pobierz ten plik Figma na komputer: HelloFigma.fig.
W przeglądarce plików aplikacji Figma najedź kursorem na Wersje robocze. Pojawi się ikona +. Kliknij +, Importuj... i wybierz pobrany przed chwilą plik HelloFigma.fig.
Otwórz zaimportowany plik w aplikacji Figma.
Tworzenie komponentu
Aby użyć zaimportowanego projektu z wtyczką Relay for Figma, najpierw musisz przekonwertować go na komponent. Wybierz ramkę Karta Hello i na pasku narzędzi kliknij Utwórz komponent.
Utwórz pakiet UI
Wtyczka Relay for Figma dodaje do komponentu dodatkowe informacje, dzięki czemu możesz współpracować z programistami, którzy mogą użyć tego komponentu w swoim kodzie.
Otwórz w pliku wtyczkę Relay for Figma (w menu Figma: Plugins > Relay for Figma). Kliknij Rozpocznij.
Wybierz komponent i kliknij Create UI Package (Utwórz pakiet interfejsu).
Po wybraniu pakietu interfejsu dodaj opis do pola Podsumowanie. Na przykład: „Komponent Karta Hello używany do wyświetlania treści obrazu i tytułu”
Aby przejść do następnego ekranu, w prawym dolnym rogu okna kliknij Udostępnij deweloperowi.
Udostępnianie w ramach procesu dla deweloperów
Po utworzeniu pakietu UI przygotuj komponent, aby udostępnić go zespołowi programistów.
Utwórz nową wersję z nazwą pliku komponentu. Użycie nazwanych wersji komponentu zapobiega wpływowi niepożądanych zmian na komponenty produkcyjne.
Wpisz nazwę i opis pierwszej wersji komponentu, a następnie kliknij Zapisz.
Następnie utwórz link do udostępniania komponentu i skopiuj go do schowka, naciskając CMD+L na Macu lub CTRL+L na komputerze z systemem Windows.
Następny krok
Teraz możesz przekazać komponent interfejsu do Android Studio.
Otwórz Android Studio, aby ukończyć następną część tego samouczka.
Konwertowanie projektów na kod w Android Studio