VNR Content
Pearl
Theo mình biết thì trước đây BA hay sử dụng một số công cụ như Sketch, Draw.io hay Axure RP để vẽ mockup, còn Designer lại quen sử dụng Adobe Illustrator hay XD để thiết kế. Mỗi công cụ đều có ưu, nhược điểm riêng, cũng như tính phù hợp đối với từng người dùng.
Tuy nhiên hiện nay chúng mình đã tìm được "ngôn ngữ chung", một công cụ thuận tiện và tiết kiệm được nhiều thời gian hơn trong quá trình làm việc, trao đổi giữa không chỉ BA với Designer mà là giữa tất cả các bên trong một dự án, đó là Figma. Do đó bài viết này mình sẽ giới thiệu sơ qua 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 để mọi người cùng tìm hiểu nhé.
Figma hoạt động tương thích trên tất cả các hệ điều hành có trình duyệt web: Macs, Windows, Linux… Chỉ với một đường link, mọi người đều có thể mở, chỉnh sửa, nhận xét, chia sẻ một dự án trên Figma dù đang 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 (real-time collaboration)
Figma hoạt động trên trình duyệt web (browser-based), do đó mọi người trong dự án đều có thể nhìn thấy những nhận xét, chỉnh sửa ngay khi đang làm việc chung trên file đó. Điều này giúp quá trình trao đổi, cập nhật giữa các team dễ dàng và nhanh chóng hơn.
Với mỗi thành viên đang xem hoặc chỉnh sửa file, Figma đại diện bằng một avatar tròn trên thanh công cụ với tên riêng. Click vào avatar này bạn sẽ được thấy thành viên đó đang nhìn phần nào trên design.
3. Chia sẻ file đơn giản
Khi làm việc trên Figma, bạn có thể chia sẻ bằng việc gửi link và phân quyền (xem, nhận xét, chỉnh sửa) đối với từng account tương tự như 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 những thao tác lưu trữ và chuyển qua lại các file, các phiên bản cập nhật giữa các team trong 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 cả những sai sót, nhầm lẫn trong quá trình trao đổi file.
Ngoài ra, khi chia sẻ một file có nhiều tính năng, nhiều frame, chúng ta có thể chia sẻ một số frame mà mình đang chọn (Link to selected frame), giúp người được chia sẻ dễ tìm và tập trung hơn vào các tính năng cụ thể.
4. Feedback 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 ý đối với từng chi tiết trong bản thiết kế. Ngoài ra những bình luận này còn 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 chú lại những thảo luận và sửa file ngay lập tức trong các cuộc họp.
5. Giúp developer chủ động hơn
Figma hiển thị code snippets cho từng đối tượng được chọn. Code có thể hiển thị dưới dạng CSS, dành cho iOS hay Android. Và như đã đề cập ở trên, người dùng Figma không còn phải chuyển qua lại các file cho các bên trong dự án, điều này đồng nghĩa với việc các bạn Dev cũng không còn phải chờ file offline hay chờ Designer export thành phần nào đó trong thiết kế nữa, mà có thể chủ động quan sát, lấy các thông số để code hoặc kết xuất các đối tượng ngay trên file Figma.
6. Lưu trữ online
Mọi thành quả đã được lưu trữ trên nền tảng đám mây, nên bạn không sợ mất file, hỏng máy… thậm chí cũng không còn phải lo hì hục cả ngày rồi …chưa kịp bấm Save
7. Kho Plugin
Hiện nay Figma đã cung cấp kho plugin khá đầy đủ để hỗ trợ người dùng có thể đa dạng hóa thiết kế của mình 1 cách nhanh chóng và thuận tiện.
8. File versioning
Figma tích hợp sẵn chức năng file versioning. Chức năng này cho phép bạn lưu lại trạng thái của file design bất kỳ lúc nào. Các thành viên trong team có thể thoải mái sửa đổi mà không lo lắng về việc tracking các version.
Hiện tại chức năng này của Figma có hạn chế cho người dùng miễn phí. Bạn chỉ có thể xem lại lịch sử sửa file trong 30 ngày gần nhất. Tuy nhiên nó cũng giúp ích dù ít dù nhiều cho công việc design của bạn.
Các file version được lưu lại có thể được khôi phục dựa theo ý muốn của Designer và không ảnh hướng đến file gốc. File khôi phục có thể được ghi đè lên file gốc hoặc duplicate để tạo ra file mới.
9. Prototype tích hợp sẵn
Với Figma, bạn không cần phải nhờ đến các công cụ hỗ trợ prototype như Invision hay Marvel, bạn cũng không cần phải export ra file hình để chuyển cho các bộ phận liên quan như trước đây.
Figma prototype có thể được chia sẻ như file design. Những người có link file Figma prototype đã được share có thể xem và trực tiếp comment, feedback được lưu lại trong panel và có thể track thông qua Slack. Developer cũng có thể xem workflow, gửi tin nhắn trực tiếp cho Designer.
10. Chức năng Figma dành cho Team thuận lợi cho việc tạo Design System
Design System dần trở thành một phần thiết yếu cho nhiều công ty. Design System sử dụng các component (trong Sketch và Illustrator gọi là symbol) được tái sử dụng trong nhiều ngữ cảnh khác nhau. Các component này được tập hợp lại thành một thư viện sử dụng cho cả UI/UX designer và front-end developer.
Một khi Figma team library được tạo, các thành viên trong team ngay lập tức có thể truy cập, xem và tái sử dụng các component này trong các dự án khác nhau. Lưu ý là các component này sẽ tự động cập nhật trên tất cả các file một khi có thay đổi từ người tạo.
Cách tổ chức component trong Figma team library rất đơn giản. Designer có thể tạo một file riêng cho việc chứa các component, hoặc sử dụng các component sẵn có trên file design. Mỗi frame trong page Figma được hiểu là một section trong library, do đó bạn không cần phải đặt tên cho component dạng A\A.a\A.a.1…
Figma là một công cụ design hỗ trợ rất tốt cho teamwork. Đâ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.
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 bằng 2 cách:
- Login vào trang web của Figma https://www.figma.com trên trình duyệt.
- Cài đặt phần mềm trên máy tính bằng cách click vào link https://www.figma.com/downloads/
2. Đăng ký tài khoản Figma
Bước 1: Truy cập vào Figma
Bước 2: Nhấn nút Try Figma for free
Bước 3: Bạn có thể đăng ký qua tài khoản Google hoặc đăng ký qua Email, sau đó ấn Create Account
Bước 4: Điền thông tin và ấn Create Account
Bước 5: Kích hoạt tài khoản bằng cách xác nhận trong email
Bước 6: Truy cập Figma và tạo project
Bước 7: Figma sẽ có 2 gói tài khoản nếu bạn muốn làm được nhiều Project không giới hạn cùng với những tính năng Premium. Hãy nhấn Choose Professional để tiến hành mua gói hoặc nhấn Start for free để dùng bản miễn phí.
Bước 8: Ở bước tiếp theo, bạn có thể lựa chọn trực tiếp Design with Figma hoặc bạn cần brainstorm cùng với Team thì hãy nhấn Whiteboard with Figma nhé!
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ý các Project. Khi đó, cột bên trái màn hình sẽ là các Project đã thực hiện và cột bên phải là thanh menu. Click vào từng Project sẽ xuất hiện các thiết kế tại Project đó. Bạn cũng có thể tạo một Project mới bằng cách click vào icon dấu cộng (+)
Màn hình 1 project sẽ bao gồm:
- Khung trái là các màn hình giao diện. Đây là nơi có thể thiết kế trên cùng một khung hình hàng chục Artboards.
- Khung giữa là nơi mà bạn vẽ trực tiếp.
- Khung phải chứa các Option điều chỉnh các thông số cho thiết kế. Nó bao gồm các tab như Prototype, Design, Code,…
Nguồn tham khảo:
Figma - sau hơn một năm sử dụng của một UI designer - 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 design giao diện Web/App (cellphones.com.vn)
Hi vọng sau khi đọc bài viết, các 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ể hiểu khái quát về Figma và những tính năng quan trọng, cũng như cách cài đặt và sử dụng công cụ này. Các bạn đã và đang dùng Figma có thể chia sẻ trải nghiệm của mình hoặc góp ý bằng cách comment phía dưới để mình hoàn thiện bài viết tốt hơn nhé!
Tuy nhiên hiện nay chúng mình đã tìm được "ngôn ngữ chung", một công cụ thuận tiện và tiết kiệm được nhiều thời gian hơn trong quá trình làm việc, trao đổi giữa không chỉ BA với Designer mà là giữa tất cả các bên trong một dự án, đó là Figma. Do đó bài viết này mình sẽ giới thiệu sơ qua 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 để mọi người cùng tìm hiểu nhé.
Figma là gì?
Figma là một công cụ thiết kế UI (User Interface - 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ế trên nền tảng đám mây (cloud-based) nên Figma hỗ trợ làm việc nhóm tốt hơn so với những công cụ offline.Tính năng nổi bật của Figma
1. Tính tương thíchFigma hoạt động tương thích trên tất cả các hệ điều hành có trình duyệt web: Macs, Windows, Linux… Chỉ với một đường link, mọi người đều có thể mở, chỉnh sửa, nhận xét, chia sẻ một dự án trên Figma dù đang 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 (real-time collaboration)
Figma hoạt động trên trình duyệt web (browser-based), do đó mọi người trong dự án đều có thể nhìn thấy những nhận xét, chỉnh sửa ngay khi đang làm việc chung trên file đó. Điều này giúp quá trình trao đổi, cập nhật giữa các team dễ dàng và nhanh chóng hơn.
Với mỗi thành viên đang xem hoặc chỉnh sửa file, Figma đại diện bằng một avatar tròn trên thanh công cụ với tên riêng. Click vào avatar này bạn sẽ được thấy thành viên đó đang nhìn phần nào trên design.
Khi làm việc trên Figma, bạn có thể chia sẻ bằng việc gửi link và phân quyền (xem, nhận xét, chỉnh sửa) đối với từng account tương tự như 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 những thao tác lưu trữ và chuyển qua lại các file, các phiên bản cập nhật giữa các team trong 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 cả những sai sót, nhầm lẫn trong quá trình trao đổi file.
Ngoài ra, khi chia sẻ một file có nhiều tính năng, nhiều frame, chúng ta có thể chia sẻ một số frame mà mình đang chọn (Link to selected frame), giúp người được chia sẻ dễ tìm và tập trung hơn vào các tính năng cụ thể.
4. Feedback 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 ý đối với từng chi tiết trong bản thiết kế. Ngoài ra những bình luận này còn 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 chú lại những thảo luận và sửa file ngay lập tức trong các cuộc họp.
Figma hiển thị code snippets cho từng đối tượng được chọn. Code có thể hiển thị dưới dạng CSS, dành cho iOS hay Android. Và như đã đề cập ở trên, người dùng Figma không còn phải chuyển qua lại các file cho các bên trong dự án, điều này đồng nghĩa với việc các bạn Dev cũng không còn phải chờ file offline hay chờ Designer export thành phần nào đó trong thiết kế nữa, mà có thể chủ động quan sát, lấy các thông số để code hoặc kết xuất các đối tượng ngay trên file Figma.
Mọi thành quả đã được lưu trữ trên nền tảng đám mây, nên bạn không sợ mất file, hỏng máy… thậm chí cũng không còn phải lo hì hục cả ngày rồi …chưa kịp bấm Save
7. Kho Plugin
Hiện nay Figma đã cung cấp kho plugin khá đầy đủ để hỗ trợ người dùng có thể đa dạng hóa thiết kế của mình 1 cách nhanh chóng và thuận tiện.
Figma tích hợp sẵn chức năng file versioning. Chức năng này cho phép bạn lưu lại trạng thái của file design bất kỳ lúc nào. Các thành viên trong team có thể thoải mái sửa đổi mà không lo lắng về việc tracking các version.
Hiện tại chức năng này của Figma có hạn chế cho người dùng miễn phí. Bạn chỉ có thể xem lại lịch sử sửa file trong 30 ngày gần nhất. Tuy nhiên nó cũng giúp ích dù ít dù nhiều cho công việc design của bạn.
Các file version được lưu lại có thể được khôi phục dựa theo ý muốn của Designer và không ảnh hướng đến file gốc. File khôi phục có thể được ghi đè lên file gốc hoặc duplicate để tạo ra file mới.
9. Prototype tích hợp sẵn
Với Figma, bạn không cần phải nhờ đến các công cụ hỗ trợ prototype như Invision hay Marvel, bạn cũng không cần phải export ra file hình để chuyển cho các bộ phận liên quan như trước đây.
Figma prototype có thể được chia sẻ như file design. Những người có link file Figma prototype đã được share có thể xem và trực tiếp comment, feedback được lưu lại trong panel và có thể track thông qua Slack. Developer cũng có thể xem workflow, gửi tin nhắn trực tiếp cho Designer.
10. Chức năng Figma dành cho Team thuận lợi cho việc tạo Design System
Design System dần trở thành một phần thiết yếu cho nhiều công ty. Design System sử dụng các component (trong Sketch và Illustrator gọi là symbol) được tái sử dụng trong nhiều ngữ cảnh khác nhau. Các component này được tập hợp lại thành một thư viện sử dụng cho cả UI/UX designer và front-end developer.
Một khi Figma team library được tạo, các thành viên trong team ngay lập tức có thể truy cập, xem và tái sử dụng các component này trong các dự án khác nhau. Lưu ý là các component này sẽ tự động cập nhật trên tất cả các file một khi có thay đổi từ người tạo.
Figma là một công cụ design hỗ trợ rất tốt cho teamwork. Đâ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.
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 bằng 2 cách:
- Login vào trang web của Figma https://www.figma.com trên trình duyệt.
- Cài đặt phần mềm trên máy tính bằng cách click vào link https://www.figma.com/downloads/
2. Đăng ký tài khoản Figma
Bước 1: Truy cập vào 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ý các Project. Khi đó, cột bên trái màn hình sẽ là các Project đã thực hiện và cột bên phải là thanh menu. Click vào từng Project sẽ xuất hiện các thiết kế tại Project đó. Bạn cũng có thể tạo một Project mới bằng cách click vào icon dấu cộng (+)
Màn hình 1 project sẽ bao gồm:
- Khung trái là các màn hình giao diện. Đây là nơi có thể thiết kế trên cùng một khung hình hàng chục Artboards.
- Khung giữa là nơi mà bạn vẽ trực tiếp.
- Khung phải chứa các Option điều chỉnh các thông số cho thiết kế. Nó bao gồm các tab như Prototype, Design, Code,…
Nguồn tham khảo:
Figma - sau hơn một năm sử dụng của một UI designer - 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 design giao diện Web/App (cellphones.com.vn)
Hi vọng sau khi đọc bài viết, các 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ể hiểu khái quát về Figma và những tính năng quan trọng, cũng như cách cài đặt và sử dụng công cụ này. Các bạn đã và đang dùng Figma có thể chia sẻ trải nghiệm của mình hoặc góp ý bằng cách comment phía dưới để mình hoàn thiện bài viết tốt hơn nhé!
