跳转到主要内容
Figma 是一種協作界面設計工具，有助於縮小設計師和開發人員之間的溝通差距。
本指南說明如何使用 Figma 協作。
- Access the shared link: You can access the project’s Figma file here.
- 登入： 如果您尚未登入，Figma 會提示您這樣做。
僅登入用戶才能使用關鍵功能，例如開發者模式和選擇專用框架的能力。
Figma 結構
On the left sidebar, you can access the different pages of Twenty’s Figma. 這就是它們的組織方式：
- 組件頁面： 這是第一頁。 設計師使用它來創建和組織整個設計文件中使用的可重用設計元素。 例如，按鈕、圖標、符號或其他可重用的組件。 其目的是在設計中保持一致性。
- 主頁： 第二頁是主頁，顯示項目的完整用戶界面。 您可以按下 播放 來使用完整的應用原型。
- 功能頁面： 其他頁面通常專注於正在進行的功能。 它們包含應用程序或網站的特定功能或模組的設計。 它們通常仍在進行中。
實用小技巧
具有只讀權限時，您無法編輯設計，但您可以訪問所有將設計轉換為代碼有用的功能。
使用開發者模式
Figma 的開發者模式通過提供便捷的設計導航、高效的資產管理、有效的通信工具、工具箱集成、快速代碼片段和關鍵層信息，提高了開發人員的生產力，縮小了設計與開發之間的鴻溝。 您可以在此了解更多關於開發者模式的信息。
切換到工具欄右側的 “開發人員” 模式以查看設計規格、複製 CSS 和訪問資產。
使用原型
點擊畫布上的任意元素，然後按界面右上角的 “播放” 按鈕以訪問原型視圖。 原型模式允許您像對最終產品一樣與設計互動。 它展示了屏幕間的流程，以及交互時按鈕、鏈接或菜單等界面元素的行為。
- 了解過渡和動畫： 在原型模式下，您可以查看設計師在屏幕或 UI 元素之間添加的任何過渡或動畫，為開發人員提供清晰的視覺指令，展示預期的行為和風格。
- 實施澄清： 原型還可以幫助減少模棱兩可的情況。 開發人員可以與其交互，以更好地了解特定元素的功能或外觀。
有關學習 Figma 平台的更多詳細信息和指導，您可以訪問官方 Figma 文檔。
測量距離
選擇一個元素，按住 Option 鍵（Mac）或 Alt 鍵（Windows），然後將鼠標懸停在另一個元素上即可查看它們之間的距離。
VSCode 的 Figma 擴展（推薦）
VS Code 的 Figma
允許您瀏覽和檢查設計文件，與設計師協作，跟蹤更改，加速實施 - 都不需離開您的文本編輯器。
這是我們推薦的擴展之一。
- 使用評論： 您可以通過點擊工具欄左側部分的氣泡圖標來使用評論功能。
- 光標聊天： Figma 的一個不錯的功能是光標聊天。 如果您看到有人與您同時使用 Figma，則只需在 Mac 上按
;，在 Windows 上按 / 來發送消息。
