Hỏi đáp công nghệ

Figma là gì? Tại sao Figma lại được ưa chuộng đến thế?

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Table of Contents

Thế giới của các công cụ thiết kế mới nổi vô cùng thú vị. Các chương trình mới đầy hứa hẹn đang được tung ra liên tiếp và nhanh chóng, nhưng có một chương trình đặc biệt đã dần trở thành sự lựa chọn tốt nhất cho các nhóm thiết kế lớn hơn và chủ yếu là phân tán. Đó là Figma. Vậy Figma là gì? Các tính năng nổi bật nhất của Figma ra sao? Cùng Hỏi đáp Công nghệ tìm hiểu nhé!

Figma là gì
Figma là gì?

Figma là một trong những ứng dụng chỉnh sửa đồ họa mang tính cách mạng nhất đang chiếm lĩnh thế giới thiết kế như vũ bão. Điều làm cho nó trở nên hấp dẫn là bạn có thể sử dụng nó miễn phí. Nếu bạn vẫn chưa quen với ứng dụng thiết kế đáng kinh ngạc này hoặc đang tìm kiếm các mẹo về cách tận dụng tối đa nó, bạn đã đến đúng nơi.

Trong hướng dẫn dành cho người mới bắt đầu này, chúng tôi phác thảo một số hướng dẫn đi kèm với các nguồn video tutorials từ cơ bản đến nâng cao. Bạn có thể sử dụng chúng để tìm hiểu mọi thứ bạn cần biết về Figma mà không phải mất hàng giờ tìm kiếm trên Google rồi vẫn cảm thấy thất vọng.

Bắt đầu nào.

Figma là gì?

Figma là gì?
Figma là gì?

Figma là một ứng dụng thiết kế giao diện người dùng và chỉnh sửa đồ họa trên nền tảng web. Bạn có thể sử dụng nó để thực hiện tất cả các loại công việc thiết kế đồ họa từ các lên wireframe cho các website, thiết kế giao diện ứng dụng dành cho thiết bị di động, thiết kế tạo mẫu, tạo các bài đăng trên mạng xã hội và đến mọi thứ khác.

Điểm khác biệt lớn nhất của Figma so với các công cụ chỉnh sửa đồ họa khác chủ yếu là vì nó hoạt động trực tiếp trên trình duyệt của bạn. Điều này có nghĩa là bạn có thể truy cập các dự án của mình và bắt đầu thiết kế từ bất kỳ máy tính hoặc nền tảng nào mà không cần phải mua nhiều giấy phép hoặc cài đặt phần mềm.

Một lý do khác khiến các nhà thiết kế yêu thích ứng dụng này là Figma cung cấp gói miễn phí cực kì phong phú, nơi bạn có thể tạo và lưu trữ 3 dự án đang hoạt động cùng một lúc. Nó là quá đủ để bạn học hỏi, thử nghiệm và làm việc cho các dự án nhỏ.

Các tính năng của Figma

Figma hoạt động trên mọi nền tảng

Figma hoạt động trên bất kỳ hệ điều hành nào chạy trình duyệt web. Người dùng có thể sử dụng máy Mac, PC chạy Windows, máy Linux và thậm chí cả Chromebook để dùng Figma. Đây là công cụ thiết kế duy nhất cho đến thời điểm hiện tại có khả năng này và với các thiết bị chạy các hệ điều hành khác nhau, mọi người vẫn có thể chia sẻ, mở và chỉnh sửa các tệp Figma.

Trong nhiều tổ chức, các designers sử dụng máy Mac và nhà phát triển sử dụng máy tính Windows, hoặc ngược lại. Figma giúp mang những nhóm này lại gần với nhau, hợp tác và làm việc cùng nhau một cách suôn sẻ. Bản chất phổ quát của Figma cũng ngăn chặn sự phiền toái của PNG-pong (nơi các hình ảnh cập nhật được gửi qua lại giữa các bộ phận của nhóm thiết kế). Trong Figma, không cần cơ chế trung gian mà mọi người vẫn có thể thiết kế cùng nhau một cách thuận lợi.

Làm việc nhóm trong Figma thật đơn giản

Vì Figma là ứng dụng browser-based, các nhóm có thể cộng tác với nhau tương tự như cách họ tương tác trong Google Tài liệu. Những người đang xem và chỉnh sửa file Figma đều được hiển thị ở trên thanh công cụ dưới dạng một hình đại diện hình tròn. Mỗi người cũng có một con trỏ được đặt tên, vì vậy việc theo dõi ai đang làm gì rất dễ dàng. Nhấp vào ảnh đại diện của một người sẽ phóng to những gì họ đang xem tại thời điểm đó.

Làm việc nhóm trong Figma thật đơn giản
Figma là gì? Làm việc nhóm trong Figma thật đơn giản

Tính năng cộng tác file trong thời gian thực (chuyển tiếp thông tin cho người sử dụng với tốc độ đó là gần như tức thời) giúp giảm thiểu tình trạng “trôi dạt thiết kế” – hay được hiểu là hiểu sai hoặc đi lạc với thiết kế đã được thỏa thuận ban đầu. Sự trôi dạt thiết kế thường xảy ra khi một ý tưởng được hình thành và nhanh chóng được thực hiện khi một dự án đang được phát triển. Thật không may, điều này thường dẫn đến nhữngsai lệch đáng kể so với thiết kế đã thiết lập, gây ra những cản trở làm chậm quá trình làm việc.

Khi sử dụng Figma, trưởng nhóm thiết kế có thể kiểm tra xem các thành viên đang thiết kế những gì trong thời gian thực bằng cách chỉ cần mở một file được chia sẻ. Nếu một nhà thiết kế không may hiểu sai mô tả ngắn hoặc user story, tính năng này cho phép leader thiết kế can thiệp kịp thời, chỉnh sửa hướng làm và tiết kiệm vô số thời gian thay vì lãng phí khi đến phút cuối mới kiểm tra lại thiết kế. (Để so sánh, các nhóm sử dụng công cụ Sketch không có cách nào để biết ngay rằng designer có đang đi chệch hướng hay không.)

Lưu ý bên lề: Một số nhà thiết kế không thích bị “theo dõi” khi họ đang làm việc, vì vậy việc giải thích những lợi ích của tính năng này tùy thuộc vào trưởng nhóm thiết kế. Nói chung, hầu hết các designer đều dễ dàng nhìn thấy giá trị của một tính năng như vậy và nhanh chóng thích nghi với thói quen làm việc trong môi trường chia sẻ.

Xem thêm >> Discord là gì? Cách sử dụng Discord cho người mới dùng

Figma sử dụng Slack để giao tiếp nhóm

Figma sử dụng Slack làm kênh liên lạc của mình. Khi kênh Figma được tạo trong Slack, bất kỳ nhận xét hoặc chỉnh sửa thiết kế nào được thực hiện trong Figma đều được “chuyển” thẳng cho nhóm. Chức năng này rất quan trọng khi thiết kế trực tiếp vì những thay đổi đối với tệp trên Figma sẽ cập nhật mọi trường hợp khác mà tệp được nhúng (một vấn đề tiềm ẩn đối với các nhà phát triển). Các thay đổi đối với mockup, có bảo đảm hay không, sẽ được kiểm tra ngay lập tức.

Figma sử dụng Slack để giao tiếp nhóm
Figma sử dụng Slack để giao tiếp nhóm

Chia sẻ Figma rất đơn giản và linh hoạt

Figma cũng cho phép chia sẻ dựa trên quyền đối với bất kỳ file, trang hoặc frame nào (được gọi là bảng vẽ trong các công cụ thiết kế khác). Khi một liên kết chia sẻ được tạo cho một frame trên một trang, người nhấp vào liên kết đó sẽ mở phiên bản trình duyệt của Figma và Figma sẽ tự động chuyển đến và phóng to đúng frame designer muốn chia sẻ.

Chia sẻ Figma rất đơn giản và linh hoạt
Figma là gì? Chia sẻ Figma rất đơn giản và linh hoạt

Hình thức chia sẻ có chọn lọc này, từ file xuống frame, cho phép các nhà thiết kế, chủ sở hữu sản phẩm và nhà phát triển chia sẻ chính xác những gì cần thiết tương tự như trong các công cụ theo dõi lỗi và phần mềm cộng đồng như Confluence hoặc SharePoint.

Figma có tính năng feedback tiện lợi

Figma hỗ trợ tính năng bình luận trong ứng dụng ở cả chế độ design và prototyping, và các bình luận có thể được theo dõi trong Slack hoặc email. Không cần xuất bản các file PNG hoặc thực hiện cập nhật liên tục để nhận feedback từ nhóm bằng cách sử dụng công cụ của bên thứ ba như trong InVision hoặc Marvel.

Trong quá trình đánh giá thiết kế, các designer trong nhóm có thể thảo luận về công việc của họ trên màn hình lớn, ghi lại các nhận xét và khắc phục sự cố — tất cả đều có trong Figma. Hình thức phản hồi trực tiếp này không thể thực hiện được với Sketch, vì Sketch yêu cầu tải lên dịch vụ đám mây để nhận ý kiến ​​đóng góp của nhóm.

Để gắn thẻ các thành viên trong nhóm, hãy sử dụng ký tự @ và hệ thống sẽ hiển thị danh sách tên để bạn lựa chọn. Làm như vậy thông báo sẽ gửi trực tiếp cho các thành viên được tag và khi phản hồi đã được xử lý, các cuộc thảo luận có thể được đóng lại bằng cách nhấp vào Giải quyết (Resolve).

Các nhà thiết kế có thể đưa ra nhận xét trong quá trình đánh giá bằng cách mở cùng một tệp Figma.
Các nhà thiết kế có thể đưa ra nhận xét trong quá trình đánh giá bằng cách mở cùng một tệp Figma

Thuận tiện cho các nhà phát triển Handoff

Figma hiển thị các đoạn code trên bất kỳ frame hoặc object nào đã chọn ở định dạng CSS, iOS hoặc Android để các nhà phát triển dễ dàng sử dụng khi xem xét file tệp thiết kế. Các thành phần thiết kế (components) có thể được kiểm tra bởi bất kỳ nhà phát triển nào trong bất kỳ tệp nào mà họ có quyền xem. Dù không cần sử dụng công cụ của bên thứ ba để lấy thông tin, Figma vẫn có tích hợp đầy đủ với Zeplin nếu các nhóm muốn nhiều hơn là đo lường và hiển thị CSS đơn giản.

figma là gì
Các nhà phát triển có thể truy cập code từ tệp thiết kế hoặc bằng cách chạy Figma propotype.

Tất cả đều được lưu trữ online

Vì Figma là một ứng dụng trực tuyến, nó sắp xếp các file bằng cách hiển thị các dự án và file của chúng trong một chế độ xem chuyên dụng. Figma cũng hỗ trợ nhiều trang trên mỗi file, như Sketch, vì vậy các nhóm Agile có thể tổ chức các dự án của họ một cách hợp lý:

  • Tạo một dự án cho theme tính năng .
  • Tạo một file cho mỗi tính năng lớn.
  • Tạo các trang trong file đó cho mỗi user story.

Đây chỉ là một ví dụ về phương pháp sắp xếp các file và nó có thể được thực hiện chi tiết hơn hoặc đơn giản hơn tùy thuộc vào những gì quy trình yêu cầu.

Các tệp dự án có thể được sắp xếp dễ dàng trong một chế độ xem chuyên dụng.
Các tệp dự án có thể được sắp xếp dễ dàng trong một chế độ xem chuyên dụng

API Figma cung cấp khả năng tích hợp công cụ của bên thứ ba

Figma hiện có các API dành cho nhà phát triển cho phép tích hợp Figma với bất kỳ ứng dụng dựa trên nền tảng trình duyệt nào. Các công ty đang sử dụng tính năng này để tích hợp hiển thị bản chỉnh sửa trực tuyến của các file thiết kế cho các apps của họ. Ví dụ, Uber có màn hình lớn hiển thị các file thiết kế “live on air” (trực tuyến) trong khắp công ty của họ. Các thiết kế được chia sẻ và tất cả mọi người trong công ty đều được hoan nghênh đưa ra phản hồi.

Phần mềm JIRA của Atlassian đã triển khai tiện ích bổ sung Figma (Figma add-on) để chủ sở hữu sản phẩm, nhà phát triển và kỹ sư chất lượng (QE) luôn thấy phiên bản mới nhất của các mockup đến từ các nhà thiết kế.

Ngoài ra, API của Figma hứa hẹn sẽ đáp ứng các yêu cầu của khách hàng đối với các plugin của bên thứ ba và các cải tiến thêm các tính năng mà Sketch đã cung cấp.

Tạo phiên bản file tự động hoặc theo yêu cầu

Nếu bạn cảm thấy không chắc chắn khi muốn cập nhật file, lo lắng rằng có thể đã làm mất thứ gì đó từ bản thiết kế cũ, thì đừng lo, vấn đề này sẽ được giảm thiểu nhờ hệ thống lưu trữ phiên bản của Figma. Tại một thời điểm bất kì, designer có thể tạo một phiên bản được đặt tên và mô tả của file Figma rồi có thể tiếp tục công việc thiết kế mà không lo phiên bản cũ bị mất. Và bạn có thể xem lại phiên bản bạn đã lưu bất cứ lúc nào, dù file Figma đó đã được thay đổi nhiều lần. Bạn cũng có thể khôi phục mọi phiên bản được lưu tự động để tạo ra bản sao hoặc ghi đè lên bản gốc.

Các phiên bản tệp được lưu theo cách thủ công để tạo các nhánh thiết kế.Các phiên bản tệp được lưu theo cách thủ công để tạo các nhánh thiết kế.
Các phiên bản tệp được lưu theo cách thủ công để tạo các nhánh thiết kế

Tạo propotype trong Figma rất đơn giản và trực quan

Trong khi Sketch gần đây đã thêm tính năng artboard vào tạo mẫu artboard, Figma đã tiến xa hơn bằng cách cung cấp các chuyển đổi giữa các frames. Tính năng tạo propotypes đơn giản của Figma giúp loại bỏ sự lệ thuộc vào các công cụ thực hiện tạo propotype kiểu trình chiếu, ví dụ như InVision hoặc Marvel. Khi tất cả những gì cần thiết là chỉ một bản trình bày đơn giản có thể chuyển tiếp, thì bạn sẽ không cần xuất sang các công cụ của bên thứ ba.

Tạo propotype trong Figma
Tạo propotype trong Figma
Tạo propotype Figma hoạt động giống như các công cụ khác bằng cách sử dụng các mũi tên kết nối giữa các khung.

Figma prototype có thể được chia sẻ giống như các file thiết kế Figma; bất kỳ ai có quyền liên kết đều có thể xem và nhận xét về mẫu thử nghiệm này và một lần nữa, nhận xét đó được ghi lại trong bảng nhận xét của công cụ và được ghi lại trong Slack. Các nhà phát triển có thể xem quy trình thiết kế, trực tiếp để lại @tinnhan cho nhà thiết kế và nhận các phép đo cũng như các thuộc tính CSS từ bên trong nguyên mẫu.

Các thư viện của Figma là nơi lý tưởng cho các hệ thống thiết kế

Hệ thống thiết kế (Design system) đã trở thành nhu cầu thiết yếu của nhiều công ty và họ cần có các components (ký hiệu trong Sketch và Illustrator) có thể tái sử dụng, có thể mở rộng và “mã hóa” để dùng trong các thư viện mẫu có sẵn cho các nhà thiết kế UX và nhà phát triển front-end.

Thư viện của Figma
Thư viện của Figma

Cụm từ thường được sử dụng “nguồn sự thật duy nhất” – SSOT (có thể hiểu là nguồn dữ liệu duy nhất) phù hợp ở đây. Một khi thư viện nhóm Figma được tạo, bất kỳ ai có quyền truy cập vào project đều có thể sử dụng các phiên bản của components trong thiết kế và đảm bảo rằng họ đang làm việc với các phiên bản mới nhất.

Tổ chức các components đơn giản và linh hoạt bằng cách sử dụng các frame và file
Tổ chức các components đơn giản và linh hoạt bằng cách sử dụng các frame và file

Cách tiếp cận của Figma đối với các thư viện components rất đơn giản và dễ quản lý. Nhà thiết kế có thể tạo file có đầy đủ các components hoặc sử dụng các components trên trang để tổ chức thư viện mẫu. Mỗi frame trong một trang Figma trở thành đoạn tổ chức trong thư viện nhóm (không cần tạo cấu trúc phân cấp \like\this).

Một cách hay để tổ chức thư viện là có một dự án chỉ dành riêng cho các components. Các file trong dự án đó có thể được sắp xếp khi cần thiết và các trang trong các file đó có thể được sắp xếp cho phù hợp.

Figma được xây dựng để nâng cao tinh thần làm việc nhóm trong thiết kế

Sử dụng Figma trong dù trong khoảng thời gian dài hay ngắn cũng sẽ chứng minh lợi ích của công cụ cộng tác trực tuyến này. Nó giúp cho các nhóm hoàn thành nhiệm vụ và khuyến khích việc trao đổi thông tin đầy đủ, điều cần thiết khi xây dựng một hệ thống thiết kế cho nhiều lĩnh vực khác nhau. Figma dễ dàng cho mọi người sử dụng trên bất kỳ nền tảng nào và cho phép các nhóm chia sẻ công việc và thư viện của họ một cách nhanh chóng.

FigJam là gì?

Vì chúng tôi đang đi sâu vào khả năng hợp tác trên figma, nên FigJam cần được nhắc tới ở đây. Vậy Fig Jam là gì? FigJam cũng là một công cụ giúp đơn giản hoá việc thiết kế theo nhóm, nhưng nó tập trung vào sự lý tưởng. Nói cách khác, đây là nơi hoàn hảo để mọi người động não, trao đổi và sắp xếp các ý tưởng bằng các phương tiện kỹ thuật số.

Công cụ mới này có rất nhiều tính năng hữu ích cho nhóm, như:

  • hẹn giờ để đi đúng hướng
  • các loại hình, sơ đồ và đối tượng
  • trò chuyện âm thanh trong FigJam
Đây là giao diện của FigJam trên iPad, nhưng nó cũng có sẵn trên máy tính để bàn. (Nguồn ảnh: Figma Blog )
Đây là giao diện của FigJam trên iPad, nhưng nó cũng có sẵn trên máy tính để bàn. (Nguồn ảnh: Figma Blog)

Bạn sẽ vẫn cần thực hiện công việc thiết kế của mình trong Figma, nhưng FigJam là công cụ rất hữu ích cho việc tạo ý tưởng, lập kế hoạch, trao đổi và thu thập những đóng góp hữu ích.

Hướng dẫn sử dụng Figma cơ bản

Hướng dẫn này dành cho các bạn đang bắt đầu với Figma từ con số khôngchuyển từ thiết kế đồ họa sang giao diện người dùng hoặc nếu bạn (giống như tôi) chuyển từ Sketch sang.

Bắt đầu với Figma

Tải Figma

Truy cập vào figma.com để tải Figma bản quyền, đăng ký và làm theo hướng dẫn. Trong vòng một vài phút, bằng cách đăng nhập với Google hoặc nhập email và tạo một mật khẩu, bạn đã sẵn sàng để bắt đầu … wow !!!

Tải Figma
Đăng nhập và tải Figma

Bạn có thể nhận thấy rằng Figma cho phép bạn tạo các team và dự án, nhưng hãy xem về vấn đề này ở phần sau nhé, bây giờ chỉ cần tạo một file mới bằng cách click vào dấu cộng từ menu hoặc nhấn phím tắt cmd + N để bắt đầu nhanh.

Không giống như Sketch, các tệp của Figma không được lưu trữ cục bộ trên máy tính của bạn mà lưu trữ dựa trên đám mây. Bạn có thể truy cập tất cả công việc của mình thông qua trình duyệt, mọi lúc, mọi nơi. Có một Ứng dụng Figma dành cho Mac và PC mà tôi khuyên bạn nên sử dụng, nhưng không nhất thiết phải cần đến nó.

Nhược điểm: Bạn cần có internet. Tuy nhiên, bạn có thể tải trước tệp xuống ứng dụng để hoạt động ngoại tuyến.

Lưu ý: Bạn có thể thoải mái sử dụng Figma bản quyền một cách miễn phí và cực thoải mái cho nhu cầu cá nhân. Nhưng nếu bạn làm việc nhóm nhiều hơn và cần sử dụng các tính năng đặc biệt như không giới hạn số projects, không giới hạn version history, khả năng phân quyền cho người dùng, invite các dự án riêng hay chia sẻ thư viện trong nhóm, bạn có thể mua bản quyền Figma với giá chỉ từ $12 cho 1 tháng.

Nhập tệp Sketch cũ

Figma cho phép bạn nhập các file từ Sketch một cách nhanh chóng và chính xác. Chỉ cần kéo thả file Sketch vào canvas Figma. Vậy là xong! Bạn sẽ tìm thấy tất cả các layers và thiết lập chúng tại chỗ.

Kéo và thả tệp Sketch lên màn hình Fgima
Kéo và thả tệp Sketch lên màn hình Fgima

Bạn có thể sao chép các item đơn lẻ từ Sketch nếu bạn nhấp chuột phải vào chúng và sao chép dưới dạng SVG!

☝️ Mẹo : Chúng tôi khuyên bạn nên tải xuống Ứng dụng Figma khi import từ Sketch vì bạn sẽ không thể hiển thị phông chữ local trong trình duyệt và nó làm rối file của bạn.

Thiết kế với Figma

Tạo một frame mới (hay còn gọi là bảng vẽ)

Nếu bạn đã sử dụng Sketch thì điều này sẽ khá quen thuộc. Nhấn A hoặc F để xem tất cả các tùy chọn frame trong bảng thuộc tính ở phía bên phải và chọn kích thước mặc định bạn muốn hoặc đơn giản là vẽ frame theo kích của riêng bạn. Như trong Sketch, bạn có thể làm việc ở 1x ( kích thước pixel thực tế) để không làm giảm chất lượng khi thay đổi kích thước. Bạn vẫn có thể export nội dung ở bất kỳ kích thước lớn hơn nào nếu bạn cần.

nhấn “F” để thiết lập các frame mới trên Figma
Nhấn “F” để thiết lập các frame mới trên Figma

Không giống như bảng vẽ truyền thống, bạn có thể lồng các frame vào với nhau. Điều này cho phép bạn tạo các thiết kế phức tạp hơn và chúng có thể tương tác với nhau.

Grid và cột layout

Đối với thiết bị di động, bạn có thể sử dụng dạng lưới 8 điểm tiêu chuẩn. Phiên bản Web không liên quan nhiều đến khoảng cách mà liên quan nhiều hơn về layour grids nên bạn có thể bắt đầu với lưới bootstrap 12 cột phổ biến. Hoặc hiện đại hơn một chút, bạn có thể dùng CSS Grid tùy chỉnh. Tốt nhất hãy trao đổi trước với các developers để thống nhất về thiết lập mà bạn sẽ sử dụng.

Điều chỉnh lưới trong menu thuộc tính lưới (grid properties menu) đặt ở phía bên phải màn hình. Bạn có thể chuyển từ lưới sang cột hoặc hàng và cũng có thể làm cho nó cố định hoặc linh hoạt và khoảng cách lề theo nhu cầu của mình.

tạo lưới, cột và hàng
Tạo lưới, cột và hàng trên Figma

Điều tuyệt vời về lưới và cột trong Figma là bạn có thể tạo nhiều lưới và lưu lại theo kiểu của mình. Đây là một tính năng tiện dụng để điều chỉnh layout tương thích với nhiều loại thiết bị, chia sẻ chúng với các thành viên trong nhóm hoặc đơn giản sử dụng lại chúng trong các dự án khác.

☝️ Mẹo: Chuyển đổi chế độ hiển thị bằng ctrl + G.

Layers và Group

Tương tự với Sketch, ở phía bên trái của màn hình, bạn sẽ thấy bảng điều khiển layers.

Bảng điều khiển layers ở phía bên trái
Bảng điều khiển layers ở phía bên trái
  • Layer (lớp) → mỗi element mới mà bạn thêm vào sẽ tự động tạo một lớp. Bạn có thể sắp xếp lại lớp bằng cách kéo và thả.
  • Nhóm các lớp → Đảm bảo nhóm các lớp (chọn các lớp và nhấn cmd + G ) để giữ cho file của bạn được tổ chức hợp lý. Nó cũng giúp bạn di chuyển và sao chép các nhóm đó qua các frame một cách nhanh chóng và dễ dàng. Để chọn một phần tử trong một nhóm, hãy nhấn cmd và nhấp vào mục đó.
  • Trang → Bạn có thể thiết lập các phần hoặc khu vực khác nhau trong thiết kế của mình.
  • Asset (nội dung) → Các cpmponents của bạn được lưu ở đây và bạn sẽ tìm thấy nút thư viện trong section này
  • Frame lồng nhau (Nested frame) → Trong Figma, bạn cũng có thể lồng các frame. Điều này rất hữu ích khi tạo cấu trúc và tạo propotypes.

Hình vectơ

Figma có một tính năng gọi là Mạng Vector cho phép bạn tạo ra các hình dạng phức tạp.

tạo hình với Figma
Tạo hình vector với Figma

Đối với các hình mặc định, hãy chọn từ menu trên cùng với biểu tượng hình vuông hoặc chỉ cần nhấn R cho hình chữ nhật, L cho đường thẳng hoặc O cho hình elip và bắt đầu vẽ hình bạn muốn. Nhấn giữ phím shift để giữ đúng tỷ lệ. Mỗi hình được vẽ sẽ tự động tạo layer riêng của nó.

Để tạo hình dạng phức tạp hơn, nhấn phím P hoặc chọn bút từ header menu. Sau khi hoàn tất, chỉ cần nhấn enter. Không cần kết nối và đóng đường nối lại! Bạn có thể thay đổi các thuộc tính và các hình dạng vectơ bất kỳ lúc nào trong quá trình thiết kế của mình thông qua menu thuộc tính ở phía bên tay phải.

☝ ️Lưu ý: Trong trường hợp bạn chưa biết, vectơ có thể phóng to và có thể xuất ở bất kỳ kích thước nào nhưng vẫn giữ nguyên kích thước file nhỏ. Vectors lý tưởng cho các hình đơn giản, các nút, icons, logo và tất cả các loại hình minh họa đơn giản.

Hình ảnh

Kéo thả  hình ảnh vào khu vực làm việc của bạn. Nếu bạn đã quen với Sketch thì đây là nơi bạn cần thích ứng với một định dạng mới. Trong Figma, hình ảnh luôn được đặt bên trong một hình dạng (giống như tính năng mask). Để thay đổi hành vi của hình ảnh, hãy chuyển đến Fill trên cửa sổ thuộc tính bên phải và mở thuộc tính hình ảnh.

Chèn hình ảnh trong Figma
Chèn hình ảnh trong Figma

Trong menu thả xuống, bạn có thể chọn:

  • Fill → Hình ảnh sẽ lấp đầy vùng chứa.
  • Fit → Khi thay đổi kích thước ảnh, hình ảnh sẽ không bao giờ bị cắt hoặc ẩn
  • Crop → Cắt hình ảnh theo kích thước và lựa chọn bạn mong muốn. Lưu ý, bạn không làm mất phần bị cắt của hình ảnh như trong photoshop, bạn chỉ đang che phần đấy đi.
  • Tile → Lặp lại các hình ảnh gốc nếu cần và bạn có thể điều chỉnh kích thước của hình xếp.

Hơn nữa, Figma cho phép bạn điều chỉnh các thuộc tính như màu sắc và độ bão hòa. Lưu ý rằng chúng luôn có thể điều chỉnh lại và bạn sẽ không bao giờ mất các thuộc tính hình ảnh gốc.

☝ Lưu ý: Bạn cũng có thể fill vào một hình dạng được chọn bằng một hình ảnh. Nhấp vào hình dạng bạn muốn, chọn “Fill” và từ menu thả xuống, chọn “Image”. Hãy lưu ý rằng bạn cần sở hữu hoặc mua bản quyền đối với hình ảnh bạn đang sử dụng. Bạn cũng có thể sử dụng hình ảnh không có bản quyền, trên một số trang như Pexels, Unsplash, với những hình ảnh tuyệt vời với, chất lượng hàng đầu và một số trang thậm chí còn có plugin Figma.

Kiểu chữ

Có một điều thú vị là Figma được cài đặt sẵn các phông chữ google.Trong trường hợp bạn thích sử dụng local fonts, bạn cần cài đặt Trình trợ giúp phông chữ của Figma hoặc app Figma cho máy tính. Ngoài ra, hãy chắc chắn rằng những người khác đang truy cập file đều được cài đặt cùng một phông chữ cần dùng.

Nhấn T để vẽ một cửa sổ văn bản hoặc chỉ cần click và bắt đầu nhập. Bạn có thể đặt tất cả các thuộc tính văn bản trên menu thuộc tính bên phải.

Văn bản trong Figma
Văn bản trong Figma

☝ ️Mẹo: Nếu bạn chưa quen với thiết kế web và ứng dụng, hãy đảm bảo rằng text sao chép của bạn không bao giờ nhỏ hơn 16px, tốt nhất nên là 18px. Tùy thuộc vào phông chữ của bạn, chúng tôi cũng khuyên bạn nên tăng một chút chiều cao dòng lên để dễ đọc hơn.

Styles

Style cho phép bạn lưu và áp dụng lại các thuộc tính. Bằng cách này, các tệp lớn có thể được cập nhật ngay lập tức. Các styles có thể được thiết lập cho màu sắc, văn bản, lưới và các hiệu ứng như bóng đổ.

Để xem tất cả các styles đã sử dụng, hãy nhấp vào background xám bên cạnh frame và chúng sẽ được hiển thị trong menu thuộc tính ở bên phía phải màn hình.

Tạo style màu

Các kiểu màu và gradient trong Figma rất tuyệt bởi vì bạn có thể thiết lập một kiểu và sử dụng lại nó trên văn bản, để tô màu và đường viền! Bạn có thể thay đổi và xóa style bất kỳ lúc nào trong quá trình thiết kế của mình bằng cách nhấp chuột phải vào kiểu đó.

Tạo và sử dụng style màu:

Kiểu màu trong Figma
Kiểu màu trong Figma
  1. tạo một hình bạn muốn
  2. Thay đổi fill thành giá trị màu bạn cần
  3. Nhấp vào biểu tượng hình vuông có chứa các kiểu màu
  4. Nhấp vào “+” để thêm class. Xong!

☝Mẹo : khi đặt tên màu, bạn nên gọi theo cách sử dụng chứ không phải bản thân màu. Ví dụ. Sử dụng “màu nổi bật” thay vì “màu vàng”.

Tạo style văn bản

Không giống như Sketch, thuộc tính kiểu văn bản trong Figma chỉ lưu trữ font family, font size, chiều cao dòng và khoảng cách. Điều này giúp thư viện style của bạn đẹp và ngắn gọn vì không cần phải sao chép một style cho một phiên bản màu hoặc căn chỉnh khác của chính nó.

Thiết lập Kiểu văn bản hoạt động khá giống với thiết lập kiểu màu:

kiểu văn bản trong Figma
Kiểu văn bản trong Figma
  1. Nhấp vào văn bản bạn muốn tạo kiểu
  2. Trên menu thuộc tính bên phải, nhấp vào biểu tượng hình vuông
  3. nhấp vào + và đặt tên cho style của bạn
  4. Để thêm một style vào văn bản hiện có, chỉ cần nhấp vào văn bản đó rồi chọn kiểu bạn muốn từ menu bên phải qua ô style.

Khi bạn đã thêm một style, bạn cũng có thể thay đổi các thuộc tính hoặc tách style đó qua cùng một menu.

☝ ️Mẹo: khi đặt tên cho các style văn bản, tốt nhất nên gọi với công dụng của nó, ví dụ: “H1” hoặc “đoạn văn” “trích dẫn” hơn là mô tả cụ thể về phông chữ hoặc kích thước. Bằng cách này, bạn luôn có thể điều chỉnh phông chữ mà không cần đặt tên lại.

Nhiều style hơn

Figma không dừng lại ở đó. Grid cũng có thể được lưu, chia sẻ và sử dụng lại như style.

Kiểu Grid trong Figma
Kiểu Grid trong Figma

Và ngay cả các hiệu ứng như đổ bóng, đổ bóng bên trong, làm mờ lớp và mờ nền:

Style hiệu ứng trong Figma
Style hiệu ứng trong Figma

Components

Các thành phần (components) là các phần tử giao diện người dùng, có thể được sử dụng lại trên các tệp thiết kế của bạn. Các components giúp thiết kế (và lập trình sau này) luôn nhất quán, cho phép cập nhật và mở rộng quy mô dễ dàng, giúp bạn tiết kiệm rất nhiều công việc !

Tạo các components có thể tái sử dụng

  1. Chọn đối tượng và nhấn nút tạo thành phần (create component button) ở đầu màn hình hoặc cmd + alt + K.
  2. Trong bảng điều khiển layer, bạn sẽ thấy biểu tượng component màu tím. Bạn đã tạo một component master.
Components master và các instances
Components master và các instances

Nếu bây giờ chúng ta tạo một bản sao của thành phần master này, nó sẽ tự động tạo một bản sao giống hệt, được gọi là một instance. Bất kỳ thay đổi nào trong thành phần master sẽ đều dẫn đến các thay đổi giống nhau được thực hiện cho tất cả các phiên bản instance.

Bạn tìm thấy tất cả các component của mình trong tab Assets, bên cạnh layers ở phía bên trái và cũng có thể kéo chúng vào một frame.

Components master và các instances
Components master và các instances

☝ ️Mẹo : Về lâu dài, bạn nên căn chỉnh các thành phần Figma của mình sao cho đồng nhất với các thành phần front-end (ví dụ: các thành phần trong ReactJS). Tốt nhất hãy nói chuyện với nhóm lập trình của mình để thống nhất.

Hoán đổi và lồng các components

Các phiên bản instances của các components có thể được lồng vào bên trong của các component master. Có nghĩa là bạn có thể có các thành phần, bên trong các thành phần, bên trong các thành phần (nếu bạn đã xem Inception, bạn sẽ hiểu ý tôi).

Hoán đổi và lồng các components
Hoán đổi và lồng các components

Bạn có thể hoán đổi các phiên bản lồng nhau bằng cách sử dụng menu hoán đổi phiên bản phía bên phải hoặc chỉ cần giữ tùy chọn cmd + alt + option và kéo và thả chúng từ assets overview hoặc thư viện nhóm của bạn.

Ghi đè các components

Các phiên bản sẽ luôn tuân theo thành phần master về kích thước và bố cục chung, nhưng bạn có thể thay đổi các thuộc tính của đối tượng như màu sắc, văn bản và đường viền.

Ghi đè các components
Ghi đè các components

Lưu ý, bạn có thể dùng nút revert trong menu thuộc tính bên phải trong trường hợp bạn muốn đặt lại về trạng thái ban đầu. Bạn cũng có thể tách một phiên bản bằng cách nhấp chuột phải vào phiên bản đó.

Đặt tên cho các thành phần

Cũng tương tự như trong Sketch, sử dụng “/” để đặt tên cho các thành phần, ví dụ: thay đổi “share-icon” thành icon/share. Figma sẽ tự động tạo một danh mục mẹ có tên là icon, điều này sẽ giúp cho việc hoán đổi các phiên bản.

Đảm bảo đặt tên chính xác cho các components của bạn
Đảm bảo đặt tên chính xác cho các components của bạn

Nhân tiện, nếu bạn có các thành phần master trên nhiều trang, chúng sẽ được sắp xếp theo trang.

☝ ️Mẹo : Để giữ cho các components của bạn được tổ chức hợp lý, hãy tạo một frame mới cho mỗi nhóm, ví dụ: “nút” hoặc “biểu mẫu”. Bây giờ hãy kéo các thành phần master của bạn vào đó, bạn sẽ thấy rằng trong tổng quan về các thành phần của mình, mọi thứ được sắp xếp theo thứ tự bảng chữ cái alphabet.

Trong bài viết trên, Hỏi đáp Công nghệ đã giải thích cho tiết câu hỏi Figma là gì cùng với các tính năng chính và hướng dẫn cách sử dụng cơ bản phần mềm Figma. Hi vọng bài viết này sẽ là một khởi đầu mới cho các bạn Designers. Chúc các bạn thành công!

Các bài viết liên quan

Leave a Comment

Email của bạn sẽ không được hiển thị công khai.

Bài viết liên quan