?

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)論等。

所以這一期教程，我們就來看一下該如何使用 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

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

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

圖3

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

下面我們打開 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)入過項(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)擊它就可以方便地收起或展開文件分組。

圖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

不過不要忘記需要先在 Sketch 中，給這個(gè)圖片設(shè)置過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 并沒有創(chuàng)建分組的功能，所以我們用標(biāo)簽來分類文件。而現(xiàn)在我們就可以用標(biāo)簽來做更細(xì)化的過濾篩選條件。

圖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)擊一下，就可以隱藏頁面上的所有評(píng)論。

圖16

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

最后我們?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，打開就可以看到這個(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，打開后也能在網(wǎng)頁端看到。若是Copy App URL，對(duì)方打開后會(huì)跳到自己的本地 Zeplin App 中（如果有的話）。

圖19

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

-? END -

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

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

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

? uirush.com