Figma 是一個很棒的設計工具，我使用的這一年來 [1] 感覺越來越離不開它了。但是，設計從來不是一個人的事，尤其是数字產品的設計。

我們的設計稿，最終要交付到開發手中，讓他們來把設計稿變成最終的產品。Figma 本身帶有交付功能，只需要給開發的賬號開通查看權限併發送文件鏈接就可以了，但是有兩個原因導致開發還不太願意接受 Figma。

首先，Figma 自身的交付功能還不夠強大，只有參考代碼。之所以說是參考代碼，是因為從設計到代碼其實並沒有唯一解，開發大概率不會直接複製這段代碼使用。

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

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

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

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

https://figmacn.com/handoff/

標註

Figma 與其他設計工具最大的不同是基於 Web 的屬性，所有設計數據都存儲於雲端。因此，Figma handoff 是通過 Figma 提供的開放 API 來獲取設計數據，來生成設計標註的。

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

1. 基本信息標註

生成后的標註可以查看 Frame 和組件的尺寸、間距等信息，也可以查看每一個設計元素的各項屬性。右側的屬性值都是可以直接點擊複製的，方便開發根據自己的代碼偏好使用。

2. 標註設置

同時，Figma handoff 還提供平台、像素密度、標註倍數和單位等選項，方便開發直接使用而不必換算。為了適應國內的微信生態，單位中還特別增加了小程序的 rpx。

3. 樣式標註

除了元素標註，Figma handoff 還會自動抓取當前文件中的樣式，並生成對應的樣式屬性值，這些樣式屬性可以方便開發統一編寫為 design tokens。

4. 富文本樣式

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

離線下載

前文說過，Figma 在國內的訪問速度不是很快，因此 Figma handoff 提供了離線下載模式，也就是將生成的設計標註下載為一個本地網頁，這樣給開發之後也就不存在速度慢的問題了。

但是，由於設計數據是直接通過 API 從 Figma 服務器獲取的，所以在生成離線標註時可能會遇到導出比較慢的情況。這種情況下推薦使用科學上網並開啟全局代理以加快速度，當然你也可以選擇一部分 Frame 導出，而不是一次性導出整個文件的標註。

切圖

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

一般來說，設計師可以邀請開發查看文件，自己按需導出素材，但是由於開發往往對設計師的文件結構不了解，容易導出錯誤的切圖。因此，我建議設計師自己負責切圖，根據開發的要求在文件中設置好 Export 屬性，Figma handoff 可以自動識別到所有帶有 Export 的元素，生成切圖。

最後

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

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

更多 Figma 相關神器：

閱讀文章 >>

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

歡迎關注作者的微信公眾號：「codesigner」

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極5註冊_為了讓你用上 Figma ，他做了一個設計交付神器！