Nếu bạn là một UI/UX Designer hoặc là một nhà thiết kế web thì bạn chắc hẳn đã quen với việc sử dụng Figma và khai thác những gì nó có cung cấp cho bạn. Nhưng liệu bạn có biết rằng giờ đây bạn có thể thực hiện nhiệm vụ của mình dễ dàng hơn với một số mẹo và thủ thuật đơn giản của Figma không?

Figma vốn dĩ rất tốt cho công việc thiết kế UI/UX, nhưng với các mẹo và thủ thuật dưới đây, bạn sẽ khám phá ra các tính năng giá trị giúp bạn tiết kiệm thời gian mà bạn ước rằng mình biết sớm hơn. Hãy cùng iDesign khai thác 13 thủ thuật Figma ấn tượng để giúp công việc thiết kế web của bạn trở nên dễ dàng hơn, nhanh hơn và năng suất hơn nhé!

1. Cập nhật Auto Layout

Cập nhật hoặc thêm tính năng bố cục tự động (Auto Layout) mới để thay đổi kích thước động cho thiết kế của bạn. Với bố cục tự động, bạn có thể nhanh chóng tạo các nút, danh sách, mô hình,… với nhiều đường biên và quy tắc thay đổi kích thước có thể dễ dàng chứa các thành phần phức tạp hơn và loại bỏ nhu cầu chỉnh sửa khoảng cách tẻ nhạt.

2. Cập nhật nudge amount (lượng dịch chuyển) thành 8px

Việc sử dụng đơn vị cơ sở là 8px thường được khuyến nghị vì nhiều lý do và phải được sử dụng nhất quán cho mọi tác vụ định cỡ (sizing) và giãn cách. Bạn có thể làm cho điều này trở nên đơn giản hơn cho bạn và team của mình bằng cách chỉ cần đặt “nudge amount” trong Figma từ 10px thành 8px. Bằng cách này, mỗi khi bạn di chuyển hoặc thay đổi kích thước một đối tượng, nó sẽ có gia số là 8.

Để sử dụng nudge, giữ phím Shift + mũi tên và để điều chỉnh nudge amount, điều hướng đến Menu > Preferences > Nudge amount > 8.

3. Sử dụng công cụ Bar Graph Arc

Bạn hãy tìm đọc về công cụ Bar Graph Arc trên blog Figma và thử nó. Nó tạo ra một cung đồ thị thanh tối giản và tiết kiệm thời gian hơn cách mà bạn tạo các cung như trước đây.

4. Quản lý các thành phần cơ sở (base component)

Bạn có thể sử dụng các thành phần cơ sở hiệu quả hơn bằng cách tạo và quản lý các thành phần có nhiều biến thể. Mỗi biến thể sẽ ghi đè thành phần cơ sở lồng nhau riêng lẻ của nó để tạo ra một trạng thái mới. Điều này giúp việc cập nhật hàng loạt khá dễ dàng và cũng đảm bảo tính nhất quán 100%.

5. Sử dụng logic True/ False

Sử dụng nhãn “True/ False” hoặc “On/ Off” để chuyển đổi giữa hai thuộc tính riêng biệt. Thủ thuật nhỏ này sẽ giúp chuyển đổi các biến thể nhanh hơn và khớp chặt chẽ với cách các thành phần khác nhau hoạt động trong code.

Ví dụ: Type=Single-line, State=Default, Optional=Yes

6. Sắp xếp lưới (grid) hoặc hoán đổi vị trí

Sau khi chọn nhiều đối tượng trong bảng, hãy nhấp vào biểu tượng lưới (grid) ở góc để sắp xếp thiết kế của bạn. Thao tác này sẽ cân bằng mọi khoảng cách giữa các đối tượng, cho phép bạn kéo và sắp xếp lại các đối tượng cũng như điều chỉnh khoảng cách của chúng.

7. Chỉnh sửa khoảng cách hàng loạt

Căn chỉnh các đối tượng khác nhau và điều chỉnh khoảng cách vừa phải có vẻ khá tẻ nhạt và tốn thời gian. May mắn thay, các tính năng “Smart selection” & “Tidy Up” của Figma cho phép bạn thực hiện điều đó hàng loạt. Với Figma, các đối tượng tương tự có thể được tự động sắp xếp thành một danh sách hoặc lưới gọn gàng, cách nhau hàng loạt và sắp xếp lại.

• Để chỉnh sửa khoảng cách hàng loạt, hãy chọn các đối tượng tương tự > chọn biểu tượng danh sách/ lưới > kéo khoảng cách sang phải, trái, lên hoặc xuống.
• Để hoán đổi vị trí đối tượng, hãy chọn các đối tượng tương tự > chọn dấu chấm bên trong một đối tượng duy nhất > kéo và thả đối tượng đó vào vị trí mới.

8. Đổi tên nhiều lớp cùng một lúc

Điều cần thiết là giữ cho tệp của bạn được sắp xếp với cú pháp đặt tên và phân cấp được xác định cho tất cả các layer của bạn. Nhiệm vụ này được thực hiện nhanh hơn nhiều với mô hình “Rename Layers” của Figma, cho phép bạn đổi tên hàng loạt cho layer. Bạn có thể đổi tên từng layer giống nhau, có hậu tố số, thêm tiền tố vào các tên riêng biệt hoặc chỉ đổi một phần trong tên của layer đó.

Để truy cập mô hình Rename Layers, nhấp chuột phải vào các layer trong bảng điều khiển > chọn “Rename”.

9. Sắp xếp các trang tệp của bạn

Hãy đối mặt với vấn đề này, việc phải tìm kiếm một thiết kế cụ thể hoặc thành phần chính đôi khi có thể khá tốn thời gian và cũng có thể dẫn đến thông tin sai lệch và trùng lặp. Do đó, hãy sắp xếp các trang tệp của bạn để giúp điều hướng và duy trì chúng nhanh chóng và dễ dàng. Đảm bảo rằng mỗi trang có một tên được xác định rõ ràng cho các mục đích thiết kế và tài liệu khác nhau.

10. Sử dụng phím tắt

Không có gì lạ khi sử dụng phím tắt nhanh hơn nhiều so với sử dụng chuột. Trên thực tế, mọi hành động có thể được bắt đầu đơn giản bằng một phím tắt để làm việc trong Figma có vẻ nhanh hơn và hiệu quả hơn nhiều.

Bên cạnh đó, còn điều gì tồi tệ hơn việc nhìn thấy một nhà thiết kế vật lộn với con chuột của họ trong khi họ có thể chỉ cần sử dụng phím tắt?

Do đó, hãy thử thách bản thân học một phím tắt mới mỗi ngày!

Để xem các phím tắt: Nhấn “?” ở góc dưới cùng bên phải của trình duyệt của bạn.

11. Sử dụng công cụ Scale

Để giữ cho thiết kế của bạn hoàn hảo đến từng pixel với sự trợ giúp của công cụ Scale, chỉ cần chọn tất cả các đối tượng mà bạn muốn chia tỷ lệ, sau đó giữ K trên bàn phím và kéo.

12. CMD (CTRL) + để mở khóa các đối tượng khóa (lock object)

CMD (CTRL) + / có nhiều ứng dụng nhanh thiết thực có thể giúp bạn tiết kiệm rất nhiều thời gian trong quy trình làm việc của mình. Nếu bạn không sử dụng nó, bạn nên kiểm tra những gì có sẵn trên menu. Hãy mở khóa tất cả các item và thay đổi phông chữ.

13. Các thủ thuật tiết kiệm thời gian khác với phím cách

Kéo hộp chọn (selection box) và sau đó giữ phím cách để tăng kích thước của vùng chọn con trỏ. Nếu bạn đang vẽ một hình, bạn cũng có thể dự trữ không gian để di chuyển đối tượng khi bạn vẽ. Nếu vẫn chưa đủ, hãy nhấn phím cách và Figma sẽ tự động di chuyển đối tượng vào khung hoặc bố cục tự động. Bạn cũng có thể thay thế nó để lồng vào nhau. Phím cách thật sự rất tiện dụng!

Giữ phím cách và di chuyển đối tượng ra khỏi frame để giữ đối tượng bên trong vùng chứa. Bạn cũng có thể tắt nội dung đoạn phim trong vùng chứa đối tượng để có thể nhìn thấy nội dung đó ngay cả khi nó ở bên ngoài vùng chứa. Bạn cũng có thể nhấn CMD (CTRL) + Y để hiển thị đường viền (outline).

Bài viết trên đã tổng hợp 13 mẹo và thủ thuật Figma hữu ích để bạn tận dụng với tư cách là một UI/UX Designer. Cho dù bạn đang tìm kiếm các mẫu thiết kế, biểu tượng, công cụ hiệu suất cao, cách tốt hơn để quản lý hoạt động thiết kế, thiết kế responsive, dễ dàng truy cập vào các công cụ dành cho nhà phát triển cũng như cộng đồng mạnh mẽ dành cho các nhà phát triển, thì Figma chắc chắn là lựa chọn phù hợp.

Nguồn: webdew.com | Việt hóa: idesign.edu.vn

Tham khảo khóa học Thiết kế UI/UX với Figma của iDesign tại: Khóa học thiết kế UI/UX tại Đà Nẵng – IDesign