Malla文档
首页快速入门打开 Malla

创建设计系统

设置令牌和字体，构建类和组合类，并制作带实例和覆盖的按钮组件。

用户指南
中级25 分钟

你将构建： 品牌令牌、一个带次要组合类的按钮类，以及一个以实例形式放在页面各处的按钮组件

请先阅读： 构建落地页

在本教程中，你将搭建让站点保持一致的基础构件：用于品牌颜色、字体和间距的令牌，复用外观的类，以及复用结构的组件。完成后，修改一个令牌或一个组件，就能更新整个站点。从任意带几个按钮的页面开始，例如“构建落地页”教程中的页面。

创建设计系统视频即将推出。下面的文字步骤已涵盖全部内容。
创建设计系统· 9 分钟

设置令牌

  1. 打开 Tokens 标签页

    右侧的检查器有三个标签页：Design、Interactions 和 Tokens。打开 Tokens。它有三个分区：Colors、Spacing 和 Fonts。令牌属于站点，所以所有页面共享它们。

  2. 添加品牌颜色

    在 Colors 中点击 +（Add color token）。会出现一个名为 color 的令牌。把它重命名为 brand，并在名称旁的颜色字段中选择你的主色。再添加两个：用于文字的 ink 和用于背景的 surface。

  3. 添加间距刻度

    在 Spacing 中点击 +（Add spacing token），添加几个级别，例如 sm 为 8、md 为 16、lg 为 32。

  4. 添加字体

    在 Fonts 中打开 Add font…，为标题选择一种 Google 字体，例如 Google · Inter。对于 Google 字体，令牌会列出可以开启或关闭的字重。如果需要，再为正文添加第二种字体。

检查点

Tokens 标签页列出了三种颜色、三个间距级别和至少一种字体。

在样式中使用令牌

  1. 应用颜色令牌

    回到 Design，选中页面上的按钮。在 Fill 中点击色块，从令牌调色板中选择 brand。字段现在显示令牌名称，而不是十六进制值。

  2. 应用间距令牌

    在 Layout → Padding 中点击变量图标（Use a spacing token），选择 md。Padding、Margin 和 Gap 都接受间距令牌。

  3. 应用字体令牌

    选中一个标题。在 Typography → Font 中，字体令牌排在最前面。选择你添加的那个。

  4. 修改令牌

    打开 Tokens，修改 brand 的颜色。所有使用它的元素会立即更新。要断开某个元素与令牌的关联，点击令牌名称旁的 Detach token；该元素会保留当前的值。

构建按钮类

  1. 添加类

    选中按钮。在 Design 标签页顶部的类栏中，在 Add class… 里输入 btn，然后按 ↵。会出现一个 .btn 标签。

  2. 给类而不是图层设置样式

    在标签下方，把 Style 设为 Class .btn（或点击该标签）。现在设置填充色、内边距、Border 中的 Radius 以及字体。这些样式保存在类上，所以每个带 .btn 的元素都会获得它们。

  3. 添加悬停状态

    在仍以类为目标时，在分区上方的状态栏中选择 Hover，稍微改一下填充色。选择 Default 返回。

  4. 复用这个类

    选中另一个按钮，在 Add class… 中输入 btn 并按 ↵。输入时会提示类名。按钮会一次性获得完整的外观。

添加组合类

  1. 创建组合类

    选中第二个按钮。在 Add class… 中输入 is-secondary，然后按 ⇧↵。Shift+Enter 会在最后一个类之上创建组合类，所以 .is-secondary 只在与 .btn 一起使用时才生效。

  2. 只设置不同之处

    把 Style 设为 Class .is-secondary。只修改不同的部分：透明填充、brand 颜色的边框和 brand 颜色的文字。其他一切仍然来自 .btn。

  3. 观察变化的传递

    修改 .btn 的圆角。两个按钮都会跟着变化，而次要按钮保留它自己的填充和边框。

检查点

页面上有一个主要按钮和一个次要按钮。两者共享基础的 .btn 样式，次要按钮再加上自己的外观。

制作按钮组件

  1. 创建组件

    选中主要按钮，按 ⌘⌥K，或右键点击它并选择 Create component。按钮会移入一个新组件，页面上原来的位置由一个实例取代。

  2. 命名

    打开左侧边栏的 Components 标签页。右键点击新组件，选择 Rename，命名为 Button。

  3. 放置实例

    把 Button 从 Components 标签页拖到页面上，或点击它所在行的 +（Insert Button）。放置两三个实例。

  4. 覆盖文字

    选中一个实例，双击它的文字。输入新的文字，例如 Book a call。新文字就是一个覆盖：它只作用于这个实例。

  5. 查看和重置覆盖

    选中实例后，Instance 分区会列出它的覆盖。点击某个覆盖旁的重置箭头，即可恢复为组件的值。

  6. 编辑组件

    在 Instance 分区中点击 Edit component，修改按钮，例如它的内边距。所有实例都会更新，被覆盖的文字保持不变。

完成

你的站点有了品牌令牌、一个带次要组合类的 .btn 类，以及一个放置了多次、每个实例都有自己文字的 Button 组件。

你学到了什么

  • 令牌把品牌颜色、间距和字体集中在一处；修改一个令牌会更新所有使用它的元素。
  • 类共享外观，组合类在基础类之上添加变化，Hover 等状态也适用于类。
  • 组件共享结构；每个实例都可以覆盖自己的文字，同时仍会接收其他所有修改。

继续学习后面的教程，或阅读本教程背后的指南：

类与令牌可复用的类、组合类、设计令牌和字体，让整个站点保持一致。组件一次构建，处处复用：组件、变体、实例和覆盖。布局与样式Flex、Grid 和自由布局，检查器中的样式分区、断点和状态。