简介

"Figma to Slint" 插件在 Figma 设计和 Slint 用户界面之间架起了桥梁。它提供两个主要功能：

1. 对象检查： 允许开发人员选择 Figma 画布上的任何对象，并以 Slint 代码片段的格式查看其属性（例如尺寸、颜色、字体等）。这对于将视觉设计元素快速转换为 Slint 代码非常有用。与变量导出结合使用时，如果 Figma 文件中使用了变量，则会将变量插入到代码中。
2. 变量导出： 能够将 Figma 中定义的设计令牌（颜色、数字、字符串和布尔值的变量）可靠地直接导出到 .slint 文件中。此功能完全支持 Figma 的模式，允许进行可主题化的设计（例如浅色和深色模式），并生成必要的 Slint 结构体、枚举和全局实例，以便在你的 Slint 应用程序中无缝使用这些令牌。

设置 Figma 检查器

首先，在 Figma Plugin Manager 中找到并启用 "Figma to Slint" 插件。 该检查器目前有 2 个功能。一个是检查各个 Figma 对象的属性，另一个是导出 Figma 中定义的变量，以便它们可以直接在 Slint 中使用。

变量导出的关键特性

• 类型转换：

  该插件按如下方式将 Figma 变量类型映射到其对应的 Slint 类型：

  Figma 变量类型	Slint 类型
  Color	brush
  Float	length
  String	string
  Boolean	bool

• 模式支持： 对于模式 MyCollection 具有 light 和 dark 模式的 figma 文件，导出器将创建一个用于模式选择的 Slint enum（例如 MyCollectionMode { light, dark }）。 该文件还包含一个 Scheme 结构体（MyCollection-Scheme），表示变量的结构。一个 Scheme-Mode 结构体（MyCollection-Scheme-Mode）包含每个模式的 Scheme 实例。最后是一个全局实例（my_collection），其中包含：

  • mode：Scheme-Mode 的一个实例，保存每个模式的解析值。
  • current-mode：一个 in-out 属性，使用模式 enum 来控制活动模式。
  • current：一个 out 属性，根据 current-mode 动态选择正确的方案实例。

• 可靠的变量解析： 自动将所有变量别名（引用）解析为它们的具体值，确保输出的一致性和可预测性，无论变量之间如何相互引用。

• 层级生成： 解释 Figma 中的 /，例如 colors/background/primary 以生成嵌套的 Slint 结构体，从而在 Slint 中使用点表示法对相应的变量进行嵌套，因此上面的示例变为 colors.background.primary

• 健壮的模式处理： 智能匹配 Figma 模式，确保所有变量以正确的值导出，即使在集合和变量之间的模式 ID 不完全匹配时也是如此。

• 名称清理： 清理集合、变量和模式名称，使其成为有效的 Slint 标识符（例如，将空格和特殊字符转换为下划线，处理前导数字）。

• 导出选项：

  • 单独的文件： 将每个 Figma 集合导出到其自己的 .slint 文件。在需要时创建具有自动跨集合导入的 <collection_name>.slint 文件。
  • 单个文件： 将所有集合合并到单个 design-tokens.slint 文件中，以简化项目集成。

• README 生成： 在导出旁边创建一个 README.md 文件，总结已导出的集合、重命名的变量以及任何警告。

使用方法

1. 检查器：

   • 调出插件 UI 并选择你想要检查的任何对象。

2. 变量：

   • 要查看和导出变量，请在插件 UI 中勾选 "Use Figma Variables" 复选框。
   • 现在选择要检查的对象时，你应该看到变量名称而不是解析后的值（如果它们已分配）

3. 导出： 单击 "Export" 按钮并选择：

   • Separate Files Per Collection…：建议用于组织。创建 <collection_name>.slint 文件。
   • Single Design-Tokens File…：创建 design-tokens.slint 以简化项目集成。

4. 集成：

   • 将生成的 .slint 文件放入你的 Slint 项目中。

设计令牌文件结构

1. 导入

   // 如果是单独的文件：import { Colors } from "colors.slint";import { Spacing } from "spacing.slint";

   // 如果是单个文件：import { Colors, Spacing } from "design-tokens.slint";

2. 使用变量

   // 使用令牌：MyComponent := Rectangle {    background: Colors.current.background.primary; // 通过 .current 访问以进行模式切换    height: Spacing.medium; // 如果是单模式或不依赖于模式，则直接访问}

3. 模式切换：（对于多模式集合） 修改导入的全局的 current-mode 属性：

   // 示例：在你主组件的逻辑中init => {    // 设置初始模式    Colors.current-mode = ColorsMode.dark;}// 或者响应用户操作：clicked => {    Colors.current-mode = (Colors.current-mode == ColorsMode.light) ? ColorsMode.dark : ColorsMode.light;}

• 通过 <collection_name>.current.* 访问的所有属性都将自动更新。

命名约定与清理

• 层级： Figma 在变量名称中使用 /（例如 radius/small、font/body/weight）。导出将使用它们创建嵌套的 Slint 结构体，以使代码补全更清晰。

• 清理： 集合名称、变量名称（路径段）和模式名称会自动清理：

  • 空格和无效字符（&、+、:、- 等）通常对集合/结构体名称转换为 -，对属性/枚举名称转换为 _。
  • 删除前导/尾随无效字符。
  • 以数字开头的名称会添加 _ 或 m_ 前缀。
  • 集合根部任何恰好命名为 mode 的变量会在 Slint 输出中重命名为 mode-var，以避免与生成的 scheme mode 属性冲突。

  示例

  Section titled "Example"

  在名为 Color Primitives 的集合中的变量 Color & Shade (only #hex values) 将被转换为 color-primitives.color_and_shade_only_hex_values