Zeplin công cụ kết nối giữa developer và designer

0
252

Với các bạn lập trình viên khi phải tập tành sử dụng photoshop hay sketch mất tương đối thời gian cho việc học các kỹ năng sử dụng đơn giản chúng, và kinh khủng hơn khi tiếp nhận file thiết kế từ designer (nhìn bản thiết kế muốn táng zô mặt thèng “đũy dai nơ” rồi :))

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 không cần chỉnh theo từng pixel, mặc dù hiện tại bây giờ photoshop đã cải tiến khá là nhiều, Nhưng việc cài đặt, hay mở ra từng màn hình một vẫn tốn rất nhiều 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 hay màu sắc..vv

Hôm nay topuxd xin giới thiệu với các bạn công cụ Zeplin đã được sử dụng khá rỗng rãi có thể nói đây là 1 công cụ rất hữu ích nó giúp dev tiết kiệm thời gian hơn khi làm việc với designer, Zeplin 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. Nghe có vẻ nó khá thần thánh nhưng dùng nó thật sự rất đơn giản.

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

Các bạn vào links để 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à dev

Đối với Designer

Step 1:

Đối với designer việc đầu tiên mà bạn cần làm là tải plugin cho PSD và Sketch, chỉ việc tải về và nó sẽ auto có trong phần mềm của bạn

Link tải plugin cho Sketch và Photoshop : https://zeplin.io/support.html

Step 2:

Bạn cứ design thoải mái đi, bay đi đến bất kỳ đâu bạn muốn mà bạn hãy nhớ giúp các bạn dev 1 điều là ở bản cuối cùng của bản thiết kế trước khi đẩy lên Zeplin thì hãy làm động tác như dưới đây nhé. Việc này sẽ giúp cho các bạn code có thể lấy luôn được ảnh cần thiết

Lưu ý với file Photoshop thì cần dùng bản mới nhất (Photoshop cc 2015 trở lên) , tất cả các màn hình đều phải chuyển sang Artboard

  1. Photoshop: Đối với tất cả các btn, hay hình ảnh… bất cứ những gì cần cắt, bạn chọn vào layer hoặc group, sau đó click vào Mark as asset 

  2. Sketch: thì đơn giản hơn, chỉ cần chọn và đối tượng hoặc group và Make Exportable, lưu ý sẽ có các lựa chọn như là 1X, 2X, 3X… cho các bạn, thường thì các bạn nên chọn hết để cho bên dev có thể sử dụng tất cả các định dạng

    Step 3:Đẩy Project lên Zeplin

    Đối với cả Sketch và Photoshop ta đều phải chọn Artboard trước sau đó vào plugin như step 1 và chọn đẩy, bạn cứ làm đi bạn sẽ thấy ^^

    Photoshop:

    Sketch:

    Đối với Developer

    Thì thật đơn giản các bạn chỉ việc cài đặt, được mời vào dự án và dùng thôi :v

    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ùngVà đặc biệt là Zeplin chỉ cho bạn dùng free 2 dự án, nên nếu được hãy dụ dỗ sếp của bạn mua nó nhé, đỡ phải mất công thay hàng loạt máy cùng hệ điều hành cho nhân viên, cũng không phải tốn thêm tiền mua bản quyền mua các phần mềm đồ hoạ cho dev được thế thì còn gì bằng phải không nào, hy vọng công cụ này sẽ giúp ích cho công việc của các bạn, chúc các bạn cuối tuần vui vẻ ^^

Nguồn: viblo.asia