Cách sử dụng Figma cho người mới bắt đầu 2025

Trong một khoảng thời gian rất ngắn, Figma đã trở thành một trong những công cụ thiết kế được sử dụng nhiều nhất trên thế giới và có nhiều lý do cho điều này. Trong khi các công cụ như Adobe Illustrator cần phải mua và cài đặt trên máy của bạn, bạn có thể sử dụng Figma trong trình duyệt web miễn phí mà không cần cài đặt bất kỳ thứ gì. Điều này cũng khiến nó phù hợp với máy chạy macOS, Linux, và thậm chí ChromeOS, ngoài Windows.

Thêm vào đó, Figma cho phép bạn cộng tác với người khác trong cùng một dự án trong thời gian thực, điều này có thể giúp tiết kiệm rất nhiều thời gian. Cuối cùng, công cụ này cực kỳ mạnh mẽ, làm cho nó phù hợp với cả các chuyên gia trong ngành cũng như những người nghiệp dư yêu thích. Vì vậy, nếu bạn muốn học cách sử dụng công cụ thiết kế tuyệt vời này, hãy tham khảo hướng dẫn chi tiết này.

Figma là gì? Figma là một công cụ thiết kế cộng tác trực tuyến cho phép bạn thiết kế ứng dụng, trang web, và nhiều loại khác từ trình duyệt của bạn. Nó chủ yếu được dùng cho thiết kế giao diện người dùng, nhưng cũng có thể dùng cho các mục đích khác. Chương trình có thể chạy trên trình duyệt web hoặc trên máy tính để bàn của bạn và thậm chí cung cấp chức năng hạn chế khi offline.

Thêm vào đó, sau khi bạn thiết kế ứng dụng hay trang web, bạn có thể thử nghiệm trong chính chương trình và thu thập phản hồi nhờ vào công cụ Prototype. Điều tốt nhất về Figma là bạn không cần bất kỳ kiến thức hay kỹ năng lập trình nào để sử dụng nó, điều này làm cho nó phù hợp với mọi người.

Bước 1: Thiết lập tài khoản Figma của bạn

1. Truy cập figma.com trong trình duyệt web của bạn và nhấn vào nút “Get started for free”.

2. Bạn có thể đăng nhập vào Figma sử dụng tài khoản Google của mình hoặc email bằng cách nhấp vào tùy chọn bạn ưa thích.

3. Sau khi bạn đăng nhập vào Figma, bạn sẽ thấy một trang khác nơi bạn có thể nhập một vài thông tin để thiết lập tài khoản của mình. Tại đây, bạn có thể chọn gói của mình và tạo tên nhóm để cộng tác. Sau khi xong, bạn có thể chọn giữa Figma và FigJam, công cụ bảng trắng của Figma. Nhấn vào “I”ll get started on my own”.

Bước 2: Hiểu và điều hướng giao diện khi sử dụng Figma

Sau khi bạn đã tạo tài khoản và đăng nhập, bạn sẽ thấy bảng điều khiển chính của Figma. Chúng ta sẽ bắt đầu sử dụng Figma với những bước cơ bản.

1. Ở bên trái, bạn sẽ thấy tất cả bản nháp, dự án và thùng rác của mình.

2. Bạn cũng sẽ thấy các tùy chọn, chẳng hạn như “New design file” và “New FigJam board” ở trung tâm để bắt đầu các dự án mới.

3. Các dự án bạn đã làm việc và những dự án từ cộng đồng Figma cũng sẽ hiển thị ở đây. Bạn có thể mở và tiếp tục làm việc trên bất kỳ dự án nào bằng cách nhấp chuột vào chúng.

4. Khi bạn chọn một dự án bằng cách nhấp chuột vào nó, giao diện sẽ thay đổi. Một menu sẽ xuất hiện ở bên trái và bao gồm các tùy chọn như Tên dự án, Tệp tin, Trang, Lớp, v.v. Hãy nhớ rằng bạn chỉ có thể tạo ba trang trong một dự án với gói miễn phí.

5. Bạn cũng có thể nhấp vào nút Figma ở trên cùng để xem thêm các tùy chọn.

6. Một menu khác, gọi là bảng Thuộc tính, xuất hiện ở bên phải. Khi bạn chọn một đối tượng trong dự án của mình, tất cả các thuộc tính của nó sẽ xuất hiện ở đây, cho phép bạn dễ dàng chỉnh sửa và thay đổi chúng theo ý muốn.

7. Mặc định, tab “Design” sẽ được kích hoạt trên bảng này, cho phép bạn xem và thay đổi các thuộc tính khác nhau của các phần tử bạn sử dụng trong dự án. Ví dụ, bạn có thể thay đổi kiểu dáng của các đối tượng và màu nền từ tab Design.

8. Khi bạn hoàn tất thiết kế trang web hoặc ứng dụng của mình, bạn có thể nhấp vào tab “Prototype” để chuyển sang nó. Điều này cho phép bạn tạo và xem một phiên bản tương tác của trang web hoặc ứng dụng bạn đang thiết kế, giúp bạn có cái nhìn tốt hơn về cách người dùng sẽ trải nghiệm nó. Bạn có thể liên kết các trang khác nhau của ứng dụng, quyết định cách người dùng sẽ di chuyển từ trang này sang trang khác, thao tác nhấn hoặc nhấp vào các phần tử khác nhau sẽ làm gì, v.v.

9. Để cộng tác với người khác trên dự án, chỉ cần nhấp vào nút “Share” ở trên cùng bên phải. Bạn có thể tùy chọn sao chép liên kết đến toàn bộ dự án, sao chép liên kết nguyên mẫu, sao chép liên kết Dev Mode hoặc xuất bản dự án đến cộng đồng Figma.

10. Ở phía dưới, bạn sẽ tìm thấy bảng Công cụ hoặc thanh công cụ chứa các công cụ khác nhau mà bạn sẽ sử dụng trong các dự án thiết kế của mình.

11. Một số công cụ có các tùy chọn bổ sung mà bạn có thể truy cập bằng cách nhấp vào nút thả xuống. Ví dụ, công cụ đầu tiên là công cụ “Move”, cho phép bạn di chuyển các phần tử khác nhau trong thiết kế của mình. Khi bạn nhấp vào nó, bạn cũng sẽ thấy công cụ “Hand” để di chuyển và công cụ “Scale” để điều chỉnh kích thước của các phần tử.

12. Tiếp theo là công cụ “Frame”, mà bạn sẽ sử dụng để tạo ra các khung trong đó tất cả các đối tượng khác sẽ được đặt trong thiết kế. Các công cụ bổ sung ở đây là công cụ “Section” để chia canvas thành các phần khác nhau và công cụ “Slice” để xuất các phần cụ thể của thiết kế của bạn.

13. Công cụ “Shapes” là công cụ thứ ba từ trái qua, cho phép bạn tạo ra các hình dạng khác nhau, như hình chữ nhật, dòng, elip, v.v. Nó cũng cho phép bạn chèn hình ảnh và video trong thiết kế của mình.

14. Sau đó là công cụ “Pen” để tạo ra các thiết kế vector trong dự án của bạn. Bạn cũng có thể truy cập công cụ “Pencil” từ đây, cho phép bạn phác thảo trên canvas, điều này rất tiện lợi khi bạn muốn chú thích điều gì đó.

15. Ba công cụ cuối cùng không có các tùy chọn bổ sung. Có công cụ “Text” để thêm văn bản, công cụ “Comments” để bình luận và công cụ “Actions”. Công cụ Actions cho phép bạn định nghĩa các bước và hành động khác nhau khi bạn bắt đầu giai đoạn tạo nguyên mẫu sau khi hoàn thành giai đoạn thiết kế.

Bước 2: Tạo một dự án thiết kế mới

Bạn có thể bắt đầu một dự án mới từ bảng điều khiển của Figma.

1. Nhấn vào “Team project” ở bên trái.

2. Sau đó nhấp vào nút “Create” ở trên cùng và chọn “Design file” trong menu thả xuống.

3. Một dự án thiết kế mới sẽ mở trên màn hình của bạn. Bạn có thể đặt tên cho nó bằng cách nhập vào ô văn bản ở góc trên bên trái.

4. Khu vực màu xám là canvas, sẽ làm nền cho dự án của bạn. Bạn có thể vẽ trên đó bằng công cụ bút chì, nhập hình ảnh, thêm hình dạng và khung, và nhiều hơn nữa.
5. Trong Figma, bạn cần sử dụng “Khung” để làm các container cho tất cả các phần tử khác mà bạn sẽ sử dụng trong một dự án thiết kế. Khung hoạt động giống như một bảng nghệ thuật trong các ứng dụng thiết kế khác như Illustrator và Sketch. Nhấn vào công cụ Khung trên bảng Công cụ hoặc sử dụng phím F để chọn nó. Bạn cũng có thể sử dụng phím A cho cùng mục đích.

6. Để tạo khung, nhấp và kéo trên canvas hoặc chọn từ bất kỳ kích thước khung có sẵn nào ở bên phải.

7. Khi bạn tạo khung, bạn sẽ thấy các thuộc tính khác nhau của nó ở bên phải. Thay đổi chúng sẽ cho phép bạn điều khiển cách khung hiển thị.

8. Các dự án có thể có nhiều khung, vì vậy bạn có thể cần phải phóng to và thu nhỏ thường xuyên khi làm việc. Bạn có thể sử dụng phím tắt Shift + + để phóng to và phím tắt Shift + - để thu nhỏ.

9. Bạn có thể di chuyển xung quanh trên canvas bằng công cụ bàn tay, điều này rất hữu ích khi làm việc với các tệp lớn. Nhấn và giữ phím Spacebar và bạn sẽ thấy con trỏ thay đổi thành công cụ bàn tay. Ngoài ra, nhấp vào biểu tượng con trỏ trên thanh công cụ dưới cùng và chọn Công cụ Bàn tay. Sau đó, bạn có thể di chuyển xung quanh canvas bằng cách nhấp và kéo. Trên macOS, bạn sử dụng hai ngón tay để kéo trên bàn di chuột.

10. Để thêm văn bản vào dự án của bạn, nhấn phím T hoặc nhấp vào biểu tượng “T” trong thanh công cụ để chọn công cụ Văn bản và nhấp vào bên trong khung của bạn. Sau đó, nhập văn bản bạn muốn thêm. Nhấn phím Esc để thoát khỏi công cụ Văn bản.

11. Bạn có thể tạo hình chữ nhật cho các nút bằng cách sử dụng nút R hoặc nhấp vào công cụ “Shapes” và chọn tùy chọn “Rectangle”. Sau đó kéo trên khung để tạo một hình chữ nhật.

12. Khi bạn tạo một hình chữ nhật, nó sẽ che khuất văn bản bên dưới. Tất cả các đối tượng bạn tạo sẽ xuất hiện dưới dạng các lớp riêng biệt ở bên trái. Nhấp chuột phải vào lớp văn bản hoặc Ctrl-nhấp chuột trên Mac và sau đó nhấp vào “Bring to front” để di chuyển nó lên trên cùng.

13. Figma cũng cho phép bạn căn chỉnh các đối tượng khác nhau bằng các lệnh “Align”. Để làm điều đó, kéo và chọn các đối tượng khác nhau, như hộp văn bản và hình chữ nhật sau khi nhấn phím V hoặc phím Escape. Các lệnh Align xuất hiện ở bên phải; nhấp vào bất kỳ tùy chọn nào, như “Align horizontal centers” hoặc “Align vertical centers”.

14. Để thay đổi màu sắc của văn bản, cuộn xuống bảng Thuộc tính ở bên phải và nhấp vào mẫu màu dưới “Fill”. Sau đó, bạn có thể chọn bất kỳ màu nào từ cửa sổ bật lên.

15. Bạn cũng có thể thay đổi phông chữ, kích thước chữ, thêm hiệu ứng phông chữ, và hơn thế nữa cho các phần tử khác nhau mà bạn sử dụng trong dự án từ bảng Thuộc tính. Khi bạn quen thuộc với những điều cơ bản này, bạn có thể bắt đầu làm việc trên các dự án thực tế, như thiết kế ứng dụng và trang web.

Những điều cần biết

• Mặc dù Figma là một công cụ thiết kế cộng tác trực tuyến, bạn cũng có thể sử dụng nó ở chế độ offline trong trình duyệt cũng như ứng dụng máy tính để bàn. Bất kỳ thay đổi nào bạn thực hiện đối với dự án khi sử dụng Figma offline sẽ được lưu trữ cục bộ và sẽ có hiệu lực khi bạn kết nối lại với internet.
• Bạn có thể mở rộng khả năng của Figma như một chương trình thiết kế bằng cách sử dụng các plugin. Figma hỗ trợ rất nhiều plugin mà bạn có thể xem và cài đặt từ thư viện plugin.
• Để cộng tác trên dự án, bạn có thể chia sẻ nó với người khác bằng nút “Share”. Figma cho phép bạn không chỉ sao chép liên kết đến dự án, mà còn chia sẻ các liên kết nguyên mẫu, liên kết Dev Mode, và xuất bản dự án của bạn đến cộng đồng.
• Bạn có thể tìm thấy rất nhiều dự án, tương tác và học hỏi cách sử dụng Figma từ các người dùng khác trong cộng đồng Figma từ cộng đồng Figma. Các thiết kế cộng đồng có sẵn miễn phí cho tất cả người dùng kiểm tra và bạn cũng có thể nhận các tài nguyên khác, như thư viện, plugin, bộ icon, và nhiều hơn nữa.