属性面板 #

当你在编辑器中时，你会看到画布两侧的侧边栏，这些侧边栏与工具栏一起构成了 Figma UI。

Figma UI 允许你访问，创建和调整设计元素。

左侧边栏 中可以访问文件中包含的图层，资源库和页面，我们将其称为 图层面板。

在 图层面板 一文中了解更多相关信息。

右侧边栏 允许你查看和调整任何对象的属性。你还可以在这里创建原型或查看任何所选对象的代码标注，我们将其称为 属性面板。

在本文中，我们将详细介绍属性面板。

面板顶部有三个选项，你可以在以下选项卡之间切换：

  1. 设计（Design）
  2. 原型（Prototype）
  3. 代码（Code）

设计 #

设计面板 允许你查看，添加，删除或更改设计中对象的属性。如果在设计面板中未选择任何内容，则可以查看文件本地的所有 样式。你还可以更新画布的背景颜色。

选择图层后，设计面板将包含许多不同的设置。你选择的图层类型将确定属性面板中可用的设置。

例如：选择文本对象时，你将能够查看和调整文本格式；选择组件后，你将能够在 Instance 设置中查看，分离或交换实例。

当前处于活动状态的所有属性都将显示为黑色，未应用于所选图层的非活动属性将显示为灰色。

设计面板中提供了以下属性，你可以单击下面的链接以了解有关每个属性的更多信息：

  • 对齐和分布（Alignment and Distribution） 🔗
  • 框架的尺寸和方向（Frame Size and Orientation） 🔗
  • 画布上的位置（X和Y）（Position on the Canvas） 🔗
  • 对象的尺寸（宽度和高度）（Dimensions of the Object） 🔗
  • 实例（Instance） 🔗
  • 布局约束（Constraints） 🔗
  • 布局网格（Layout Grid） 🔗
  • 图层（混合模式）（Layer）
  • 背景（Background）
  • 文字（Text） 🔗
  • 填充（Fill） 🔗
  • 描边（Stroke） 🔗
  • 图层效果（Effects） 🔗
  • 导出（Export） 🔗

原型 #

原型面板 可以访问所有原型相关的功能。打开此选项卡，你将进入原型模式。

你可以在框架之间建立连接，然后你可以模拟用户可能与其进行的交互。

原型面板包含四个部分：

  1. 触发方式（Trigger）：选择使用何种交互方式。
  2. 动作（Action）：决定原型如何响应用户的交互。
  3. 溢出方式（Overflow Behavior）：定义用户如何与超出框架边界的元素进行交互。
  4. 原型设置（Prototype Settings）：定义演示的设备，背景颜色和起始页面。

在 原型设计入门 一文中了解更多相关信息。

代码 #

属性面板中的第三个选项是 Code 选项卡，你可以在代码面板中查看如何中实现设计。

你可以选择以下不同格式：

  1. CSS（Web 开发）
  2. iOS
  3. Android

您还可以在代码和列表视图之间切换：

在 与工程师协作 一文中了解更多相关信息。

视图设置