Figma là gì? Hướng dẫn sử dụng Figma?

29-10-2022 10:08

Có lẽ đối với các nhà thiết kế đồ họa, cái tên Figma không còn quá xa lạ gì nữa. Hiện nay, Figma không chỉ nổi tiếng trên toàn thế giới với giao diện thân thiện mà nó còn sở hữu nhiều tính năng hữu ích được các designer ưu ái sử dụng. Hãy cùng Viện Công nghệ thông tin ITPlus tìm hiểu về Figma cũng như cách sử dụng nó nha!

Figma là gì?

Figma là một công cụ thiết kế đồ họa vector chạy trên trình duyệt web, thường dùng để thiết kế UI và dựng prototypes. Figma cung cấp tài nguyên cho mọi khâu của quá trình tổ chức thiết kế, từ brainstorm ý tưởng concept cho đến khởi tạo code từ mẫu thiết kế.

Nếu như những người làm văn phòng bình thường có Google Docs thì các nhà thiết kế có Figma. Nó cho phép nhiều người cùng cộng tác chỉnh sửa và thiết kế bằng phương thức trực tuyến ở các máy chủ khác nhau. Đây cũng chính là ưu điểm thu hút người dùng của Figma

Figma hoạt động trực tiếp ngay trên trình duyệt, do đó người dùng không cần cài đặt, cập nhật hay vấn đề cấp phép. Ngoài ra Figma cũng tương thích trên mọi hệ điều hành nên các Designer sử dụng hệ điều hành khác nhau vẫn có thể dễ dàng hợp tác để hoàn thành công việc.

Ứng dụng phổ biến của Figma là gì?

Figma là một công cụ đa năng, nó có thể phục vụ mọi nhu cầu từ thiết kế các sản phẩm digital cho đến thiết kế UX/ UI. Các ứng dụng phổ biến của Figma là:

Thiết kế tạo mẫu (Prototype design)
Thiết kế wireframe website
Thiết kế giao diện mobile app
Thiết kế các bài đăng mạng xã hội

Hướng dẫn sử dụng Figma

Dưới đây là cách sử dụng Figma dành cho designer:

1. Xem tab Kiểm tra

Tab Kiểm tra (Inspect) trên Figma cho phép developer xem được thuộc tính về màu sắc, kích thước, khoảng cách, biến thể, font… của các element. Nó cũng có thể được xuất ra dưới nhiều định dạng file như PNG, SVG hoặc xuất dưới dạng code bằng CSS, Swift và XML.

2. Chọn element

Các element cho biết các thông số thiết kế và đo lường, đây là một thao tác quan trọng trong developer. Hầu hết các thiết kế đều gồm nhiều layer do đó:

Nếu nhấp chọn một element, chương trình sẽ tự động chọn element ở layer trên cùng.
Để chọn một element ở các layer bên trong, nhấn Command + element mong muốn. Hoặc nhấp chuột phải vào element để hiển thị bảng Select Layer.

3. Export Assets

Bạn có thể sử dụng 2 cách để xuất các assets trực tiếp từ file thiết kế và tương thích nó với hệ điều hành IOS và Android.

– Xuất ra các asset riêng lẻ: Nhấp chọn và bấm nút export

– Xuất tất cả asset có thể cùng một lúc: Sử dụng tổ hợp phím Control / Command + Shift + E để hiện ra bảng Export Panel.

4. Kiểm tra khoảng cách và kích thước

Khi chọn một element, bạn có thể xem được thông số biểu thị trực quan khoảng cách của element đó với các đối tượng xung quanh. Để làm điều này:

Chọn Code Panel (Bảng mã)
Nhấp chọn vào element muốn đo
Di chuyển con trỏ qua một layer khác

5. Tìm các component chính

Để định vị component (thành phần) chính trên bất kỳ màn hình nào, hãy nhấp chuột phải vào component đó và chọn Main Component > Go to Main Component từ menu.

6. Tìm kiếm các layer

Các Plugin sẽ dựa vào từ khóa tìm kiếm để chọn lọc các layer có chứa từ khóa tương ứng và zoom vào chúng để bạn có thể quan sát. Điều này giúp developer dễ dàng hơn trong việc kiểm soát các tệp lớn với nhiều khung trang.

7. Xem mô phỏng thiết kế

Developer có thể xem mô phỏng cách người dùng tương tác với thiết kế thông qua prototypes và Figma sẽ chỉ hiển thị những frame có kết nối prototypes.

Ngoài ra tính năng live device preview cũng có thể sử dụng để xem mô phỏng thiết kế trên điện thoại di động hoặc có thể chỉnh sửa kích thước khung hình để thiết kế tương thích trên các định dạng thiết bị khác nhau.

------------------------------------------------------------------------------------------------------

Hiện tại, Viện CNTT ITPlus có tổ chức các khóa học thiết kế chuyên nghiệp, bạn có thể tham khảo tại: