> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 使用Figma进行工作

Figma是一款协作界面设计工具，帮助设计师和开发者之间沟通无障碍。
本指南介绍如何与Figma协作。

## 访问

1. **访问共享链接：** 您可以在[此处](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty)访问项目的 Figma 文件。
2. **登录：** 如果尚未登录，Figma会提示您进行登录。
   只有登录用户才能使用关键功能，如开发者模式和选择专用框架的能力。

<Warning>
  没有账户将无法有效协作。
</Warning>

## Figma结构

在左侧边栏，您可以访问 Twenty 的 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扩展（推荐）

[Figma for VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
可让您浏览和检查设计文件，与设计师协作，跟踪更改，并加速实现落地——且无需离开文本编辑器。
这是我们推荐的扩展之一。

## 协作

1. **使用评论：** 您可以使用评论功能，点击工具栏左侧的气泡图标。
2. **光标聊天：** Figma的一个很棒的功能是光标聊天。 如果您看到其他人在使用Figma的同时按下Mac上的`;`或者Windows上的`/`来发送消息。