github-actions[bot]
e02c24bd3a
Created by Github action --------- Co-authored-by: Abdul Rahman <ar5438376@gmail.com> Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com> Co-authored-by: Charles Bochet <charles@twenty.com>
70 lines
3.9 KiB
Plaintext
70 lines
3.9 KiB
Plaintext
---
|
|
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 上按 `/` 來發送消息。
|