Cập nhật 20:03, 31/08/2023
1353 lượt xem
Admin
Figma là gì? Tuy mới ra mắt năm 2016, Figma đã nhanh chóng trở thành công cụ thiết kế phổ biến trên toàn thế giới. Không chỉ nổi tiếng với giao diện thân thiện, Figma còn có nhiều tính năng giúp quá trình hợp tác của designer và developer trở nên “dễ thở” hơn.
Nhiều “gã khổng lồ kỹ thuật số” cũng đang lựa chọn Figma cho quá trình thiết kế và dựng prototypes của họ. Femke van Schoonhoven, Product Designer tại Uber đã mô tả Figma là “một cách tuyệt vời để tổ chức việc thiết kế vì nó giúp bạn tìm thấy mọi thứ bạn cần khi bạn cần”.
Mục lục [Ẩn]
Figma là một công cụ thiết kế đồ họa vector chạy trên trình duyệt web, thường dùng để thiết kế UI và dựng prototypes. Figma cung cấp tài nguyên cho mọi khâu của quá trình tổ chức thiết kế, từ brainstorm ý tưởng concept cho đến khởi tạo code từ mẫu thiết kế.
Figma có thể được xem là Google Docs phiên bản dành cho thiết kế. Cũng giống như Docs hay Sheets, Figma cho phép nhiều người cộng tác trực tuyến trong một “file”. Các thành viên tham gia dự án có thể cùng chỉnh sửa, bình luận, theo dõi một bản thiết kế trong thời gian thực, ở các máy chủ khác nhau mà không cần đến quá trình gửi – nhận phức tạp. Nhờ tính linh hoạt này, Figma trở thành công cụ thiết kế ưa chuộng cho các dự án nhóm hoặc làm từ xa.
Hãy cùng xem ví dụ về quá trình làm việc giữa một designer và developer trước và sau khi có Figma, để hiểu thêm Figma đã khiến việc quản lý dự án trở nên “dễ thở” hơn thế nào:
Figma có thể hoạt động trực tiếp trên trình duyệt, do đó người dùng không cần lo ngại việc cài đặt, cập nhật hay vấn đề giấy phép. Figma cũng có thể hoạt động tương thích trên mọi hệ điều hành, do đó một designer sử dụng MacOS và một developer dùng Windows vẫn có thể hợp tác với nhau dễ dàng thông qua Figma.
Figma là một công cụ đa năng, nó có thể phục vụ mọi nhu cầu từ thiết kế các sản phẩm digital cho đến thiết kế UX/ UI. Các ứng dụng phổ biến của Figma là:
Là một công cụ thiết kế nhưng Figma không chỉ dành riêng cho dân thiết kế.
Với tính tương tác cao, Figma thường được lựa chọn để làm “giao diện chung” cho các dự án thiết kế UX/UI. Do đó, bất kì ai tham gia vào dự án, từ designer, front-end/back-end developer cho đến cả CTO cũng có thể học cách sử dụng Figma để quá trình làm việc nhóm mượt mà hơn.
Một điều tuyệt vời khi sử dụng Figma là gì? “Là bạn có thể treo một tấm hình fullscreen của The Rock lên màn hình làm việc của đồng nghiệp để tạo bất ngờ cho anh ấy vào sáng mai” – Alek Mackie, Senior Illustrator tại Shopify chia sẻ.
Câu nói đùa trên đang nhắc tới một ưu điểm nổi bật của Figma, đó là khả năng cộng tác real-time dễ dàng. Vậy Figma còn có những tiện ích nào giúp bạn và team làm việc hiệu quả hơn, hãy cùng tìm hiểu xem:
Mỗi người dùng truy cập vào dự án sẽ được đại diện bằng một avatar hiển thị trên thanh công cụ. Khi click vào avatar này, mọi người sẽ thấy được thành viên đó đang ở vị trí nào trên trang và đang làm gì.
Tiện ích này giúp các thành viên theo dõi thao tác của người hướng dẫn, hoặc giúp leader nhanh chóng nắm bắt tiến độ làm việc, tình hình dự án và đưa ra những quyết định sửa đổi kịp thời nếu xảy ra sai sót.
Ngoài ra, Figma còn có tiện ích gửi thông báo khi file có thay đổi để mọi người đều cập nhật được thông tin mới nhất.
Prototyping trong Figma là gì? Prototype có thể hiểu là bản mô phỏng cho sản phẩm thiết kế, cho phép người dùng xem trước để hình dung ra cách sản phẩm sẽ hoạt động khi hoàn thành.
Prototype là tính năng được Figma tích hợp sẵn từ trước so với Sketch. Nhờ đó, bạn không cần phải thông qua bên thứ ba để dựng prototype như Marvel, Invision… hay xuất ra file png để share cho các team khác như trước đây.
Figma cho phép bạn thiết kế, prototype và trình chiếu cùng lúc. Khi Figma team library được tạo, mọi chỉnh sửa đều tự động cập nhật vào bản prototype.
Tiện ích này giúp nhóm tiết kiệm được rất nhiều thời gian. Người dùng có thể sử dụng tính năng này để ghi chú nhanh những thảo luận hoặc đánh giá trong khi họp. Bạn cũng không còn phải chụp màn hình hay sử dụng dịch vụ từ bên thứ ba để ghi chú những phần cần review, những nhận xét, phản hồi ra file riêng.
Đặc biệt hơn, chuỗi bình luận trên Figma có thể được theo dõi qua Slack hoặc email. Bất kỳ nhận xét hoặc chỉnh sửa thiết kế nào đều được thông báo cho nhóm.
Tiện ích này đặc biệt quan trọng với developer vì họ sẽ không muốn xảy ra trường hợp, bản thiết kế đã được designer thay đổi mà họ không hề hay biết.
Bạn có thể truy cập tất cả tài khoản Figma, không gian làm việc và hồ sơ cộng đồng trên cùng một màn hình. Bạn có thể đăng nhập vào tối đa 10 tài khoản Figma và nhanh chóng chuyển sang bất kỳ account nào bằng việc nhấp vào góc trên bên phải để mở trình chuyển đổi tài khoản.
Figma lưu công việc của bạn thông qua các checkpoint mỗi 30 phút nếu không có hoạt động mới.
Bằng cách chọn Show Version History, bạn có thể truy cập lịch sử các phiên bản của tệp theo dòng thời gian, từ đó có thể nắm bắt nhanh các thay đổi đã được thực hiện với tệp của mình.
Bảng dưới đây sẽ giúp so sánh Figma với các công cụ thiết kế UX/UI phổ biến khác, qua đó bạn có thể tự xác định có nên dùng Figma không, và lí do nên sử dụng Figma là gì:
Để trở thành một Full-stack Developer, hiểu biết về UI/UX design là một trong những yếu tố quan trọng mà bạn cần học hỏi. Điều này có thể bắt đầu trước hết bằng việc bạn biết cách dùng những công cụ UI như Figma.
Dưới đây là một số các thao tác cơ bản developer có thể thực hiện:
Tab Kiểm tra (Inspect) trên Figma cho phép developer xem được thuộc tính về màu sắc, kích thước, khoảng cách, biến thể, font… của các element. Developer cũng có thể xuất nó sang file PNG, SVG hoặc xuất dưới dạng code bằng CSS, Swift hoặc XML.
Nếu team muốn làm nhiều hơn việc đo lường và hiển thị CSS đơn giản, Figma cũng có sẵn plugin Zeplin có thể hỗ trợ.
Nhấp chọn vào các element để xem thông số thiết kế và đo lường là một thao tác quan trọng cho developer. Hầu hết các mẫu thiết kế đều gồm nhiều layer, do đó:
Developer cũng có thể export CSS trực tiếp từ file thiết kế và tương thích nó với hệ điều hành IOS và Android. Để xuất ra các asset mong muốn, bạn có thể sử dụng 2 cách:
– Xuất ra các asset riêng lẻ: Nhấp chọn và bấm nút export
– Xuất tất cả asset có thể cùng một lúc: Sử dụng tổ hợp phím Control / Command + Shift + E để hiện ra bảng Export Panel.
Khi chọn một element, bạn có thể xem được thông số biểu thị trực quan khoảng cách của element đó với các đối tượng xung quanh. Để làm điều này:
Để định vị component (thành phần) chính trên bất kỳ màn hình nào, hãy nhấp chuột phải vào component đó và chọn Main Component > Go to Main Component từ menu.
Bạn có thể tìm kiếm các layer một cách dễ dàng bằng cách sử dụng Plugin Find / Focus trong Figma. Sau khi nhập từ khóa tìm kiếm, plugin này sẽ giúp chọn lọc các layer có chứa từ khóa tương ứng và zoom vào chúng để bạn có thể dễ dàng quan sát. Việc tìm kiếm nhanh này giúp developer kiểm soát một tệp lớn với nhiều khung trang.
Developer có thể xem mô phỏng cách người dùng tương tác với thiết kế thông qua prototypes và Figma sẽ chỉ hiển thị những frame có kết nối prototypes.
Ngoài ra, developer còn có thể dùng tính năng Live device preview để xem mô phỏng thiết kế trên điện thoại di động, hoặc có thể chỉnh sửa kích thước khung hình để xem độ tương thích của thiết kế trên các định dạng thiết bị khác nhau.
Bài viết này đã giúp bạn hiểu Figma là gì và ứng dụng của nó. Tuy nhiên, công cụ này vẫn thường xuyên được cải tiến và thay đổi, do đó bạn cần thường xuyên cập nhật để có thể khai phá hết các tính năng hữu ích của Figma và ứng dụng tốt vào công việc của mình, cho dù bạn là UX/UI designer hay developer đi chăng nữa nhé!
Hiện True Skill Center đang mở khoá học về IT Business Analyst và UX/UI thực chiến. Để biết thêm thông tin bạn vui lòng chat với Admin nhé!
Nguồn: ITviec
Planning Poker không chỉ là một phương pháp hiệu quả để ước lượng công việc, mà còn là công cụ xây dựng sự đồng thuận, cải thiện giao tiếp và nâng cao chất lượng sản phẩm. Mỗi lần thảo luận là một cơ hội để nhóm hiểu rõ hơn về công việc, từ đó tăng cường sự hợp tác và hiệu quả làm việc.
BẠN CÓ BIẾT RẰNG 66% CÁC TỔ CHỨC HIỆN NAY ĐANG GẶP KHÓ KHẮN LỚN TRONG VIỆC TIỀM KIẾM PRODUCT OWNER CÓ ĐỦ KỸ NĂNG CẦN THIẾT?
Riêng đối với PO business và PO toàn diện, trước khi chuyển đổi từ BA qua phải Brainwashing lại bản thân (Tẩy não toàn bộ tư duy gia công) vì các bạn làm BA 1 thời gian sẽ "bị" cái này vào lối mòn tư duy mà ko biết. Mục tiêu lúc nào cũng là tìm hiểu business problem, nghĩ giải pháp rồi bàn giao
Bài viết này được viết hoàn toàn dựa trên trải nghiệm thực tế của bản thân và áp dụng hiệu quả trong cuộc sống của mình, hi vọng nó cũng giúp ích cho các bạn.
Hãy nhập ngay email của bạn vào form bên dưới để được nhận tư vấn trực tiếp từ trung tâm.
True Skill Center ra đời với mong muốn trở thành nơi đào tạo những kĩ năng thực chiến cho thị
trường lao động tri thức chất lượng cao.
Trụ sở chính: 220/66 Xô Viết Nghệ Tĩnh, phường 21, Bình Thạnh, Thành phố Hồ Chí Minh
0374 567 558
quynguyen@trueskillcenter.com