Figma cho phép nhà thiết kế áp dụng kiểu cho thành phần thiết kế. Kiểu là tập hợp các thuộc tính có thể sử dụng lại, chẳng hạn như màu sắc hoặc kiểu chữ. Vì kiểu được xác định tập trung, nên nhóm thiết kế có thể xác định và cập nhật các thuộc tính trên tất cả thiết kế khi cập nhật một thành phần thiết kế riêng lẻ. Bạn có thể thiết lập tính năng Chuyển tiếp để dịch kiểu Figma sang giao diện của Jetpack Compose.
Ánh xạ giữa kiểu Figma và giao diện Compose được chỉ định thông qua tệp cấu hình.
Ví dụ: thiết kế Figma dưới đây sử dụng kiểu trong Bộ thiết kế Material 3 của Google. Đối với văn bản Chính – Tiêu đề lớn, phông chữ là M3/title/large và màu sắc là M3/sys/light/primary.
Nếu chúng ta nhập thiết kế đã bật tính năng dịch kiểu Bộ thiết kế M3, thì mã sau đây sẽ được tạo cho văn bản Chính – Tiêu đề lớn:
@Composable
fun PrimaryTitleLarge(modifier: Modifier = Modifier) {
Text(
content = "Primary - Title large",
fontSize = MaterialTheme.typography.titleLarge.fontSize,
fontFamily = MaterialTheme.typography.titleLarge.fontFamily,
color = MaterialTheme.colorScheme.primary,
height = MaterialTheme.typography.titleLarge.lineHeight,
letterSpacing = MaterialTheme.typography.titleLarge.letterSpacing,
textAlign = TextAlign.Left,
fontWeight = MaterialTheme.typography.titleLarge.fontWeight,
modifier = modifier
)
}
Để sử dụng tính năng này, hãy sử dụng các kiểu mà bạn thường dùng trong Figma. Sau đó, trong Android Studio, hãy chuyển đến File > New > Import UI Packages… (Tệp > Mới > Nhập gói giao diện người dùng…), rồi đánh dấu chọn Translate Figma styles to Compose theme (Dịch kiểu Figma sang giao diện Compose).
Tại bước này, bạn phải chọn cấu hình để dịch các kiểu thiết kế:
- Nếu các mẫu thiết kế đó lấy trực tiếp từ Bộ công cụ thiết kế Material 3 của Google
cho Figma (có định dạng
M3/body/medium or M3/sys/light/primary), rồi chọn mục cấu hình Bộ thiết kế Material 3. - Nếu các mẫu thiết kế đó lấy trực tiếp từ Bộ thiết kế Material 2 của Google
cho Figma (có định dạng
01. Primary/500 or Subtitle 1), thì chọn Tuỳ chọn Cấu hình Bộ thiết kế Material 2. Nếu bạn có định nghĩa kiểu của riêng mình, hãy chọn thẻ Tuỳ chỉnh cấu hình rồi chọn tệp chứa các liên kết giữa kiểu Figma và giao diện Compose (được mô tả trong phần này).
Nếu có kiểu trong thiết kế Figma không có trong cấu hình đã chọn, hộp thoại Nhập sẽ hiển thị cảnh báo đối với từng kiểu chưa được liên kết. Mỗi kiểu chưa được liên kết sẽ được dịch thành giá trị cố định. Ban đầu thì cảnh báo được thu gọn; hãy nhấp vào biểu ngữ cảnh báo để mở rộng. Mỗi cảnh báo có một đường liên kết đến lớp cụ thể trong tệp Figma là nguyên nhân của cảnh báo.
Sau khi nhập, cấu hình kiểu sẽ nằm trong Android Studio
dự án. Hãy tìm kiếm trong ui-package-resources/style-mappings
thư mục.
Tệp cấu hình cho bản dịch tuỳ chỉnh
Quá trình dịch kiểu Figma sang giao diện Compose gồm hai bước:
- Kiểu Figma trong Gói giao diện người dùng được dịch sang mã thông báo thiết kế trong tệp JSON định nghĩa Gói giao diện người dùng. Tệp này nằm ở thư mục Gói giao diện người dùng trong dự án Android Studio.
- Mã thông báo thiết kế trong tệp định nghĩa Gói giao diện người dùng sẽ được dịch sang một đoạn mã của giao diện Compose trong dự án Android Studio.
Định dạng của tệp cấu hình tuỳ chỉnh (ở định dạng JSON) phản ánh hai bước này. Dưới đây là ví dụ về một tệp cấu hình tuỳ chỉnh đơn giản chỉ xử lý các màu:
{
"figma": {
"colors": {
"my-app-theme/sys/light/primary": "myapp.sys.color.primary",
"my-app-theme/sys/light/primary-container": "myapp.sys.color.primary-container",
"my-app-theme/sys/light/background": "myapp.sys.color.background",
"my-app-theme/sys/light/on-background": "myapp.sys.color.on-background",
"my-app-theme/sys/dark/background": "myapp.sys.color.background",
"my-app-theme/sys/dark/on-background": "myapp.sys.color.on-background"
}
},
"compose": {
"colors": {
"myapp.sys.color.primary": "MaterialTheme.colorScheme.primary",
"myapp.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
"myapp.sys.color.background": "MaterialTheme.colorScheme.background",
"myapp.sys.color.on-background": "MaterialTheme.colorScheme.onBackground"
},
"options": {
"packages": {
"MaterialTheme": "androidx.compose.material3"
}
}
}
}
Có hai phần cấp cao nhất, figma (chỉ định bước 1) và compose (chỉ định bước 2). Cả hai đều có phần colors:
- Phần
colorscủafigmachỉ định một kiểu Figma và mã thông báo thiết kế tương ứng sẽ được ghi vào tệp định nghĩa Gói giao diện người dùng. - Phần
colorscủacomposechỉ định một mã thông báo thiết kế trong tệp định nghĩa Gói giao diện người dùng và đoạn mã tương ứng sẽ được ghi vào mã Compose.
Trong cấu hình ví dụ trên, mọi thành phần sử dụng màu my-app-theme/sys/light/primary trong Figma đều có màu được viết là myapp.sys.color.primary trong tệp định nghĩa Gói giao diện người dùng. Sau đó, trong quá trình tạo mã, màu đó được viết là MaterialTheme.colorScheme.primary trong Compose.
Phần compose cũng chứa phần options (cho biết gói có chứa một biểu tượng mã cụ thể). Ví dụ ở trên cho biết rằng MaterialTheme nằm trong gói androidx.compose.material3. Do đó, bạn nên nhập gói này vào mọi mã đã tạo.
Việc liên kết kiểu chữ phức tạp nhiều hơn một chút so với các kiểu màu. Sau đây là ví dụ ở trên, nhưng đã thêm các kiểu chữ kiểu chữ:
{
"figma": {
"colors": {
"my-app-theme/sys/light/primary": "myapp.sys.color.primary",
"my-app-theme/sys/light/primary-container": "myapp.sys.color.primary-container",
"my-app-theme/sys/light/background": "myapp.sys.color.background",
"my-app-theme/sys/light/on-background": "myapp.sys.color.on-background",
"my-app-theme/sys/dark/background": "myapp.sys.color.background",
"my-app-theme/sys/dark/on-background": "myapp.sys.color.on-background"
},
"typography": {
"symbols": {
"my-app-theme/headline/large": "myapp.sys.typescale.headline-large",
"my-app-theme/body/medium": "myapp.sys.typescale.body-medium"
},
"subproperties": {
"fontFamily": "font",
"fontWeight": "weight",
"fontSize": "size",
"letterSpacing": "tracking",
"lineHeightPx": "line-height"
}
}
},
"compose": {
"colors": {
"myapp.sys.color.primary": "MaterialTheme.colorScheme.primary",
"myapp.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
"myapp.sys.color.background": "MaterialTheme.colorScheme.background",
"myapp.sys.color.on-background": "MaterialTheme.colorScheme.onBackground"
},
"typography": {
"symbols": {
"myapp.sys.typescale.headline-large": "MaterialTheme.typography.headlineLarge",
"myapp.sys.typescale.body-medium": "MaterialTheme.typography.bodyMedium"
},
"subproperties": {
"font": "fontFamily",
"weight": "fontWeight",
"size": "fontSize",
"tracking": "letterSpacing",
"line-height": "lineHeight"
}
},
"options": {
"packages": {
"MaterialTheme": "androidx.compose.material3"
}
}
}
}
Cấu trúc của phần kiểu chữ phản ánh rằng kiểu chữ được tạo thành từ nhiều tài sản phụ. Trong Figma và Compose, kiểu chữ bao gồm tên, kiểu chữ, độ đậm, kích thước, khoảng cách chữ cái và chiều cao kiểu chữ, cùng nhiều yếu tố khác. Thay vì phải liên kết các tài sản phụ riêng lẻ của từng kiểu nhiều lần, chúng ta liên kết toàn bộ kiểu với mã thông báo và giao diện, sau đó liên kết riêng từng tài sản phụ.
Ví dụ trên cho biết khi một mục văn bản Figma mang kiểu my-app-theme/headline/large được ghi vào tệp định nghĩa gói giao diện người dùng, phông chữ của văn bản làmyapp.sys.typescale.headline-large.font, kích thước của văn bản này là myapp.sys.typescale.headline-large.size, v.v. Sau đó, khi mã Compose được tạo, một thành phần kết hợp RelayText (bao gồm thành phần kết hợp Text trong Compose Material) được tạo, trong đó tham số font là MaterialTheme.typography.headlineLarge.fontFamily, tham số size là MaterialTheme.typography.headlineLarge.fontSize, v.v.
Để biết ví dụ về tệp cấu hình, bạn có thể xem cấu hình Bộ thiết kế Material 3 và Material 2 tích hợp sẵn. Các cấu hình này sử dụng chính xác định dạng. Bạn có thể tải các tệp xuống tại đây:
Các điểm hạn chế
Hiện tại, có một số trường hợp mà các kiểu không được dịch sang chủ đề:
- Kiểu văn bản chỉ áp dụng cho một phần của thành phần văn bản (như mô tả trong Nhiều kiểu trong văn bản)
- Bạn chỉ cần dịch một kiểu, nếu có nhiều kiểu áp dụng cho các biến thể khác nhau của một thành phần.
Đề xuất cho bạn
- Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
- Những điểm khác cần cân nhắc
- Kotlin cho Jetpack Compose
- Dữ liệu trong phạm vi cục bộ với CompositionLocal