想從Sketch 切換到 Figma？送你一份詳細的過渡指南！

越來越多的設計團隊開始從 Sketch 遷移到 Figma 這是大勢所趨。但是這兩個工具之間有差異，這篇文章我會為你分享一些無縫切換的技巧。

這篇文章來自 Buninux.com。如果你對于設計系統感興趣，可以關注一下我近期的項目——可以適用于 Sketch 和 Figma 的設計系統 Slice。

為什么要用這兩款工具？

Figma 和 Sketch 都非常適合用來創建 UI 界面，并且組織組件庫。這兩款工具有很多共通的地方，但是它們處理畫布和對象的方式有差異。

這兩款工具都得到了設計界的認可和尊重，兩者有著類似的功能，但是同時兩者也都有各自的缺陷和短板。

當然，這兩款工具能夠火成這樣，很大程度上是因為它們能夠更好地創建并管理設計素材，真正滿足現代設計師的需求。

為什么你需要遷移到 Figma？

通常而言，從 Sketch 遷移到 Figma 會出于以下幾個原因：

• 你正在尋求具有協同功能的設計工具，但是 Sketch 本身并不具備
• 你對于 Figma 很好奇，并且想知道怎么做才能在不損耗素材的前提下正確使用它
• 你必須同時使用這兩種工具，你對于 Sketch 更熟悉，偶爾會用到 Figma，想知道自己能用它做到什么程度。

如何正確遷移過去？

相比于 InVision Studio、Adobe XD、Framer 等其他的原型類競爭對手，Figma 可以更加輕松地從 Sketch 中導入相關的文檔，將Sketch 符號轉化為 Figma 組件，同時還能保持實例當中的父子關系，從而能夠保持更高效的文件傳輸。

但是與此同時，需要正確轉化的話，你需要明白這兩款工具之間的區別，并且克服一些痛點，并且順利地切換。

接下來，我們正式開始吧。

1、優先處理樣式

為了避免出錯，并且避免花費大量的時間來重新規整配色和文本樣式，你應該首先創建整個工具包的核心——圖層和文本樣式。

第1步：導入

打開 Figma，然后導入包含你的品牌素材的全部素材。

第2步：根據導入的屬性創建圖層樣式

Figma 不會直接轉換樣式，因此你需要自己手動創建樣式。創建圖層和文本樣式和 Sketch 中基本上完全一致。你只需要在命名的時候，使用正斜杠（/）就可以進行快速的分組，然后在文檔當中訪問。

第3步：創建文本樣式

在 Figma 當中，你不必為配色和樣式來創建額外的樣式。顏色可以直接應用于文本樣式，而對齊方式則直接在實例中設置，所以你不用自己再額外復制樣式。

注意：在瀏覽器中使用 Figma的時候，你無法使用本地安裝的字體，因此務必下載并安裝 Font Helper ，并且確保它可用。

第4步:對比和適應

對比結果樣式的面板，同時試圖習慣新的布局樣式。確保一切都已經妥善安排了。

進階提醒

在 Figma 的屬性當中，比如配色、陰影等等，都可以單獨應用于單個圖層，而無需將它們組合成為新的樣式。這些特性確保你可以讓你的風格樣式更加清晰，而無需在 Sketch 中保留所有不必要的樣式組合。

下面是一個簡單的案例。你可以通過這個案例明白兩個工具是如何創建帶有陰影樣式的按鈕的方式：

Sketch 會讓色彩和陰影構成一個獨立的樣式，而 Figma 當中則不需要。

如果你沒有時間重新創建所有的這些樣式，那么你可以參考下面的免費樣式指南，了解 Sketch 和 Figma 的文件組織方式之間的差別。

如果你想了解更多關于兩個軟件之間的樣式差別，可以下載這個文檔：Figma 和 Sketch 樣式指南

2、組件清單

在確定樣式之后，我們繼續完成后續的部分。

找到已經轉換過來的樣式之后，盡量按照下面的樣式來進行后續調整，確保組件能夠正常運行。

刪除無效的Figma組件（也就是原來的Sketch符號）

在使用 Sketch 的時候，你可以通過創建符號來定義組件的邊框、特定的幾何形狀，并且一般而言，我們會稱之為形狀符號，或者材質符號。

在 Figma當中，你完全不需要。相反你可以自由地控制任何組件或者實例的圓角半徑。因此，無比刪除所有你未使用的元素，并且將「符號（Symbol）」頁面重命名為「組件（Components）」，以避免混淆。下面是在 Sketch 和 Figma 中更改租價你形狀的方法差異。

更新限制條件

在 Figma 當中，約束條件略有一點不同。如果想要適應過來，你首先需要習慣 Frame 的概念。

我強烈建議你查看官方的博客，了解相關主題更多的信息，以便正確地更新組件，提升操作。

官方指南：《Using Constraints》

更新背景色

你會注意到某些組件在 Sketch 中看起來的樣子和 Figma 當中看起來有所不同。這主要是因為 Figma 中的容器默認是沒有白色背景的。相反，Figma 會將導入的畫板/符號的背景顏色轉換為幀的底色。

為了使你的設計看起來和 Sketch 中一樣棒，請確保整體 Figma 畫布的顏色（是的，它是可調整的！），或者組件框架本身的顏色。

更新組件的名稱

Sketch發中的名稱可能會包含 . 或者 _ 這樣的符號，這些名稱通常用來將列表中某些條目優先，并將置于菜單的頂部。

Figma 當中也使用這些符號，但是Figma 的庫中會優先排除使用這些標點的組件，這意味著使用這些前綴的元素將無法被迅速的搜索獲得。為了確保每個人都能訪問你所提供的素材，你得解決這個問題。你可以使用 cmd + r 這個快捷鍵來調用重命名功能，快速刪除不必要的標點符號。

你還可以通過向下滾動整個 Public Library 并通過右鍵菜單來啟用未包含的組件，來添加它們。

3、重新塑造風格

當你將所有的素材和組件正確導入 Figma 之后，就需要讓它們和對應的樣式重新連接到一起了。想要盡可能方便，你需要執行一系列操作，選擇相似的圖層，并將樣式鏈接到一起。

Figma 提供了一套原生的解決方案。你想要啟用它，就需要打開「edit」菜單，然后點擊「Select all with the Same」來將相應的樣式，綁定到一起。

你還可以選擇最近發布的插件「Similayer」，它將會提供更多命令來搜索你需要的圖層。

這樣一來，你基本上就完成了設計系統和組件從 Sketch 到 Figma 的完整遷移。你可以在正式使用之前，仔細檢查和驗證一下。

結語

從一個工具前一到另外一個設工具并不是一件復雜的任務，你更多需要的是了解工具本身的屬性，進行正確的操作組合，并且通過一定的手工處理，來重新配置。

我很高興能夠看到不同的軟件之間的競爭。但是，工具的選取是一個不斷變化的事情。我相信很多轉向 Figma 的設計師，可能會在不久之后又重回 Sketch。工具本質上是幫助設計師達成設計目標，設計師根據實際情況來選取工具是應有之義。

在這個不斷變化的世界當中，更好地促進設計，這是設計師的責任。最后再安利一下 Slice，這是我和我的朋友 Roman Banks、Todor Iliev 開發的一個模塊化的設計系統，同時兼容 Sketch 和 Figma，來試試看吧。