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

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

首先，F(xiàn)igma 自身的交付功能還不夠強大，只有參考代碼。之所以說是參考代碼，是因為從設(shè)計到代碼其實并沒有唯一解，開發(fā)大概率不會直接復制這段代碼使用。

因此，提供可復制的屬性值會是更好的辦法，像其他交付工具如 Zeplin、藍湖都是這么做的。

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

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

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

https://figmacn.com/handoff/

標注

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

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

1. 基本信息標注

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

2. 標注設(shè)置

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

3. 樣式標注

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

4. 富文本樣式

這里需要特別提一下富文本樣式的標注。我們在設(shè)計時有一些文本圖層包含多種樣式，為了方便查看這種富文本樣式，我將文本進行了分段，開發(fā)可以點擊對應(yīng)的文本段來查看不同文字片段的各項屬性值。

離線下載

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

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

切圖

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

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

最后

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

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

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

References

• [1] 我使用的這一年來: 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)注作者的微信公眾號：「codesigner」