---
title: 與 Figma 協作
info: Learn how you can collaborate with Twenty's Figma
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

Figma 是一種協作界面設計工具，有助於縮小設計師和開發人員之間的溝通差距。
本指南說明如何使用 Figma 協作。
本指南說明如何使用 Figma 協作。

## 訪問

1. **Access the shared link:** You can access the project's Figma file [here](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
2. **登入：** 如果您尚未登入，Figma 會提示您這樣做。
   僅登入用戶才能使用關鍵功能，例如開發者模式和選擇專用框架的能力。
   僅登入用戶才能使用關鍵功能，例如開發者模式和選擇專用框架的能力。

<Warning>

沒有帳戶，您將無法有效地協作。

</Warning>

## Figma 結構

On the left sidebar, you can access the different pages of Twenty's Figma. 這就是它們的組織方式：

- **組件頁面：** 這是第一頁。 設計師使用它來創建和組織整個設計文件中使用的可重用設計元素。 例如，按鈕、圖標、符號或其他可重用的組件。 其目的是在設計中保持一致性。
- **主頁：** 第二頁是主頁，顯示項目的完整用戶界面。 您可以按下 _**播放**_ 來使用完整的應用原型。
- **功能頁面：** 其他頁面通常專注於正在進行的功能。 它們包含應用程序或網站的特定功能或模組的設計。 它們通常仍在進行中。 它們包含應用程序或網站的特定功能或模組的設計。 它們通常仍在進行中。

## 實用小技巧

具有只讀權限時，您無法編輯設計，但您可以訪問所有將設計轉換為代碼有用的功能。

### 使用開發者模式

Figma 的開發者模式通過提供便捷的設計導航、高效的資產管理、有效的通信工具、工具箱集成、快速代碼片段和關鍵層信息，提高了開發人員的生產力，縮小了設計與開發之間的鴻溝。 您可以在此[了解更多](https://www.figma.com/dev-mode/)關於開發者模式的信息。

切換到工具欄右側的 "開發人員" 模式以查看設計規格、複製 CSS 和訪問資產。

### 使用原型

點擊畫布上的任意元素，然後按界面右上角的 “播放” 按鈕以訪問原型視圖。 原型模式允許您像對最終產品一樣與設計互動。 它展示了屏幕間的流程，以及交互時按鈕、鏈接或菜單等界面元素的行為。

1. **了解過渡和動畫：** 在原型模式下，您可以查看設計師在屏幕或 UI 元素之間添加的任何過渡或動畫，為開發人員提供清晰的視覺指令，展示預期的行為和風格。
2. **實施澄清：** 原型還可以幫助減少模棱兩可的情況。 開發人員可以與其交互，以更好地了解特定元素的功能或外觀。

有關學習 Figma 平台的更多詳細信息和指導，您可以訪問官方 [Figma 文檔](https://help.figma.com/hc/en-us)。

### 測量距離

選擇一個元素，按住 `Option` 鍵（Mac）或 `Alt` 鍵（Windows），然後將鼠標懸停在另一個元素上即可查看它們之間的距離。

### VSCode 的 Figma 擴展（推薦）

[VS Code 的 Figma](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
允許您瀏覽和檢查設計文件，與設計師協作，跟蹤更改，加速實施 - 都不需離開您的文本編輯器。
這是我們推薦的擴展之一。
這是我們推薦的擴展之一。

## 協作

1. **使用評論：** 您可以通過點擊工具欄左側部分的氣泡圖標來使用評論功能。
2. **光標聊天：** Figma 的一個不錯的功能是光標聊天。 **光標聊天：** Figma 的一個不錯的功能是光標聊天。 如果您看到有人與您同時使用 Figma，則只需在 Mac 上按 `;`，在 Windows 上按 `/` 來發送消息。
