Tạo một kiểu để lưu trữ cài đặt văn bản hoặc fill (chẳng hạn như màu sắc, gradient, hoặc ảnh nền), và tái sử dụng nó trên các phần tử ở nhiều màn hình. Khi bạn chỉnh sửa một kiểu, thay đổi đó sẽ ảnh hưởng đến mọi phần tử và màn hình đang sử dụng nó.

Mỗi flow có bộ kiểu riêng của mình.

Mở bảng Styles để tạo, duyệt và chỉnh sửa các style cho flow của bạn:

• Text styles: Cài đặt kiểu chữ (phông, độ đậm, cỡ chữ).
• Color styles: Màu nền, chẳng hạn như màu sắc, gradient và hình ảnh. Một color style có thể có các phiên bản riêng cho chế độ sáng và chế độ tối.

Kiểu chữ

Kiểu chữ lưu trữ một bộ cài đặt typography — họ phông chữ, độ đậm, kích thước, chiều cao dòng và khoảng cách chữ cái. Mỗi template flow đều có các preset mặc định, và bạn có thể tạo thêm kiểu tùy chỉnh.

Để tạo một kiểu chữ:

1. Mở bảng Styles .
2. Trong tiêu đề bảng, nhấn Create style.
3. Đặt Type thành Text, nhập tên và cấu hình các thiết lập typography.
4. Nhấn Create.

Để lưu các thiết lập typography hiện tại của một phần tử văn bản thành một text style mới, nhấn bên cạnh các tab của font picker. Phần tử đó sẽ sử dụng style mới.

Để áp dụng một text style, chọn phần tử văn bản và chọn style từ dropdown font trong mục Typography.

Để chỉnh sửa kiểu chữ, nhấp vào mục tương ứng trong bảng Styles, thay đổi cài đặt, rồi nhấp Save.

Màu sắc theo style

Một color style là một fill đã được lưu: màu đơn, gradient, hình ảnh, video hoặc kết hợp nhiều loại. Nếu bạn dùng dark theme, style đó có thể có các phiên bản riêng cho từng theme. Con số trong mục style cho biết có bao nhiêu phần tử và màn hình đang sử dụng nó.

Tạo một color style

Để tạo một color style:

1. Mở bảng Styles .
2. Trong phần tiêu đề bảng, nhấp vào Create style.
3. Đặt Type thành Color và nhập tên.
4. Thiết lập style. Bạn có thể thay đổi màu sắc hoặc loại fill của layer, và thêm nhiều layer hơn lên trên nó.
5. Nhấp vào Save.

Để chuyển giá trị hiện tại của một fill layer hoặc màu sắc thành một style, hãy nhấp vào ô màu của nó, sau đó nhấp vào biểu tượng bên cạnh tab Custom và Styles, rồi nhấp Save. Fill layer hoặc màu sắc đó giờ sẽ sử dụng style vừa tạo.

Chỉnh sửa một color style

Để chỉnh sửa một color style:

1. Mở panel Styles .
2. Chọn tab Colors.
3. Nhấp vào một mục style.
4. Mỗi version có thể chứa nhiều layer. Nhấp vào ô màu để đặt layer theo loại fill của nó:
   • Màu đồng nhất
   • Gradient
   • Hình ảnh hoặc video

Màu đồng nhất

1. Đặt màu: nhập giá trị hex, hoặc nhấp vào ô màu và chọn màu.
2. Đặt độ mờ bằng thanh trượt.
3. Nhấp Save.

Gradient

1. Chọn loại fill Gradient.
2. Đặt các điểm dừng, màu tại điểm dừng, và Direction.
3. Nhấp Save.

Hình ảnh và video

Phần tử Image hoặc Video không thể có file riêng cho theme tối. Thay vào đó, hãy tạo một container và đặt nền của nó thành một color style. Trong mỗi phiên bản của style, hãy thiết lập một layer image hoặc video:

1. Chọn kiểu fill Image hoặc Video.
2. Tải lên file nguồn cho ngôn ngữ được chọn trong thanh công cụ phía dưới. Bạn có thể nhấn Replace nếu đã có file được tải lên trước đó.
3. Nhấn Save.

Kiểu nhiều lớp

Mỗi phiên bản của một kiểu màu có thể chứa nhiều lớp. Bạn có thể dùng kiểu nhiều lớp để tạo ra các hiệu ứng hình ảnh phức tạp hơn, chẳng hạn như hình ảnh có tông màu phủ lên.

Để thêm một layer, nhấp vào mục style. Sau đó, trong phần Properties, Light, hoặc Dark, nhấp vào nút . Một layer mới sẽ xuất hiện phía trên các layer hiện có. Để thay đổi thứ tự các layer, kéo các hàng của chúng. Thiết lập layer mới, rồi nhấp Save.

Không phải tất cả các layer đều hiển thị ở mọi nơi bạn áp dụng style. Một số layer chỉ hiển thị khi bạn áp dụng style cho các thuộc tính hoặc phần tử nhất định:

• Fill (inputs và pickers): Chỉ lớp dưới cùng. Các lớp khác bị bỏ qua.
• Fill (tất cả các phần tử khác): Mọi lớp.
• Border (inputs và pickers): Chỉ một màu đơn hoặc gradient. Các lớp hình ảnh và video bị bỏ qua.
• Border (tất cả các phần tử khác): Màu đơn và gradient. Các lớp hình ảnh và video bị bỏ qua.
• Màu văn bản: Chỉ các lớp màu đơn. Các lớp gradient, hình ảnh và video bị bỏ qua. Nếu một phiên bản không có lớp màu đơn nào, văn bản sẽ không có màu trong chế độ đó và không hiển thị.
• Icon, shadow và các màu khác: Không hỗ trợ style nhiều lớp. Bạn chỉ có thể áp dụng style một lớp duy nhất với màu đơn.

Áp dụng style màu sắc

Để áp dụng style màu sắc cho một phần tử, hãy nhấp vào ô màu trong layer fill, màu chữ, màu viền, hoặc màu icon của phần tử đó. Thay thế giá trị tĩnh bằng style bằng cách nhấp vào tab Styles và chọn style phù hợp. Nếu không có style nào có giá trị bạn cần, hãy lưu giá trị hiện tại thành một style.

Để áp dụng style cho nhiều phần tử trên một màn hình, hãy hỏi AI Editor, ví dụ: Apply the Card background style to all cards. Để thiết lập style và áp dụng chúng cho toàn bộ flow, hãy sử dụng flow-generator skill.

Bạn không thể áp dụng kiểu màu cho phần tử Hình ảnh hoặc Video, vì những phần tử này không có fill. Thay vào đó, hãy tạo một container và đặt nền cho nó.

Quản lý styles

Trong bảng Styles :

• Để đổi tên một style, nhấp vào mục đó, thay đổi trường Name, rồi nhấp Save.
• Để nhân đôi một style, nhấp chuột phải vào mục đó và chọn Duplicate.
• Để xóa một style, nhấp vào mục đó rồi nhấp Delete style. Khi bạn xóa một style đang được các phần tử sử dụng, hãy chọn style thay thế cho nó.
• Để thay đổi thứ tự các style, kéo các mục lên hoặc xuống trong danh sách.
• Để sao chép style sang một flow khác, chọn các mục (Shift-click để chọn nhiều mục) rồi nhấn ⌘C / Ctrl+C. Mở tab tương ứng (Text hoặc Colors) trong flow kia và nhấn ⌘V / Ctrl+V.

Chế độ tối

Một kiểu màu có thể có giá trị riêng cho chế độ tối. Khi thiết bị của người dùng được đặt sang chế độ tối, flow sẽ sử dụng giá trị đó thay thế.

Để sử dụng giá trị tối, thêm giao diện tối vào flow. Sau đó thay đổi giá trị tối của từng kiểu cần hiển thị khác đi trong chế độ tối.