Dẫn nhập

Figma là gì? Công cụ hàng đầu cho UI/UX Design

Figma khởi điểm là một công cụ thiết kế giao diện, nó được sử dụng trên nền tảng trình duyệt web và giờ thì đã phát triển thành một hệ sinh thái các sản phẩm hỗ trợ thiết kế sản phẩm rất đa năng. Nó cho phép nhiều nhân sự, thậm chí là đội ngũ cùng làm việc trên một dự án duy nhất, loại bỏ nhu cầu về phần mềm phức tạp. Với khả năng truy cập mọi lúc mọi nơi và thư viện plugin phong phú, Figma đã trở thành tiêu chuẩn vàng trong ngành, giúp tăng tốc quy trình thiết kế, từ ý tưởng đến sản phẩm hoàn chỉnh một cách hiệu quả và trực quan.

Đôi khi lượt các nền tảng mạng xã hội bạn sẽ bắt gặp những chiếc meme về việc một designer nào đó “tồy” thế nào vì lỡ detach instance hay xài font size 41.32px … điều đó nghĩa là gì? và tại sao nó lại bị lên án?

Sử dụng Figma như một UI/UX Designer

Bài viết này nói về những điều “cấm kị”, và lý do sâu xa phía sau của việc đó. Đối với một UI/UX Designer, Figma không chỉ là phần mềm “vẽ” mà là một nền tảng tư duy và cộng tác toàn diện. Khác với Graphic Designer chủ yếu tạo ra hình ảnh tĩnh, UI/UX Designer dùng Figma để xây dựng luồng người dùng, tạo prototypes, thực hiện các tác vụ liên quan đến thiết kế UX, Product Design, và quan trọng nhất chính là duy trì hệ thống thiết kế (design system).

Figma giúp trực quan hóa hành trình người dùng, đảm bảo tính nhất quán và khả năng mở rộng của sản phẩm, biến ý tưởng trừu tượng thành trải nghiệm số có thể tương tác được để góp phần cho đội ngũ Product có thể làm việc nhanh gọn dễ dàng và thông suốt nhau trong một hệ thống sản phẩm phức tạp.

… nguyên tắc và lý do của việc có sự “cấm kị”

Vậy nên có thể hiểu rằng việc làm đẹp, tạo ra một thiết kế chỉ là bề nổi của thành phẩm, bên dưới nó sẽ có rất nhiều những nguyên tắc sử dụng để đảm bảo tính hệ thống được duy trì. Người mới đến với lĩnh vực nhiều khi chỉ quan tâm đến những thứ nhìn thấy được (như làm sao để vẽ ra một màn hình trang chủ) mà không biết đến những hệ thống đang được xây dựng bên dưới (thư viện đã được xây, quy tắc kích cỡ thành phần, UX pattern chính yếu…).

Thao tác của bạn có thể khiến cho việc bạn đang làm trở nên dễ dàng trước mắt nhưng lại gây ra rối loạn hoặc ảnh hưởng đến quá trình làm việc của người khác. Và tèn ten, khi đó bạn sẽ bị “tế”. Dưới đây là 9 điều nên tránh, xếp theo thứ tự từ rất nghiêm trọng đến vừa phải hơn, hai điều cuối sẽ khá bất ngờ. Nên hãy đọc đến cuối nha.

9 điều cấm kị khi dùng Figma

1. Detach instance

Thao tác “Detach instance” là gì? thường nó sẽ được dùng khi bạn muốn xoá bỏ thuộc tính của một instance, cho nó quay về làm một vật thể bình thường. Đây được xem là thao tác điển hình của người mới xài Figma khi họ muốn edit một object nhưng nó lại bị kẹt kẹt, không cho phép họ tự do điều chỉnh.

Newbie không biết rằng instance là 1 thành phần thuộc về hệ thống và được quản lý bởi một component gốc, điều này được quy định bởi những designer khác, người có nhiệm vụ hoặc thậm chí là sếp của bạn, người vừa down mood sau khi đi gây lộn với stakeholder mới về. Việc nó bị giới hạn chỉnh sửa cũng là để đảm bảo cấu trúc hệ thống, người có kinh nghiệm chỉ detach instance khi họ cần một vật thể mới để xây dựng hệ thống mới riêng mình.

detach instance là một trong những điều cấm kỵ khi dùng figma

Case điển hình ví dụ: bạn gặp một loạt các thẻ sản phẩm xong bạn thấy bạn không thay đổi thành phần bên trong các thẻ đó được, bạn lên mạng hỏi và có người chỉ bạn detach instance, bạn làm theo và thấy thật hiệu quả, giờ thì tự do edit yay! 🤗 Chiều đó sếp về và ghế ngồi của bạn bốc cháy 🧘🏼‍♀️

2. Scale tools

Phím tắt là K, khi bạn cần kéo to một cái gì đó bằng mắt thường để đảm bảo nó hài hoà về mặt bố cục, bạn sẽ dùng tool này để kéo. Các bạn nào là graphic designer sẽ rất thích vì nó đảm bảo giữ mọi thành phần theo tỉ lệ khi bạn kéo. Chỉ có điều ở lãnh địa của UI/UX Designer thì đây là một điều tối kị.

Trong thiết kế giao diện thứ quan trọng hơn tính thẩm mỹ bố cục chính là các con số kích cỡ của thành phần thiết kế. Ví dụ một font chữ với size 16px, một element với chiều cao cố định là 50px hay một tấm ảnh thumbnail đã được cố định vào một thẻ sản phẩm. Nếu scale những thứ này toàn bộ những con số đó sẽ thay đổi và gây ảnh hưởng lớn tới hệ thống. Trong tình huống này từ khoá để bạn có thể dùng làm điểm neo là “responsive” thay vì bố cục scale đều.

Case ví dụ điển hình: bạn thấy một frame, kéo ra mà chữ không to ra theo, nên bạn tức mình bấm K để scale, mọi thứ to ra đồng loạt rất hài hoà, tối đó bạn bị report bởi Dev và bị mời uống trà bởi lead team.

3. Không đặt tên layer

Cái này dễ hiểu, không cần giới thiệu nhiều, nhưng vẫn cần nhắc nhở. Đôi khi bạn nghĩ việc thiết kế thì chỉ cần đẹp là được nhưng sự chỉn chu kĩ càng và tính hệ thống cần phải bắt đầu từng những điều nhỏ nhất. Đặt tên có thể tốn của bạn tầm vài giây, nhưng khi sau này cần chỉnh sửa, tìm kiếm bạn sẽ tiết kiệm được vài phút thậm chí là cả ngày trời.

Việc đặt tên có hệ thống cũng giúp các bên giao tiếp với nhau dễ dàng hơn vì nhìn vào một bảng layer vô tri đầy rẫy những chiếc frame 50, eclipse 43 hay rectange 15 sẽ là một cực hình cho người muốn hiểu cấu trúc thiết kế của bạn.

Case ví dụ điển hình: bạn vẽ ra một thành phần và để tên mặc định của nó, sau 7749 trang thiết kế đột nhiên bạn nhớ ra hồi xưa đã từng làm ra một thiết kế thế này và giờ bạn đi tìm thủ công nó giữa một đống lùng nhùng thiết kế tốn tận 30’ đồng hồ.

4. Group thay vì frame

Trong các lớp figma của TELOS, lý do của việc này thể hiện rất rõ rệt vì thiết kế của UI/UX Designer dựa trên một tư duy gọi là OOUX (thiết kế UX hướng đối tượng). Group là một công cụ quản lý cấp thấp chỉ cho phép chúng ta gom nhóm các thành phần chứ chưa giúp ta tạo ra một “đối tượng” thật sự.

Nếu đơn giản chỉ group lại để dễ quản lý thì cũng không sao, nhưng khi đã xác định mình vẽ ra các item thì việc dùng group sẽ khiến việc quản lý sau này khá bất ổn.

5. Không autolayout

Đây là một tool quan trọng, nếu có người nói với bạn là làm UI/UX Designer không cần autolayout thì có thể họ chưa phải làm đủ nhiều thiết kế, chưa cần chỉnh sửa hệ thống quá lớn để hiểu được tính hiệu quả của công cụ này. Nó khó tiếp cận với người mới đang quen thuộc với tư duy sắp xếp tự do trên một canvas, nên nhiều khi người ta bỏ qua và dùng cái cớ rằng “thiết kế cứ đẹp và hiệu quả là được”.

Nhưng điểm khiến cho Autolayout là một thứ nên sử dụng và tuân thủ là vì nó chính là cách sắp xếp tự nhiên của các giao diện khi được code ra, coder sẽ rất vui nếu bạn đưa cho họ một giao diện autolayout chuẩn chỉnh. Nếu xem UI/UX là một chuyên môn, Figma chính là ngôn ngữ để trao đổi trong chuyên môn đó thì Autolayout là một phần ngữ pháp quan trọng.

Chỉ với vài dòng khó có thể nói ra hết tính tiện dụng cũng như ý nghĩa của công cụ này, bạn chỉ có thể thật sự thẩm thấu được giá trị của nó khi trực tiếp vào thực hành như cách các bạn học viên của TELOS Academy phải làm một chuỗi dài các bài tập. Bạn có thể thử một bài tập để hiểu cách dùng Autolayout tại đây.

6. Bỏ qua việc hệ thống hoá

Trong những điểm cấm kị ở trên có rất nhiều lỗi sai đến từ việc không hệ thống hoá. Còn những thao tác gì nữa? khó mà kể ra hết vì ‘hệ thống hoá’ là một quá trình tư duy để xây dựng một dự án. Có thể đơn cử ra rất trực quan như:

Hệ thống chính là một trong những điểm quan trọng dù bạn làm thiết kế gì, nhưng đối với UI/UX thì nó quan trọng hơn rất nhiều vì nếu không có tư duy đó bạn sẽ rất khó đi xa với nghề. Một hoạ sĩ vẽ đẹp có thể chỉ xem hệ thống như công cụ hỗ trợ họ làm tốt hơn, nhưng một UI/UX Designer bỏ hệ thống qua một bên sẽ kẹt lại mãi ở tầng junior.

7. Nói không với plugin

Figma có một hệ thống công cụ đơn giản, tinh gọn. Nhưng nó còn cả một kho báu khác đó là hệ thống các plugin được phát triển bởi các developers bên ngoài. Nếu bạn không dùng chúng nó thì cũng không ảnh hưởng gì ai cả, chỉ thiệt cho chính bạn mà thôi vì thật sự có nhiều plugin khiến những việc phải làm trong cả ngày trời chỉ gói gọn trong vài phút.

Hãy đọc thử những bài viết được đính kèm ở đây để có cho mình thêm các plugin thú vị.

Và bạn còn có thể lên cộng đồng Cùng Học Figma của tụi mình để đặt những câu hỏi kiểu “có plugin nào có thể giúp mình trong việc ABC này không?”. Tin mình đi, bạn sẽ ngạc nhiên với kiến thức của các thành viên trong cộng đồng có thể đem đến cho các bạn những giải pháp siêu hiệu quả.

8. Hù đồng nghiệp

Ừa, kiểu là… Cái tool này nó là tool làm việc thời gian thực phối hợp với nhau á, nên đừng chơi ba cái trò mắc dại vầy, dễ bị đòn lắm.

9. Xài Figplosion

Tương tự như trên, nhưng mà lần này mình xài plugin =)))), đừng nha đừng có phá nha. Công cụ này được sinh ra chỉ để làm cho các thiết kế của bạn văng tứ tung thành một đống hỗn loạn. Nếu sử dụng với ý đồ xấu thì việc thu dọn đống bừa bộn mà bạn tạo ra với file thiết kế sẽ khá là phiền. Chắc chắn bạn sẽ gặp những vấn đề rắc rối thậm chí bị đưa vào blacklist của các công ty nếu dùng công cụ này vào mục đích xấu.

Kết luận

Giờ bạn đã hiểu được nguyên lý của công cụ Figma và lĩnh vực mà nó hỗ trợ chính là UI/UX Design. Từ đó bạn cũng hiểu thêm tại sao có nhiều kiểu hành động lại trở thành điều cấm kỵ hay nhẹ nhàng hài hước hơn là trở thành một kiểu meme trên các nền tảng cộng đồng. Hy vọng bạn sẽ không còn cảm thấy khó hiểu nữa. Biết được cách dùng sai rồi thì hãy dùng đúng nhé.

Còn dùng hiệu quả? đăng ký học tại TELOS Academy ngay thôi.