Figma 不再是設計師專用的工具。隨著開發模式的引入，前端工程師現在可以透過簡化的方法來有效地提取設計資訊。本文介紹了平滑從 Figma 到程式碼的橋樑的實用技術。
透過開發模式獲取準確的設計訊息
Figma 的開發模式是針對開發人員最佳化的視圖。使用檔案視圖右上角的開關將其打開，或點擊 Shift+D。
在開發模式下你可以做什麼
- 檢查屬性：按一下任何元素即可查看屬性面板中顯示的寬度、高度、填滿、字體大小、顏色等。
- 自動產生的 CSS：CSS 屬性會自動顯示在面板中，以便您可以將它們直接複製到程式碼中。
- 匯出資源：按一下圖片圖示將其匯出為 SVG 或 PNG。
請記住，開發模式中顯示的 CSS 僅供參考。您應該調整它以適應您的實際組件架構。
共享設計令牌以保持一致性
同步 Figma 和程式碼庫之間的設計標記（例如顏色、字體大小和間距）可防止設計偏差。
Figma 代幣插件
Tokens Studio for Figma（以前稱為 Figma Tokens）是一個插件，可讓您以 JSON 形式集中管理設計令牌。
- 安裝插件並定義顏色、排版和間距的標記。
- 導出為 JSON。
- 將 JSON 轉換為樣式字典或 Tailwind CSS 設定檔。
{
"color": {
"brand": {
"primary": { "value": "#3b82f6" },
"secondary": { "value": "#10b981" }
}
},
"spacing": {
"md": { "value": "16px" }
}
}
將此 JSON 輸入樣式字典，您可以產生 CSS 自訂屬性、SCSS 變數、Tailwind 配置等。
設計師到開發人員的平滑交接
即使使用最好的工具，有效的交接也需要設計人員和開發人員之間的協調。
標準化組件命名
將 Figma 圖層名稱與程式碼中的元件名稱相符可以減少搜尋時間。如果 Figma 中的圖層名為 Button/Primary，則在程式碼中將其命名為 ButtonPrimary 或 Button.Primary。
使用自動佈局
Figma 的自動版面功能反映了 CSS Flexbox 行為。要求設計人員使用自動佈局，以便將間距和對齊意圖直接轉換為程式碼。
在 Figma 發表評論
在開發過程中，會出現諸如「這個填充值是多少？」之類的問題。最好留下相關 Figma 元素的註解。這比發送 Slack 訊息可靠得多。
值得安裝的插件
| 插件 | 目的 |
|---|---|
| Figma 代幣 | 設計代幣管理與匯出 |
| 阿尼瑪 | 將 Figma 設計轉換為 React / Vue 程式碼 |
| 齊柏林 | 與 Figma 整合的傳統切換工具 |
| Figma 的 Tailwind CSS | 在設計上顯示 Tailwind 類別名稱 |
概括
從 Figma 遷移到程式碼的最實用的工作流程是透過 Dev 模式提取準確的設計資訊並使用 Figma 代幣共享設計代幣。設計人員和開發人員之間擁有共享語言（無論是 It 令牌、命名約定還是兩者兼而有之）是高效切換過程的關鍵。從這些技術中的一兩個開始，然後從那裡開始逐步發展。