Hướng dẫn cách sử dụng Figma (cơ bản)

Đầu tiên, đây là giao diện mà bạn sẽ gặp khi bắt đầu sử dụng Figma.

Tại Dashboard, bạn có thể chọn “Recent” để xem các tệp gần nhất, import Sketch files, hoặc bạn có thể tạo tệp mới bằng cách chọn dấu “+” kế bên “Drafts”

Để tạo một tệp trống mới, bạn chọn “Blank Canvas” và “Create” file. Tại đây, bạn có thể chỉnh sửa thư mục lưu trữ của tệp mới này.

Đây chính là tệp trống mà bạn vừa tạo. Bạn có thể kiểm tra hoặc tùy chỉnh chế độ chia sẻ (Share) tùy theo mong muốn: 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. Bên cạnh đó, bạn có thể Zoom In/ Zoom Out như các phần mềm khác, sử dụng chế độ trình chiếu “Present”, tìm kiếm mọi thứ trong “Libraries”,…

Để hoàn toàn có thể đổi tên tệp tin tiện cho việc tàng trữ và tìm kiểm, bạn click chuột trực tiếp vào tên cần đổi và nhập lại tên theo mong ước :

Giờ đây, ở Dashboard, bạn hoàn toàn có thể thuận tiện tìm thấy project mới của mình !

Tùy theo mục đích cá nhân, bạn có thể tạo hẳn một file riêng Figma bằng cách “save local copy” hoặc “save to version history”. Cũng tại menu này, bạn sẽ có khá nhiều lựa chọn khác nữa như “Edit”, “View”, “Object”, “Vector”,…:

Để bắt đầu thiết kế, trước hết bạn hãy tạo khung. Bạn có thể nhấp trực tiếp vào công cụ Frame trên Thanh Công cụ, hoặc để tỏ ra nguy hiểm hơn, ấn ngay phím “F”!! Sau khi chọn, danh sách các mẫu kích thước sẽ được hiện ra bên phía phải màn hình.

Giờ chúng ta sẽ thử chọn thiết kế giao diện cho iPhone 11 Pro Max nhé! Khi chọn kích thước xong, Figma sẽ tự động tạo và đặt tên. Để di chuyển, bạn có thể chọn “Move”, hoặc nhanh gọn hơn, nhấn phím “V”! Bạn có thể tạo nhiều Frame cùng một lúc và di chuyển sang các vị trí thích hợp.

Tiếp theo, tất cả những hình dạng như hình chữ nhật – Rectangle (R), hình tròn Ellipse, tam giác Polygon,… đều nằm trong tầm tay bạn và bạn có thể chọn bất cứ hình nào để thêm vào thiết kế của mình, thậm chí là một hình ảnh bất kỳ bằng Place image (Ctrl + Shift + K).

Bạn còn có thể thoải mái sử dụng các công cụ khác như “Pen” (P) hoặc “Pencil” (Shift + P), cũng như công cụ “Text” và “Comment”.

Đối với những Object như hình tròn trụ, hình chữ nhật, … hoặc những hình được vẽ từ công cụ Pen, bạn hoàn toàn có thể tùy chỉnh chúng với công cụ “Bend” ( Ctrl ) hoặc tô màu chúng (Paint Bucket– B ) bằng cách click trực tiếp vào Object đó / hoặc click vào tùy chọn “Edit Object” nhé !

Để bật/ tắt “Rulers”, Shift + R là một phím tắt hữu ích nữa mà bạn cần ghi nhớ!

Bạn có thể tạo “Component” và sắp xếp chúng một cách logic. “Component” chính là những yếu tố cơ bản có thể tái sử dụng nhiều lần và dễ dàng trên các màn hình hoặc các trang thiết kế khác nhau của bạn (tương tự như Master). Ví dụ, bạn chọn công cụ “Rectangle”, kéo ra một hình chữ nhật. Tiếp đó, bạn click chuột phải và chọn “Create Component” (Ctrl + Alt + K). Đây chính là một trong những chức năng chính mà nếu là một UI Designer, bạn sẽ rất muốn sử dụng thường xuyên đấy.

Trong trường hợp bạn muốn tạo nút (button). Bạn có thể đi theo cách: Chọn công cụ “Rectangle”, kéo thả theo kích thước mong muốn. Sau đó, bạn chọn “Text” (T) và nhấp vào hình chữ nhật vừa tạo và điền ký tự mong muốn. Tiếp theo, ở phía phải màn hình, bạn sẽ có các tùy chọn như Align (căn chỉnh vị trí bằng cách nhập số trực tiếp hoặc kéo thả), xoay, định dạng font chữ, kích thước, Fill (thay đổi màu sắc), chế độ “blending”, Effect (hiệu ứng),…

• Lưu ý : Bạn hoàn toàn có thể tạo một button tiêu chuẩn khi chỉnh độ bo góc từ 0 thành 8 .

Sau đó, bạn tạo Component theo hướng dẫn ở trên (Ctrl + Alt + K). Lúc này bạn sẽ thấy, các thành phần như Rectangle và Text được hợp lại thành 1 đối tượng duy nhất có tên “Component 1”. Bạn có thể thay đổi tên theo mong muốn. Với biểu tượng cỏ bốn lá hình vuông, Component đó là thành phần chính (main component) và bạn có thể nhân bản chúng thành nhiều phiên bản (instance) (với biểu tượng hình vuông rỗng). Bạn có thể thay đổi các yếu tố ở Main Component và điều này sẽ làm các Instance của chúng thay đổi theo. Tuy nhiên, việc thay đổi bất kỳ Instance nào thì sẽ không ảnh hưởng đến Main Component.

• Lưu ý: Khi đã thay đổi màu của Instance trước, rồi mới thay đổi màu của Main Component thì việc thay đổi màu Main Component sẽ không ảnh hưởng đến Instance đó nữa. Bạn có thể áp dụng quy tắc này để tạo các phần tử cùng một nhóm có cùng kích thước và cấu hình, nhưng mang các trạng thái khác nhau. Ví dụ, các trạng thái của một button như “disabled” / “normal” / “pressed”,…

Bên cạnh đó, bạn cũng có thể kiểm tra các tính năng khác như: “Mask”, “Union Selection”, “Subtract Selection”, “Intersect Selection”, “Exclude Selection” và “Flatten Selection”. Tất cả đều rất “nice” và hữu ích tùy theo mục đích thiết kế của bạn.

Cách sử dụng và cài đặt Figma khá đơn giản. Figma có thể chạy được từ bất kỳ trình duyệt nào. Hoặc bạn có thể tải xuống Figma về máy tính cá nhân. Nếu bạn muốn tham khảo về cách tải ứng dụng Figma, vui lòng tham khảo bài viết này nhé!

Source: https://dvn.com.vn
Category: Tư Vấn