跳转到内容

Figma 插件

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

  • 快速生成多语言的创作资源。
  • 翻译模型,保留原有格式和样式,并在编程开始前以不同语言进行测试。
  • 停止使用“Lorem Ipsum”,而是将 Crowdin 企业版中的真实文本添加到您的原型中。 从 Crowdin 企业版添加的字符串将链接到 Figma 中的文本字段。
  • 从您的设计创建源字符串并将其上传到您的 Crowdin 企业版项目。 创建的字符串将链接到 Figma 中的文本字段。 这样,开发者就可以使用上传的字符串,从而减少开发时间。
  • 预览设计中的译文和字符串键。
  • 将标记的屏幕截图上传到您的 Crowdin 企业版项目。
  1. 登录 Figma。
  2. 打开您的设计文件之一,或单击 新建设计文件
  3. 在文件菜单中,单击 插件 > 管理插件…。 或者,右键单击画布并单击 插件 > 管理插件
  4. 使用搜索字段查找 Crowdin for Figma 插件。
  5. 单击 Crowdin for Figma 插件并选择 保存
  6. 保存后,单击 Crowdin for Figma 插件以运行它。

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

  1. 在文件菜单中,前往 插件 > 已保存的插件。 或者,右键单击画布并单击 插件 > 已保存的插件
  2. 单击 Crowdin for Figma
  3. 切换到 设置 选项卡。
  4. 提供您的个人访问令牌。
  5. 单击 连接

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

  1. 转到账户设置 > 访问令牌,然后单击新建令牌
  2. 指定 令牌名称,选择 范围,然后单击 创建
我应该选择哪些范围?
  • Projects - 授予对项目列表的访问权限,以及查看、创建和更新项目的权限。
  • Source files and strings - 授予添加、获取、删除和更新项目分支、目录、源文件和源字符串的权限,以及对文件修订的访问权限。
  • 译文 - 授予添加新译文和管理现有译文的权限。
  • 截图 - 授予获取截图列表、添加、获取、替换和删除截图的权限,以及访问和修改截图标签的能力。

要选择您想要使用的 Crowdin Enterprise 项目,请按照以下步骤操作:

  1. 设置 选项卡中,单击 Crowdin 项目 下的下拉菜单,然后从列表中选择一个项目。
  2. 选择您将在此项目中使用的 内容类型(例如,UI 本地化或营销视觉内容本地化),然后单击 保存。 所选选项会影响 Crowdin for Figma 插件的哪种模式对您可用。
  3. (可选)Crowdin 分支 部分,选择您的内容将上传到的特定分支。 如果您的项目使用版本分支,您可以选择现有分支或直接从 Figma 创建新分支;否则,您可以跳过此步骤。
    • 选择现有分支:从下拉列表中选择所需的分支。
    • 创建新分支:单击分支字段旁边的 。 在 新建版本分支 对话框中,输入名称并单击 创建。 新分支将在您的 Crowdin Enterprise 项目中创建,并自动在插件中选中。
Figma 插件设置

在本地化 UI 并与开发和营销团队处理动态页面时,请使用 字符串 选项卡。 在此选项卡中,您只需单击一下即可将 Crowdin 企业版中的源字符串添加到 Figma 中的设计中。 在设计中使用文本后,您可以自动上传标记的截图到 Crowdin Enterprise,为翻译员做参考。

  1. 打开 Figma 的 Crowdin 插件。
  2. 字符串 选项卡中,使用 搜索 字段查找特定副本。 您可以通过源文本、字符串标识符或上下文来搜索字符串。 Figma 插件字符串选项卡
  3. 在 Figma 中选择要添加文本的文本图层,然后单击插件中所需字符串旁边的链接图标。

在您的设计中使用 Crowdin Enterprise 的源字符串后,它们将与文本字段链接,您可以在 Figma 中为这些字符串预览翻译,并将其截图上传到您的 Crowdin Enterprise 项目。

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

您可以直接在插件中编辑字符串的文本、语境或其他属性。 为此,请单击字符串列表中旁边的 图标。 在编辑表单中进行所需更改,然后单击 保存

在同一列表中,您还可以使用各自的图标隐藏或删除字符串。 您所做的任何更改都将与您的 Crowdin Enterprise 项目同步。

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

  1. 打开 Figma 的 Crowdin 插件。
  2. 要添加设计中使用的字符串,请选择整个框架、多个框架或框架上所需的文本元素。
  3. 字符串 选项卡中,单击
  4. 在弹出的对话框中,查看要添加的字符串列表。 如果需要,单击筛选图标 以打开筛选面板并排除某些元素:
    • 如果某些帧包含不应添加到 Crowdin Enterprise 的隐藏元素,请选择 Skip hidden elements
    • 如果某些帧包含不应添加到 Crowdin Enterprise 的不可翻译元素,请选择 Skip untranslatable elements
    • 选择 跳过锁定元素 以排除任何锁定的文本元素,使其不被发送进行翻译。 当您希望某些文本在截图中保持可见以提供上下文,但不作为源字符串添加到 Crowdin Enterprise 时,此选项非常有用。 Figma 插件添加字符串
  5. (可选) 配置字符串设置。 您可以调整单个字符串的设置,或一次性将批量设置应用于所有字符串:
    • 单个字符串设置:单击列表中特定字符串旁边的 ,以更新其语境或设置该行译文的最大长度。
    • 多个字符串设置:单击字符串列表上方右上角的 ,以打开所有选定字符串的设置。 在此,您可以配置 最大。 长度修正(%) 选项。 此功能通过在原始字符串长度的基础上增加指定百分比来自动设置最大字符限制(例如,输入”20”表示一个 100 个字符的字符串的最大长度为 120)。 这对于适应翻译过程中的文本扩展特别有用,有助于避免本地化 UI 中的文本截断。 此处应用的任何批量设置仍可通过单个字符串设置逐条覆盖。
  6. 选择并配置好所有所需字符串后,单击 下一步
  7. 在下一个对话框页面中,选择首选选项:
    • Auto-link existing strings – 自动将文本与 Crowdin Enterprise 中的现有字符串进行比较。 如果找到匹配项,则文本元素将链接到 Crowdin 企业版项目中的字符串。
    • Create missing keys – 仅将新的文本元素添加到 Crowdin Enterprise。
    • Merge duplicates – 将相同的文本元素链接到 Crowdin Enterprise 中的单个新字符串。 默认行为是通过比较源文本来识别重复项。 这在以下情况下很有用:
      • 当添加多个具有相同文本的文本字段(例如,多个标签为 Submit 的按钮)时,插件只会向您的 Crowdin Enterprise 项目添加一个字符串,并将所有重复的文本字段链接到该字符串。
      • 如果您的 Crowdin Enterprise 项目已包含与您从设计中添加的文本相同的字符串,插件将链接到现有字符串,而不会创建新字符串。
      • 要更改重复项检测方法,请启用 按键检测重复项 子选项。 这将使插件通过字符串标识符(键)而非文本内容来识别重复项。
    • (可选) 要为字符串添加标记,请交替从 标记 下拉菜单中选择。
    • 发送截图
  8. File 下拉菜单中,选择 Crowdin Enterprise 中要添加字符串的文件。
  9. Update Option 下拉菜单中,选择当您在 Figma 中更新文本已更改的已链接字符串时,Crowdin Enterprise 中现有翻译和审批的处理方式。 请选择以下选项之一:
    • 保留译文和审批 – 保留现有译文及其审批状态。 适用于不影响译文准确性的细微错别字修正。
    • 保留译文 – 保留现有译文,但删除审批状态,这意味着译文需要重新审核和审批。
    • 清除译文和审批 – 删除所有现有译文和审批。 当源文本含义发生重大变化,需要从头翻译字符串时使用此选项。
  10. 点击提交

添加字符串到 Crowdin 企业版后,您将看到所发送内容的摘要。 此摘要提供有关操作的详细反馈:

  • Keys created:添加到您的 Crowdin Enterprise 项目的新字符串数量。
  • Keys updated:Crowdin Enterprise 中已更新的现有字符串数量。
  • Keys linked:Crowdin Enterprise 中已链接到 Figma 文本元素的现有字符串数量。
  • Text elements linked:Figma 中已链接到 Crowdin Enterprise 字符串的文本元素总数。 如果多个文本元素链接到单个字符串,此数字可能高于 已链接的键
  • Screenshots created:上传到 Crowdin Enterprise 的新截图数量。
  • 已更新的截图:已更新的现有截图数量。

在摘要屏幕中,您可以单击 在 Crowdin 中打开 以查看项目中的字符串,或单击 主页 返回插件主屏幕。

Figma 插件上传摘要

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

  1. 打开 Figma 的 Crowdin 插件。
  2. 要添加设计中使用的字符串,请选择整个框架、多个框架或框架上所需的文本元素。
  3. 字符串 选项卡中,单击
  4. 在弹出的对话框中,查看字符串列表。
  5. 单击所需字符串旁边的 ,然后单击 添加复数形式
  6. 在弹出的对话框中,填写每个复数形式的字段,然后单击 保存。 具体需要指定多少个复数形式取决于连接的 Crowdin 企业版项目的源语言。
  7. 选择并配置好所有所需字符串后,单击 下一步
  8. 选择首选选项以及 Crowdin Enterprise 中要添加字符串的文件,然后单击 Submit

Read more about Plural Forms.

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

在您的设计中使用来自 Crowdin Enterprise 的所需 ICU 字符串后,您可以配置其占位符值。

  1. 打开 Figma 的 Crowdin 插件。
  2. 字符串 选项卡中,使用 搜索 字段通过源文本、字符串标识符或语境查找特定副本。
  3. 单击所需 ICU 字符串上的
  4. 单击 设置占位符
  5. 输入 ICU 字符串占位符所需的值。
  6. 单击 保存 以保存输入的占位符。
  7. 单击 保存 以更新设计中的源字符串文本。

在 Figma 中预览译文时,如果事先预配置了值,ICU 字符串也将以格式化视图显示。

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

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

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

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

添加设计中使用的源字符串时,请确保保持选中 发送截图。 因此,Figma 的 Crowdin 插件将上传截图以及源字符串。

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

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

  1. 打开 Figma 的 Crowdin 插件。
  2. 选择具有链接字符串的一个或多个框架。
  3. 字符串 选项卡中,单击 向 Crowdin 发送带标签的截图 以上传所选框架的截图。

详细了解截图

直接在 Figma 中预览设计中所用字符串的 Crowdin Enterprise 翻译。 默认情况下,预览在新的重复页面上生成,以保持原始设计不变。

Figma 插件预览字符串

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

  1. 打开 Figma 的 Crowdin 插件。
  2. 前往 字符串 选项卡,展开 从 Crowdin 预览字符串 部分。
  3. 确保选中 在重复页面中预览 复选框。
  4. 选择 使用语言创建
  5. 选择您想要预览译文的目标语言(可选,您可以选择首选的复数形式)。 您也可以选择 所有语言
  6. 选择您想在 Figma 中预览的内容:所有框架选定框架

为帮助开发人员识别字符串,您可以在设计中填充字符串键而非译文文本。

  1. 打开 Figma 的 Crowdin 插件。
  2. 前往 字符串 选项卡,展开 从 Crowdin 预览字符串 部分。
  3. 确保选中 在重复页面中预览 复选框。
  4. 选择 使用键名称创建
  5. 选择您想在 Figma 中预览的内容:所有框架选定框架

您可以按各种条件筛选 字符串 选项卡中的字符串,例如文件或链接状态。 单击 以打开筛选侧面板。 在此,您可以选择要查看其字符串的文件,或仅显示链接到当前文本选择(例如,选定的文本元素、整个框架或多个框架)的字符串。 单击 重置 以清除所有筛选选项。

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

Figma 插件页面选项卡

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

在 Crowdin Enterprise 中,将创建一个根文件夹 figma-plugin。 它将包含一个以 Figma 文件命名的子文件夹,其中包含每个框架的 HTML 文件。

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

  1. 打开必要的 Figma 文件。
  2. 前往 插件 > Crowdin for Figma
  3. 页面 > Figma 到 Crowdin 部分,选择您要翻译的内容:所有框架选定框架
  4. 在下一屏幕中,选择上传的框架将在 Crowdin 中可用于翻译的目标语言。 默认情况下,已选择 所有语言
  5. (可选) 选择 内容分割 以在发送到 Crowdin 之前将长文本拆分为较小的片段,如句子。
  6. 单击 发送所有框架(或 发送选定框架)。

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

详细了解翻译策略

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

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

  1. 打开必要的 Figma 文件。
  2. 前往 插件 > Crowdin for Figma
  3. 页面 > Crowdin 到 Figma 部分,选择您要应用译文的内容:所有框架选定框架
  4. 在下一屏幕中,选择一种或多种您要导入译文的语言。 您可以直接在此列表中跟踪每种语言的翻译进度。 此进度反映了您的 Crowdin Enterprise 项目中专门位于 figma-plugin 根文件夹内的文件的翻译状态。
  5. (可选) 选择 将译文整合到当前页面 以将导入的已翻译框架放置在当前 Figma 页面上,而不是为其创建单独的页面。
  6. 单击 导入所有框架(或 导入选定框架)。

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

如果您选择 将译文整合到当前页面,已翻译的框架将直接添加到您当前正在使用的页面。

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

Crowdin for Figma 插件与 Figma 的 Buzz 编辑器完全兼容,这是一个专为创建营销和广告内容而设计的新空间。 此集成非常适合本地化社交媒体资产、数字广告和其他推广视觉内容的团队。

在 Buzz 中使用插件时,您可以直接在左侧边栏中找到 页面 选项卡的精简版本。 工作流程针对 Buzz 编辑器进行了优化:

  • 专注功能: 仅提供 页面 选项卡,让您直接访问视觉内容本地化所需的功能。
  • 基于资产的选择: 您将使用资产而非框架进行操作。 按钮标签为 选定资产,与 Buzz 术语保持一致。

要在 Figma Buzz 中本地化您的设计,请按照以下步骤操作:

  1. 从左侧边栏打开 Crowdin 插件。
  2. 在 Buzz 编辑器中,选择一个或多个您想要翻译的资产。
  3. Figma 到 Crowdin 部分,单击 选定资产。 在下一屏幕中选择目标语言,然后单击 发送选定资产
  4. 译文就绪后,前往 Crowdin 到 Figma 部分并单击 选定资产。 在下一屏幕中选择要导入的目标语言,然后单击 导入选定资产 以应用译文。

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

根据您想要测试的内容,您可以在 Crowdin for Figma 插件中使用 字符串页面 选项卡。

  1. 打开必要的 Figma 文件。
  2. 前往 插件 > Crowdin for Figma
  3. 字符串 > 从 Crowdin 预览字符串 部分,确保选中 在重复页面中预览
  4. 选择 伪本地化
  5. 选择您想要使用伪本地化测试的内容:所有框架选定框架
  6. 伪本地化 对话框中,您可以从预定义预设中选择,并根据您的偏好配置设置。
  7. 点击提交

详细了解伪本地化及其设置。

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

详细了解 Figma Dev 模式

Crowdin for Figma 插件开发模式的集成扩展了这两个平台的功能,增强了设计环境中的本地化流程。 由于 Figma 的 Dev 模式为只读模式,Crowdin for Figma 插件的功能受到一定限制:

您可以执行的操作

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

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

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

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

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

详细了解 Figma for VS Code

从大型 Figma 文件上传带截图的字符串时,用户可能会遇到性能缓慢或 Figma 卡死的问题。 当文本元素放置在较大的顶级框架中时,会出现此问题。

当您将字符串从 Figma 添加到 Crowdin Enterprise 时,插件会:

  1. 识别包含文本元素的顶级框架。
  2. 使用 Figma API 将此框架转换为图像。
  3. 将图像作为截图上传到 Crowdin Enterprise。

插件始终在层级中搜索最高级别的框架,并在遇到非框架元素(如节或组)时停止。 如果顶级框架过大,生成截图可能会导致性能问题。

例如:

  • section > group > frame > text → 插件从 frame 捕获截图。
  • frame 1 > frame 2 > frame 3 > text → 插件从 frame 1 捕获截图。

为防止速度变慢,请重构您的 Figma 文件,使顶级框架仅包含相关的 UI 语境。 不要将所有 UI 元素放在单个大框架中,而应将其拆分为更小的逻辑部分。

在 Figma 中工作时,本地缺失的字体可能会在使用 Crowdin for Figma 插件链接字符串后导致意外更改。

这种情况通常在以下情况下发生:

  • 原始设计使用了未安装在本地 Figma 环境中的字体。
  • Figma 会在画布左上角以及右侧边栏 字体排印 部分的字体名称旁边用特殊的 A? 图标标记缺失的字体。
  • 当您选择使用缺失字体的文本元素时,Figma 会显示 缺失字体 对话框,提示您替换该字体。

如果您将 Crowdin 字符串链接到此类文本元素,Figma 将自动用默认可用字体(例如 Roboto)替换缺失的字体。 这是预期行为。 插件会尝试保留原始字体,但当其在本地系统中不可用时,Figma 会替换它以确保文本保持可见且可编辑。

此问题可能不会立即被发现。 部分用户只有在将截图从 Figma 上传到 Crowdin Enterprise 后才会发现字体变化,这可能会造成困惑。

为避免此问题:

  • 在链接字符串之前检查缺失字体指示符(A?)。
  • 确保原始设计中使用的字体已安装并在您的 Figma 中可用。
  • 如有必要,与设计师协调以确认正确的字体设置。
本页面对你有帮助吗?