Bí Quyết Sử Dụng FIGMA Cho Thiết Kế UI/UX Hiệu Quả

1. Figma là gì? Figma dùng để làm gì?

Figma là một ứng dụng hoạt động dựa trên nền tảng web, được thiết kế dành riêng cho việc thiết kế giao diện và trải nghiệm người dùng (thiết kế UI UX). Figma là một công cụ tuyệt vời cho các nhà thiết kế giao diện, tuy nhiên Figma là ứng dụng được sử dụng rộng rãi bởi cộng đồng designers, developers, marketers và chủ doanh nghiệp.

Sử dụng Figma, bạn có thể tạo tờ rơi, tờ quảng cáo, áp phích, bản trình bày, đồ họa thông tin, v.v...

Figma được tạo ra vào năm 2015 bởi một nhóm nhỏ các nhà phát triển từ Google, khi họ muốn có một cách làm việc hiệu quả hơn cùng nhau trong các dự án thiết kế giao diện người dùng UI UX. Đối với họ, các công cụ sẵn có như Photoshop và Sketch không đủ linh hoạt. Vì vậy, họ bắt đầu tạo ra Figma - một ứng dụng mới để giúp mọi người hoàn thành công việc nhanh hơn.

Figma dùng trong product design: Bạn có thể sử dụng Figma để tạo wireframes, mockup, prototypes và thiết kế tương tác. Với Figma, bạn có thể xây dựng toàn bộ trang web hoặc ứng dụng của mình ngay bên trong ứng dụng. Bạn thậm chí có thể nhập trực tiếp các tệp Photoshop PSD vào Figma.

Figma dùng để thiết kế ấn phẩm truyền thông marketing: Sử dụng Figma, bạn có thể tạo tờ rơi, tờ quảng cáo, áp phích, bản trình bày, đồ họa thông tin, v.v... Ngoài ra ứng dụng này cũng giúp bạn tạo ra những giao diện đẹp mắt. Bạn có thể thiết kế các biểu tượng của riêng mình, tạo bố cục, thêm hoạt ảnh và thử nghiệm các thiết kế trước khi xuất bản chúng. 

2. Ưu điểm của Figma trong thiết kế UI/UX

Figma là một phần mềm thiết kế thân thiện với người dùng, Figma cho phép người dùng tạo đồ họa và hình minh họa tuyệt đẹp một cách dễ dàng. Bạn có muốn tạo ra các thiết kế đẹp, chuyên nghiệp nhanh hơn và dễ dàng hơn bao giờ hết không? Nếu vậy, Figma có thể là ứng dụng hoàn hảo dành cho bạn! Dưới đây là một số ưu điểm của Figma:

Với Figma, bạn có thể tùy chỉnh các mẫu có sẵn dựa trên nhu cầu của mình

- Figma giúp dễ dàng tạo Website Mockup - Ưu điểm rõ ràng nhất của Figma là bạn không cần biết cách viết mã code. Bạn chỉ cần kéo và thả các đối tượng vào canvas để xây dựng prototype của mình.

- Giao diện Figma đơn giản, dễ sử dụng - Nếu bạn đã từng thử sử dụng Photoshop trước đây, có thể bạn sẽ thấy khó điều hướng qua giao diện. Tuy nhiên, Figma dễ sử dụng hơn nhiều vì chỉ cần một cú nhấp chuột để thêm đối tượng.

- Figma hỗ trợ cả máy tính để bàn và thiết bị di động - Bạn không cần phải lo lắng về các vấn đề tương thích nếu chọn Figma. Vì Figma hoạt động tốt trên mọi thiết bị bao gồm máy tính để bàn, máy tính xách tay, máy tính bảng, điện thoại thông minh, nên bạn có thể dễ dàng truy cập các file thiết kế của mình từ mọi nơi.

- Với Figma, chương trình tự động sẽ điều chỉnh bố cục của bạn theo kích thước của màn hình. Khi bạn đang tạo một trang web, bạn sẽ thường cần thay đổi kích thước các thành phần trên trang của mình. Nếu bạn không cẩn thận, những thành phần này có thể trông lộn xộn khi xem trên màn hình nhỏ hơn. Nhưng với Figma, bạn không cần lo lắng. 

- Figma hỗ trợ trên nhiều nền tảng - Figma tương thích với nhiều nền tảng bao gồm Windows, Mac OS X, iOS, Android và Linux. Vì vậy, bạn không cần phải lo lắng về vấn đề tương thích.

- Chia sẻ tệp nhanh chóng trên Figma - Sau khi thiết kế xong dự án, bạn có thể chia sẻ trực tiếp từ cửa sổ trình duyệt. Điều này giúp bạn dễ dàng gửi thiết kế của mình cho khách hàng mà không cần phải lưu chúng trước.

- Mẫu trên Figma có thể tùy chỉnh - Với Figma, bạn có thể tùy chỉnh các mẫu có sẵn dựa trên nhu cầu của mình. Ví dụ: bạn có thể thay đổi màu sắc, phông chữ và hình nền để tạo phong cách độc đáo của riêng mình.

- Figma hỗ trợ xuất dưới dạng PDF - Figma cho phép bạn xuất các dự án của mình dưới dạng tài liệu PDF. Điều này có nghĩa là bạn có thể in các thiết kế của mình ra và giao cho khách hàng.

- Figma giúp dễ dàng cộng tác với những người khác - Vì Figma dựa trên đám mây nên bạn có thể cộng tác với những người khác bằng cách chia sẻ tệp của mình trực tuyến.

- Figma dễ học - Trong khi một số người thấy Photoshop đáng sợ, thì Figma lại rất dễ học. Ngay cả những người mới bắt đầu cũng có thể sử dụng nó trong vòng vài phút.

- Figma sở hữu công cụ mạnh mẽ - Một trong những tính năng tốt nhất của Figma là nó đi kèm với những công cụ mạnh mẽ như Pen tool, Shape tool, Text tool, and Magic Wand tool.

- Figma có tốc độ tải nhanh - Một lý do khác khiến Figma là lựa chọn phổ biến của các nhà thiết kế là nó tải nhanh. Chỉ mất chưa đầy hai giây để mở một tệp mới.

3. 13 thủ thuật sử dụng Figma cho thiết kế UI/UX hiệu quả

3.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.

3.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.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.

3.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%.

3.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

3.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.

3.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.

3.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”.

3.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.

3.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.

3.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.

3.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ữ.

3.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).

4. Lời kết

Nếu bạn yêu thích UI UX và ứng dụng Figma, thậm chí mong muốn được học hỏi và trau dồi thêm đa dạng kỹ năng thiết kế khác thì bạn có thể tìm hiểu khoá học UI-UX từ colorME.

Đây là chương trình đào tạo thiết kế và đồ hoạ đa phương tiện toàn diện kéo dài gần 2 năm với các kỹ năng đa dạng đi từ cơ bản tới nâng cao trải dài trong 4 kỳ học: Basic art, UI UX design, Branding & Advertising, 3D… giúp bạn phát triển năng lực một cách toàn diện. Bạn sẽ được tham gia workshop, triển lãm, thực hành các dự án thiết kế cá nhân & nhóm, xây dựng portfolio...v.v. và trải nghiệm các phương pháp học tập sáng tạo mới nhất. 

ColorME sẽ luôn hỗ trợ và đồng hành cùng bạn trên con đường thiết kế sáng tạo.  Đừng quên thường xuyên theo dõi Blog của chúng mình để cập nhật những kiến thức thiết kế sáng tạo độc đáo và mới lạ nhất nhé!