Figma là gì? Cách cài đặt và sử dụng Figma

Theo mình biết thì trước đây BA thường sử dụng một số công cụ như Sketch, Draw.io hay Axure RP để vẽ mockup, còn Designer thì quen dùng Adobe Illustrator hoặc XD để thiết kế. Mỗi công cụ đều có những ưu và nhược điểm riêng, cũng như sự phù hợp với từng đối tượng sử dụng.

Tuy nhiên, giờ đây chúng tôi đã tìm được một “ngôn ngữ chung”, một công cụ tiện lợi và tiết kiệm thời gian hơn trong quá trình làm việc, trao đổi giữa không chỉ BA và Designer mà còn giữa tất cả các bên. một dự án, đó là Figma. Chính vì vậy trong bài viết này mình sẽ giới thiệu sơ qua về Figma là gì, các tính năng nổi bật cũng như cách cài đặt và sử dụng nó để mọi người cùng tìm hiểu.

Figma là một công cụ thiết kế giao diện người dùng (Giao diện người dùng) khá phổ biến hiện nay trong cộng đồng công nghệ, với giao diện thân thiện và dễ sử dụng. Vì là công cụ thiết kế dựa trên đám mây nên Figma hỗ trợ làm việc nhóm tốt hơn các công cụ ngoại tuyến.

1. Khả năng tương thích

Figma hoạt động trên mọi hệ điều hành với các trình duyệt web: Mac, Windows, Linux… Chỉ với một liên kết, bất kỳ ai cũng có thể mở, chỉnh sửa, bình luận, chia sẻ một dự án trên Figma dù đang sử dụng các hệ điều hành khác nhau.

2. Tính năng cộng tác thời gian thực

Figma hoạt động trên trình duyệt web (dựa trên trình duyệt), vì vậy mọi người trong dự án có thể xem nhận xét và chỉnh sửa trong khi làm việc trên tệp cùng nhau. Điều này giúp quá trình trao đổi, cập nhật giữa các đội diễn ra dễ dàng và nhanh chóng hơn.

Đối với mỗi thành viên xem hoặc chỉnh sửa một tập tin, Figma được thể hiện bằng một hình tròn trên thanh công cụ với tên riêng của nó. Nhấp vào hình đại diện này và bạn sẽ thấy phần nào của thành viên đang xem thiết kế.

3. Chia sẻ tệp đơn giản

Khi làm việc trên Figma, bạn có thể chia sẻ bằng cách gửi liên kết và phân quyền (xem, bình luận, chỉnh sửa) cho từng tài khoản tương tự như khi làm việc trên Google Docs. Tính năng này cũng giải phóng người dùng khỏi các thao tác lưu trữ và chuyển các tập tin và các phiên bản cập nhật giữa các nhóm dự án. Điều này giúp tiết kiệm thời gian cho các bên, bộ nhớ của thiết bị và giảm thiểu sai sót, nhầm lẫn trong quá trình trao đổi tập tin.

Ngoài ra, khi chia sẻ một file có nhiều tính năng, nhiều khung hình, chúng ta có thể chia sẻ một số khung hình đang chọn (Liên kết đến khung hình đã chọn), giúp người được chia sẻ dễ dàng tìm kiếm và tập trung vào các tính năng. khả năng cụ thể.

4. Phản hồi là thuận tiện

Với tính năng hỗ trợ bình luận ngay trên trình duyệt, mọi người có thể trao đổi, góp ý đến từng chi tiết trong thiết kế. Những nhận xét này cũng có thể được theo dõi qua Slack hoặc email. Bạn có thể sử dụng tính năng này để ghi lại các cuộc thảo luận và chỉnh sửa tệp ngay lập tức trong các cuộc họp.

5. Giúp các nhà phát triển chủ động hơn

Figma hiển thị các đoạn mã cho từng đối tượng đã chọn. Mã có thể được hiển thị dưới dạng CSS, dành cho iOS hoặc Android. Và như đã đề cập ở trên, người dùng Figma không còn phải chuyển tệp cho các bên dự án, có nghĩa là các nhà phát triển không còn phải đợi tệp chuyển sang chế độ ngoại tuyến hoặc chờ Nhà thiết kế xuất các thành phần nhất định. Trong thiết kế nữa, bạn có thể chủ động quan sát, lấy thông số để viết mã hoặc kết xuất đối tượng ngay trên file Figma.

6. Lưu trữ trực tuyến

Tất cả kết quả đã được lưu trữ trên đám mây nên bạn không lo mất file, hỏng máy… thậm chí không phải lo vất vả cả ngày… chưa có thời gian bấm Save. 😂

7. Cửa hàng plugin

Hiện tại, Figma đã cung cấp kho plugin khá đầy đủ hỗ trợ người dùng đa dạng hóa các thiết kế của mình một cách nhanh chóng và tiện lợi.

8. Phiên bản tệp

Figma có chức năng tạo phiên bản tệp tích hợp. Chức năng này cho phép bạn lưu trạng thái của tệp thiết kế bất kỳ lúc nào. Các thành viên trong nhóm có thể tự do sửa đổi mà không lo bị theo dõi phiên bản.

Hiện tại, chức năng này của Figma được giới hạn cho người dùng miễn phí. Bạn chỉ có thể xem lại lịch sử chỉnh sửa tệp trong 30 ngày qua. Tuy nhiên, nó cũng giúp ích ít nhiều cho công việc thiết kế của bạn.

Các tệp phiên bản đã lưu có thể được khôi phục theo quyết định của Nhà thiết kế và không ảnh hưởng đến tệp gốc. Tệp được khôi phục có thể được ghi đè hoặc nhân bản để tạo tệp mới.

9. Nguyên mẫu tích hợp

Với Figma, bạn không cần dùng đến các công cụ tạo mẫu như Invision hay Marvel, cũng như không cần xuất file ảnh để chuyển cho các bộ phận liên quan như trước đây.

Nguyên mẫu Figma có thể được chia sẻ dưới dạng tệp thiết kế. Những người có liên kết tệp nguyên mẫu Figma được chia sẻ có thể xem và trực tiếp nhận xét, phản hồi được lưu trong bảng điều khiển và có thể được theo dõi thông qua Slack. Các nhà phát triển cũng có thể xem quy trình làm việc và gửi tin nhắn trực tiếp cho Nhà thiết kế.

10. Chức năng Figma cho Nhóm thuận tiện cho việc tạo Hệ thống thiết kế

Hệ thống Thiết kế đang dần trở thành một phần thiết yếu đối với nhiều công ty. Hệ thống Thiết kế sử dụng các thành phần (được gọi là ký hiệu trong Sketch và Illustrator) được sử dụng lại trong nhiều ngữ cảnh khác nhau. Các thành phần này được tập hợp thành một thư viện được sử dụng bởi cả các nhà thiết kế UI / UX và các nhà phát triển front-end.

Khi thư viện nhóm Figma được tạo, các thành viên trong nhóm có thể ngay lập tức truy cập, xem và sử dụng lại các thành phần này trong các dự án khác nhau. Lưu ý rằng các thành phần này sẽ tự động cập nhật trên tất cả các tệp khi có sự thay đổi từ người tạo.

Cách tổ chức các thành phần trong thư viện nhóm Figma rất đơn giản. Nhà thiết kế có thể tạo một tệp riêng để chứa các thành phần hoặc sử dụng các thành phần hiện có trong tệp thiết kế. Mỗi khung trong trang Figma được hiểu là một phần trong thư viện, vì vậy bạn không cần đặt tên cho thành phần là A Aa Aa1…

Figma là một công cụ thiết kế rất tốt để làm việc theo nhóm. Đây cũng là một công cụ đơn giản, dễ sử dụng và gọn nhẹ so với các phần mềm cùng loại khác.

Làm thế nào để cài đặt và sử dụng Figma?

1. Cài đặt Figma

Bạn có thể cài đặt Figma theo 2 cách:

– Đăng nhập vào trang web của Figma https://www.figma.com trên trình duyệt của bạn.

– Cài đặt phần mềm trên máy tính của bạn bằng cách nhấp vào liên kết https://www.figma.com/downloads/

2. Đăng ký Figma. tài khoản

Bước 1: Truy cập vào Figma

Bước 2: Nhấn nút Dùng thử Figma miễn phí

Bước 3: Bạn có thể đăng ký qua tài khoản Google hoặc đăng ký qua Email, sau đó bấm Tạo tài khoản

Bước 4: Điền thông tin và nhấn Tạo tài khoản

Bước 5: Kích hoạt tài khoản bằng cách xác nhận trong email

Bước 6: Đi tới Figma và tạo một dự án

Bước 7: Figma sẽ có 2 gói tài khoản nếu bạn muốn làm các Dự án không giới hạn với các tính năng Cao cấp. Nhấp vào Chọn Chuyên nghiệp để tiến hành mua gói hoặc nhấp vào Bắt đầu miễn phí để sử dụng phiên bản miễn phí.

Bước 8: Trong bước tiếp theo, bạn có thể trực tiếp chọn Thiết kế với Figma hoặc bạn cần động não với Nhóm, sau đó nhấp vào Bảng trắng với Figma!

3. Sử dụng Figma

Sau khi đăng nhập, Figma sẽ tự động chuyển hướng người dùng đến màn hình quản lý Dự án. Khi đó, cột bên trái của màn hình sẽ là các dự án đã thực thi và cột bên phải sẽ là thanh menu. Bấm vào từng Project sẽ xuất hiện các thiết kế trong Project đó. Bạn cũng có thể tạo một Dự án mới bằng cách nhấp vào biểu tượng dấu cộng (+).

Dự án màn hình 1 sẽ bao gồm:

– Khung bên trái là màn hình giao diện. Đây là nơi có thể thiết kế hàng chục Artboards trên cùng một khung.

– Khung giữa là nơi bạn vẽ trực tiếp.

– Khung phải có các Option để điều chỉnh các thông số cho thiết kế. Nó bao gồm các tab như Nguyên mẫu, Thiết kế, Mã, v.v.

Nguồn tham khảo:

Figma – sau hơn một năm sử dụng bởi một nhà thiết kế giao diện người dùng – Telos

Figma là gì? Làm thế nào để cài đặt và sử dụng thành thạo Figma? (itnavi.com.vn)

Figma là gì? Cách sử dụng Figma để thiết kế giao diện Web / Ứng dụng (cellphones.com.vn)

Hy vọng sau khi đọc xong bài viết, những bạn quan tâm đến Figma hoặc đang sử dụng một số phần mềm thiết kế khác có thể có cái nhìn tổng quan về Figma và các tính năng quan trọng của nó, cũng như cách cài đặt và sử dụng công cụ. đây. Những bạn nào đã và đang sử dụng Figma có thể chia sẻ kinh nghiệm hoặc góp ý bằng cách comment bên dưới để mình hoàn thiện bài viết hơn nhé!