组件

组件是一段只需设计一次、可以多处放置的布局：导航栏、卡片、价格档位、页脚。每次放置都是一个实例。编辑组件后，所有页面上的所有实例都会更新。

创建组件

1. 选中要复用的内容

   在画布或 Layers 中选中一个框架及其内容。

2. 创建组件

   按 ⌥⌘K，或在上下文菜单中选择 Create component。选中的内容会移入一个新组件，原位置替换为一个实例。

3. 在组件画板上编辑

   组件在画布上有自己的画板。在那里所做的编辑会实时同步到每个实例。

放置实例

把组件从 Components 标签页拖到画板上，或使用 Insert instance。检查器中的实例分区可以选择变体、列出覆盖项，并跳转到主组件。

变体

变体是组件的命名版本，例如 light 和 dark，或 small 和 large。样式可以按变体设置，每个实例选择其中一个。组件画板会并排显示所有变体。

覆盖

双击进入实例，即可直接编辑其中的文本。该修改会作为覆盖只保存在这个实例上；组件本身保持默认值。覆盖可以修改子元素的属性（文本、链接、图片）、样式，或将其隐藏。实例从不复制组件的节点树，所以你没有覆盖的部分总能收到组件的更新。

"n_nav": {
  "type": "instance",
  "props": {
    "componentId": "c_navbar",
    "variant": "dark",
    "overrides": {
      "cn_cta":   { "props": { "text": "Sign up free" } },
      "cn_promo": { "hidden": true }
    }
  }
}

用类还是用组件？

当许多元素共享同一种外观时，使用类。当它们共享同一种结构时，使用组件：相同的子元素、相同的顺序，只有少量文本或图片不同。