Cách tạo nội dung có thể cuộn trong Figma

Làm cho nội dung của bạn có thể cuộn được trong Figma liên quan đến việc điều hướng tab bên. Thật không may, nó không tự động xuất hiện trên giao diện người dùng chính. Nội dung có thể cuộn rất hữu ích khi bạn muốn trình bày nhiều thông tin trong khung thiết kế của mình. Một số ví dụ bao gồm trang đích, giao diện ứng dụng hoặc cửa sổ bật lên.

Bài viết này sẽ giải thích cách làm cho các thiết kế Figma của bạn có thể cuộn được.

Lắp một văn bản có thể cuộn trong một hình dạng

Hãy bắt đầu bằng cách tạo văn bản có thể cuộn trong một hình dạng đơn giản. Đây là ví dụ phổ biến nhất về văn bản có thể cuộn và sau đó bạn có thể thêm các đặc tính khác như màu sắc, phông chữ và đường viền.

Đây là cách nó được thực hiện:

Tạo một hình dạng cơ bản. Đối với ví dụ này, chúng tôi khuyên bạn nên tạo một hình chữ nhật dọc. Bạn có thể làm như vậy bằng cách chọn công cụ hình chữ nhật ở thanh bên trái hoặc sử dụng lệnh “R”. Giữ bên trái, nhấp vào điểm canvas và vẽ hình.
Trên thanh bên phải, dưới tab thiết kế, hãy đánh dấu bên cạnh tùy chọn “nội dung clip”.
Chọn công cụ văn bản để tạo hộp văn bản và đặt nó vào khung có thể cuộn được. Nhập hoặc sao chép-dán bất kỳ nội dung nào bạn đang sử dụng.
Chọn khung và chuyển đến tab nguyên mẫu ở bên phải giao diện của bạn. Sau đó, chọn tùy chọn “cuộn tràn” và kiểu bạn thích. Ở đây chúng ta sẽ chọn “cuộn dọc”.

Khi bạn nhấp vào tùy chọn cuộn tràn trên tab nguyên mẫu, sẽ có nhiều kiểu. Chúng tôi chọn hình dọc vì chúng tôi đang sử dụng hình chữ nhật dọc làm ví dụ. Điều này cho phép bạn đọc qua văn bản từ trên xuống dưới. Một số phong cách khác bao gồm:

Cuộn ngang – Người dùng có thể cuộn văn bản của họ từ trái sang phải trong một số ví dụ. Tùy chọn này thích hợp hơn nếu bạn đang tạo các thiết kế ở định dạng cảnh quan.
Không cuộn – Nếu bạn muốn khóa nội dung của mình tại chỗ, hãy chọn tùy chọn không cuộn.
Cả hai hướng – Tạo một thiết kế có nhiều nội dung và cuộn theo cả chiều dọc và chiều ngang.

Bạn nên sử dụng các tính năng có thể cuộn trong thiết kế của mình để giảm thiểu nỗ lực (nhấp chuột) mà người đọc của bạn sử dụng khi tương tác với nội dung. Họ có thể vuốt hoặc sử dụng bánh xe chuột thay vì nhấp hoặc nhấn qua hàng tấn văn bản.

Cách thiết kế các thành phần có thể cuộn của bạn

Tùy thuộc vào sản phẩm của bạn, bạn sẽ cần thiết kế khung nội dung và chính nội dung đó. Quá trình này bao gồm việc thêm màu sắc, phông chữ và các thành phần tiềm năng khác vào thiết kế tổng thể. Thay đổi những yếu tố này thật dễ dàng, nhưng việc lựa chọn tính thẩm mỹ phù hợp đòi hỏi phải cân nhắc cẩn thận.

whatsapp tích tắc duy nhất trong một thời gian dài

Cách thay đổi phông chữ của thiết kế có thể cuộn của bạn

Điều đầu tiên bạn cần làm là thay đổi phông chữ trên thiết kế có thể cuộn của mình. Figma cung cấp nhiều kiểu dáng cho bạn lựa chọn. Đây là phương pháp đơn giản nhất:

Chọn nội dung trong khung có thể cuộn mà bạn muốn thay đổi.
Điều hướng đến menu thả xuống nằm ở trên cùng bên trái và chọn nó.
Cuộn qua các phông chữ cho đến khi bạn tìm thấy phông chữ mình muốn sử dụng.

Nếu thương hiệu bạn đang thiết kế có một kiểu chữ cụ thể, bạn có thể sẽ chọn kiểu chữ tương tự để nó phù hợp với hình ảnh thương hiệu. Nếu bạn có nhiều khoảng trống hơn, bạn nên thử nghiệm với các ví dụ khác nhau trước khi chọn đúng.

Một số cân nhắc bao gồm:

Mục đích thiết kế – Việc chọn kiểu chữ phải phù hợp với mục đích thiết kế của bạn. Nếu bạn muốn truyền tải nhiều thông tin một cách rõ ràng, hãy nhắm đến những phông chữ ít trang trí hơn nhưng vẫn trang nhã.
Các thành phần khác – Phông chữ của bạn là một yếu tố trực quan giống như bất kỳ yếu tố nào khác trong thiết kế của bạn. Nó phải phù hợp với khung và các thành phần khác mà bạn đưa vào.
Thẩm mỹ tổng thể và thương hiệu – Cảm nhận chung về thương hiệu cũng sẽ ảnh hưởng đến phông chữ bạn đã chọn. Ví dụ: dịch vụ giao hoa sẽ không có phông chữ giống như trang đích SAAS.

Mặc dù việc chọn đúng phông chữ có thể cần một số thử nghiệm nhưng một số ví dụ về phông chữ cụ thể là những lựa chọn đáng tin cậy nhất:

Roboto – Nếu bạn muốn chơi an toàn thì hãy sử dụng Roboto. Nó được coi là một phông chữ linh hoạt và trung tính với nhiều ứng dụng. Vì rất dễ hiểu nên nhiều người chọn Roboto để làm hướng dẫn và trang đích.
Poppins – Để có sự hấp dẫn thân thiện nhưng hiện đại và sạch sẽ, hãy chọn Poppins. Phông chữ này tròn trịa hơn và làm cho văn bản trở nên hấp dẫn và dễ đọc.
Raleway – Khi thiết kế cho một thương hiệu sang trọng tinh tế, bạn có thể muốn xem xét Raleway. Nhìn chung, nó mỏng nhưng có trọng lượng khác nhau và vẻ ngoài thanh lịch tổng thể.
Lato – Thân thiện, đáng tin cậy và nghiêm túc là những từ thích hợp để mô tả về phông chữ này. Các nhà thiết kế có thể sử dụng Lato cho các tiêu đề và đoạn văn bản mà tính dễ đọc và rõ ràng là mối quan tâm hàng đầu.

Bạn cũng sẽ muốn xem xét kích thước phông chữ và kiểu văn bản đã chọn của mình. Nói chung, chữ in đậm được sử dụng cho tiêu đề hoặc phần nhấn mạnh, trong khi chữ in nghiêng được sử dụng cho dấu ngoặc kép.

Thay đổi màu của hình dạng khung

Bên cạnh việc thay đổi phông chữ, bạn cũng sẽ muốn thay đổi màu của hình dạng khung. Một lần nữa, màu sắc chính xác sẽ phụ thuộc vào thương hiệu bạn đang thiết kế hoặc tính thẩm mỹ của bạn. May mắn thay, giao diện của Figma giúp việc chọn màu trở nên dễ dàng.

Đây là cách bạn có thể thay đổi màu khung của mình:

Chọn khung bạn muốn chỉnh sửa.
Lớp này sẽ xuất hiện trên thanh bên phải. Điều hướng đến phần “điền vào”.
Chọn dấu “+” để thêm phần điền.
Một cửa sổ chọn màu sẽ mở ra. Chọn màu tô và độ dốc. Bạn cũng có thể nhập mã hex nếu bạn biết chính xác màu sắc.

Cũng như các yếu tố thiết kế khác, bạn có thể cần thử nghiệm các màu sắc khác nhau và giao diện của chúng với phông chữ bạn đã chọn.

Câu hỏi thường gặp

Có lệnh văn bản có thể cuộn trong Figma không?

làm thế nào để kết nối sự bất hòa và co giật

Thật không may, không có lệnh nào để làm cho văn bản có thể cuộn được trong Figma. Tuy nhiên, bạn có thể hoàn tất quy trình chỉ sau vài cú nhấp chuột bằng phương pháp nêu trên.

Làm cách nào để quyết định tùy chọn tràn nào tôi muốn?

Điều đó phụ thuộc vào loại văn bản bạn đang sử dụng, thiết kế tổng thể và chức năng của nó. Kiểu dọc thường phù hợp để đọc lướt qua các văn bản lớn.

Giao diện thiết bị nào thường sẽ cần thiết kế văn bản có thể cuộn được?

phản chiếu màn hình fire hd 10 thế hệ thứ 7

Một ví dụ điển hình là thiết kế mô hình cho một ứng dụng. Người dùng có thể tạo một chiếc điện thoại làm khung chung, trong khi văn bản có thể cuộn có thể là giao diện của ứng dụng.

Figma có phải là lựa chọn tốt nhất để tạo các thiết kế có thể cuộn được không?

Figma là một trong những công cụ tốt nhất để tạo ra nhiều loại biểu mẫu, bao gồm cả các thiết kế có thể cuộn được. Còn tốt hơn nữa, Figma hoàn toàn miễn phí. Tuy nhiên, bạn có thể có những sở thích cá nhân nhất định. Hãy thử trải nghiệm một vài nền tảng, chẳng hạn như Adobe Illustrator, cho đến khi bạn tìm thấy công cụ phù hợp nhất với mình.

Làm cho thiết kế của bạn có thể cuộn và thân thiện với người dùng

Tạo bất kỳ văn bản nào trong khung trong Figma thật dễ dàng. Chỉ cần chọn khung rồi di chuyển đến tùy chọn nội dung clip. Sau khi hoàn tất, bạn có thể chọn các tùy chọn cuộn tràn. Tương tự như vậy, bạn không nên bỏ qua các yếu tố thiết kế quan trọng khác, chẳng hạn như màu sắc, hình dạng khung và phông chữ văn bản. Làm cho thiết kế của bạn có thể cuộn được là một lựa chọn tuyệt vời cho trang đích, giao diện ứng dụng và cửa sổ bật lên. Nó làm cho văn bản dễ dàng lướt qua thay vì nhấp chuột, cuối cùng là nâng cao trải nghiệm người dùng.

Bạn có thấy dễ dàng làm cho nội dung của mình có thể cuộn được trong Figma không? Còn việc chọn đúng phông chữ thì sao? Cho chúng tôi biết trong phần ý kiến dưới đây.