Figma 是一個雲端編輯的線上 UI 介面設計軟體，支援 Windows 和 macOS 等多個平臺。根據 UXTOOLS 的資料，Figma 已經是目前使用排名前五的設計工具了。與 Sketch 等傳統工具不同的是，Figma 是第一款真正支援協作的 UI 設計軟體，可以讓整個團隊的成員同時檢視並修改協作的專案。

1、最吸引人的”團隊協作”

我們來對比figma和sketch的團隊協作

Figma做設計好在哪裡？

我們先來看看sketch在團隊之間是如何協作的，sketch協作的時候要透過Libraries實現元件的複用

Figma做設計好在哪裡？

將Libraries檔案存放在本地伺服器、雲端儲存或版本控制系統當中，向相關人員開放訪問許可權。譬如你可以將Libraries檔案放置在Dropbox共享資料夾裡，然後你的朋友或同事將其新增到自己的Sketch Libraries當中，這樣你們就可以基於同一份Library檔案進行工作了；對於該檔案的任何變更都可以作用於每個人的本地Sketch檔案。

我們再回來看看figma是如何協作的

Figma做設計好在哪裡？

團隊元件共享

figma當你更新了元件的時候，你只要透過左上角的小書本的元件圖示釋出到雲端，你的小夥伴開啟figma的時候就可以同步更新你的元件了。因為我們公司有多個系統，所以建立了不同專案，這個元件也可以在不同的專案之間複用。

figma還可以在多人之間直接同步設計，比如下面的這個圖，可以多人根據一個專案要求，每人同時繪製一個圖形然後進行一個組合。

Figma做設計好在哪裡？

2.方便實用的歷史版本控制

Figma做設計好在哪裡？

當你設計完一個版本的時候可以儲存一個版本，而且你設計的時候，figma會自動儲存，在你儲存的大版本下拉還有更多的時間點的小版本，你可以把需要的時間點版本複製出來，相對於sketch的本地儲存，figma的雲端儲存就方便很多了，不會因為硬體的損壞而丟失，永遠可以存在網上。

3.豐富的外掛環境

Figma做設計好在哪裡？

Figma有很多的外掛，我們可以看到figma的外掛排行，還可以檢視最新上線的Figma外掛，因為figma是基於網頁端的設計，所以它不像sketch經常要更新版本，所以大家下載外掛後就可以開開心心的使用，而且不用擔心版本更新後外掛不能使用的問題。

這裡我們比較常用的外掛是Unsplash和Figmotion。

Unsplash可以用來填充圖片。

Figma做設計好在哪裡？

unsplash

你可以選擇你需要填充的圖片種類進行填充。

Figma做設計好在哪裡？

Figmotion可以讓figma建立關鍵幀，還可以調節動效曲線，做一些簡單的GIF動畫效果

Figma做設計好在哪裡？

它是一個內置於Figma中的動畫外掛工具。這使得製作動畫更容易和方便，因為沒有必要切換到一個完全獨立的動效工具。Figmotion使動畫交給開發人員更容易管理，同時它也是基於web技術構建的。

如果您想了解更多有關Figmotion的資訊，請檢視具體使用教程

https：//

freighter。gitlab。io/fig

motion/knowledgebase/

4.Web API

藉助GitHub 的圖示自動化，直接從 Figma 檔案生成圖示的 React 元件程式碼。我覺得這應該是東半球最先進的圖示交付方式了，因為 從始至終都不需要設計師和開發離開自己熟悉的工作環境，也不需要他們講一句話 ，極大地提升了交付效率。

Figma做設計好在哪裡？

GitHub Icon Workflow

但是因為 SVG 本身就是程式碼，所以這中間有很多流程都可以透過自動化的方式去解決。總的來說，我所實現的這個流程分為以下幾步：

1。首先，設計師在 Figma 中設計圖示，並將每一個圖示設定為設計元件；

2。每次更新後開啟 外掛 點擊發布，這個外掛會向一個 GitHub 倉庫提交一個版本更新的 PR；

3。在 GitHub 中合併 PR 後會觸發 GitHub Actions 自動指令碼，這個自動指令碼會透過 Figma API 拉取 SVG 程式碼，經過處理後生成 React/Vue 元件程式碼；

4。將生成的元件程式碼併發布到 NPM，釋出成功後透過企業微信或者飛書的 Webhook 在群裡通知開發更新；

5。最後，開發收到通知後在終端透過 yarn 或 npm 命令更新，就可以使用最新的圖示了。

Figma做設計好在哪裡？

01.在 Figma 中設計

最開始，設計師在最喜歡的 Figma 中精心打磨每一個圖示，並將它們都做成元件。這裡需要注意的是，我們要給圖示合理命名（目前不支援包含斜線。，否則會被識別為資料夾層級）。

Figma做設計好在哪裡？

02安裝並配置外掛

我們先到 Figma Icon Automation 外掛主頁 中安裝一下這個外掛，然後需要在外掛中填寫一些基本配置。前面提到，這個流程需要涉及到 GitHub，所以我們要現在外掛中填寫 GitHub 的倉庫地址和 token。

Figma做設計好在哪裡？

Figma Icon Automation

我們先到 Figma Icon Automation 外掛主頁 中安裝一下這個外掛，然後需要在外掛中填寫一些基本配置。前面提到，這個流程需要涉及到 GitHub，所以我們要現在外掛中填寫 GitHub 的倉庫地址和 token。

Figma做設計好在哪裡？

03配置程式碼倉庫

前文中提到，自動化的流程都在程式碼倉庫中透過 GitHub Actions 執行，這個過程是透過程式碼倉庫中的 。github/workflows 裡面的指令碼定義的。

Figma做設計好在哪裡？

github workflows

從上面的指令碼中可以看到，這個流程需要使用到的一些金鑰，比如 Figma 的檔案連結和 token，NPM 的 token，企業微信機器人的 webhook 連結等，我們需要先在倉庫的 settings->Secrets 中新增好。

Figma做設計好在哪裡？

secrets

04透過外掛一鍵更新

上面那些都配置好之後，我們就可以在 Figma 中一鍵釋出新版本圖示了。外掛會自動獲取到當前的版本號，我們只需要填寫一個高於當前版本的版本號，以及更新內容，如果想要獲得通知還需要填上企業微信機器人的 webhook 地址和通知內容，就可以釋出了。

設計師每次更新時開啟外掛，填寫新的版本號和修改內容，一鍵提交；企業微信機器人通知開發，開發點選 PR 連結合併它，觸發自動化流程；圖示被髮布到 NPM 之後，企業微信機器人再次通知，開發就可以使用命令列更新圖示。

5.互動原型展示

Figma可以直接實現原型互動效果，比如網頁的hover效果，還有頁面的側滑，上滑，下滑等等互動效果，實現之後可以透過連結分享給團隊需要的人，如果你是用組建搭建的原型，那麼你可以一鍵改變組建的顏色，原型上也會同步改變。

Figma做設計好在哪裡？

就在最近幾天，Figma 原型支援了多事件互動和自定義曲線，對於使用 Figma 來做互動稿和動效的朋友來說可謂雪中送炭。

多事件互動

：之前一個元素只能連一根線到其它元素，所以像一個列表點選進入詳情，左滑刪除這種效果就做不出來，現在一個元素可以支援多個事件並存，可以做出更加豐富的效果了。

自定義曲線

：Smart Animate 可以幫你做出非常細膩的動畫，但是動畫曲線只有預置的幾個，現在你可以自定義曲線啦，做出更加細膩的動畫。

後續每週更新，謝謝關注