Figma 插件
借助 Crowdin for Figma 插件,您可以在设计中使用来自 Crowdin 的文本,从而为设计人员和开发人员节省时间。 这些文件可包括原文或翻译文本。 如果需要,您可以添加新的内容(例如对话框标题、按钮标记)并将它们发送给 Crowdin 中的翻译人员。
- 快速生成多语言的创作资源。
- 翻译模型,保留原有格式和样式,并在编程开始前以不同语言进行测试。
- 停止使用“Lorem Ipsum”,将 Crowdin 的真实文本添加到你的原型。 从 Crowdin 添加的字符串将链接到 Figma 中的文本字段。
- 创建并上传您设计中的源字符串到您的 Crowdin 项目。 创建的字符串将链接到 Figma 中的文本字段。 这样,开发者就可以使用上传的字符串,从而减少开发时间。
- 预览设计中的译文和字符串键。
- 将标记的屏幕截图上传到您的 Crowdin 项目。
- 登录 Figma。
- 打开您的设计文件之一,或单击 新建设计文件。
- 在文件菜单中,单击 插件 > 管理插件…。 或者,右键单击画布并单击 插件 > 管理插件。
- 使用搜索字段查找 Crowdin for Figma 插件。
- 单击 Crowdin for Figma 插件并选择 保存。
- 保存后,单击 Crowdin for Figma 插件以运行它。
要在 Figma 中指定您的 Crowdin 凭据,请按照以下步骤操作:
- 在文件菜单中,前往 插件 > 已保存的插件。 或者,右键单击画布并单击 插件 > 已保存的插件。
- 单击 Crowdin for Figma。
- 切换到 设置 选项卡。
- 提供您的个人访问令牌。
- 单击 连接。
要在 Crowdin 中生成新的令牌,请遵循以下步骤:
- 前往 账户设置 > API,个人访问令牌 部分,然后单击 新建令牌。
- 指定 令牌名称,选择 范围,然后单击 创建。
我应该选择哪些范围?
- 项目(列出、获取、创建、编辑) - 授予访问项目列表、查看、创建和更新项目的权限。
- 源文件和字符串 - 授予添加、获取、删除和更新项目分支、目录、源文件和源字符串的权限,以及对文件修订的访问权限。
- 译文 - 授予添加新译文和管理现有译文的权限。
- 截图 - 授予获取截图列表、添加、获取、替换和删除截图的权限,以及访问和修改截图标签的能力。
要选择您想要使用的 Crowdin 项目,请按照以下步骤操作:
- 在 设置 选项卡中,单击 Crowdin 项目 下的下拉菜单,然后从列表中选择一个项目。
- 选择您将在此项目中使用的 内容类型(例如,UI 本地化或营销视觉内容本地化),然后单击 保存。 所选选项会影响 Crowdin for Figma 插件的哪种模式对您可用。
- (可选) 在 Crowdin 分支 部分,选择您的内容将上传到的特定分支。 如果您的项目使用版本分支,您可以选择现有分支或直接从 Figma 创建新分支;否则,您可以跳过此步骤。
- 选择现有分支:从下拉列表中选择所需的分支。
- 创建新分支:单击分支字段旁边的 。 在 新建版本分支 对话框中,输入名称并单击 创建。 新分支将在您的 Crowdin 项目中创建,并自动在插件中选中。
在本地化 UI 并与开发和营销团队处理动态页面时,请使用 字符串 选项卡。 在此选项卡中,您可以一键将 Crowdin 的源字符串添加到 Figma 中的设计中。 在设计中使用文本后,您可以自动上传标记的屏幕截图到 Crowdin,为翻译员做参考。
- 打开 Figma 的 Crowdin 插件。
- 在 字符串 选项卡中,使用 搜索 字段查找特定副本。 您可以通过源文本、字符串标识符或上下文来搜索字符串。

- 在 Figma 中选择要添加文本的文本图层,然后单击插件中所需字符串旁边的链接图标。
在您的设计中使用来自 Crowdin 的源字符串后,它们会与文本字段链接,您可以在 Figma 中预览译文,并为它们上传截图到您的 Crowdin 项目。
您可以将单个 Crowdin 字符串链接到 Figma 中的一个或多个文本字段。 但是,一个文本字段只能链接到单个 Crowdin 字符串。 如果将具有现有连接的文本字段链接到新的 Crowdin 字符串,则先前的连接将终止,并且将建立新的连接。 要取消 Crowdin 字符串与之前链接的所有文本字段的链接,请右键单击所需字符串旁边的链接图标。
您可以直接在插件中编辑字符串的文本、语境或其他属性。 为此,请单击字符串列表中旁边的 图标。 在编辑表单中进行所需更改,然后单击 保存。
在同一列表中,您还可以使用各自的图标隐藏或删除字符串。 您所做的任何更改都将与您的 Crowdin 项目同步。
您可以添加已经用于设计的字符串。
- 打开 Figma 的 Crowdin 插件。
- 要添加设计中使用的字符串,请选择整个框架、多个框架或框架上所需的文本元素。
- 在 字符串 选项卡中,单击 。
- 在弹出的对话框中,查看要添加的字符串列表。 如果需要,单击筛选图标 以打开筛选面板并排除某些元素:
- 如果某些框架包含不应添加到 Crowdin 的隐藏元素,请选择 跳过隐藏元素。
- 如果某些框架包含不应添加到 Crowdin 的不可翻译元素,请选择 跳过不可翻译元素。
- 选择 跳过锁定元素 以排除任何锁定的文本元素,使其不被发送进行翻译。 当您希望某些文本在截图中保持可见以提供语境,但不作为源字符串添加到 Crowdin 时,此功能非常有用。

- (可选) 配置字符串设置。 您可以调整单个字符串的设置,或一次性将批量设置应用于所有字符串:
- 单个字符串设置:单击列表中特定字符串旁边的 ,以更新其语境或设置该行译文的最大长度。
- 多个字符串设置:单击字符串列表上方右上角的 ,以打开所有选定字符串的设置。 在此,您可以配置 最大。 长度修正(%) 选项。 此功能通过在原始字符串长度的基础上增加指定百分比来自动设置最大字符限制(例如,输入”20”表示一个 100 个字符的字符串的最大长度为 120)。 这对于适应翻译过程中的文本扩展特别有用,有助于避免本地化 UI 中的文本截断。 此处应用的任何批量设置仍可通过单个字符串设置逐条覆盖。
- 选择并配置好所有所需字符串后,单击 下一步。
- 在下一个对话框页面中,选择首选选项:
- 自动链接现有字符串 – 自动将文本与 Crowdin 中的现有字符串进行比较。 如果找到匹配项,文本元素将链接到 Crowdin 项目中的字符串。
- 创建缺失键 – 仅将新文本元素添加到 Crowdin。
- 合并重复项 – 将相同的文本元素链接到 Crowdin 中的单个新字符串。 默认行为是通过比较源文本来识别重复项。 这在以下情况下很有用:
- 当添加具有相同文本的多个文本字段时(例如,多个标有
Submit的按钮),插件只会向您的 Crowdin 项目添加一个字符串,并将所有重复的文本字段链接到该字符串。 - 如果您的 Crowdin 项目已包含与您从设计中添加的文本相同的字符串,插件会链接到现有字符串,而不是创建新字符串。
- 要更改重复项检测方法,请启用 按键检测重复项 子选项。 这将使插件通过字符串标识符(键)而非文本内容来识别重复项。
- 当添加具有相同文本的多个文本字段时(例如,多个标有
- (可选) 要为字符串添加标记,请交替从 标记 下拉菜单中选择。
- 发送截图。
- 从 文件 下拉菜单中,选择 Crowdin 中要添加字符串的文件。
- 从 更新选项 下拉菜单中,选择当您更新已链接字符串(其文本在 Figma 中已更改)时,Crowdin 中现有译文和审批的处理方式。 请选择以下选项之一:
- 保留译文和审批 – 保留现有译文及其审批状态。 适用于不影响译文准确性的细微错别字修正。
- 保留译文 – 保留现有译文,但删除审批状态,这意味着译文需要重新审核和审批。
- 清除译文和审批 – 删除所有现有译文和审批。 当源文本含义发生重大变化,需要从头翻译字符串时使用此选项。
- 点击提交。
将字符串添加到 Crowdin 后,您将看到所发送内容的摘要。 此摘要提供有关操作的详细反馈:
- 已创建的键:添加到您的 Crowdin 项目的新字符串数量。
- 已更新的键:Crowdin 中已更新的现有字符串数量。
- 已链接的键:Crowdin 中已链接到 Figma 文本元素的现有字符串数量。
- 已链接的文本元素:Figma 中已链接到 Crowdin 字符串的文本元素总数。 如果多个文本元素链接到单个字符串,此数字可能高于 已链接的键。
- 已创建的截图:上传到 Crowdin 的新截图数量。
- 已更新的截图:已更新的现有截图数量。
在摘要屏幕中,您可以单击 在 Crowdin 中打开 以查看项目中的字符串,或单击 主页 返回插件主屏幕。
您可以添加复数形式的字符串。
- 打开 Figma 的 Crowdin 插件。
- 要添加设计中使用的字符串,请选择整个框架、多个框架或框架上所需的文本元素。
- 在 字符串 选项卡中,单击 。
- 在弹出的对话框中,查看字符串列表。
- 单击所需字符串旁边的 ,然后单击 添加复数形式。
- 在弹出的对话框中,填写每个复数形式的字段,然后单击 保存。 根据所连接的 Crowdin 项目的源语言,您可能应该指定不同数量的复数形式。
- 选择并配置好所有所需字符串后,单击 下一步。
- 选择首选选项和 Crowdin 中要添加字符串的文件,然后单击 提交。
详细了解复数形式。
在您的设计中使用 ICU 字符串时,您可以设置占位符的值,并将此类字符串添加到设计中后,它们将使用预配置的值显示在格式化视图中。
在您的设计中使用 Crowdin 中所需的 ICU 字符串后,您可以配置其占位符的值。
- 打开 Figma 的 Crowdin 插件。
- 在 字符串 选项卡中,使用 搜索 字段通过源文本、字符串标识符或语境查找特定副本。
- 单击所需 ICU 字符串上的 。
- 单击 设置占位符。
- 输入 ICU 字符串占位符所需的值。
- 单击 保存 以保存输入的占位符。
- 单击 保存 以更新设计中的源字符串文本。
在 Figma 中预览译文时,如果事先预配置了值,ICU 字符串也将以格式化视图显示。
为了简化从 Figma 向 Crowdin 项目添加字符串的过程,您可以在插件设置中为源字符串标识符设置所需的键命名模式。 Figma 的 Crowdin 插件将根据所选模式建议新字符串的字符串标识符。 添加新的源字符串时,您始终可以将建议的标识符编辑为首选外观。
要选择键命名模式,请按照下列步骤操作:
- 打开 Figma 的 Crowdin 插件。
- 切换到 设置 选项卡。
- 在 键命名模式 部分,从下拉菜单中选择首选选项。
除了现有的模式之外,您还可以配置自己的模式。 要使用自定义模式,请从下拉列表中选择 自定义键命名模式 选项,并在 自定义键命名模式 字段中指定您的模式。
添加设计中使用的源字符串时,请确保保持选中 发送截图。 因此,Figma 的 Crowdin 插件将上传截图以及源字符串。
此外,您还可以在编辑链接到设计中文本字段的 Crowdin 字符串时,使用 更新截图 选项来更新截图。
此外,您可以将设计中与文本字段链接的字符串的截图批量上传到 Crowdin。
- 打开 Figma 的 Crowdin 插件。
- 选择具有链接字符串的一个或多个框架。
- 在 字符串 选项卡中,单击 向 Crowdin 发送带标签的截图 以上传所选框架的截图。
阅读更多关于截图的内容。
直接在 Figma 中预览 Crowdin 中设计所用字符串的译文。 默认情况下,预览在新的重复页面上生成,以保持原始设计不变。
要预览带有翻译的字符串,请遵循如下步骤:
- 打开 Figma 的 Crowdin 插件。
- 前往 字符串 选项卡,展开 从 Crowdin 预览字符串 部分。
- 确保选中 在重复页面中预览 复选框。
- 选择 使用语言创建。
- 选择您想要预览译文的目标语言(可选,您可以选择首选的复数形式)。 您也可以选择 所有语言。
- 选择您想在 Figma 中预览的内容:所有框架 或 选定框架。
为帮助开发人员识别字符串,您可以在设计中填充字符串键而非译文文本。
- 打开 Figma 的 Crowdin 插件。
- 前往 字符串 选项卡,展开 从 Crowdin 预览字符串 部分。
- 确保选中 在重复页面中预览 复选框。
- 选择 使用键名称创建。
- 选择您想在 Figma 中预览的内容:所有框架 或 选定框架。
您可以按各种条件筛选 字符串 选项卡中的字符串,例如文件或链接状态。 单击 以打开筛选侧面板。 在此,您可以选择要查看其字符串的文件,或仅显示链接到当前文本选择(例如,选定的文本元素、整个框架或多个框架)的字符串。 单击 重置 以清除所有筛选选项。
使用 页面 选项卡本地化静态页面,例如宣传册和横幅。 在此选项卡中,您可以向 Crowdin 发送带有语境的文本供译员使用,并将已翻译的副本上传回 Figma。
您可以发送 Figma 文件中选定框架或所有框架的文本进行翻译。 翻译员将在列表视图中处理这些文本,并使用设计作为附加语境,以实现更高的翻译质量。
在 Crowdin 中,将创建一个根文件夹 figma-plugin。 它将包含一个以 Figma 文件命名的子文件夹,其中包含每个框架的 HTML 文件。
要发送 Figma 设计进行翻译,请按照以下步骤操作:
- 打开必要的 Figma 文件。
- 前往 插件 > Crowdin for Figma。
- 在 页面 > Figma 到 Crowdin 部分,选择您要翻译的内容:所有框架 或 选定框架。
- 在下一屏幕中,选择上传的框架将在 Crowdin 中可用于翻译的目标语言。 默认情况下,已选择 所有语言。
- (可选) 选择 内容分割 以在发送到 Crowdin 之前将长文本拆分为较小的片段,如句子。
- 单击 发送所有框架(或 发送选定框架)。
当源文件上传到您的 Crowdin 项目时,您可以邀请贡献者翻译和校验它们。
阅读更多关于翻译策略的内容。
每当您想在 Figma 中测试已翻译的副本或生成多语言资产时,您都可以在 Figma 和 Crowdin 项目之间同步文本。
要将翻译后的副本上传到 Figma,请按照以下步骤操作:
- 打开必要的 Figma 文件。
- 前往 插件 > Crowdin for Figma。
- 在 页面 > Crowdin 到 Figma 部分,选择您要应用译文的内容:所有框架 或 选定框架。
- 在下一屏幕中,选择一种或多种您要导入译文的语言。 您可以直接在此列表中跟踪每种语言的翻译进度。 此进度反映了 Crowdin 项目中 figma-plugin 根文件夹内文件的翻译状态。
- (可选) 选择 将译文整合到当前页面 以将导入的已翻译框架放置在当前 Figma 页面上,而不是为其创建单独的页面。
- 单击 导入所有框架(或 导入选定框架)。
将翻译上传到 Figma 后,修改后的文件将包含一个单独的框架,其中包含每种目标语言的翻译。 新上传的翻译版本不会覆盖您之前上传的版本。 您可以随时删除不再需要的翻译副本。
如果您选择 将译文整合到当前页面,已翻译的框架将直接添加到您当前正在使用的页面。
如果您希望新上传的翻译版本覆盖之前上传的翻译版本,请打开插件设置并选择覆盖现有译文。
Crowdin for Figma 插件与 Figma 的 Buzz 编辑器完全兼容,这是一个专为创建营销和广告内容而设计的新空间。 此集成非常适合本地化社交媒体资产、数字广告和其他推广视觉内容的团队。
在 Buzz 中使用插件时,您可以直接在左侧边栏中找到 页面 选项卡的精简版本。 工作流程针对 Buzz 编辑器进行了优化:
- 专注功能: 仅提供 页面 选项卡,让您直接访问视觉内容本地化所需的功能。
- 基于资产的选择: 您将使用资产而非框架进行操作。 按钮标签为 选定资产,与 Buzz 术语保持一致。
要在 Figma Buzz 中本地化您的设计,请按照以下步骤操作:
- 从左侧边栏打开 Crowdin 插件。
- 在 Buzz 编辑器中,选择一个或多个您想要翻译的资产。
- 在 Figma 到 Crowdin 部分,单击 选定资产。 在下一屏幕中选择目标语言,然后单击 发送选定资产。
- 译文就绪后,前往 Crowdin 到 Figma 部分并单击 选定资产。 在下一屏幕中选择要导入的目标语言,然后单击 导入选定资产 以应用译文。
即使在翻译完成之前,您也可以测试您的应用程序是否准备好使用伪本地化进行本地化。 此功能允许您模拟应用程序的 UI 在不同语言下的外观,以检查在项目本地化开始之前是否应修改源字符串。
根据您想要测试的内容,您可以在 Crowdin for Figma 插件中使用 字符串 或 页面 选项卡。
- 打开必要的 Figma 文件。
- 前往 插件 > Crowdin for Figma。
- 在 字符串 > 从 Crowdin 预览字符串 部分,确保选中 在重复页面中预览。
- 选择 伪本地化。
- 选择您想要使用伪本地化测试的内容:所有框架 或 选定框架。
- 在 伪本地化 对话框中,您可以从预定义预设中选择,并根据您的偏好配置设置。
- 点击提交。
- 打开必要的 Figma 文件。
- 前往 插件 > Crowdin for Figma。
- 在 页面 > 伪本地化 部分,选择您想要使用伪本地化测试的内容:所有框架 或 选定框架。
- 在 伪本地化 对话框中,您可以从预定义预设中选择,并根据您的偏好配置设置。
- 点击提交。
详细了解伪本地化及其设置。
Figma 的开发模式允许设计师和开发人员协作,确保实现的准确性和从设计到代码的顺利过渡。
详细了解 Figma Dev 模式。
Crowdin for Figma 插件开发模式的集成扩展了这两个平台的功能,增强了设计环境中的本地化流程。 由于 Figma 的 Dev 模式为只读模式,Crowdin for Figma 插件的功能受到一定限制:
您可以执行的操作:
- 访问 字符串 选项卡以查看和管理字符串。
- 浏览字符串详细信息,包括文件、键、语境和标记。
- 快速复制字符串键以提高工作流效率。
开发模式下不可用的功能:将新字符串添加到 Crowdin、链接字符串、发送屏幕截图、预览翻译、编辑、隐藏或删除字符串
尽管存在局限性,Crowdin for Figma 插件在开发模式下仍然非常有用,它为开发人员提供了简化管理文本元素的方法。 下面是一个典型的用例:
- 进入 Dev 模式。
- 在右侧边栏中,切换到 插件 选项卡。
- 单击 Crowdin for Figma。
- 在 字符串 选项卡中,单击 筛选字符串 并选择 显示链接到选定文本元素的字符串。
- 在框架上选择所需的文本元素,然后将鼠标悬停在字符串列表中的 图标上,以查看有关该特定字符串的所有必要信息(例如键、语境、存储文件、标记)。
- (可选) 单击 将字符串键复制到剪贴板 以供后续在代码中使用。
此外,Crowdin for Figma 插件可以与 Figma for VS Code 无缝集成,从而将它的功能扩展到使用该环境的开发人员。
详细了解 Figma for VS Code。
从大型 Figma 文件上传带截图的字符串时,用户可能会遇到性能缓慢或 Figma 卡死的问题。 当文本元素放置在较大的顶级框架中时,会出现此问题。
当您从 Figma 向 Crowdin 添加字符串时,插件会:
- 识别包含文本元素的顶级框架。
- 使用 Figma API 将此框架转换为图像。
- 将图像作为截图上传到 Crowdin。
插件始终在层级中搜索最高级别的框架,并在遇到非框架元素(如节或组)时停止。 如果顶级框架过大,生成截图可能会导致性能问题。
例如:
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 后才发现字体更改,这可能会造成困惑。
为避免此问题:
- 在链接字符串之前检查缺失字体指示符(A?)。
- 确保原始设计中使用的字体已安装并在您的 Figma 中可用。
- 如有必要,与设计师协调以确认正确的字体设置。