Tải tệp Figma được định cấu hình sẵn xuống
Hãy bắt đầu bằng cách tạo một thành phần trong Figma. Trong hướng dẫn này, chúng ta sẽ dùng tệp Figma hiện có làm ví dụ. Tệp này chứa một khung bố cục tự động có hình ảnh và tiêu đề. Hãy đảm bảo rằng bạn đã đăng nhập vào tài khoản Figma.
- Tải tệp Figma này xuống máy tính: HelloFigma.fig.
Trong trình duyệt tệp của Figma, hãy di chuột qua Bản nháp. Biểu tượng + xuất hiện. Nhấp vào dấu +, sau đó nhấp vào Import... (Nhập...) rồi chọn tệp HelloFigma.fig mà bạn vừa tải xuống.
Mở tệp đã nhập trong Figma.
Tạo một thành phần
Để sử dụng thiết kế đã nhập với trình bổ trợ Relay for Figma (Relay cho Figma), trước tiên, chúng ta cần chuyển đổi thiết kế đó thành một thành phần. Chọn khung Hello Card (Xin chào thẻ), sau đó nhấp vào Create Component (Tạo thành phần).
Tạo Gói giao diện người dùng
Trình bổ trợ Relay cho Figma bổ sung thông tin vào thành phần này để bạn có thể làm việc với các nhà phát triển có thể sử dụng thành phần này trong mã của họ.
Mở trình bổ trợ Relay cho Figma trong tệp của bạn (Trong trình đơn Figma: Plugins > Relay for Figma (Trình bổ trợ > Chuyển tiếp cho Figma)). Nhấp vào Bắt đầu.
Chọn thành phần rồi nhấp vào Create UI Package (Tạo gói giao diện người dùng).
Khi đã chọn Gói giao diện người dùng, hãy thêm nội dung mô tả vào Tóm tắt. Ví dụ: "Thành phần Hello Card dùng để hiển thị nội dung hình ảnh và tiêu đề"
Nhấp vào Chia sẻ với nhà phát triển ở góc dưới bên phải của hộp thoại để chuyển sang màn hình tiếp theo.
Chia sẻ với quy trình của nhà phát triển
Bây giờ, bạn đã tạo gói giao diện người dùng, hãy chuẩn bị thành phần để chia sẻ với nhóm phát triển.
Tạo một phiên bản mới đã đặt tên cho tệp của tệp thành phần. Việc sử dụng các phiên bản đã đặt tên của thành phần giúp ngăn chặn những thay đổi không mong muốn ảnh hưởng đến các thành phần phát hành công khai.
Nhập tên và nội dung mô tả cho phiên bản đầu tiên này của thành phần, sau đó nhấp vào Lưu.
Tiếp theo, hãy tạo một đường liên kết thành phần có thể chia sẻ và sao chép đường liên kết đó vào bảng nhớ tạm bằng cách nhập CMD-L trên máy Mac hoặc CTRL-L trên Windows.
Bước tiếp theo
Bây giờ, bạn đã sẵn sàng chuyển giao thành phần giao diện người dùng sang Android Studio.
Mở Android Studio để hoàn thành phần tiếp theo của hướng dẫn này.
Chuyển đổi mẫu thiết kế thành mã trong Android Studio