Một công cụ hữu ích để cộng tác với các nhà thiết kế: Khóa học Figma Properties

Hướng dẫn sử dụng Figma dành cho nhà phát triển

Bạn có muốn hợp tác hòa bình với các nhà thiết kế không? Tìm được đồng đội phù hợp là chuyện may rủi.. 😭 Nhưng tôi có thể giúp bạn có được tư duy đó từ những nhà thiết kế mà bạn làm việc cùng!

"Trong số tất cả các nhà phát triển mà tôi từng làm việc cùng cho đến nay, ㅇㅇ là người tuyệt vời nhất để làm việc cùng~"

Và cứ thế tiếp tục. Lý do tôi nói điều này là vì tôi là nhà thiết kế đó!! =) Vì vậy, tôi biết rất rõ những phần nào trong quá trình cộng tác giữa nhà thiết kế và nhà phát triển gây ra khó khăn trong giao tiếp.

Cách dễ nhất và nhanh nhất để đạt được sự cộng tác liền mạch = Sử dụng các công cụ cộng tác tốt nhất

Dù sao đi nữa, cách dễ nhất và nhanh nhất để đạt được sự cộng tác suôn sẻ là sử dụng công cụ cộng tác tốt nhất ! Tôi chắc rằng nhiều bạn đang sử dụng Zeppelin, nhưng thật không may là Zeppelin không có một số tính năng .

Để đưa ra một vài ví dụ nhanh, Zeplin không hiển thị quy trình làm việc (mối quan hệ liên kết trang, thứ tự luồng tổng thể), loại hoạt ảnh tương tác để sử dụng cho một thành phần cụ thể và các thuộc tính chi tiết của nó, các thuộc tính phản hồi (căn chỉnh theo chiều ngang/dọc), vân vân. Vì vậy, những nội dung này phải được nhà thiết kế chuyển giao ở định dạng khác ngoài Zeplin (PPT, Slack, v.v.) hoặc bạn phải hỏi nhà thiết kế nhiều lần trong quá trình phát triển.

Bạn có thể xem nhẹ những vấn đề này và nghĩ rằng chúng là một phần của quá trình hợp tác tất yếu. Tuy nhiên, trong số những vấn đề nhỏ đó, có một cách đơn giản để ngăn ngừa những vấn đề nêu trên bằng cách sử dụng một công cụ cộng tác có tên là Figma thay vì Zeplin. Vậy, bạn có muốn tìm hiểu cách sử dụng Figma để ngăn chặn điều này không? Hay bạn muốn tiếp tục gặp phải những vấn đề nhỏ đó lặp đi lặp lại trong năm tới, năm năm, mười năm nữa?

Một ngày nọ, khi đang cộng tác với các nhà phát triển, tôi tình cờ tìm thấy một công cụ có tên là Figma. Nói một cách đơn giản, Figma là sự kết hợp giữa Photoshop + Zeplin. (Tôi lấy Photoshop làm ví dụ để giúp bạn hiểu, nhưng Figma và Photoshop là hai công cụ hoàn toàn khác nhau với các chức năng khác nhau.) Nhưng công cụ có tên Figma này lại là một thế giới hoàn toàn mới! Tôi không biết các nhà phát triển cảm thấy thế nào, nhưng theo quan điểm của một nhà thiết kế, việc sử dụng Zeplin khá bất tiện. Tất nhiên, vẫn tốt hơn là không sử dụng Zeppelin.

Tuy nhiên, nếu bạn chia sẻ nội dung hướng dẫn thiết kế với Figma, ngay cả nội dung không thể hiển thị trong Zeplin cũng sẽ tự động được hiển thị. Khi đó, các nhà phát triển sẽ không còn phải kiểm tra các nội dung khác mà họ phải nhận qua PPT, KakaoTalk, v.v. ở nhiều nơi khác ngoài Zeppelin. Bởi vì bạn chỉ cần kiểm tra một figma.

Và bạn có thể đã có trải nghiệm khi thiết kế mà nhà thiết kế thực hiện khác với thiết kế của sản phẩm thực tế được phát triển. Có thể có nhiều lý do cho điều này, nhưng chủ yếu có thể quy cho hai lý do sau.

1. Nội dung cần thiết cho công việc phát triển không được hiển thị đầy đủ trong Zeplin (hướng dẫn thiết kế).
2. Khi các nhà thiết kế viết thông tin còn thiếu trực tiếp vào văn bản, họ vô tình mắc lỗi. Hoặc nếu nội dung cập nhật không thể được cập nhật đầy đủ theo thời gian thực.

Điều đầu tiên tôi vừa nói đến là 'những thứ không thể hiển thị trên Zeppelin'. Vấn đề số 2 có thể xảy ra khi các nhà thiết kế tạo hướng dẫn thủ công. Ví dụ, vì nội dung như 'Khi tôi nhấp vào nút xác nhận trên trang A, tôi sẽ được chuyển đến nút B' không thể hiển thị trong Zeppelin nên nó phải được viết thành văn bản riêng, đúng không? Vì được viết thủ công nên đôi khi sẽ xảy ra lỗi là điều dễ hiểu. Cũng không thể cập nhật theo thời gian thực. Mỗi lần kế hoạch thay đổi, tôi phải tìm tất cả thông tin liên quan nằm rải rác trong các tập tin và thay đổi tất cả theo cách thủ công. Tuy nhiên, với Figma, các thuộc tính của thành phần thiết kế được tự động đồng bộ hóa theo thời gian thực, do đó những sai sót như thế này sẽ không bao giờ xảy ra.

Và điều tuyệt vời nhất là nó rất dễ thực hiện! Gần như không có gì mới để học và bạn không cần phải cài đặt bất cứ thứ gì mới trên máy tính xách tay của mình. Vì rất giống với Zeppelin nên các nhà phát triển chỉ cần xem qua cách sử dụng các tính năng không có trong Zeppelin. Bạn có thể quen với nó ngay lập tức nếu chỉ sử dụng một lần mà không cần học. Và vì Figma có sẵn trên web nên bạn không cần phải cài đặt chương trình trên máy tính xách tay của mình. Tất nhiên, nó hỗ trợ cả Windows và Mac.

Bạn đã đọc đến đây và đang háo hức muốn thử Figma phải không? Vậy nên bây giờ vấn đề duy nhất còn lại là thuyết phục nhà thiết kế. Nếu nhà thiết kế sử dụng Figma, nội dung hướng dẫn thiết kế có thể được cung cấp trong Figma. Nếu bạn là nhà thiết kế sử dụng Photoshop hoặc Illustrator, chuyển sang Figma là lựa chọn đúng đắn 200%, 1000%. Tuy nhiên, nếu bạn đang sử dụng Sketch hoặc XD, bạn có thể tiếp tục sử dụng các công cụ đó mà không cần chuyển sang Figma. Sketch và XD là những công cụ tương tự như Figma, vì vậy chúng có thể có các tính năng giống như Zeplin. Nhược điểm duy nhất là Sketch phải trả phí và không khả dụng trên Windows, trong khi XD yêu cầu nhà phát triển phải cài đặt chương trình trên máy tính xách tay của họ. Sketch và XD đều là những công cụ tốt, nhưng xu hướng thực sự là Figma. Mọi người, từ các công ty khởi nghiệp kỳ lân như Uber và Airbnb cho đến những gã khổng lồ như Microsoft đều đang sử dụng Figma.

Dù sao đi nữa, tôi sẽ tiếp tục bằng cách giả định rằng nhà thiết kế mà bạn đang làm việc cùng đang sử dụng Photoshop hoặc Illustrator. Các nhà thiết kế không khó để học cách sử dụng Figma. Bởi vì cách sử dụng thì tương tự nhau. Vấn đề là định dạng công việc thiết kế trước đây được thực hiện bằng các công cụ khác cần phải được thay đổi. Nó tương thích với Photoshop, XD và Illustrator, nhưng không hoàn toàn tương thích, do đó cần phải thực hiện một số thao tác thủ công. Thật không may, đó chính là lý do vì sao tôi muốn khuyên bạn nên thuê ngoài công việc bán thời gian này nếu bạn có thời gian. Nếu bạn muốn tìm kiếm dịch vụ gia công ngoài, bạn cũng cần có sự chấp thuận của CEO. Vui lòng gửi tệp PDF đính kèm cho CEO. Vui lòng gửi tệp PDF thiết kế đính kèm hoặc sao chép và dán nội dung bên dưới cho nhà thiết kế. Nếu bạn thậm chí không muốn mất công tìm kiếm đối tác gia công phần mềm, bạn có thể yêu cầu tôi làm điều đó thay bạn.

Tôi hy vọng rằng hướng dẫn này có thể đóng một vai trò nhỏ nhưng hữu ích trong việc giúp bạn trở thành nhà phát triển chủ chốt tại một công ty khởi nghiệp kỳ lân nổi tiếng trong tương lai. 🤣

ĐẾN. Nhà thiết kế

Tôi nghĩ bạn có lẽ đã nghe nhiều về Figma rồi. Phương pháp sử dụng gần giống với các công cụ đồ họa chính thống hiện có như Photoshop hoặc Illustrator. Là một nhà thiết kế, tôi có thể đảm bảo rằng bất kỳ nhà thiết kế nào có kinh nghiệm sử dụng Photoshop hoặc Illustrator đều có thể nhanh chóng học cách sử dụng Figma. Có hướng dẫn rất chi tiết về cách sử dụng trên kênh YouTube chính thức của Figma, vì vậy, bạn nên xem các video đó.

Vấn đề là vì tôi đã thực hiện công việc thiết kế bằng một công cụ khác nên tôi cần chuyển đổi các tệp đó sang tệp Figma để tiếp tục làm việc với chúng bằng Figma. Sẽ là một công việc khá tẻ nhạt và tốn thời gian nếu bạn tự mình làm, vì vậy hãy thử đề xuất với CEO của bạn rằng bạn nên thuê ngoài công việc chuyển đổi thành một công việc bán thời gian! ^^

chỉ số

1. Điều kiện tiên quyết và kiến ​​thức trước khi sử dụng Figma
2. Giải quyết các vấn đề giao tiếp phổ biến khi cộng tác với nhà thiết kế
3. Những điều khác cần biết

Nếu có bất kỳ điều gì bạn không hiểu khi đọc tài liệu bài giảng, hãy thoải mái đặt câu hỏi bất cứ lúc nào! Bạn có thể liên hệ với chúng tôi tại Inflearn hoặc trên Instagram! @needesign_official