Zeplin Là Gì – Zeplin Các Phần Mềm Thay Thế Và Phần Mềm Tương Tự

Length:LongLanguages:url-selector#selectionChanged” data-controller=”url-selector”>Englishالعربية/عربيČeštinaDeutschελληνικάEspañolFrançaisहिंदीHrvatskiBahasa IndonesiaItalianoMelayuPусскийSlovenčinaWikang Tagalogукраїнська моваاُردُوTiếng Việt中文（简体）中文（繁體）

Sự hợp tác giữa các nhà thiết kế và nhà phát triển là cần thiết cho sự thành công của một dự án web, và đó là thước đo thành công của một đội ngũ. Khi chia sẻ cùng không gian làm việc là điều vô giá, thì việc có một source of truth trực tiếp giúp cho sự cộng tác này rất hữu ích. Trong bài này, chúng ta sẽ xem xét Zeplin và cách thức hoạt động kết hợp với Sketch để kết nối các nhóm lại với nhau.

Đang xem: Zeplin là gì, zeplin các phần mềm thay thế và phần mềm tương tự

Giới thiệu nhanh về Sketch

Khoảng sáu tháng trước, khi tôi chuyển công việc, tôi được khuyến khích thử Sketch. Điều tuyệt vời về phần mềm này là nó đặc biệt tập trung vào thiết kế giao diện và biểu tượng; từ artboards (vùng để thiết kế) với kích thước cụ thể cho web, di động, và các biểu tượng, với các tính năng giúp nâng cao quá trình thiết kế, Sketch là điều phải có cho các nhà thiết kế.

Ngoài ra, quá trình học tập gần như dễ dàng nếu bạn là một người dùng Photoshop hoặc Illustrator trung bình trở lên.

Dưới đây là một số ví dụ cung cấp cho bạn cái nhìn khái quát về những gì bạn có thể làm với sketch:

Tạo trang để tổ chức nội dung của bạn (ví dụ: thiết kế cho di động, thiết kế cho máy tính để bàn) và Artboards bên trong các trang này để mô phỏng sản phẩm của bạn (ví dụ: tạo hành trình từng bước cho khách hàng ).Sử dụng Inspector để tìm tất cả các chi tiết về một đối tượng cụ thể (kích thước, vị trí, màu sắc, kiểu phông chữ, độ mờ đục và nhiều hơn nữa).Sử dụng tính năng Export để xuất các Artboard hoặc đối tượng riêng lẻ ra các định dạng file cụ thể (PNG, JPG, PDF, v.v.).

“Tôi là một dev, tôi chưa từng dùng Sketch!”

Trong những năm gần đây, các nhà thiết kế đã học cách cộng tác với nhau bằng các công cụ như InVision, nhưng nền tảng này vẫn thiếu các tính năng cho phép đội ngũ phát triển nhanh tay thiết kế.

Chúng ta không nên yêu cầu các nhà phát triển trở nên thành thạo với cùng một công cụ thiết kế sử dụng để mô phỏng sản phẩm. Điều đó nói rằng, chúng ta cũng không nên yêu cầu các nhà thiết kế phải rời xa những gì họ làm tốt nhất: thiết kế! Việc xây dựng một “tài liệu mô tả kỹ thuật” mỗi khi họ giao một thiết kế thì khá xa với khái niệm Agile, và có thể có nghĩa là ãng phí rất nhiều thời gian giữa việc giao thiết kế và phải lặp điều đó lại nếu cần thiết.

Zeplin

Đây là lúc Zeplin bước vào cuộc chơi.

Zeplin là một công cụ hỗ trợ cộng tác cho các nhà thiết kế giao diện người dùng và các nhà phát triển giao diện người dùng. Nó đi trước quá trình làm công việc thiết kế và giúp các đội ngũ với việc trao đổi các thiết kế.

Xem thêm: Câu Trả Lời Hoàn Hảo Nhất Cho Đam Mê Là Gì ? Câu Trả Lời Hoàn Hảo Nhất Cho Đam Mê Là Gì

Nó cho phép các nhà thiết kế upload những wireframes hoặc thiết kế trực quan của họ ngay từ Sketch và thêm chúng vào các thư mục dự án trong Zeplin. Có phải điều tốt nhất? Chú thích sẽ tự động được thêm vào các thiết kế (kích cỡ, màu sắc, lợi nhuận và thậm chí các đề xuất thay đổi CSS cho một số yếu tố) sẽ khiến bạn có một repo trực tuyến mà cả đội ngũ có thể đóng góp vào.

“Zeplin hoạt động rất tốt với vai trò là một Single Source of Truth (SSOT), khi được sử dụng như vậy.

Ngoài ra, vì nó có sẵn như một ứng dụng độc lập, cũng như một ứng dụng web, bạn có thể truy cập nó ở bất cứ đâu. Giúp bạn kiểm tra thiết kế và những thứ như khoảng cách, kích thước, màu sắc, v.v … “- Daniel Setas Pontes, nhà phát triển Javascript
NOW TV, Sky

Xuất các thiết kế từ Sketch sang Zeplin

Zeplin làm việc như một plugin của Sketch, vì vậy upload các thiết kế chỉ trong một cú click.

Đây là cách bắt đầu một dự án:

Khởi động một dự án ZeplinDownload về Zeplin (mac only) và cài đặt. Các nhà phát triển sẽ không cần phải chạy OS X vì họ chỉ cần truy cập vào công cụ chạy trên nền web để truy cập vào nội dung.Tạo những dự ánChọn nền tảng bạn đã thiết kế.Đặt tên cho dự án (hãy chắc rằng bạn chọn một cái tên quen thuộc với cả nhóm).

Xuất từ ​​Sketch

Trong Sketch, chọn từng đối tượng và cho phép cho chúng có thể export. Điều này sẽ cho phép đội ngũ dev của bạn export từng phần tử sau đó từ bên trong Zeplin. Đây là cách hoạt động:

Tiếp theo, chọn các artboard bạn muốn tải lên Zeplin.Đi đến Plugins > Zeplin > Export Selected Artboards.Chọn dự án mà bạn muốn upload thiết kế của bạn, sau đó chọn Import.

Làm viêc với Zeplin

Những nhà phát triển: đây là cách nó hoạt động, khi bạn đã mở những công cụ chạy trên web và đăng nhập vào:

Chọn đối tượng bạn muốn inspect:Nhìn vào cột bên tay phải để xem các thông tin chi tiết như kiểu font chữ, màu sắc, và nhiều nữa (thông tin được hiển thị dựa theo các đối tượng bạn chọn)Copy những CSS được đề xuất.

Xem thêm: Valentine Là Gì ? Ý Nghĩa Của 3 Ngày Valentine Trong Năm Nguồn Gốc, Ý Nghĩa Của Ngày Valentine 14/2

Nếu nhóm thiết kế đã xét cho các thành phần có thể export khi thực hiện import các thiết kế vào Zeplin, đội ngũ phát triển nên export những asset riêng lẻ. Asset sẵn sàng được download dưới định dạng SVG và ba kích thước PNG khác.

Ở đây bạn có thể thêm ghi chú và bình luận cho thiết kế.Bạn cũng có thể sao chép và chia sẻ liên kết của dự án, có lẽ thậm chí tích hợp với kênh Slack của nhóm để báo cáo hoặc mời các thành viên tham gia hợp tác!

Tại sao đội ngũ của bạn nên bắt đầu áp dụng

Làm việc cùng Zeplin có nhiều lợi điểm, đây là một vài ví dụ:

Hãy thử đi!

Làm việc với Sketch và Zeplin là một cách tuyệt vời để các nhà thiết kế hợp tác suôn sẻ với các nhà phát triển. Nhóm của tôi thích làm việc theo cách này – Tôi muốn nghe suy nghĩ và trải nghiệm của bạn làm việc với các công cụ này!