?

Zeplin 是配合著 Sketch 非常好用的一款插件，設(shè)計(jì)稿完成后狐血，可以直接從 Sketch 導(dǎo)入到 Zeplin 中淀歇。Zeplin 可以幫你自動(dòng)生成尺碼標(biāo)注、CSS 樣式代碼匈织、導(dǎo)出圖片（在 Sketch 中設(shè)好切片的設(shè)計(jì)稿房匆，在 Zeplin 中可以直接導(dǎo)出），以及共享成員間可以備注和評(píng)論等报亩。

所以這一期教程浴鸿，我們就來(lái)看一下該如何使用 Zeplin（大家可以選擇看視頻，或是下面的圖文教程）弦追。

1?準(zhǔn)備工作

登錄 Zeplin 的官網(wǎng)（戳這里進(jìn)入）岳链，選擇右上角的Sign up free，先注冊(cè)一個(gè)賬號(hào)劲件。

圖1

接著我們需要下載一個(gè) Zeplin 的本地 App（戳這里下載）掸哑。Zeplin 也是可以搭配 Photoshop 用的，所以也有 Windows 版本零远。這里我們是結(jié)合 Sketch 使用苗分，所以選擇 Mac。

圖2

下載完成后牵辣，我們打開(kāi)本地的 App摔癣，點(diǎn)擊右上角的 Create，創(chuàng)建一個(gè)新的項(xiàng)目。它有多種模式的择浊，Android戴卜、iOS、Web琢岩，每個(gè)下面會(huì)有相應(yīng)的描述投剥。

這里我們選擇 Web，可以看到 CSS 和 HTML担孔。

圖3

2 從Sketch中導(dǎo)出文件

下面我們打開(kāi) Sketch江锨，選擇菜單-> Plugins -> Zeplin -> Export Selected Artboards...

圖4

這時(shí)會(huì)彈出 Zeplin 的導(dǎo)入窗口，選擇需要導(dǎo)入進(jìn)的項(xiàng)目糕篇。

可以注意到左下角有一個(gè)“Replace scrrens with the same name”泳桦，這個(gè)是指如果是已經(jīng)導(dǎo)入過(guò)項(xiàng)目，但我們 Sketch 里設(shè)計(jì)稿修改了娩缰，需要更新 Zeplin 上的設(shè)計(jì)稿時(shí)灸撰，打上勾就可以替換原本的文件了。

圖5

3 Zeplin的分組及設(shè)置

導(dǎo)入完成后拼坎，會(huì)自動(dòng)跳出 Zeplin 的 App浮毯，我們可以看到文件都在 Zeplin 里了。鼠標(biāo)懸浮在第一個(gè)文件的最左側(cè)泰鸡，會(huì)出現(xiàn)像除號(hào)一樣的標(biāo)志债蓝，點(diǎn)擊一下，我們就可以給這幾個(gè)文件創(chuàng)建一個(gè)分組了盛龄。

圖6

這里我們把它命名為“商品相關(guān)”饰迹。看文件名的右側(cè)余舶，有一個(gè)小三角的標(biāo)志啊鸭，點(diǎn)擊它就可以方便地收起或展開(kāi)文件分組。

圖7

然后旁邊有個(gè)更多操作的按鈕匿值，我們點(diǎn)擊一下赠制，還可以給這個(gè)分組增加描述、重命名分組挟憔、移動(dòng)分組钟些，或是刪除分組了。

圖8

4 查看CSS樣式

我們進(jìn)入 Zeplin 的一個(gè)設(shè)計(jì)稿绊谭，點(diǎn)擊一下某個(gè)區(qū)域政恍，如下圖。我們可以看到該區(qū)域的px 尺寸达传，以及它與其他元素的距離篙耗。

圖9

看面板的右側(cè)迫筑，我們還會(huì)看到它CSS 相關(guān)的值，例如 box-shadow鹤树。

圖10

5 導(dǎo)出設(shè)計(jì)稿圖片

Zeplin 還有個(gè)非常好的功能铣焊，就是導(dǎo)出圖片逊朽。矢量圖片可以包含 PNG 和 SVG 格式罕伯。

圖11

不過(guò)不要忘記需要先在 Sketch 中，給這個(gè)圖片設(shè)置過(guò)Export叽讳。

圖12

6 給文件打標(biāo)簽

接著我們看下 Zeplin 的打標(biāo)簽功能追他。可以看到這個(gè)文件已經(jīng)有了一個(gè)“專題”的標(biāo)簽岛蚤。我們還可以給它選擇其它的標(biāo)簽邑狸，或是輸入一個(gè)新的標(biāo)簽。也可以刪除這些標(biāo)簽涤妒。

圖13

然后回到主面板中单雾。我們可以注意到最上面有兩排的標(biāo)簽。比如我們選擇“專題”她紫，就會(huì)看到被打上了“專題”標(biāo)簽的所有文件硅堆。

由于在最初，Zeplin 并沒(méi)有創(chuàng)建分組的功能贿讹，所以我們用標(biāo)簽來(lái)分類文件渐逃。而現(xiàn)在我們就可以用標(biāo)簽來(lái)做更細(xì)化的過(guò)濾篩選條件。

圖14

7 備注或評(píng)論

接著再看一下評(píng)論功能民褂。我們可以回復(fù)一條評(píng)論茄菊，或是修改評(píng)論的顏色，或是刪除這條評(píng)論赊堪。

圖15

還可以新增一條評(píng)論面殖。CMD + 鼠標(biāo)點(diǎn)擊一個(gè)空白區(qū)域，輸入你的評(píng)論即可哭廉。

注意看一下畜普，文件的右下角有一個(gè) Notes 睜著眼睛的小猴子標(biāo)志，如果點(diǎn)擊一下群叶，就可以隱藏頁(yè)面上的所有評(píng)論吃挑。

圖16

8 分享設(shè)計(jì)稿

最后我們?cè)倏匆幌拢绾闻c團(tuán)隊(duì)的其他成員協(xié)作呢街立。

在控制面板中舶衬，右側(cè) Members 的旁邊，我們點(diǎn)擊 Invite赎离。然后輸入你想要邀請(qǐng)的成員的 Zeplin注冊(cè)郵箱（所以要用 Zeplin 協(xié)作的成員逛犹，都需要先注冊(cè)一個(gè)賬號(hào)）。

點(diǎn)擊加號(hào)后，狀態(tài)就在 Pending 中了虽画。對(duì)方需要去自己的郵箱里舞蔽，確認(rèn)接收邀請(qǐng)。如果下載了本地 Zeplin 的码撰，登錄本地的 App渗柿，打開(kāi)就可以看到這個(gè)項(xiàng)目了。

圖17

鼠標(biāo)懸浮到列表里的某個(gè)成員上脖岛，會(huì)出現(xiàn)一個(gè)設(shè)置的按鈕朵栖，點(diǎn)擊一下，我們可以將這個(gè)成員設(shè)置為 Admin柴梆，或是移出這個(gè)項(xiàng)目陨溅。

圖18

例如我們經(jīng)常在 Trello 里列下項(xiàng)目的進(jìn)度，這時(shí)候就需要附一下設(shè)計(jì)稿連接了绍在。

直接Copy Web Link门扇，對(duì)方不需要下載 Zeplin，打開(kāi)后也能在網(wǎng)頁(yè)端看到偿渡。若是Copy App URL臼寄，對(duì)方打開(kāi)后會(huì)跳到自己的本地 Zeplin App 中（如果有的話）。

圖19

本期教程就到這里了卸察。大家有什么想要看的內(nèi)容或是建議脯厨，歡迎給我們留言吶。

-? END -

西瓜設(shè)計(jì)研究所

互聯(lián)網(wǎng)創(chuàng)業(yè) | UI設(shè)計(jì) | 開(kāi)發(fā)資源 | 教程

未經(jīng)允許請(qǐng)勿轉(zhuǎn)載坑质，煩請(qǐng)私信作者獲取授權(quán)

? uirush.com