Figma 已經在短短的幾年間成為設計行業的領導者。但 Figma 跟其他幾種設計工具一樣，並不能滿足設計師所有的工作需求。因此在網站製作與 UI 設計的情境中，我們認為最佳的工具組合即是 Webflow 和 Figma – 而這兩個都不約而同都是完全由網頁驅動的創新設計工具，本文將教你如何搭配這兩個工具製作出理想中的網站。
在本文中，我們將向您展示以下內容：
所以，如果你有興趣，請繼續閱讀。
*什麼是 Figma？**
Figma 是一個運行在網絡上的圖形編輯和 UI 設計程序。它可用於從線框圖網站到構建移動應用程序界面、製作社交媒體帖子和原型設計的所有內容。
（來自 Figma）
Figma 與其他圖形編輯軟件不同。主要是因為它完全在您的瀏覽器中運行，這意味著您可以訪問您的項目並從任何計算機或平台開始工作。一個好處是您無需購買大量許可證或安裝軟件就可以這樣做。
設計師喜歡這個軟件的另一個原因是它有一個慷慨的免費計劃，可以一次創建和存儲三個活動項目。有足夠的時間來開發、測試和專注於適度的項目。
什麼是Webflow？
Webflow 是一個深深植根於 Web 基準測試的圖形 Web 設計工具。設計師將您的設計理念轉化為可用於生產的清晰代碼。它的開發是為了讓設計師能夠在不損失質量的情況下創建可識別的網站。
（來自網絡流）
您可以簡單地使用設計器創建原型，然後與開發人員共享以復製或導出代碼。
但是，要體驗 Webflow 的潛力，您可以將設計器與 CMS 及其託管集成，允許您在生產時上傳到免費的 webflow.io 子域。
在將您的設計引入 Webflow 之前要考慮的事項
當您開始將項目轉移到 Webflow 時，您需要評估一些基本設置，這些設置將使您能夠考慮創建站點的基礎：
- 佈局的網格組件
- 顏色
- 層
- 排版
佈局網格
在 Figma 上進行 Web 設計時，建議使用 12 列網格，這也是 Webflow 中的默認網格，每個容器 940px 寬，因為它是常規尺寸。
零件
您可以在 Figma 中保存您的設計部分，以使其更易於在其他頁面上使用。組件類似於 Webflow 中的符號，您可以在其中製作一次並在所有頁面上使用它。
顏色
將 Figma 中文檔的顏色保存到 Webflow 中的全局調色板中，以便您可以在您的網站上使用它。
層
應謹慎將圖層轉換為 div，以確保整個網站的一致性。在 Figma 中，您可以在設計和代碼選項卡之間快速切換，以查看每一層的邊距、填充和其他值。
排版
對於字體，Webflow 和 Figma 一樣，使用 Google 字體。您的字體可以在您的網站上重複使用。
如何從 Figma 導出到 Webflow
在上傳您的 Figma 資產文件之前，您必須首先在 Webflow 中完成特定的初步任務。最重要的是，您需要創建樣式指南或全局樣式，以確保您網站所有頁面的一致性。
讓我們開始吧。
在 Webflow 中啟動一個新項目
轉到 Webflow 並選擇 New Project，然後為該網站項目構建一個不同的目錄。此目錄/文件夾和子文件夾佈局與 Figma 安排其項目的方式一致。因此，這也是文檔的導出方式；因此，這是一個需要考慮的關鍵因素。當然，只有在您的 Figma 項目沒有樣式指南時才需要這樣做。對於本課，我們將假設它不是。
克隆或複制此處給出的基本樣式指南，並將其粘貼到項目目錄中新頁面上的新網站中以完成此操作。如果您使用的是 Webflow 模板，您仍然可以在此基礎上進行操作。
創建你的風格指南
創建新站點的第一步是設置全局樣式。全局樣式包括任何網站需要的所有標準元素，例如段落樣式、標題和鏈接外觀。Hopper Figma 文檔包含詳細的樣式指南，但如果您的項目沒有，您應該創建一個，以便您的所有基本樣式都是最新的。
建議您經常將 HTML 標記模板複製並粘貼到您的站點中，以用作 Webflow 端樣式指南的基礎。克隆上面提到的網頁來完成這個。您將直接進入項目的畫布，您可以在其中將片段複製到剛剛構建的新網站。或者，您可以在模板之上製作它，但您應該始終從頭開始。
您可以通過選擇任何元素前往 Webflow 屏幕右上角的選擇器字段。接下來，為其命名，在標題中包含“All”，例如 Body (All Pages)。下載設計後，您將能夠輕鬆地進行全局更改。
（來自網絡流）
全局樣式定義應該與您的 Figma 設計文件中的材料相對應，這就是需要上面提到的 HTML 標籤模板的原因。它有助於簡化程序並使您的樣式表保持簡潔。
自定義顏色
指定基本樣式後，就可以實現所有特定顏色了。如果您只有一兩個，這是一個簡短的過程。但是，如果您有一堆，則可能會很耗時。建議您通過插入一個色塊 div 然後重複更改其顏色直到所有樣本都在 Webflow 中來實現此目的。
（來自網絡流）
在執行此操作時，請確保選中“全局”複選框以呈現全局顏色。如果您注意到樣本右下角有一個小三角形並請求命名它，您就知道它們是全局的。
（來自網絡流）
從 Figma 中導出您的資產
Webflow 的初步階段現已完成，您可以導出 Figma 資產。如果您在 Figma 的設計階段指定要導出項目的所有方面，導出是一個簡單的過程。例如，如果要傳輸所有內容，請確保未選擇任何幀；如果您只希望一幀，請確保選擇了您想要的幀。
（來自網絡流）
在 Mac 上使用 Command+Shift+E 或在 Windows 計算機上使用 Control+Shift+E 來訪問“導出”面板。再次點擊導出，然後在 Finder/Explorer 中找到它們並將它們拖到 Webflow 界面中。您也可以通過單擊“資產”選項卡中的上傳按鈕在 Webflow 中執行此操作。如果您的 Figma 圖層包含正斜杠，例如圖標/後退，則會在 Webflow 中無縫創建其他子文件夾。
用 div 替換框架和組
下一步是為您的網站設置 div 框架。檢查所有 Figma 文件的較大組/幀，並嘗試使用 Webflow 中的 div 重現它們。您可以省略此步驟，因為它不是必需的，但它會幫助您長期保持協調。
（來自網絡流）
在畫布上放置這些 div 後，為它們提供特定的類名。剛才不需要指定這些類，但您應該轉到設置頁面並為每個類分配一個 ID。如果您打算將錨鏈接添加到您的網站，這將在以後變得有用。如果您願意，您還可以在您的站點上使用網格元素（或將 div 的顯示屬性設置為網格）。
樣式化您的內容
這是最具挑戰性的組件，但如果您保留類的通用名稱並包含許多功能的組合，則應該沒問題。
例如，與其簡單地命名一個類“所有 H2 子標題”，不如考慮創建一個“所有 H2 子標題”+“黑色文本”的組合類。這使您的標題 2 類能夠處理大小、重量和位置，而不管顏色如何。然後，您可以添加一個單獨的類來為您的特定用例修改顏色（或其他屬性）。
創建交互
您的網站可能有一些複雜的交互，但像 Figma 這樣的服務將以有限的方式幫助您，因為其中大部分都很簡單。除非您有其他原型設計工具，否則 Webflow 可能是您創建和交付交互的唯一選擇。
Webflow 是可用的最佳交互設計工具之一。因此，如果您是項目的設計師，則無需在其他程序中創建交互。相反，您可以使用 Webflow 來完成。
值得注意的是，交互分為兩種類型：
- 每個類都會發生交互，包括將鼠標懸停在按鈕上或單擊元素時。
- 更複雜的交互涉及許多類和元素。
交互面板非常適合此操作。對於每個類發生的交互，請從此下拉列表中選擇元素的狀態，修改其屬性，然後確保在該類更新您描述的屬性時實現正確的轉換。
發布和更改
最後一步是發布您的設計並針對不同的設備進行編輯。小心並在盡可能多的平台上測試您的項目，以保持所有界面的設計流程和功能。
當然，此方法概述了一種非常簡單的方法，用於將 Figma 設計轉換為 Webflow 以發布您的網站。其他部分，例如嵌入或自定義代碼，不會在 Webflow 中呈現，因此是分開的。儘管如此，上面概述的方法應該可以幫助您。
Figma 和 Webflow 的區別
Webflow 和 Figma 之間最顯著的區別是 Webflow 旨在處理網頁設計和開發的這方面，儘管後者不部署網站。毫無疑問，您可以在 Figma 中構建複雜的原型，但是一旦轉換為 Webflow，這些原型就毫無用處，因為需要與靜態項目進行交互。
- 另一個顯著的區別是 Webflow 是基於 JavaScript 構建的。因此，如果您的瀏覽器禁用了 JavaScript，則該站點將無法訪問。另一方面，Figma 建立在 HTML 和 CSS 之上，使其更易於訪問。
- 協作也是一個重要的差異化因素。Figma 的在線平台支持完整的協作，例如評論。然而，Webflow 評論以一種非常不同的方式運作。
- Webflow 對於不同的設備也有有限數量的斷點，而 Figma 沒有。
通常，如果您直接發佈設計，那麼 Webflow 或 Figma 哪個更好並不重要，因為它們可以有效地相互補充。
結論
Webflow 和 Figma 都是很棒的設計工具。它們允許團隊以前所未有的方式進行創新。如果您是團隊的一員，您會立即註意到像 Figma 這樣的協同工具的優勢。隨著 Webflow 的加入，您最終可以控制流程並見證您的概念變為現實。
如果您想同時使用這兩種出色的工具，但不具備實施本文中概述的步驟的技術知識，請查看Tenten 的 Figma 到 Webflow 轉換服務。我們可以幫助您將令人驚嘆的 Figma 設計轉換為 Webflow 專案並支援 RWD。速度快、像素完美且無錯誤的網站。此外受到 50 多家領先機構的信任，包括 htc、遠傳、IBM 等。