CÁC THÀNH PHẦN CƠ BẢN TRONG FIGMA


Bắt đầu với Figma đơn giản như truy cập www.figma.com, nhấp vào “Đăng ký” và nhập thông tin chi tiết của bạn. Sau khi bạn làm xong, Figma sẽ mở ra với màn hình bắt đầu như thế này. Nhấp vào “Tệp mới” và chúng ta sẽ bắt đầu!


CÁC THÀNH PHẦN CƠ BẢN TRONG FIGMA

 

 

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

2. Xem qua giao diện Figma

Các thành phần cơ bản trong Figma



Giao diện của Figma khá tối giản, nhưng nó có một loạt các tính năng mạnh mẽ. Dưới đây là giải thích về các khu vực chính của giao diện (được gắn nhãn ở trên):

Menu
Không giống như các ứng dụng thiết kế trên máy tính để bàn thông thường, bạn có thể tìm thấy menu của Figma bằng cách nhấp vào nút bánh hamburger ở trên cùng bên trái màn hình. Hãy dành một phút để duyệt qua các menu này và xem có gì ở đó! Bạn cũng có thể tìm kiếm lệnh cụ thể mà bạn cần. Bắt đầu nhập "hình chữ nhật" và bạn sẽ nhanh chóng tìm thấy Công cụ hình chữ nhật, hoàn chỉnh với lời nhắc hữu ích về phím tắt của nó (nhân tiện, đó là R).

Tool
Tại đây, bạn có thể nhanh chóng truy cập các công cụ mà bạn có khả năng sẽ sử dụng thường xuyên nhất: khung, hình dạng, văn bản, v.v. (Chúng tôi sẽ đề cập đến tất cả các công cụ này trong vài ngày tới!)

Các tùy chọn:
Khu vực này hiển thị các tùy chọn bổ sung cho bất kỳ công cụ nào bạn đã chọn. Khi không có đối tượng nào được chọn (như hình trên), Figma sẽ hiển thị tên tệp. Khi một đối tượng được chọn, các tùy chọn theo ngữ cảnh sẽ xuất hiện ở đây.

Các lớp: Layer
Nơi mọi phần tử trong tệp được liệt kê, sắp xếp thành các Khung và Nhóm.


Canvas:
Đây là nơi bạn tạo và xem lại tất cả công việc của mình.


Inspector:
Thanh tra hiển thị thông tin ngữ cảnh và cài đặt cho bất kỳ đối tượng nào được chọn. Trong hình ảnh ở trên, chúng ta đang thấy các tùy chọn cho chính Canvas. Lưu ý rằng Figma cung cấp cho chúng tôi các tab riêng biệt trong Trình kiểm tra (Thiết kế, Nguyên mẫu và Mã) —chúng tôi sẽ đề cập đến các tab này vào cuối tuần.


Bây giờ bạn đã tìm thấy con đường của mình, hãy bắt đầu chế tạo mọi thứ! Lưu ý rằng chúng tôi sẽ đề cập đến phím tắt rất nhiều trong các hướng dẫn này. Bạn nên tập thói quen sử dụng các phím tắt này ngay từ đầu vì chúng sẽ tăng tốc đáng kể quy trình làm việc của bạn.

3. Tạo khung


Trong Figma, Frame về cơ bản là một vùng chứa cho các phần tử khác. Nếu bạn đã sử dụng Sketch hoặc Adobe Illustrator trước đây, nó hoạt động theo cách giống như Artboard. Nhấn F để chọn Công cụ Khung. Ngoài ra, bạn có thể nhấp vào biểu tượng Công cụ Khung trong bảng Tùy chọn ở đầu cửa sổ. Tương tự, nếu bạn đã quen với Sketch, bạn cũng có thể nhấn A (cho “Artboard”).

Có một số cách để tạo Khung. Chúng ta có thể nhấp và kéo trong vùng canvas, hoặc chúng ta có thể chọn kích thước Frame được thiết lập trước từ Thanh tra ở phía bên tay phải của cửa sổ. Hãy thử cả hai cách ngay bây giờ!
 

4. Thực hành phóng to và thu nhỏ

Có thể bạn sẽ thấy mình muốn phóng to và thu nhỏ một chút trong Figma, đặc biệt là khi chúng tôi bắt đầu làm việc với nhiều Khung. Các lệnh thu phóng tiêu chuẩn được truy cập bằng ⌘ + và ⌘-. Thử ngay bây giờ!

Các lệnh đó sẽ chỉ tập trung vào trung tâm của chế độ xem hiện tại của bạn. Nhưng có một số lệnh thu phóng tiện dụng khác có sẵn:

Shift ⇧2 sẽ thu phóng đến lựa chọn hiện tại
Shift ⇧1 sẽ thu phóng để hiển thị toàn bộ khung vẽ
Chọn Khung bằng cách nhấp vào tên của nó, sau đó thử xen kẽ các lệnh này để chuyển đổi giữa vùng chọn và toàn bộ khung.

Cuối cùng, đây là mẹo thu phóng * bổ sung * tiện dụng để di chuyển giữa các Khung mà không cần phải phóng to và thu nhỏ toàn bộ thời gian:

N sẽ phóng to đến Khung tiếp theo
Shift ⇧N sẽ thu phóng đến Khung trước đó


 

Còn tiếp