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.
![Ikona tworzenia komponentu na pasku narzędzi](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/create-ui-package-in-figma/create-component.png?authuser=2&hl=pl)
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.
![Pole podsumowania we wtyczce](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/create-ui-package-in-figma/share-with-developer-dialog.png?authuser=2&hl=pl)
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