Hướng dẫn sử dụng Zeplin cung cụ kết nối Designer và Frontend

0
530
hướng dẫn sử dụng zeplin

Với các bạn lập trình viên trước đây khi phải tập tành sử dụng photoshop hay sketch có vẻ như khá là khủng khiếp và mất tương đối nhiều thời gian cho việc học các kỹ năng sử dụng đơn giản chúng.

Ví dụ đơn giản như tôi muốn xuất ra 1 cái icon tôi phải căn chỉnh đo đạc cẩn thận, phải zoom lên cực đại để cho nó có thể chuẩn theo từng pixel, mặc dù hiện tại bây giờ photoshop đã cải tiến khá là nhiều, bạn có thể xuất ngay ảnh trên layer mà bạn đang chọn…. Nhưng việc cài đặt, hay mở ra từng màn hình một vẫn là khá mất thời gian và công sức của chúng ta. Nhất là đối với việc đo đạc kích thước khoảng cách và màu sắc.

Sau quá trình làm việc, tôi được 1 bạn dev giới thiệu cho công cụ quản lý kết nối giữa designer và dev. Ban đầu tôi cũng chẳng hứng thú gì với nó cho lắm, cũng nhìn ngắm sơ qua. Nhưng trong quá trình làm việc, cái khó khăn vấp phải giữa 2 bên, việc confirm qua lại chỉ vì 1 cái icon bé tí tẹo, làm tôi cảm thấy rất khó chịu và mất thời gian. Tôi đã dành thời gian tìm hiểu nó, Zeplin đã đem lại cho tôi những tiện ích thực sự.

Hơn nữa ở trong một công ty lớn về gia công phần mềm thì việc có nhiều hệ điều hành là không thể tránh khỏi. Nhân viên thiết kế đồ hoạ thì dùng mac, nhân viên backend và frontend developer thì dùng ubuntu, window…. Bất lợi ở chỗ như Mac thì cài được Sketch, Ubuntu thì dường như không chạy được một chương trình đồ hoạ nào cả, Window thì có vẻ không có anh chàng nào chịu clone Sketch lại cho nó cả. Có vẻ đau đầu rồi đây.

Và Zeplin là thứ mà có thể kết nối tất cả: Window, Ubuntu, Mac. Dù ở bất kỳ hệ điều hành nào bạn đều có thể xem được photoshop hay sketch, bạn có thể đo đạc hoặc xuất ảnh chỉ bằng 1 cú click chuột. Có vẻ nó khá thần thánh nhưng dùng nó thật sự là đơn giản.

Zeplin là thứ giao tiếp file thiết kế gốc PSD một cách nhanh nhất giữ Designer & Frontend developer

Bạn có thế sử dụng zeplin bằng 2 cách một là sử dụng trực tiếp trên web của nó hoặc là tải ứng dụng về chạy trực tiếp trên máy. Với tôi, thì tôi dùng thẳng ứng dụng trên máy để quản lý các dự án và các thông báo mới khi có cập nhập dễ dàng hơn

Đây là đường link giúp bạn cài đặt zeplin: https://zeplin.io

Sau đây tôi xin giới thiệu 1 số tip dành cho các bạn design và frontend developer

Đối với Designer

Step 1:

Đăng ký 1 tài khoản trên: https://zeplin.io

Đối với tài khoản miễn phí tại một thời điểm chỉ có thể tạo được 1 project

Step 2:

Đối với designer việc đầu tiên mà bạn cần làm là tải plugin cho PSD và Sketch, tích hợp vào photoshop Lưu ý: Chỉ hỗ trợ photoshop version 2018 trở lên

Link tải plugin cho Sketch và Photoshop:

https://support.zeplin.io/en/articles/118010-installing-photoshop-plugin-on-windows

Download plugin: io.zeplin.photoshop-plugin. Sau khi download giải nén và copy bỏ vào trong folder plugin của photoshop như hình:

hướng dẫn sử dụng zeplin

Tiếp theo cài đặt: io.zeplin.photoshop-panel. Như hướng dẫn https://support.zeplin.io/en/articles/118010-installing-photoshop-plugin-on-windows

Sau khi hoàn thành 2 bước trên bạn đóng photoshop & mở lại thử. Nếu cài đặt plugin thành công sẽ có hình như sau:

Step 3:

Upload file PSD lên Zeplin

Photoshop: Mở plugin Zeplin: Windows / Extensions / Zeplin

Photoshop: Mở file PSD / Tại tab Layer / Chọn tất cả layer & nhấp phải chuột chọn / Artboard from Layers

Đặt tên cho Artboard trong ô Name: Sau đó nhấp OK

Plugin Zeplin: Import file lên Zeplin/ Artboad sẽ gán vào tên dự án bạn đã tạo trên Zeplin.io / Sau đó click import

Sau khi import thành công bạn đăng nhập vào https://zeplin.io/ sẽ nhìn thấy PSD vừa import lên Zeplin

Đối với Frontend Developer

Thì thật đơn giản các bạn chỉ việc cài đặt zeplin, được mời vào dự án và dùng thôi :v mà không cần phải gửi file, tài file PSD rất nặng qua email hay driver

  1. Click đúp chuột vào màn hình mà bạn đang làm
  2. Di chuột vào các vùng trên màn hình để xem khoảng cách giữa các đối tượng
  3. Chọn vào text để xem được font family, font size, màu sắc… rất nhiều thuộc tính hiển thị ở cột bên phải của màn hình
  4. Chọn vào các đối tượng khác để lấy màu sắc, tải ảnh về và dùng

Chúc các bạn thành công

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

70 − 68 =