命名和组织组件

Motiff 妙多建议你合理的命名和组织组件。这样会得到一个条理清晰的组件目录（如下图所示），这样的目录会使你后续查找组件和替换组件变得简单。 '命名和组织组件.png'

Motiff 妙多支持两种方式构建你的组件目录，你可以根据自己的需要组合使用。

Motiff 妙多会默认使用组件库文件的页面、容器作为组件目录的前两层结构，你可以利用这个规则来构建自己的组件目录。

例如：

将激活按钮和置灰按钮放在一个名为「按钮」的容器内，这个容器放在一个名为「操作」的页面下。 '使用页面和容器构建.png'

你在资产面板会看到两级目录。

页面→容器→组件名称

操作→按钮→激活按钮 '使用页面和容器构建2.png'

容器嵌套不会增加目录层级，目录只取最外层容器的名称。由此可知页面和容器最多只能创建两层目录，如果觉得两层目录无法满足搭建设计系统的需要，请结合「命名构建」搭建更深的目录层级。

你也可以通过使用特定的命名来使两个相关的组件合并在同一目录下。

例如：按钮/置灰、按钮/激活，因为他们相同的「根节点名称」，所以「按钮」成为这两个组件目录的名称。 '使用特定命名构建.png'

例如当我们在构建 Motiff 妙多组件库时，我们先创建一个文件。

1.页面与容器

我们在文件下创建了一些页面，每个页面承载一种类型的组件。 '页面与容器-1.png'

在页面下又创建一些容器，此处以 icon 举例，按照尺寸分为12、16、24。 '页面与容器-2.png'

2.特定命名

在名为 16 的容器下的 icon 还可以按照使用场景分类：评论面板、图层面板、设计面板。所以在名称前加上「评论面板/组件名称」、「图层面板/组件名称」、「设计面板/组件名称」。 '特定命名.png'

3.命名结构树通过以上命名方式，会形成一个结构树： '结构树.png'

最终构建完的设计系统会呈现一个结构清晰的组件目录。