Cách sử dụng Figma?

Figma là một công cụ thiết kế giao diện dựa trên nền tảng web, cho phép người dùng thao tác trực tiếp trên trình duyệt hoặc ứng dụng máy tính mà không cần cài đặt phần mềm phức tạp. Với cơ chế hoạt động dựa trên điện toán đám mây, Figma hỗ trợ làm việc nhóm thời gian thực, đồng bộ dữ liệu và quản lý phiên bản hiệu quả.

Đặc biệt, Figma cung cấp hệ thống công cụ vẽ Vector, thiết lập Layout Grid, tạo Component và Plugin mở rộng, giúp tối ưu hóa quy trình thiết kế UI/UX. Bài viết này sẽ đi sâu vào cách sử dụng Figma từ các thao tác cơ bản đến nâng cao, để bạn có thể khai thác toàn bộ sức mạnh của nền tảng thiết kế hiện đại này.

Mua tài khoản Figma tại: >> Tài khoản Figma

1. Cách sử dụng Figma?

– Tạo tài khoản:

Đầu tiên các bạn “Tạo tài khoản bằng cách”: Truy cập Figma.com và tạo tài khoản miễn phí. Sau đó, chọn Design File + từ Menu bên phải. 

– Giao diện:

– Canvas:

Khi bạn tạo một tệp thiết kế mới, khung vẽ sẽ xuất hiện. Đây là không gian làm việc đầy đủ của bạn trong Figma.

– Frames:

Khung là các bảng vẽ của Figma, nếu bạn đã quen thuộc với các khung vẽ từ ứng dụng Creative Cloud của Adobe. Để tạo khung, hãy chọn phím F trên bàn phím hoặc vào menu Công cụ và nhấp vào biểu tượng Khung . Chọn từ nhiều cài đặt sẵn:

• Phone
• Tablet
• Desktop
• Watch
• Presentation
• Paper
• Social media
• Figma Community

– Vector shapes & colors:

Bạn có thể chọn trong số các hình dạng mặc định có sẵn trên Tools menu :

• Rectangle
• Line
• Arrow
• Ellipse
• Polygon
• Star
• Images

– Pen Tool:

Nếu bạn muốn sáng tạo hoặc muốn vẽ một hình dạng phức tạp, bạn có thể sử dụng công cụ bút (P).

– Layers:

Chúng sẽ tự động xuất hiện khi một phần tử được tạo. Bạn có thể truy cập chúng trong menu bên trái.

– Groups:

Bạn có thể nhóm các lớp bằng cmd + G để sắp xếp các tệp của mình.

– Pages:

Các trang nằm trong menu bên trái và bạn có thể sử dụng chúng cho các phần khác nhau của dự án, ví dụ như Wireframes, UI.

– Images:

Nếu bạn muốn sử dụng hình ảnh, bạn có thể dễ dàng kéo và thả chúng vào khung vẽ. Figma cho phép điều chỉnh bằng cách nhấp vào biểu tượng hình ảnh trong bảng Kiểm tra như độ phơi sáng , độ tương phản , độ bão hòa , v.v.

– Typography:

Nhấn T hoặc tìm kiếm biểu tượng trong menu Công cụ và bắt đầu viết. Figma đã cài đặt sẵn tất cả các Phông chữ Google, nhưng nếu bạn muốn sử dụng các phông chữ khác, bạn có thể cài đặt Figma Font Helper và làm việc với phông chữ máy tính của riêng mình. Bạn có thể tùy chỉnh các thuộc tính văn bản trong bảng Kiểm tra , chẳng hạn như kích thước , màu sắc , khoảng cách chữ , v.v.

– Styles:

Là một tính năng cực kỳ thú vị của Figma cho phép bạn lưu các thuộc tính lặp lại như màu sắc, văn bản, bóng đổ và lưới . Bạn sẽ tiết kiệm được rất nhiều thời gian hơn.

Để xác định kiểu màu, hãy chọn hue, đi tới Inspect Panel >> Fill, nhấp vào biểu tượng có bốn dấu chấm (Style), sau đó nhấp vào + để đặt tên và lưu màu của bạn.

Để tạo kiểu văn bản của riêng bạn, hãy nhấp vào Style Button trong bảng Inspect panel và nhấp vào +. Hoàn tất! Bạn có thể lặp lại quy trình này để lưu trữ lưới và các hiệu ứng như đổ bóng và làm mờ.

– Components:

Component là các yếu tố giúp tạo tính nhất quán trong dự án của bạn. Có Master Components và Instances. Master Component  là thành phần thiết lập các giá trị thuộc tính; việc chỉnh sửa thành phần này sẽ ảnh hưởng đến tất cả các instance của nó.

Để tạo một thành phần, hãy chọn một nhóm lớp và nhấp chuột phải vào Create component hoặc nhấn opt + cmd + K.

– Constraints

Constraints xác định các đối tượng hoạt động khi khung được thay đổi kích thước. Constraints được đặt mặc định trên cùng và bên trái. Bạn có thể chỉnh sửa các ràng buộc này trong Inspect Panel  bên dưới Constraints bằng cách chọn các thành phần trong khung. Bạn có thể áp dụng chúng trên cả trục x (ngang) và y (dọc).

– Keyboard shortcuts:

Để tăng tốc công việc, bạn có thể tìm thấy các phím tắt ở góc dưới bên phải màn hình. Nhấp vào nút tròn ? (Help and resources) > Keyboard shortcuts hoặc chỉ cần nhấn ^ + shift + ? .

– Prototyping:

Để hình thành ý tưởng về cách người dùng tương tác với sản phẩm bạn thiết kế. Bạn có thể tạo kết nối, tương tác, hoạt ảnh và xem trước nguyên mẫu của mình. Dưới đây là một số định nghĩa cơ bản:

• Connections được tạo giữa các khung và các thành phần bên trong khung. Hãy nhớ nhấp vào Prototype từ Inspect panel để tạo kết nối. Nhấp vào thành phần/khung của bạn và bạn sẽ thấy một vòng tròn xuất hiện. Nhấp và giữ để chuyển hướng kết nối đến một khung mới.
• Interactions and animations: : Sau khi tạo kết nối, Interaction details  sẽ xuất hiện. Bạn có thể chọn từ nhiều loại tương tác và hoạt ảnh.
• Prototypes: Khi bạn đã sẵn sàng để chơi với nguyên mẫu của mình, hãy nhấp vào nút â–¶ ở góc trên bên phải màn hình.

– Hợp tác theo thời gian thực:

Bạn có thể làm việc cùng một dự án với nhóm của mình theo thời gian thực. Dưới đây là một số công cụ tiện dụng giúp việc này dễ dàng hơn: Bạn có thể truy cập bình luận ở menu trên cùng bên trái hoặc chỉ cần nhấn phím C.

• Chế độ xem : Khi chia sẻ thiết kế, hãy đảm bảo bạn biết thiết kế đang ở chế độ nào. Từ menu thả xuống sau khi nhấp vào nút Chia sẻ, hãy chọn ”  Có thể xem”  hoặc ”  Có thể chỉnh sửa” . Chế độ xem rất phù hợp để chia sẻ với các nhà phát triển.
• Chế độ chỉnh sửa : Để chia sẻ thiết kế của bạn với nhóm thiết kế, hãy đảm bảo bạn đã  bật chế độ chỉnh sửa .

– Xuất tập tin:

Khi xuất tệp trong Figma, bạn sẽ thấy một số tùy chọn. Hãy lưu ý những điều sau:

• SVG  – dành cho tệp vector
• PNG  – dành cho hình ảnh và đồ họa có nền trong suốt
• JPG  – cho tất cả hình ảnh
• PDF  – cho các trang chất lượng cao

Về kích thước, 1x là kích thước thực tế. Bạn có thể xuất tài sản ở  kích thước 2x  (gấp đôi kích thước ban đầu), 3x , 4x hoặc bạn có thể nhập các hệ số nhân khác. 

2. Cuối cùng:

Trên đây là những cách giúp bạn có thể sử dụng Figma một cách cơ bản, Nếu có điều gì cần update xin đừng ngần ngại cmt xuống bên dưới cho mình được biết nhé.