Figma 插件

With the Crowdin for Figma plugin, you can use texts from Crowdin in your designs to save time for both designers and developers. 这些文件可包括原文或翻译文本。 如有必要,您可以添加新的内容(例如对话标题,按钮标签),并发送给在 Crowdin 的翻译人员。

Note: The Pages tab and some other plugin settings may be unavailable when working with string-based projects.

Use Cases

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

首次运行 Crowdin for Figma 插件

  1. Sign in to Figma.
  2. 打开您的设计文件之一或点击新建设计文件
  3. In the file menu, click Plugins > Manage plugins…. Alternatively, right-click the canvas and click Plugins > Manage plugins.
  4. 使用搜索所有插件字段查找 Crowdin for Figma 插件。
  5. Click on Crowdin for Figma plugin and select Save.
  6. 将鼠标悬停在 Crowdin for Figma 插件上,然后单击运行

Connecting Figma with Crowdin Account

设置 Crowdin 凭据

Note: To set up Figma integration, you need to have manager or owner permissions in the Crowdin project.

To specify your Crowdin credentials in Figma, follow these steps:

  1. 在文件菜单中,转到 插件 > 已保存的插件。 Alternatively, right-click the canvas and click Plugins > Saved plugins.
  2. Click Crowdin for Figma.
  3. 切换到 设置
  4. 提供您的个人访问令牌。
  5. 点击 连接Figma Plugin Connect to Crowdin

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

  1. Go to Account Settings > API, Personal Access Tokens section, and click New Token.
  2. Specify Token Name, select Scopes, and click Create.

Crowdin 个人访问令牌

选择 Crowdin 项目

To select the project you’d like to work with, click the drop-down menu in Settings > Crowdin Project, and select a project from the list. Later, you can click Disconnect in the same section to switch to another project if needed. Figma Plugin Selecting Crowdin Project

Select a content type you’re going to work with in this project and click Save.

You can choose one of the available options:

The selected content type option affects which mode of the Crowdin for Figma plugin will be available to a user. Figma Plugin Selecting Content Type

选择您的内容将上传到的特定分支。 If your Crowdin project doesn’t have branches, leave it empty. Figma 插件选择分支

UI 本地化

Use the Strings tab when localizing UI and working on dynamic pages with your development and marketing teams. In this tab, you can add source strings from Crowdin to your designs in Figma in a click. 在设计中使用文本后,您可以自动上传标记的屏幕截图到 Crowdin,为翻译员做参考。

Using Source Strings from Crowdin in Figma

  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. Figma 插件字符串选项卡
  3. 选择要添加文本的文本图层,然后单击所需字符串旁边的链接图标。 Figma 插件使用来自 Crowdin in Figma 的源字符串

After using the source strings from Crowdin in your designs, they become linked with the text fields, and you can preview translations for these strings in Figma and upload screenshots for them to your Crowdin project.

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

Adding Source Strings from Figma to Crowdin

You can add strings that are already used in the designs.

  1. 打开 Figma 的 Crowdin 插件。
  2. 要添加设计中使用的字符串,请选择整个框架、多个框架或框架上所需的字符串。
  3. 字符串选项卡中,单击
  4. 在出现的对话框中,填写所需字段。 You can filter the displayed strings if needed:
    • Select the Skip hidden elements filter option if some frames contain hidden elements that should not be added to Crowdin.
    • Select the Skip untranslated elements filter option if some frames contain untranslated elements that should not be added to Crowdin. Figma 插件添加字符串
  5. (Optional) To update the string context and set the max.length of the translated text, click toward the needed string.
  6. Once all the needed strings are selected and configured, click Next.
  7. In the next dialog page, select the preferred options:
    • Auto-link existing strings – automatically compare text to existing strings in Crowdin. If there’s a match, the text element will be linked to the string in the Crowdin project.
    • Create missing keys – only new text elements are added to Crowdin.
    • (Optional) To add labels to the strings, alternately select them from the Select Label drop-down menu.
    • Merge duplicates – link identical text elements to a single new string in Crowdin. 它在以下情况下很有用:
      • When adding multiple text fields with the same text, the plugin will add only one string to your Crowdin project and link all duplicate text fields to it.
      • If your Crowdin project already contains a string with the same text you’re adding from designs, the plugin will only link the text fields to the existing string and won’t create a new one.
    • Send screenshots
  8. Select the file in Crowdin to which you want to add the strings. To add the same strings into multiple files in Crowdin, alternately select the needed files from the Select File drop-down menu.
  9. 点击提交
  10. Once the strings are added to Crowdin, you’ll see a summary of the content sent.

Added strings will be transferred to your Crowdin project and also displayed in the Strings tab’s list. You can edit, hide, or delete the strings from the same list anytime. 相应的更改也将应用于您的 Crowdin 项目中的字符串。

添加复数形式的源字符串

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

  1. 打开 Figma 的 Crowdin 插件。
  2. 要添加设计中使用的字符串,请选择整个框架、多个框架或框架上所需的字符串。
  3. 字符串选项卡中,单击
  4. 在出现的对话框中,填写所需字段。 You can filter the displayed strings if needed.
    Note: When adding plural strings, the fields in the String column serve for adding the other plural form.
  5. Click toward the needed string and click Add plurals.
  6. In the appeared dialog, fill in the fields for each plural form and click Save. 根据所连接的 Crowdin 项目的源语言,您可能应该指定不同数量的复数形式。
    注意:您只能将复数字符串添加到支持复数形式的文件(例如 Android XML、Stringsdict、XLIFF 等)。
  7. Once all the needed strings are selected and configured, click Next.
  8. In the next dialog page, select the preferred options.
  9. Select the file in Crowdin to which you want to add the strings.
  10. 点击提交

Read more about Plural Forms.

配置 ICU 源字符串占位符

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

Once you use the needed ICU string from Crowdin in your design, you can configure its placeholder values.

  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. Click Submit to update the source string text in designs.

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

键命名模式设置

To simplify adding strings from Figma to the Crowdin project, you can set up the desired key naming pattern for the source string identifiers in the plugin settings. Figma 的 Crowdin 插件将根据所选模式建议新字符串的字符串标识符。 添加新的源字符串时,您始终可以将建议的标识符编辑为首选外观。

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

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

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

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

When adding source strings used in the designs, make sure to keep Send screenshots selected. As a result, the Crowdin plugin for Figma will upload screenshots along with the source strings.

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

Additionally, you can mass upload screenshots to Crowdin for strings linked with text fields in designs.

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

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

预览字符串

Preview translations from Crowdin for the strings used in the designs in 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. In the Strings > Preview Strings section, select Preview in duplicated page or Preview in the current page.
  3. 选择使用语言创建
  4. Select the target language you want to preview translations for (optionally, you can select the preferred plural forms). 您还可以选择所有语言
  5. 选择您想要在 Figma 中预览的内容。 选择 所有框架选定框架Figma 插件预览字符串

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

  1. 打开 Figma 的 Crowdin 插件。
  2. In the Strings > Preview Strings section, select Preview in duplicated page.
  3. 选择使用键名称创建
  4. 选择您想要在 Figma 中预览的内容。 选择 所有框架选定框架Figma 插件预览键

字符串筛选

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

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

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

营销视图本地化

使用页​​面选项卡本地化静态页面,例如小册子和横幅。 In this tab, you can send texts with context for translators to Crowdin and upload translated copies back to Figma.

向 Crowdin 发送译文

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

In Crowdin, a root folder figma-plugin will be created. 它将包含一个以 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 部分,选择您要翻译的内容。 选择 所有框架选定框架Figma 插件发送文本

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

详细了解翻译策略

伪本地化

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

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

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

详细了解伪本地化

Uploading Translations from Crowdin to Figma

You can synchronize texts between Figma and Crowdin projects whenever you want to test the translated copy inside Figma or generate multilingual assets.

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

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

    Figma 插件上传翻译

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

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

本文是否有帮助?