Tuy mới ra mắt vào năm 2016, Figma đã nhanh chóng trở thành một công cụ thiết kế nổi tiếng trên toàn cầu. Nổi tiếng với giao diện thân thiện của mình, Figma còn có nhiều tính năng làm cho việc làm việc cùng nhau của các nhà phát triển và designer trở nên “dễ thở” hơn.
Nhiều “gã khổng lồ kỹ thuật số” cũng sử dụng Figma để thiết kế và tạo prototype. Người thiết kế sản phẩm của Uber, Femke van Schoonhoven, đã 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”.
I. Figma là gì?
Figma là một công cụ thiết kế đồ họa vector chạy trên trình duyệt web thường được sử dụng để dựng prototype và thiết kế giao diện người dùng. Mọi bước của quá trình tổ chức thiết kế được cung cấp bởi Figma, từ việc lập kế hoạch ý tưởng cho đến việc phát triển code từ mẫu thiết kế.
Figma có thể được coi là phiên bản dành cho thiết kế của Google Docs. Figma, giống như Docs và Sheets, cho phép nhiều người làm việc trực tuyến trong một “file“.
Một bản thiết kế có thể được các thành viên của dự án cùng chỉnh sửa, đưa ra bình luận và theo dõi trong thời gian thực tế từ nhiều máy chủ khác nhau mà không cần phải trải qua quá trình gửi và nhận phức tạp. Tính linh hoạt của Figma khiến nó trở thành công cụ thiết kế được ưa chuộng cho các dự án làm từ xa hoặc nhóm.
Do khả năng hoạt động trực tiếp trên trình duyệt, người dùng không phải lo lắng về việc cài đặt, cập nhật hoặc vấn đề về giấy phép. Ngoài ra, vì Figma hoạt động tương thích với mọi hệ điều hành, các nhà phát triển sử dụng MacOS và các nhà phát triển sử dụng Windows vẫn có thể dễ dàng hợp tác với nhau.
Ứng dụng phổ biến của Figma là gì?
Figma là một công cụ đa năng có thể đáp ứng mọi nhu cầu liên quan đến thiết kế sản phẩm digital và thiết kế UI/UX. Các ứng dụng chính của Figma bao gồm:
Thiết kế tạo mẫu
Thiết kế trang web bằng wireframe
Thiết kế giao diện cho ứng dụng di động
Thiết kế bài đăng trên mạng xã hội
II. Các tiện ích nổi bật của Figma là gì?
Sau đây là những tiện ích gây ấn tượng cho tôi nhiều nhất khi thực hiện các dự án thiết kế website cho khách hàng bằng figma:
Theo dõi hoạt động trong thời gian thực
Prototype tích hợp sẵn
Bình luận trực tiếp trên file thiết kế
Chuyển đổi giữa nhiều tài khoản
Chức năng Version History giúp quản lý các phiên bản của tệp
1. Theo dõi hoạt động trong thời gian thực
Một avatar sẽ được hiển thị trên thanh công cụ để mô tả mỗi người dùng tham gia dự án. Mọi người có thể xem thành viên đang ở vị trí nào trên trang và đang làm gì khi họ nhấp vào avatar này.
Tiện ích này cho phép các thành viên theo dõi các hoạt động của người hướng dẫn hoặc giúp các nhà lãnh đạo nắm bắt tiến độ làm việc, tình hình dự án và đưa ra những quyết định thay đổi nhanh chóng trong trường hợp xảy ra sai sót.
2. Prototype tích hợp sẵn
Prototype là một bản mô phỏng cho một sản phẩm thiết kế. Cho phép người dùng xem trước cách sản phẩm sẽ hoạt động khi nó được hoàn thành.
Tính năng Prototype đã được Figma tích hợp trước đó so với Sketch. Điều này có nghĩa là bạn không cần phải thuê bên thứ ba để tạo prototype như Marvel hoặc Invision hoặc xuất file.png để chia sẻ với các đội khác như trước đây.
Bạn có thể thiết kế, prototype và trình chiếu cùng lúc với Figma. Mọi chỉnh sửa đều tự động cập nhật vào bản prototype khi bộ sưu tập Figma team được tạo.
3. Bình luận trực tiếp trên file thiết kế
Tiện ích này giúp nhóm tiết kiệm thời gian. Tính năng này cho phép người dùng ghi lại nhanh những thảo luận hoặc đánh giá trong khi họp. Ngoài ra, bạn sẽ không cần phải chụp màn hình hoặc sử dụng dịch vụ từ bên thứ ba để ghi chú các phần cần xem xét, nhận xét hoặc phản hồi ra file riêng.
Chuỗi bình luận của Figma có thể được theo dõi thông qua Slack hoặc email. Nhóm được thông báo về bất kỳ nhận xét hoặc chỉnh sửa nào liên quan đến thiết kế.
Tiện ích này đặc biệt quan trọng đối với các nhà phát triển vì họ muốn tránh trường hợp nhà phát triển thay đổi bản thiết kế mà họ không biết.
4. Chuyển đổi giữa nhiều tài khoản
Trên cùng một màn hình, bạn có thể truy cập tất cả các tài khoản Figma, bao gồm không gian làm việc, hồ sơ cộng đồng và không gian làm việc.
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ỳ tài khoản nào bằng cách nhấp vào góc trên bên phải.
5. Chức năng Version History giúp quản lý các phiên bản của tệp
Bằng cách chọn Show Version History, bạn có thể xem lịch sử các phiên bản của tệp theo dòng thời gian. Điều này cho phép bạn xem nhanh các thay đổi đã được thực hiện đối với tệp của mình.
III. Những thao tác cơ bản dành cho developer trên Figma
Một trong những điều quan trọng nhất mà bạn cần học hỏi để trở thành một Full-stack Developer là hiểu về thiết kế UI/UX. Trước hết, bạn có thể bắt đầu với việc sử dụng các công cụ giao diện người dùng như Figma.
1. Xem tab Kiểm tra
Các nhà phát triển có thể xem các thuộc tính như màu sắc, kích thước, khoảng cách, biến thể và font trong tab Kiểm tra (Inspect) của Figma. Ngoài ra, các nhà phát triển có thể xuất nó sang dạng file PNG hoặc SVG hoặc xuất nó dưới dạng mã bằng CSS, Swift hoặc XML.
Nếu đội 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ó thể hỗ trợ plugin Zeplin.
2. Chọn element
Một điều quan trọng đối với các nhà phát triển là nhấp chọn vào các element để xem thông số thiết kế và đo lường. Do đó, phần lớn các mẫu thiết kế bao gồm nhiều layer:
Chương trình sẽ tự động chọn element ở layer trên cùng khi bạn nhấp vào nó.
Để chọn một element ở các layer bên trong, nhấn nút Command + element đó. Hoặc nhấp chuột phải vào element để mở bảng Select Layer.
3. Export Assets
Ngoài ra, các nhà phát triển có thể trực tiếp export CSS từ file thiết kế và tương thích nó với cả hệ điều hành Android và IOS. Bạn có 2 cách để xuất ra các tài sản mong muốn:
Để xuất ra các tài sản riêng lẻ, nhấp vào tùy chọn “Xuất ra”.
Có thể xuất tất cả tài sản cùng một lúc: Để hiện bảng Export Panel, hãy tổ hợp phím Control/Command + Shift + E.
4. Kiểm tra khoảng cách và kích thước
Khi bạn chọn một element, bạn có thể nhìn thấy thông số biểu thị khoảng cách của nó so với các đối tượng xung quanh. Để thực hiện điều này:
Chọn panel mã hóa (Bảng mã hóa)
Chọn element muốn đo.
Đưa con trỏ qua một layer khác.
5. Tìm các component chính
Nhấp chuột phải vào thành phần đó và chọn “Thành phần chính” trong menu để định vị thành phần chính trên bất kỳ màn hình nào.
6. Tìm kiếm các layer
Tìm kiếm các layer dễ dàng bằng cách sử dụng Plugin Find/Focus trong Figma. Plugin này sẽ hỗ trợ chọn lọc các layer có chứa từ khóa tương ứng sau khi bạn nhập từ khóa tìm kiếm và cho phép bạn zoom vào chúng để dễ dàng quan sát.
Việc tìm kiếm nhanh này hỗ trợ các nhà phát triển trong việc quản lý một tệp rộng lớn có nhiều khung trang.
7. Xem mô phỏng thiết kế
Các nhà phát triển có thể xem mô phỏng cách người dùng tương tác với thiết kế bằng cách sử dụng các prototype. Figma chỉ hiển thị các frame kết nối với các prototype.
Ngoài ra, các nhà phát triển còn có thể sử 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 thay đổi kích thước khung hình để xem thiết kế tương thích với nhiều định dạng thiết bị.
IV. Tổng kết
Đây là những thông tin cơ bản về Figma, bạn sẽ cần tìm hiểu sâu hơn có thể để lại bình luận, Terus sẽ cố gắng làm tiếp các phần sau. Mong bài viết trên đã giúp ích được cho bạn. Nếu bạn có bất cứ yêu cầu gì về Terus có thể liên hệ tại đây nhé!
Theo dõi Terus tại:
Đọc thêm:
Comentários