為了讓你用上 Figma ，他做了一個(gè)設(shè)計(jì)交付神器！

Figma 是一個(gè)很棒的設(shè)計(jì)工具，我使用的這一年來(lái) [1] 感覺越來(lái)越離不開它了。但是，設(shè)計(jì)從來(lái)不是一個(gè)人的事，尤其是數(shù)字產(chǎn)品的設(shè)計(jì)。

我們的設(shè)計(jì)稿，最終要交付到開發(fā)手中，讓他們來(lái)把設(shè)計(jì)稿變成最終的產(chǎn)品。Figma 本身帶有交付功能，只需要給開發(fā)的賬號(hào)開通查看權(quán)限并發(fā)送文件鏈接就可以了，但是有兩個(gè)原因?qū)е麻_發(fā)還不太愿意接受 Figma。

首先，F(xiàn)igma 自身的交付功能還不夠強(qiáng)大，只有參考代碼。之所以說(shuō)是參考代碼，是因?yàn)閺脑O(shè)計(jì)到代碼其實(shí)并沒有唯一解，開發(fā)大概率不會(huì)直接復(fù)制這段代碼使用。

因此，提供可復(fù)制的屬性值會(huì)是更好的辦法，像其他交付工具如 Zeplin、藍(lán)湖都是這么做的。

其次則是 Figma 的訪問速度問題，因?yàn)榉?wù)器在國(guó)外所以首次打開會(huì)很慢。設(shè)計(jì)師因?yàn)榻?jīng)常使用在本地有緩存或許還能忍受，但如果開發(fā)第一次收到這個(gè)鏈接花了好幾分鐘才打開，是萬(wàn)萬(wàn)不能接受的。

由于這兩個(gè)原因，加上受到 Sketch Measure [2] 的啟發(fā)，我決定自己開發(fā)一個(gè)可以生成離線文件的 Figma 交付工具。它就叫 Figma handoff [3]，代碼已經(jīng)開源在 GitHub [4]。

下面，我想從功能的角度介紹一下 Figma handoff。

https://figmacn.com/handoff/

標(biāo)注

Figma 與其他設(shè)計(jì)工具最大的不同是基于 Web 的屬性，所有設(shè)計(jì)數(shù)據(jù)都存儲(chǔ)于云端。因此，F(xiàn)igma handoff 是通過 Figma 提供的開放 API 來(lái)獲取設(shè)計(jì)數(shù)據(jù)，來(lái)生成設(shè)計(jì)標(biāo)注的。

你只需要輸入文件鏈接和 Access Token [5]，并選擇需要生成標(biāo)注的 Frame，它就可以自動(dòng)幫你生成標(biāo)注了。

1. 基本信息標(biāo)注

生成后的標(biāo)注可以查看 Frame 和組件的尺寸、間距等信息，也可以查看每一個(gè)設(shè)計(jì)元素的各項(xiàng)屬性。右側(cè)的屬性值都是可以直接點(diǎn)擊復(fù)制的，方便開發(fā)根據(jù)自己的代碼偏好使用。

2. 標(biāo)注設(shè)置

同時(shí)，F(xiàn)igma handoff 還提供平臺(tái)、像素密度、標(biāo)注倍數(shù)和單位等選項(xiàng)，方便開發(fā)直接使用而不必?fù)Q算。為了適應(yīng)國(guó)內(nèi)的微信生態(tài)，單位中還特別增加了小程序的 rpx。

3. 樣式標(biāo)注

除了元素標(biāo)注，F(xiàn)igma handoff 還會(huì)自動(dòng)抓取當(dāng)前文件中的樣式，并生成對(duì)應(yīng)的樣式屬性值，這些樣式屬性可以方便開發(fā)統(tǒng)一編寫為 design tokens。

4. 富文本樣式

這里需要特別提一下富文本樣式的標(biāo)注。我們?cè)谠O(shè)計(jì)時(shí)有一些文本圖層包含多種樣式，為了方便查看這種富文本樣式，我將文本進(jìn)行了分段，開發(fā)可以點(diǎn)擊對(duì)應(yīng)的文本段來(lái)查看不同文字片段的各項(xiàng)屬性值。

離線下載

前文說(shuō)過，F(xiàn)igma 在國(guó)內(nèi)的訪問速度不是很快，因此 Figma handoff 提供了離線下載模式，也就是將生成的設(shè)計(jì)標(biāo)注下載為一個(gè)本地網(wǎng)頁(yè)，這樣給開發(fā)之后也就不存在速度慢的問題了。

但是，由于設(shè)計(jì)數(shù)據(jù)是直接通過 API 從 Figma 服務(wù)器獲取的，所以在生成離線標(biāo)注時(shí)可能會(huì)遇到導(dǎo)出比較慢的情況。當(dāng)然你也可以選擇一部分 Frame 導(dǎo)出，而不是一次性導(dǎo)出整個(gè)文件的標(biāo)注。

切圖

在設(shè)計(jì)交付中切圖也一直是一個(gè)令人頭疼的問題。Figma 的右側(cè)面板中有 Export 屬性，具有查看權(quán)限的用戶可以任意選擇格式、后綴和倍數(shù)來(lái)導(dǎo)出所選元素。

一般來(lái)說(shuō)，設(shè)計(jì)師可以邀請(qǐng)開發(fā)查看文件，自己按需導(dǎo)出素材，但是由于開發(fā)往往對(duì)設(shè)計(jì)師的文件結(jié)構(gòu)不了解，容易導(dǎo)出錯(cuò)誤的切圖。因此，我建議設(shè)計(jì)師自己負(fù)責(zé)切圖，根據(jù)開發(fā)的要求在文件中設(shè)置好 Export 屬性，F(xiàn)igma handoff 可以自動(dòng)識(shí)別到所有帶有 Export 的元素，生成切圖。

最后

我差不多花了三個(gè)月的時(shí)間寫出了這個(gè)交付工具，主要還是想讓 Figma 的設(shè)計(jì)交付更加方便，讓更多還在猶豫的設(shè)計(jì)師可以大膽放心地開始使用 Figma。

Figma handoff 整個(gè)設(shè)計(jì)和開發(fā)的過程都是由我一人完成，這中間也邀請(qǐng)了一些設(shè)計(jì)師朋友幫忙內(nèi)測(cè)，并在他們的不斷反饋之下打磨細(xì)節(jié)，再次感謝他們。如果你在使用時(shí)有任何問題，也可以在 GitHub issues [6] 中告訴我。

更多 Figma 相關(guān)神器：

References

• [1] 我使用的這一年來(lái): https://sspai.com/post/55044
• [2] Sketch Measure: https://github.com/utom/sketch-measure
• [3] Figma handoff: https://figmacn.com/handoff/
• [4] 開源在 GitHub: https://github.com/leadream/figma-handoff
• [5] Access Token: https://www.figma.com/developers/api#access-tokens
• [6] GitHub issues: https://github.com/leadream/figma-handoff/issues

歡迎關(guān)注作者的微信公眾號(hào)：「codesigner」