Cách tạo một nút trong Figma
Các nút thiết kế trên Figma có thể được tạo theo nhiều cách khác nhau bằng cách sử dụng các thuộc tính thành phần và bố cục tự động trên nền tảng. Như vậy, các nút có thể được tùy chỉnh bằng cách sử dụng nhãn, kích thước và biểu tượng. Nếu bạn không chắc chắn về cách tạo nút trên Figma, thì bạn đã đến đúng chỗ.
Bài viết này sẽ giải thích cách tạo nút và cách tận dụng tối đa Figma.
Tạo nút
Nút là thành phần phổ biến được sử dụng khi thiết kế giao diện người dùng chức năng. Bạn có thể tạo một nút trong thiết kế Figma. Nếu mới sử dụng Figma, trước tiên bạn phải nắm được những điều cơ bản.
Dưới đây là hướng dẫn từng bước để tạo nút:
Tạo thiết kế Figma mới.
Thêm khung bằng cách nhấn phím F trên bàn phím, sau đó chọn “máy tính để bàn”hoặc “điện thoại”.
Thêm hình chữ nhật có kích thước chiều cao 50px và chiều rộng 200px bằng phím R trên bàn phím.
Thêm văn bản bằng cách nhấn “T”trên bàn phím. Căn giữa văn bản của bạn sao cho văn bản ở giữa hộp văn bản của bạn theo chiều ngang và chiều dọc.
Đặt hộp văn bản này vào giữa hình chữ nhật của bạn.
Nhóm các thành phần theo ý muốn của bạn.
Bạn có thể thêm màu bằng cách tạo một số màu bằng công cụ chọn màu hoặc bạn có thể truy cập các màu thập lục phân từ internet.
Độ tương phản
Màu văn bản trong nút phụ thuộc vào việc nó có tương phản tốt hơn không với nền đen hoặc trắng. Bạn có thể sử dụng cả hai tùy chọn để xem cái nào hoạt động tốt nhất. Nếu không thích bất kỳ tùy chọn nào, bạn có thể điều chỉnh kiểu và màu của nút.
Tạo các nút cơ bản
Có ba nút cơ bản có thể được tạo trên Figma.
Nút chính
Các nút chính có màu đồng nhất với văn bản màu đen hoặc trắng. Nút này thu hút người dùng khi họ sử dụng một ứng dụng. Đây là cách bạn có thể tạo một nút:
Chọn màu cho nút của bạn. Chọn hình chữ nhật, sau đó áp dụng màu đã chọn.
Màu văn bản trắng hoặc đen, tùy theo độ tương phản tốt hơn.
Nút phụ
Đây thường là nút màu trắng nhưng được viền bằng màu bạn chọn. Văn bản nút cũng có thể có cùng màu. Đây là nút quan trọng thứ hai mà bạn có thể tạo. Nó cũng sẽ thu hút ánh nhìn của người dùng.
Thay đổi màu của hình chữ nhật thành màu trắng (#FFFFFF).
Trong hình chữ nhật, thêm một nét. Bạn có thể chọn màu mình thích tại đây.
Thay đổi màu văn bản của bạn để có cùng màu với văn bản.
Nút cấp ba
Các nút thứ ba không quan trọng bằng hai nút đầu tiên. Chúng có thể hoạt động như các nút liên kết, hủy đăng ký hoặc quay lại. Chúng thường ở dạng văn bản thuần túy và có thể được gạch dưới trong một số trường hợp.
Làm cho hình chữ nhật của bạn có màu trắng không có nét.
Thay đổi màu văn bản thành màu bạn thích.
Bạn có thể tạo nút cấp ba giống với nút chính hoặc nút phụ. Bạn cũng có thể thay đổi độ rộng nét vẽ để có khả năng hiển thị tốt hơn.
Tạo Nút bằng Văn bản, Bố cục Tự động và Màu sắc
Với các công cụ trên nền tảng, bạn có thể thực hành kinh nghiệm sử dụng Auto Layout và Text Tool. Với hướng dẫn từng bước, việc tạo một nút sẽ tương đối đơn giản để đạt được. Để tạo nút, bạn cần tạo lớp văn bản, chuyển đổi lớp văn bản thành khung bố cục tự động và tạo kiểu cho nút.
Tạo lớp văn bản
Trong bước này, công cụ văn bản được sử dụng.
Nhấn vào công cụ văn bản trên thanh công cụ hoặc nhấn chữ “T.”
Khi công cụ Văn bản đang hoạt động, hãy nhấn vào canvas của bạn và nhập từ”Nút.”Lưu ý rằng tên lớp văn bản sẽ khớp với bất kỳ nội dung nào được nhập trên canvas trừ khi nó được thay đổi theo cách thủ công trong bảng điều khiển lớp.
Nếu cần thay đổi tên lớp, hãy nhấp đúp vào thanh bên trái, sau đó nhập tên mới mà bạn đã chọn.
Giờ đây, bạn cũng có thể điều chỉnh kích thước phông chữ bằng cách tăng hoặc giảm kích thước phông chữ.
Chọn lớp văn bản của bạn. 
Điều hướng đến thanh bên phải và thay đổi kích thước phông chữ trên phần “Văn bản”. Bạn cũng có thể thay đổi phông chữ hoặc sử dụng tùy chọn mặc định.
Chuyển đổi lớp văn bản của bạn thành khung bố cục tự động
Tại thời điểm này, nút cần được tinh chỉnh thêm để làm cho nó trông bắt mắt. Với bố cục tự động, bạn có thể thêm gia vị cho mọi thứ. Bố cục tự động là một tính năng mạnh mẽ trên Figma và có thể được áp dụng cho các thiết kế đáp ứng. Những thiết kế này tự động thích ứng với những thay đổi như kích thước nội dung, vị trí đối tượng và loại thiết bị.
Bố cục tự động có thể được áp dụng để biến các lớp thành khung hoặc khung hiện có. Để áp dụng bố cục cho khung hiện có, hãy chọn lớp văn bản của bạn, sau đó nhấn phím tắt “Shift”“A”. Khi bố cục đã được áp dụng, bạn sẽ nhận thấy một số thay đổi.
Lớp văn bản sẽ nằm trong một khung. Bố cục tự động chỉ được áp dụng cho các thành phần và khung, vì vậy Figma sẽ tự động đặt lớp văn bản trong khung mới. Khung không có màu tô. Điều này được áp dụng trong bước tạo kiểu nút. Khi chọn khung của bạn, cài đặt bố cục tự động được hiển thị trên thanh bên phải. Bố cục tự động có thể được tinh chỉnh thêm. Bạn nhận thấy rằng khung co lại và lớn lên cùng với những thay đổi về văn bản. Với các yếu tố động như vậy, bạn tiết kiệm thời gian thiết kế nội dung được xem trên nhiều thiết bị khác nhau hoặc được dịch sang các ngôn ngữ khác.
Tạo kiểu cho nút
Bạn có thể bắt đầu bằng cách thêm màu.
Chọn khung lớp, sau đó chọn “Cài đặt điền”trong thanh bên phải. Thao tác này sẽ tự động điền màu
. Bộ chọn màu sẽ thay đổi màu.
Chọn lớp văn bản và điều chỉnh màu tô thành # FFFFFF.
Chọn lại khung rồi sử dụng cài đặt thanh bên phải để điều chỉnh bán kính góc.
Việc tiếp theo là khắc phục phần đệm khung. Sau khi văn bản chữ cái được chuyển thành bố cục khung tự động, phần đệm sẽ tự động được thêm vào giữa văn bản và ranh giới khung. Phần đệm tại thời điểm này xuất hiện bằng nhau ở tất cả các bên. Bạn có thể thay đổi phần đệm dưới cùng và trên cùng nhỏ hơn phần đệm bên phải và bên trái.
Bạn có thể cập nhật phần đệm theo ý muốn. Có thể thay đổi phần đệm bên trái và bên phải hoặc phần đệm trên và dưới cùng lúc bằng các phím tắt bên dưới:
Giữ <⌥ Option> hoặc
Tại thời điểm này, nút có vẻ ổn nhưng bạn vẫn có thể cập nhật nhãn. Bạn cần nhấp đúp vào văn bản để cho phép chỉnh sửa. Nhập từ “Đăng ký”. Nút sẽ thay đổi kích thước khi bạn nhập. Đây là cách bạn thiết kế nút bằng cách sử dụng công cụ văn bản và bố cục tự động. Giờ đây, bạn có thể thử điều gì đó mới, chẳng hạn như chuyển nút thành một thành phần hoặc thêm một biến thể.
Tạo nút có thể nhấp
Figma được sử dụng bởi các công ty như Uber, Facebook, Google và Netflix. Tính năng nút có thể nhấp giúp các nhà thiết kế trong các công ty đó dễ dàng tạo các nút tương tác và có thể nhấp được. Các nút giúp điều hướng dễ dàng hơn nhiều trên các nền tảng như vậy.
Dưới đây là cách phát triển các nút như vậy trong Figma:
Chọn tùy chọn “Nguyên mẫu”trong menu (bên phải).
Nhấp vào biểu tượng “Dấu cộng”(+) bên dưới tab Nguyên mẫu. Thao tác này cho phép bạn thêm tương tác.
Chọn “Khi nhấp chuột”trong cửa sổ chi tiết tương tác.
Chọn tùy chọn “Mở liên kết”.
Thêm liên kết trang nơi nút sẽ chuyển hướng sau khi được nhấp.
Nhấn vào biểu tượng “X”để thoát khỏi cửa sổ Chi tiết tương tác.
Điều hướng đến nút tùy chọn “Phát”ở góc trên bên phải.
Nhấn vào nút “Phát”để xem trước thiết kế.
Nếu bạn di chuột qua nút của mình, nút này sẽ chuyển thành biểu tượng giống bàn tay. Điều này cho biết rằng nút hiện có thể nhấp được.
Lưu ý: Khi tạo nút Figma có thể nhấp, hãy luôn sử dụng”Khi nhấp”, không phải”Khi kéo”. “Khi nhấp chuột”cho phép thêm liên kết có thể nhấp vào nút. Không thể nhấp vào nút “Khi kéo”.
Thiết kế đẹp hơn với các nút Figma
Các nút Figma có các biến như chủ đề , trạng thái, phần đệm bên trong, chiều dài, chiều rộng và chiều cao của bảng. Bằng cách tìm hiểu cách tạo nút trên nền tảng, bạn có thể tận dụng tối đa Figma và thêm các thành phần sử dụng giá trị trong thư viện Figma.
Bạn đã thử tạo nút trên Figma chưa? Nếu vậy, kinh nghiệm của bạn như thế nào? Hãy cho chúng tôi biết trong phần nhận xét bên dưới.
Tuyên bố miễn trừ trách nhiệm: Một số trang trên trang web này có thể bao gồm liên kết liên kết. Điều này không ảnh hưởng đến việc biên tập của chúng tôi theo bất kỳ cách nào.