Relay gồm ba phần, mỗi phần phải được cài đặt riêng biệt:
- Trình bổ trợ Relay for Figma (Relay cho Figma)
- Trình bổ trợ Relay for Android Studio (Chuyển tiếp cho Android Studio)
- Trình bổ trợ Relay Gradle (Chuyển tiếp cho Gradle)
Điều kiện tiên quyết
- Bạn phải đăng nhập vào Tài khoản Figma.
- Bạn đã cài đặt Android Studio 2022.2.1 Flamingo trở lên.
- Bạn đã cài đặt Java Runtime.
- Bạn đang sử dụng Jetpack Compose phiên bản 1.2 trở lên.
- Bạn đang sử dụng trình bổ trợ Gradle phiên bản 8.0 trở lên.
Cài đặt trình bổ trợ Relay for Figma (Chuyển tiếp cho Figma)
Trình bổ trợ Chuyển tiếp cho Figma cho phép mọi đối tượng làm việc trong Figma chú thích và chia sẻ thiết kế với các nhà phát triển đang dùng Android Studio và Jetpack Compose.
Trình bổ trợ Relay cho Figma được phát hành lên trang web thương mại dành cho trình bổ trợ cộng đồng của Figma. Cách cài đặt trình bổ trợ:
- Truy cập trang trình bổ trợ Chuyển tiếp cho Figma trên trang web của Figma.
Ở góc trên cùng bên phải trang, nhấp vào Try it out (Dùng thử).
Bạn có thể thấy hộp thoại hỏi xem bạn có muốn sử dụng trình bổ trợ này không. Trong hộp thoại, hãy chọn tổ chức của bạn. Trong một số ít trường hợp, tổ chức của bạn có thể tắt các trình bổ trợ công khai. Nếu có, chọn tuỳ chọn External teams (Nhóm bên ngoài).
Thao tác này sẽ mở một tệp Figma hiện trang thông tin về trình bổ trợ. Nhấp vào ... rồi chọn Save (Lưu) để đảm bảo bạn có thể dễ dàng sử dụng lại trình bổ trợ này.
Giờ nhấp vào Run (Chạy):
Bạn có thể xem trình bổ trợ đang chạy trong canvas của Figma:
Cài đặt trình bổ trợ Relay for Android Studio (Chuyển tiếp cho Android Studio)
Trình bổ trợ Relay for Android Studio (Relay cho Android Studio) cho phép nhà phát triển dùng Android Studio để nhập các thiết kế đã được chú thích bằng thông tin ý định thiết kế sử dụng trình bổ trợ Relay for Figma (Replay cho Figma). Trình bổ trợ này được phát hành lên trang web thương mại về trình bổ trợ của Android Studio. Cách cài đặt:
- Mở Android Studio.
- Trên trình đơn chính:
- Đối với macOS, hãy chọn Android Studio > Preferences (Android Studio > Tuỳ chọn).
- Đối với Windows và Linux, hãy chọn File > Settings (Tệp > Cài đặt).
- Chọn Plugins (Trình bổ trợ).
Chọn thẻ Marketplace, tìm: “Relay for Android Studio” (Trình Chuyển tiếp cho Android Studio) rồi chọn trình bổ trợ do Google phát hành:
Nhấp vào Install (Cài đặt).
Khi quá trình cài đặt hoàn tất, nhấp vào Restart IDE (Khởi động lại IDE).
Để xác nhận việc cài đặt đã thành công, hãy mở Preferences (Tuỳ chọn) hoặc Settings (Cài đặt), sau đó chuyển đến Plugins (Trình bổ trợ). Bạn sẽ thấy Relay for Android Studio (Chuyển tiếp cho Android Studio) liệt kê trong phần Installed (Đã cài đặt).
Cài đặt trình bổ trợ Relay Gradle (Chuyển tiếp cho Gradle)
Trình bổ trợ Relay Gradle đảm bảo các thiết kế trong Figma được chú thích bằng thông tin ý định thiết kế qua trình bổ trợ Relay for Figma (Relay cho Figma) được chuyển đổi chính xác thành mã trong quá trình tạo bản dựng.
Trình bổ trợ Chuyển tiếp cho Gradle được phát hành lên Google Maven, một máy chủ chứa các trình bổ trợ Gradle. Theo mặc định, Android Studio sẽ gọi các thao tác Gradle. Các thao tác đó bao gồm tải xuống và cài đặt mọi phần phụ thuộc mà dự án tham chiếu.
Để đảm bảo Android Studio cũng như chính tiện ích Gradle sẽ tải và cài đặt trình bổ trợ Relay Gradle, bạn cần chỉ định trình bổ trợ này là phần phụ thuộc trong dự án, cụ thể là trong tệp build.gradle trong thư mục của mô-đun. Thư mục này thường nằm trong app/build.gradle.
Ở đầu tệp app/build.gradle là phần liệt kê tất cả trình bổ trợ đang sử dụng. Thêm trình bổ trợ Chuyển tiếp cho Gradle vào danh sách này, sau đó Gradle sẽ xử lý việc tải và cài đặt trình bổ trợ. Ví dụ:
plugins {
id 'com.android.application'
id 'kotlin-android'
id 'com.google.relay' version '0.3.11'
}
Ngoài ra, đảm bảo tệp settings.gradle của bạn có mục sau:
pluginManagement {
repositories {
gradlePluginPortal()
google()
mavenCentral()
}
}
Bạn cũng có thể sử dụng Dự án được định cấu hình sẵn, bao gồm cả cấu hình đã nêu ở trên.
Thiết lập quyền cài đặt Figma
Trình bổ trợ Chuyển tiếp yêu cầu mã truy cập cá nhân của Figma để có thể tải các thiết kế Figma và chuyển đổi thành mã. Nếu bạn chưa có mã truy cập này:
- Mở và đăng nhập vào Figma.
- Chuyển đến trình duyệt tệp .
Nhấp vào biểu tượng tài khoản rồi chọn Settings (Cài đặt).
Di chuyển xuống phần Personal access tokens (Mã truy cập cá nhân).
Nhập nội dung mô tả mã thông báo, ví dụ: "Relay" ("Chuyển tiếp") rồi nhập Return (Trả về). Mã thông báo được tạo. Nhấp vào Copy this token (Sao chép mã thông báo này).
Trong Android Studio, trên trình đơn chính, hãy chọn Tools > Relay Settings (Công cụ > Cài đặt trình chuyển tiếp).
Nếu đã thiết lập mã truy cập Figma trên macOS trước đây, bạn có thể thấy hộp thoại sau. Hộp thoại này cho bạn biết rằng Android Studio đang sử dụng mã truy cập Figma hiện có của bạn. Nhập mật khẩu rồi nhấp vào Luôn cho phép.
Dán mã truy cập Figma vào đầu vào Figma Access Token (Mã truy cập Figma). (Nếu đây không phải lần đầu tiên thiết lập mã truy cập Figma, bạn có thể thấy đầu vào Existing Figma Access Token (Mã truy cập Figma hiện tại).)
Nhấp vào OK.
Tải và thiết lập dự án được định cấu hình sẵn
Cách tải và thiết lập một dự án được định cấu hình sẵn:
- Tải tệp ZIP của dự án xuống.
- Nhấp đúp vào tệp đó để giải nén. Thao tác này sẽ tạo một thư mục có tên HelloFigma. Chuyển tệp này sang thư mục gốc.
- Quay lại Android Studio. Truy cập File > Open (Tệp > Mở), chuyển đến thư mục gốc, chọn HelloFigma rồi nhấp vào Open (Mở).
- Khi mở dự án, Android Studio có thể hỏi xem bạn có tin tưởng dự án này không. Nhấp vào Trust Project (Tin tưởng dự án).
Chạy dự án được định cấu hình sẵn
Chạy ứng dụng trên trình mô phỏng hoặc thiết bị. Bạn sẽ thấy "Hello, Android!" trên màn hình trống.
Bước tiếp theo
Giờ chúng ta đã sẵn sàng tạo các thiết kế đầu tiên bằng trình Chuyển tiếp.
Đề xuất cho bạn
- Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
- Thiết lập dự án Android
- Kiểm thử bố cục Compose
- Vị trí để chuyển trạng thái lên trên