Figma 插件

借助 Crowdin for Figma 插件，您可以在设计中使用 Crowdin 企业版中的文本，从而为设计人员和开发人员节省时间。 这些文件可包括原文或翻译文本。 如有必要，您可以添加新的内容（例如对话框标题、按钮标签）并将其发送给 Crowdin 企业版中的翻译员。

Use Cases

• 快速生成多语言的创作资源。
• Translate mockups and test them in different languages before the programming starts.
• 停止使用“Lorem Ipsum”，而是将 Crowdin 企业版中的真实文本添加到您的原型中。 从 Crowdin 企业版添加的字符串将链接到 Figma 中的文本字段。
• 从您的设计创建源字符串并将其上传到您的 Crowdin 企业版项目。 创建的字符串将链接到 Figma 中的文本字段。 这样，开发者就可以使用上传的字符串，从而减少开发时间。
• 预览设计中的译文和字符串键。
• 将标记的屏幕截图上传到您的 Crowdin 企业版项目。

首次运行 Crowdin for Figma 插件

1. Sign in to Figma.
2. 打开您的设计文件之一或点击新建设计文件。
3. 在文件菜单中，点击 插件 > 管理插件…。 或者，右键点击画布并点击 插件 > 管理插件。
4. 使用搜索所有插件字段查找 Crowdin for Figma 插件。
5. 点击 Crowdin for Figma 插件并选择保存。
6. 将鼠标悬停在 Crowdin for Figma 插件上，然后点击运行。

将 Figma 与 Crowdin 企业版账户连接

设置 Crowdin 企业版凭据

要在 Figma 中指定您的 Crowdin 企业版凭据，请按照以下步骤操作：

1. 在文件菜单中，转到 插件 > 已保存的插件。 或者，右键点击画布并点击 插件 > 已保存的插件。
2. 切换到设置。
3. 提供您的个人访问令牌。
4. 指定您的组织域名并点击连接。

要在 Crowdin 企业版中生成新的令牌，请遵循以下步骤：

1. Go to Account Settings, Access tokens tab and click New token.
2. 指定 令牌名称，选择其 作用范围 和 项目，点击 创建。

选择 Crowdin 企业版项目

要选择您要处理的项目，请点击 设置 > Crowdin 项目 中的下拉菜单，然后从列表中选择一个项目。 稍后，如果需要，您可以点击同一部分中的 断开连接 以切换到另一个项目。

选择您将在该项目中使用的内容类型，然后点击 保存。

您可以选择以下可用选项之一：

• UI 本地化
• 营销视图本地化

所选的内容类型会影响用户可用的 Crowdin for Figma 插件模式。

选择您的内容将上传到的特定分支。 如果您的 Crowdin 企业版项目没有分支，请将其留空。

UI 本地化

Use the Strings tab when localizing UI and working on dynamic pages with your development and marketing teams. 在此选项卡中，您只需点击一下即可将 Crowdin 企业版中的源字符串添加到 Figma 中的设计中。 After the texts are used in the designs, you can automatically upload tagged screenshots for translators’ reference back to Crowdin Enterprise.

在 Figma 中使用来自 Crowdin 企业版的源字符串

1. 打开 Figma 的 Crowdin 插件。
2. In the Strings tab, use the Search field to find the specific copy. You can search strings by source text, string identifier, or context.
3. 选择要添加文本的文本图层，然后点击所需字符串旁边的链接图标。

在您的设计中使用 Crowdin 企业版的源字符串后，它们会与文本字段链接，您可以在 Figma 中预览这些字符串的翻译，并上传屏幕截图以供它们使用您的 Crowdin 企业版项目。

您可以将单个 Crowdin 字符串链接到 Figma 中的一个或多个文本字段。 但是，一个文本字段只能链接到单个 Crowdin 字符串。 如果将具有现有连接的文本字段链接到新的 Crowdin 字符串，则先前的连接将终止，并且将建立新的连接。 如果您想取消 Crowdin 字符串与之前链接到的所有文本字段的链接，请右键点击所需字符串旁边的链接图标。

将 Figma 中的源字符串添加到 Crowdin 企业版

您可以添加已经用于设计的字符串。

1. 打开 Figma 的 Crowdin 插件。
2. 要添加设计中使用的字符串，请选择整个框架、多个框架或框架上所需的字符串。
3. 在字符串选项卡中，点击 。
4. 在出现的对话框中，填写所需字段。 如果需要，可以过滤显示的字符串：
   • 如果某些帧包含不应该添加到 Crowdin 企业版的隐藏元素，请选择 跳过隐藏元素 过滤器选项。
   • 如果某些帧包含未翻译的元素，请选择 跳过未翻译元素 过滤器选项。
     
5. （可选）要更新字符串语境并设置译文的最大长度，请点击所需字符串旁边的 。
6. 选择并配置好所有需要的字符串后，点击 下一步。
7. 在下一个对话框页面中，选择首选选项：
   • 自动链接现有字符串 – 自动将文本与 Crowdin 企业版中的现有字符串进行比较。 如果找到匹配项，则文本元素将链接到 Crowdin 企业版项目中的字符串。
   • 创建缺失键 – 仅将新的文本元素添加到 Crowdin 企业版。
   • （可选）要为字符串添加标签，请交替从 选择标签 下拉菜单中选择它们。
   • 合并重复项 – 将相同的文本元素链接到 Crowdin 企业版中的单个新字符串。 它在以下情况下很有用：
     • 添加具有相同文本的多个文本字段时，该插件只会向您的 Crowdin 企业版项目添加一个字符串，并将所有重复的文本字段链接到该项目。
     • 如果您的 Crowdin 企业版项目已包含与您从设计中添加的文本相同的字符串，则该插件只会将文本字段链接到现有字符串，而不会创建新字符串。
   • 发送屏幕截图
8. 在 Crowdin 企业版中选择要添加字符串的文件。 要将相同的字符串添加到 Crowdin 企业版中的多个文件，请交替从 选择文件 下拉菜单中选择所需的文件。
9. 点击提交。
10. 添加字符串到 Crowdin 企业版后，您将看到所发送内容的摘要。

添加的字符串将传输到您的 Crowdin 企业版项目，并显示在字符串选项卡的列表中。 您可以随时从同一个列表编辑、隐藏或删除字符串。 相应的更改也将应用于您的 Crowdin 企业版项目中的字符串。

添加复数形式的源字符串

您可以添加复数形式的字符串。

1. 打开 Figma 的 Crowdin 插件。
2. 要添加设计中使用的字符串，请选择整个框架、多个框架或框架上所需的字符串。
3. 在字符串选项卡中，点击 。
4. 在出现的对话框中，填写所需字段。 可以根据需要过滤显示的字符串。
   注意：添加复数形式字符串时，字符串列中的字段用于添加其他复数形式。
5. 点击所需字符串旁边的 ，然后点击 添加复数形式。

6. 在弹出的对话框中，填写每个复数形式的字段，然后点击保存。 具体需要指定多少个复数形式取决于连接的 Crowdin 企业版项目的源语言。

   注意：您只能将复数字符串添加到支持复数形式的文件（例如 Android XML、Stringsdict、XLIFF 等）。
7. 选择并配置好所有需要的字符串后，点击 下一步。
8. 在下一页对话框中，选择首选选项。
9. 在 Crowdin 企业版中选择要添加字符串的文件。
10. 点击提交。

详细了解复数形式。

配置 ICU 源字符串占位符

在您的设计中使用 ICU 字符串时，您可以设置占位符的值，并将此类字符串添加到设计中后，它们将使用预配置的值显示在格式化视图中。

一旦您在设计中使用了来自 Crowdin 企业版的所需 ICU 字符串，就可以配置其占位符值。

1. 打开 Figma 的 Crowdin 插件。
2. In the Strings tab, use the Search field to find the specific copy. You can search strings by source text, string identifier, or context.
3. 点击所需 ICU 字符串上的 。
4. 点击设置占位符。
5. 输入 ICU 字符串占位符所需的值。
6. 点击提交保存输入的占位符。
7. 点击提交以更新设计中的源字符串文本。

在 Figma 中预览 ICU 字符串的翻译时，如果事先预先配置了值，它们也将显示在格式化视图中。

键命名模式设置

为了简化将 Figma 中的字符串添加到 Crowdin 企业版项目的过程，您可以在插件设置中为源字符串标识符设置所需的键命名模式。 Figma 的 Crowdin 插件将根据所选模式建议新字符串的字符串标识符。 添加新的源字符串时，您始终可以将建议的标识符编辑为首选外观。

要选择键命名模式，请按照下列步骤操作：

1. 打开 Figma 的 Crowdin 插件。
2. 切换到设置。
3. 在键命名模式部分中，从下拉菜单中选择首选选项。

除了现有的模式之外，您还可以配置自己的模式。 要使用自定义模式，请从下拉列表中选择自定义键命名模式选项，并在自定义键命名模式字段中指定您的模式。

向 Crowdin 企业版上传已标记的屏幕截图

添加设计中使用的源字符串时，请确保选中发送屏幕截图。 As a result, the Crowdin plugin for Figma will upload screenshots along with the source strings.

此外，您还可以在编辑链接到设计中文本字段的 Crowdin 字符串时使用更新屏幕截图选项来更新屏幕截图。

此外，您可以将与设计中的文本字段链接的字符串的屏幕截图批量上传到 Crowdin 企业版。

1. 打开 Figma 的 Crowdin 插件。
2. 选择具有链接字符串的一个或多个框架。
3. 在字符串选项卡中，点击 上传所选框架的屏幕截图。

要了解更多信息，请阅读文章屏幕截图。

预览字符串

预览 Crowdin 企业版中 Figma 设计中使用的字符串的翻译。 You can preview translations in the new frames or the original ones. When previewing translations in the new frames, you can populate them with the actual translations or with string keys for further use by developers.

要预览带有翻译的字符串，请遵循如下步骤：

1. 打开 Figma 的 Crowdin 插件。
2. 在字符串 > 预览字符串部分，选择在重复页面中预览或在当前页面中预览。
3. 选择使用语言创建。
4. 选择您想要预览译文的目标语言（可选，您可以选择首选的复数形式）。 您还可以选择所有语言。
5. 选择您想要在 Figma 中预览的内容。 选择 所有框架 或 选定框架。
   

要预览用键名称填充的字符串，请按照下列步骤操作：

1. 打开 Figma 的 Crowdin 插件。
2. 在 字符串 > 预览字符串 部分，选择 在重复页面中预览。
3. 选择使用键名称创建。
4. 选择您想要在 Figma 中预览的内容。 选择 所有框架 或 选定框架。
   

字符串筛选

要仅查看链接到特定文本字段的字符串，请按照下列步骤操作：

1. 选择所需的文本字段。
2. 在字符串选项卡中，点击 过滤字符串。
3. 选择显示链接到所选文本元素的字符串。

同样，您可以筛选链接到整个框架或多个框架的文本字段的字符串。

营销视图本地化

使用页​​面选项卡本地化静态页面，例如小册子和横幅。 在此选项卡中，您可以将带有上下文的文本发送给 Crowdin 企业版，并将翻译后的副本上传回 Figma。

向 Crowdin 企业版发送译文

您可以发送 Figma 文件中选定框架或所有框架的文本进行翻译。 翻译员将在列表视图中处理这些文本，并使用设计作为附加语境，以实现更高的翻译质量。

在 Crowdin 企业版中，将创建一个根文件夹 figma-plugin。 它将包含一个以 Figma 文件命名的子文件夹，其中包含每个框架的 HTML 文件。 If needed, you can disable content segmentation in the plugin Settings so the long texts will not be split into sentences.

要发送 Figma 设计进行翻译，请按照以下步骤操作：

1. 打开必要的 Figma 文件。
2. 转到** 插件 > Crowdin for Figma**。
3. 在 页面 > Figma to Crowdin 部分，选择您要翻译的内容。 选择 所有框架 或 选定框架。

当源文件上传到您的 Crowdin 企业版项目时，您可以邀请贡献者翻译和校验它们。

了解更多有关翻译策略的内容。

伪本地化

即使在翻译完成之前，您也可以测试您的应用程序是否准备好使用伪本地化进行本地化。 此功能允许您模拟应用程序的 UI 在不同语言下的外观，以检查在项目本地化开始之前是否应修改源字符串。

发送文本进行翻译后，您就可以开始伪本地化。

1. 打开必要的 Figma 文件。
2. 转到** 插件 > Crowdin for Figma**。
3. 在 页面 > 伪本地化 部分，选择您想要使用伪本地化测试的内容。 选择 所有框架 或 选定框架。
4. 在出现的对话框中，根据您的喜好配置设置。
5. 点击提交。

详细了解伪本地化。

将翻译从 Crowdin 企业版上传到 Figma

每当您想要在 Figma 中测试翻译后的副本或生成多语言资源时，您都可以在 Figma 和 Crowdin 企业版项目之间同步文本。

要将翻译后的副本上传到 Figma，请按照以下步骤操作：

1. 打开必要的 Figma 文件。
2. 转到** 插件 > Crowdin for Figma**。
3. 在页面选项卡的Crowdin to Figma部分中，选择您要上传译文的目标语言。 您还可以选择所有语言。
4. 选择您想要在 Figma 中预览的内容。 选择 所有框架 或 选定框架。
   注意：Figma 中的页面名称只能包含字母（a-z、A-Z）、数字（0-9）和特殊字符 - _ .

   

将翻译上传到 Figma 后，修改后的文件将包含一个单独的框架，其中包含每种目标语言的翻译。 新上传的翻译版本不会覆盖您之前上传的版本。 您可以随时删除不再需要的翻译副本。

如果您希望新上传的翻译版本覆盖之前上传的翻译版本，请打开插件设置并选择覆盖现有翻译。

Crowdin for Figma 插件的开发模式

Figma 的开发模式允许设计师和开发人员协作，确保实现的准确性和从设计到代码的顺利过渡。

阅读有关 Figma 开发模式的更多信息{:target=”_blank”}。

Crowdin for Figma 插件开发模式的集成扩展了这两个平台的功能，增强了设计环境中的本地化流程。 虽然 Figma 的开发模式存在限制（它是只读的），这也会对 Crowdin for Figma 插件的功能产生一定影响：

您可以做什么：

• 访问字符串选项卡以查看和管理字符串。
• 浏览字符串详细信息，包括文件、键、语境和标签。
• 快速复制字符串键以提高工作流效率。

开发模式下不可用的功能：将新字符串添加到 Crowdin、链接字符串、发送屏幕截图、预览翻译、编辑、隐藏或删除字符串

使用 Crowdin for Figma 插件的开发模式

尽管存在局限性，Crowdin for Figma 插件在开发模式下仍然非常有用，它为开发人员提供了简化管理文本元素的方法。 下面是一个典型的用例：

1. 进入开发模式。
2. 在右侧边栏中，切换到插件选项卡。
3. 点击 Crowdin for Figma。
4. 在字符串选项卡中，单击过滤字符串，然后选择显示链接到所选文本元素的字符串。
5. 在框架上选择所需的字符串，然后将鼠标悬停在字符串列表中的 上，可以查看有关此特定字符串的所有必要信息（例如键、语境、存储文件、标签）。
6. （可选）单击复制字符串键到剪贴板以供以后在代码中使用。

与 Figma for VS Code 的兼容性

此外，Crowdin for Figma 插件可以与 Figma for VS Code 无缝集成，从而将它的功能扩展到使用该环境的开发人员。

阅读有关 Figma for VS Code 的更多信息{:target=”_blank”}。