Tìm hiểu Figma cơ bản cùng WanFang (P1)

Tiếp bước bài viết “Tư duy phát triển sản phẩm của Figma”, WanFang xin phép giới thiệu những gì cơ bản nhất về Figma.

Chắc hẳn các bạn Designer về Website và App đã không còn xa lạ với công cụ thiết kế UI (Interface User) chạy trên trình duyệt này. Đối với những bạn mới bắt đầu vào ngành sẽ rất khó khăn vì vô vàn công cụ thiết kế khác. Hãy cùng WanFang tìm hiểu Figma cơ bản, sử dụng công cụ này một cách hiệu quả nhé!

Figma là gì?

Figma là công cụ được ra mắt vào năm 2016, với giao diện thân thiện và tính dễ sử dụng. Nó đã nhanh chóng nổi lên và trở thành một công cụ thiết kế giao diện người dùng phổ biến trong cộng đồng công nghệ toàn cầu. Một số thương hiệu lớn sử dụng Figma cho tới thời điểm hiện tại có thể kể đến như Microsoft, Twitter, GitHub, Dropbox…

Khác với những công cụ thiết kế trước đây, Figma được thiết kế trên nền tảng đám mây. Đây là công cụ có tính năng tương tự như Sketch, tuy nhiên nó hỗ trợ làm việc nhóm tốt hơn.

Ưu điểm của Figma

Cho phép nhiều người cùng thiết kế trên một Project. Khi đó, mỗi người sẽ sử dụng máy tính riêng và cùng join vào Project trên Figma.
Figma hoạt động nhanh, được cập nhật thường xuyên và có gói miễn phí khi mới sử dụng.
Dữ liệu được lưu trên hệ thống máy chủ của Figma. Chính vì vậy, bạn có thể làm việc trên máy tính khác, mọi lúc mọi nơi mà không cần phải mang theo File Design.
Figma thiết kế dạng Vector. Khi thiết kế xong, các Tool Designer có thể xuất ra nhiều File khác nhau như PNG, SVG, JPG,… ở mọi kích thước mà không lo bị vỡ như Photoshop.
Figma có khả năng quản lý cùng một lúc rất nhiều Artboards. Nếu Photoshop chỉ cho phép thiết kế trên một khung hình thì Figma lại cho phép thiết kế nhiều màn hình trên một khung hình. Nghĩa là, trên cùng một khung hình, bạn có thể thiết kế nhiều Layout cho một sản phẩm.

Sử dụng công cụ Figma cơ bản như thế nào?

Ta có 2 cách sử dụng công cụ Figma:

– Cách 1: Cài đặt Figma trên Windown/MacOS theo đường link https://www.figma.com/downloads/

– Cách 2: Login vào trang web của Figma https://www.figma.com trên trình duyệt (Windown/MacOS)

#Lưu ý: Bắt buộc tạo tài khoản và đăng nhập ở cả 2 cách.

Sau khi đã đăng nhập thành công, chúng ta sẽ đi qua giao diện công cụ thiết kế Figma như sau:

Sau bước đăng nhập, Figma sẽ tự động chuyển hướng người dùng đến màn hình quản lý các Project. Khi đó, cột bên trái màn hình là các Project đã thực hiện và cột bên phải là thanh menu. Click vào từng Project sẽ xuất hiện các thiết kế tại Project đó.

Giao diện sử dụng Figma

Mục Recent cho phép ta xem các project gần nhất ta làm hoặc tham khảo từ User khác.

Mục Draft cho phép ta xem lại các project gần nhất của ta hoặc tham khảo từ Community Beta ở ngay dưới Draft.

Ta có thể tạo mới Design File hoặc FigJam File ở dấu “+” bên góc trái. Và ta tìm kiếm Templates với đầy đủ kích thước phù hợp cho từng màn hình thiết kế.

Giao diện tìm Templates

Sau đó ta tạo mới Design File ta có giao diện như sau:

Giao diện file mới sau khi tạo

Ở thanh công cụ góc phải, ta có thể kiểm tra hoặc tùy chỉnh chế độ chia sẻ (Share). Gồm: thêm thành viên, chỉnh sửa quyền truy cập, sao chép đường dẫn,… để đưa vào portfolio hoặc theo từng mục đích cá nhân.

Ngoài ra, ta có thể đổi tên trực tiếp bằng cách click vào tên ở giữa thanh công cụ:

Thanh công cụ

Ở thanh công cụ bên trái, ta có thể tùy chỉnh File hoặc các công cụ liên quan Figma.

Tùy chỉnh giao diện File và các công cụ liên quan

Ta cần tạo Page hoặc Frame đầu tiên trên giao diện

Trước khi thiết kế, ta tạo Frame bằng cách click trực tiếp vào công cụ Frame (F) trên thanh công cụ. Sau đó chọn kích thước thiết kế phù hợp.

Lựa chọn Frame

Ví dụ bạn chọn Frame là MacBook thì Figma tạo 1 khung Layout design giao diện cho trang màn hình trang chủ (Dashboard)

Lúc này ở cột bên trái sẽ xuất hiện 1 Layout tên là Macbook và ở khung Canvas (View) giữa sẽ có 1 khung màu trắng. Đó sẽ chính là 1 màn hình để ta thao tác.

Giao diện thao tác

Để di chuyển, ta có thể chọn Move (V) hoặc di chuyển bằng chuột và Scale (K) để tùy chỉnh kích thước

Tiếp theo, Figma có hầu hết các hình dạng để thiết kế như hình chữ nhât Rectangle(R), Ellipse(O), Line(L),…. Và cả các tools khác như Pen(P) hoặc Pencil(Shift + P) để thiết kế linh hoạt hơn. Cũng như Text và Comment để làm việc nhóm dễ dàng.