iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
6
自我挑戰組

學什麼就寫什麼,知道什麼就分享什麼系列 第 3

與工程師的協作之路-工具篇(Zeplin)

  • 分享至 

  • xImage
  •  

從「與工程師的協作之路-生物篇」中,我們已經初步了解工程師是一種什麼樣的珍奇異獸(?)~
總之就是既珍貴又不可多得的魔術師隊友(再度抱大腿無誤)

那麼就來討論平日協作中常用的工具吧!
其實應該要先介紹一下Adobe Photoshop或Sketch或Adobe XD之類的,不過因為這個小主題我把重點擺放在與工程師的協作,所以我們先跳過設計的部分!

今天要介紹的是能與這些設計工具搭配的神器--Zeplin/images/emoticon/emoticon35.gif
Yes
(點擊圖片可以外連DEMO影片)

Zeplin針對 Sketch / Adobe XD CC / Figma / Adobe Photoshop CC 這些都有出外掛工具,重點在協作!
將設計稿引入之後有很多地方都能在溝通上發揮不錯的效益!


那麼來看一下,Zeplin有哪些功能讓我這麼推薦他吧!
(以下文章碼掉的部分因涉及同伴們的個資,又怕被公司告(?),所以就碼了~)

一、不一定要下載軟體也能夠即時預覽

雖然Zeplin可以下載軟體到電腦上進行登入,但即時預覽畫面能夠讓活性更大!
打開網頁,並且登入你的帳號(記得要是協作成員),就可以看到目前畫面!
(Zeplin專案畫面)

要注意~免費版的一次只能開一個專案,依照付費方案不同,有不同功能和個數的上限。(我窮窮~用免費演雖!)
(Zeplin付費方案)

二、工程師們不用通靈猜啦!

只要把游標移到元素上,Zeplin就會幫工程師抓取好色票和間距供參考,甚至連CSS、SCSS、APP語法等都有支援!

Zeplin呈現畫面

不過不建議直接全部複製,僅能提供參考!
畢竟切版時有其他方法來讓樣式表更好管理,一個一個貼上的話,大概會維護到死這樣.../images/emoticon/emoticon20.gif

PM「阿設計不是都寫給你了~是不會照貼喔!是不是在謊報時間?」
RD「......」

三、設計師們更好管理及溝通了

設計師只要跟工程師(或負責切版的人,有時候是設計師自己)溝通好,就可以對使用的顏色們做命名與分類!
不只是色票,各種字體大小都更方便地能夠整理~
雖然這樣的功能Sketch也做得到,但是對電腦上沒有Sketch的工程師來說,Zeplin就是一個很好的溝通工具!
至少不是輸出一張圖讓工程師自己想辦法去吸色,或是給一段無法複製的色票讓工程師去逐字手打...

四、團隊協作更明確了

PM「上面那個要大一點比較好!還有OO我也想換一下!還有XX...那有個規則我改一下好了~」
Designer「哪個?」
PM「就那個...(描述中)」
Designer「噢,好!」
Designer「我設計稿有改喔!」
RD「好喔~」
(三天後)
PM「誒~我剛看了新的設計稿,不是那個啦!而且OO不是那個意思!」
Designer「蛤~不然是哪個?」
RD「前幾天說的那些我都整理好囉!(笑)」
Designer「先改回去好了~你們不是有那個什麼git?」
RD「(驚)可是我已經花時間整理了誒...」
PM「工程師最近都在忙什麼啊?我只不過叫設計改個圖花你這麼多時間?我說要改規則的那個好了嗎?不就加一行字而已...」
RD「...」

以上情境是否熟悉...我覺得工程師敲可憐,又在薛西佛斯了(幫QQ
所以除了溝通上一定要搞清楚之外,口頭或手勢有時候很難去確切的描述你是指哪個部分,使用Zeplin做更有效的溝通吧!(真的不是業配!)

Zeplin可以在畫面上留言(當然不是只有Zeplin做得到,其他很多工具都有類似的功能,這只是我推薦的其中一項優點而已),留言也可以回覆,並且留言的編號可以用不同顏色做標記,再也不用猜想對方到底是在說哪一段或是需要召集所有人來到設計座位邊開設計稿說明!
(我想大家都能明白思維被打斷是多麼痛苦的事吧...?)
(顏色與標記,讓溝通更有效)

除了快速回覆,也可以當作是修改代辦,不用再手抄一堆沒有畫面的MEMO貼在桌邊了喔!/images/emoticon/emoticon07.gif

五、Zeplin支援更多延伸應用

這部分我沒有深入的研究...但看起來他的外掛真的非常非常多!甚至可以支援到ReactJs的協作~
連結在此
如果有人使用過有推薦的歡迎留言給我/////


太棒了,我平安渡過第三天.../images/emoticon/emoticon46.gif


上一篇
與工程師的協作之路-生物篇(下)
下一篇
與工程師的協作之路-工具篇(Magnet)
系列文
學什麼就寫什麼,知道什麼就分享什麼31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
King Tzeng
iT邦新手 3 級 ‧ 2018-10-17 16:18:43

當你的工程師一定很幸福(羨慕ing~/images/emoticon/emoticon24.gif

Wen Chien iT邦新手 4 級 ‧ 2018-10-17 18:08:26 檢舉

一定要的呀~工程師是我的救世主/images/emoticon/emoticon51.gif

0
tacodrem
iT邦新手 5 級 ‧ 2018-10-24 14:41:23

Zeplin真的好用~
不過好用的工具...也要有人肯去嘗試跟使用....
(繼續通靈)

Wen Chien iT邦新手 4 級 ‧ 2018-10-24 14:51:31 檢舉

哈哈哈,辛苦了~(拍拍)
我們團隊本來也不用這個,但我是唯一設計所以有權力可以導入
(我自己學會使用就是有導入了XD)

我要留言

立即登入留言