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:
FAQ – Giải đáp các thắc mắc liên quan đến Figma
1. 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ế.
2. Figma khác với các công cụ thiết kế truyền thống như thế nào?
Không giống như các công cụ thiết kế truyền thống yêu cầu cài đặt phần mềm và lưu trữ tệp cục bộ, Figma hoạt động hoàn toàn trên đám mây.
Điều này có nghĩa là các thiết kế được lưu trữ và truy cập trực tuyến, cho phép cộng tác theo thời gian thực và loại bỏ nhu cầu chia sẻ tệp và các vấn đề kiểm soát phiên bản.
Figma cũng cung cấp một bộ tính năng mạnh mẽ cho thiết kế, tạo mẫu và chuyển giao cho nhà phát triển, khiến nó trở thành một giải pháp toàn diện cho toàn bộ quá trình thiết kế.
3. Figma đã mở ra kỷ nguyên mới của trang web như thế nào?
Figma đã cách mạng hóa thiết kế trang web theo nhiều cách:
- Cộng tác trong thời gian thực: Tính chất dựa trên đám mây của Figma cho phép nhiều nhà thiết kế làm việc đồng thời trên cùng một dự án, cho phép cộng tác trong thời gian thực và loại bỏ nhu cầu chia sẻ và hợp nhất tệp thủ công. Điều này đã cải thiện đáng kể năng suất của nhóm và hợp lý hóa quá trình thiết kế.
- Hệ thống thiết kế và các thành phần: Figma đã giới thiệu khái niệm về hệ thống thiết kế và các thành phần có thể tái sử dụng, giúp tạo ra các thiết kế nhất quán và có thể mở rộng dễ dàng hơn. Nhà thiết kế có thể tạo thư viện gồm các thành phần và kiểu dáng có thể được chia sẻ giữa các dự án, đảm bảo tính nhất quán và hiệu quả trong thiết kế.
- Hệ thống thiết kế và trợ năng: Figma cũng nhấn mạnh vào khả năng tiếp cận, cung cấp các công cụ và tính năng để giúp các nhà thiết kế tạo ra các thiết kế toàn diện. Ngoài ra, hệ thống thiết kế của Figma đã khuyến khích áp dụng các phương pháp thiết kế tiêu chuẩn hóa, tạo ra các trang web gắn kết và thân thiện hơn với người dùng.
4. Figma có thể được sử dụng cho các nhà thiết kế cá nhân không?
Chắc chắn rồi! Figma phù hợp cho cả nhà thiết kế cá nhân và nhóm thiết kế. Giao diện trực quan, các tính năng cộng tác và khả năng thiết kế toàn diện khiến nó trở thành một công cụ linh hoạt có thể được sử dụng bởi những người làm nghề tự do, nhà thiết kế độc lập và studio thiết kế nhỏ. Bản chất dựa trên đám mây của Figma cũng cho phép chia sẻ và cộng tác dễ dàng với khách hàng và các bên liên quan.
5. Figma có phải là công cụ miễn phí không?
Figma cung cấp cả gói đăng ký miễn phí và trả phí. Gói miễn phí cung cấp quyền truy cập vào nhiều tính năng thiết yếu của Figma, khiến nó trở thành lựa chọn phổ biến cho các nhà thiết kế cá nhân và nhóm nhỏ.
Các gói đăng ký trả phí, chẳng hạn như “Chuyên nghiệp” và “Tổ chức”, cung cấp các tính năng và khả năng bổ sung, bao gồm số lượng dự án không giới hạn, lịch sử phiên bản, thành phần thiết kế và các tùy chọn cộng tác nâng cao.
Chi tiết về giá và so sánh tính năng có thể được tìm thấy trên trang web chính thức của Figma.
Đọc thêm:
Nhiệm vụ của chúng tôi là đồng hành cùng bạn và doanh nghiệp để ngày càng tạo ra những thương hiệu Việt Nam lớn mạnh.