集成

Figma (Strings)

文本由 Phrase Language AI 从英语机器翻译而得。

可用于

  • 所有付费套餐

可用于

  • Advanced 和 Enterprise 套餐(原)

关于许可问题,请联系销售团队

提示

有关 Phrase TMS 中 Figma 集成的信息,请参阅 Figma (TMS)

Figma 插件允许将设计内容与 Phrase 项目集成,从而弥合产品设计团队与本地化团队之间的差距。该插件支持在 Figma 和 Phrase Strings 之间推送内容、拉取翻译以及管理键。

  • 支持 分支

  • 需要具备至少一个项目和一个语言的译员用户访问权限。可以通过由 管理员或项目经理 发送的 邀请 来获得访问权限。

  • 该插件将发送非子元素的自动布局框架的截图。

  • 默认情况下,隐藏的文本图层不包含在集成中。可以在设置 Setup_gear.png 中通过选择 Include hidden layers or frames in selection 进行更改。

  • 默认情况下,插件中选定的标记会在推送过程后清空。可以在设置 Setup_gear.png 中通过禁用 Clear tags after push 选项进行更改。

  • 对插件默认设置 Setup_gear.png 所做的任何更改都将保存并保持持久。

安装并连接 Figma 插件

要运行插件,请从 Figma 的插件浏览器内或 Figma Community 中选择它,然后点击 Try it out。该插件将在 Figma Plugins 菜单中可用。

从 Figma 到 Phrase 的连接可以使用 Phrase 凭据、访问令牌 或单点登录 (SSO) 来建立。

使用 SSO 登录:

  1. 在插件登录屏幕上,选择 Sign in with SSO

  2. 输入公司 ID。

  3. 在打开的浏览器选项卡中完成登录。

    返回插件,此时已完成身份验证。

建立连接后,选择一个框架即可加载 Figma 内容和键的预览,用户可以将这些内容和键推送到 Phrase Strings 或从中拉取。

连接键 选项卡允许将 Figma 图层连接到 Strings 项目中已存在的键。如果图层和键的命名约定相同,则它们可以自动匹配。

该插件可通过 Figma 侧边栏中的专用按钮访问:

  • Phrase Strings

    点击以打开插件。

  • 在 Strings 中查看文本

    显示在连接到 Strings 项目的 Figma 文件中。点击以在翻译编辑器中打开相关项目。

推送内容

推送内容到 Phrase 选项卡允许将 Figma 中的框架或文本图层发送到 Phrase Strings 进行本地化。无法将内容推送到受保护的主分支。

选择项目、分支(如果正在使用)以及要推送内容的语言。(可选)输入要添加到已上传键的自定义标签

空键名或重复键名会在内容列中以红色计数器标记。要管理较长的键名列表,请使用排序方式 Sort Filter下拉菜单来显示先显示不完整的键名先显示重复的键名

注释

所选的排序选项将被记住以供后续会话使用。

如果键名输入为空、包含无效字符,或者在选择了受保护的主分支时键名不唯一,则推送到 Phrase 按钮将被禁用。

选择使用键名工作设置以编辑键名输入并解决任何命名冲突。如果需要,选择所需的键,然后点击表格顶部的 排除图层,以从插件中移除这些图层。

如果有断开连接的图层且键名冲突,请选择以下可用解决方案之一以继续:

  • 在 Phrase Strings 中创建键副本

    创建带有 -copy 后缀的新键。

  • 与现有键关联

    将图层链接到现有的 Phrase 键。

  • 不推送冲突的键

    仅推送无冲突的图层。

当启用 上传 Figma 预览 选项时:

  • 用户可以选择要在 Figma 预览中包含哪些译文语言。如果未选择任何语言,则默认包含所有语言。

  • 插件会为推送中包含的每个根框架(或顶级组件)创建一个工作。推送包含许多顶级框架的整个 Figma 页面将生成相应数量的工作。为了使工作数量与实际翻译工作范围成比例,请在推送前仅选择包含新内容或更新内容的特定框架。

如果图层成功推送到 Strings,系统会显示 推送完成 窗口,其中包含摘要和以下选项:

  • 创建 工作

    点击以打开 创建工作 页面,并预先选择已推送的键。

    重要

    如果启用了 上传 Figma 预览 选项,系统会在 Strings 中自动创建一个工作。一旦启用,此选项将无法禁用。

  • 在 Strings 中打开

    点击以在 Strings Editor 中查看已推送的键。

在推送内容后,Strings 中名称已更改的键旁边会出现一个黄色警告图标 Warning。要在 Figma 插件中更新键名称,请从不匹配的键名称旁边的省略号 More Menu 菜单中选择 Sync key name

推送选项和操作

点击 View options More Menu 菜单,根据需要切换以下推送选项的开关:

  • Upload screenshots 默认处于启用状态。它允许附加框架内所选图层的截图:

    • 如果启用了 Include hidden layers or frames in selection 设置,通过 Figma 插件导入的隐藏文本图层将在截图的左上角放置一个标记。

    • 当启用了 Exclude sections from screenshots 设置时,将不会创建 Figma 部分的截图。

      如果在使用插件处理部分内容时遇到性能问题,建议保持此选项启用。

    • 启用 Capture only the closest screenshot 可将每个截图的范围限定为文本图层周围最近的包含框架、组件、实例或部分,而不是最外层的顶级祖先。该容器内的所有文本图层都会收到标记,包括当前选择范围之外的图层。

      此选项默认处于关闭状态。当 Exclude sections from screenshots 无法充分将捕获限制在特定的嵌套框架内,导致截图过大且上下文信息不足时,请使用此选项。

  • Update content in Phrase Strings 默认处于启用状态。

  • Update key names in Phrase Strings 默认处于启用状态,除非 Work with key names in Figma 设置已禁用。

    关闭此选项会重置所有键名称输入。

  • 启用 Upload Figma preview 以从所选键导出 HTML 包。

    在处理从 Strings jobs synced 的内容时,此选项是生成 TMS CAT Editor 中 in-context preview 的必要条件。

    用户可以在推送内容时选择要在 Figma 预览中包含哪些译文语言。如果未选择任何语言,则默认包含所有语言。

    如果预览生成成功,Strings 中会自动创建一个工作。Strings 项目中的任何可用的 工作自动化 都将被跳过,以避免重复工作。

    如果预览超过 10 MB 的限制,键仍会被推送到 Strings,但不会创建带有预览的工作。

    注释

    要在 Strings Editor 中使用 Figma 预览,请使用 上下文侧边栏 中的 添加 Figma 预览 操作。

  • 启用 保留内容格式和样式,以便在将内容从 Figma 推送到 Phrase 并拉回翻译时保留富文本格式(例如列表、换行符、粗体/斜体和链接)。

    如果启用,系统会自动添加 HTML 标记以保留内联样式,并且在处理从 Strings 同步的工作 时,TMS 上下文预览中支持这些标记。HTML 标记会显示在 Strings Editor 中,并出现在拉回 Figma 的导出翻译中。

    如果不需要富文本格式,请禁用此选项以避免手动调整。

    此设置适用于文件级别,并影响在该文件中工作的所有协作者。此选项会被新文件记住。

对于 已连接的图层,相关省略号 More Menu 菜单中提供以下操作:

  • 选择 查看键详情 以查看/编辑 Phrase Strings 中的键描述,或为该键设置字符限制。在 键详情 窗口中保存的任何更改,在刷新编辑器页面后都会显示在 Strings Editor 侧边栏 中。

    提示

    将内容推送到 Phrase 选项卡中选择多个键,并使用批量操作 设置字符限制 为所有选定的键一次性设置字符限制。

  • 选择 在编辑器中打开键 以导航至 Strings Editor 中的相关键。

  • 选择 断开与 Phrase Strings 的内容连接 以断开图层与现有键的连接。

管理重复内容

推送内容时,具有重复内容的图层会在 Strings 中生成多个包含完全相同文本的键。用户可以在 将内容推送到 Phrase 窗口中决定如何管理此重复内容:

  • 如果创建具有重复内容的多个键是预期的,请选择 不合并直接继续

  • 要将一些重复内容合并为一个键,请按照以下步骤操作:

    1. 从列表选择两个或多个键,然后点击Merge 合并到键...

      将显示一个包含可用合并键的下拉菜单。

    2. 选择要将重复内容合并到的键。

      所选键在将内容推送到 Phrase窗口中会标记有蓝色合并图标Merge to a Key

    3. 点击继续,然后在合并重复内容弹出窗口中选择合并并推送进行确认。

      重复内容被合并为一个键,所有关联图层都连接到该键。

  • 要将部分或全部重复内容合并到列表中的第一个键,请按照以下步骤操作:

    1. 从列表选择多个或所有键,然后点击Merge 将所有重复项合并到第一个键

    2. 点击继续,然后在合并重复内容弹出窗口中选择合并并推送进行确认。

      重复内容被合并为一个键,所有关联图层都连接到该键。

    此选项适用于包含许多重复项的大型文件,允许用户一次性将所有重复项合并到找到的第一个键中,而无需单独处理每一个。

自动排除图层

自动排除图层设置会根据名称前缀从将内容推送到 Phrase选项卡中移除文本图层。启用后,任何以_.为前缀的图层都会被自动排除。

该设置默认关闭,并按文件应用。它将对该文件中的所有命名图层生效,直到被关闭。

排除项在不同选择中保持不变。对于组件,如果组件的图层带有前缀且启用了自动排除图层,则使用该组件的下游设计将继承此排除设置。

要从推送中自动排除带前缀的图层:

  1. 在 Figma 中,为要排除的文本图层添加_.前缀。这也可以批量完成。

  2. 打开 插件设置 并启用 自动排除图层

配置键命名

插件设置中的 键命名 部分 Setup_gear.png 允许为连接的键设置命名约定。

要在 Figma 中自定义键名,请按照以下步骤操作:

  1. 键命名 设置中点击 启用智能键命名

  2. 选择 在 Figma 中使用键名

    注释

    如果启用了 将文本图层名称与键同步,则会根据文本图层名称自动生成键名。

  3. 键名生成 字段中,输入文本以定义自定义键命名:

    • (可选)点击 可用宏 以选择 支持的宏 之一,从而自动生成键名。

      可以选择多个宏来组成键名。

    • 可以在 键名生成 字段中组合自由文本和宏。

      点击 示例 以显示并选择预定义的示例之一。

  4. 如果需要,从 格式约定 下拉菜单中选择一个格式选项,以相应地修改文本并移除空格。

推送内容 到 Phrase Strings 时,通过以下任一方式将新创建的命名约定应用于先前连接的键:

  • 点击表格底部的刷新 Refresh List 图标。

  • 选择特定键并点击表格顶部的 重新生成键名

可用宏

说明

{file_name}

Figma 文件的名称

{page}

识别出键的 Figma 页面

{parent_section}

页面树中的最高层级部分

{nearest_section}

页面树中距离文本图层最近的部分

{frame}

识别出键的框架

{parent_group}

页面树中的最高层级组

{nearest_group}

页面树中距离文本图层最近的组

{component}

键所在的 Figma 组件名称。仅考虑源组件。

{element_name}

文本图层的名称

{element_content}

来自文本图层的内容

{random}

随机生成的唯一短哈希值

连接或断开键

推送内容时,用户可以将图层连接到 Phrase Strings 中的现有键,或生成新键。

选择 Connect keys 选项卡以显示已连接和未连接键的概览。

已连接的键在 Key name 列中通过链接 Connected Key 图标标识。如有必要,请选择项目、分支(如果正在使用)和语言,或点击搜索图标以查找所需内容。

选择 Connect keys 以批量连接选项卡中所有未链接的键。要连接或断开单个键,请点击相应条目右侧的相关图标。

注释

断开单个键的选项也可在 Push content to Phrase 选项卡中找到。

新连接视图(测试版)

新视图在单个表格中列出了当前选择中的文本图层及其连接状态,取代了之前基于键的列表。

注释

在启用测试版之前重启插件,以确保加载的是最新版本。

若要启用 新连接视图

  1. 打开插件并点击 设置 图标。

  2. 插件设置 下,启用 使用新连接视图 (Beta)

  3. 打开 连接键 以查看已连接内容的列表。

之前的连接视图仍然可用。在插件设置中禁用 使用新连接视图 以恢复。

若要连接单个图层,请选择它以打开一个包含两个选项卡的窗口:

  • 建议:显示名称完全匹配的键以及翻译内容匹配的键。

  • 搜索:按名称或内容搜索所有键。

若要对多个图层执行操作,请选择它们以显示批量操作栏:

  • 按键名连接:将图层连接到名称完全匹配的键。

  • 按内容连接:将图层连接到翻译内容匹配的键。

  • 断开图层连接:移除所选图层的连接。

跳过具有多个匹配键的图层

跳过具有多个匹配键的图层开关控制 按内容连接 如何处理文本匹配多个键的图层。

若要启用该开关:

  1. 打开插件并转到 连接 选项卡。

  2. 点击导航中的 More Menu 以打开视图选项。

  3. 启用 跳过具有多个匹配键的图层

启用后,任何匹配多个键的图层在 按内容连接 时都会被跳过,并保持未连接状态以供手动检查。

操作后摘要

在每次按内容连接或按键名连接的批量运行后,结果窗口会显示结果:

  • 已连接数量

  • 已跳过—未找到匹配项

  • 已跳过—存在多个匹配项(当“跳过具有多个匹配键的图层”开启时显示)

点击 显示未连接的图层 以筛选表格中仍需处理的图层,或点击 完成 以关闭结果窗口。

拉取翻译

翻译完成后,选择要拉取翻译的 Figma 图层或框架,然后点击 将内容拉取到 Figma 选项卡。

用户可以选择项目、分支(如果正在使用)以及要拉取内容的语言。标记无法拉取回 Figma。

要管理较长的键名列表,请使用 排序方式 Sort Filter 下拉菜单来显示 先显示未完成的键名 并解决任何潜在问题。如果需要,请选择特定的键并点击表格顶部的 排除图层,以从插件中移除这些图层。

注释

所选的排序选项将被记住以供后续会话使用。

点击 视图选项 More Menu 菜单以选择如何在 Figma 中显示拉取的内容:

  • 为每种语言创建一个新页面

    默认选中。当为多种语言拉取内容时,会为每种选定的语言创建一个单独的 Figma 页面,其中包含来自该页面的所有图层。

  • 创建一个包含所有语言的单一页面

    创建一个新的单一页面,并将选定的翻译内容并排放置在特定语言的列中。此选项仅关注可用的选择,而不是复制整个 Figma 页面。

    建议用于大型文件,以提高拉取性能并减小不必要的文件大小。

  • 用翻译覆盖文本图层

    所选文本图层将被翻译覆盖,并在视口中更新。

    拉取多种语言时,此选项会自动禁用。

  • 显示键名而不是内容

    默认禁用。启用后:

    • 拉取并显示键名,而不是翻译后的内容。

    • 无法再为拉取的内容选择语言。

  • 预览所选语言的内容

    此设置将在以后的会话中被记住。

    • 如果禁用,内容列将直接显示所选图层的内容。

    • 如果启用,内容列将显示已连接图层中所选语言的内容预览。

      • 对于未连接的图层,请启用与现有键连接选项以显示所选语言的预览。如果拉取的数据中存在同名键,则该键的内容将用作预览。

    拉取多种语言时,此选项会自动禁用。

  • 与现有键关联

    控制在 Figma 中拉取数据时如何处理未连接的图层。此设置将在以后的会话中被记住。

    • 如果启用,系统将检查拉取的数据中是否存在同名键。

      如果找到匹配项:

      • 未连接的图层将与匹配的键连接。

      • 图层内容会根据从现有键中拉取的内容进行更新。

    • 如果禁用,即使拉取的数据中存在匹配的键,已断开连接的图层也不会更新。

检查译后状态

“检查译后状态”功能可在将内容拉取到 Figma 之前,验证当前选定内容中的文本图层是否已有所选译文语言的译文。该检查针对选定内容中所有已连接的键运行。

检查译后状态的方法

  1. 将内容拉取到 Figma 选项卡中,选择要检查的译文语言。

  2. 点击 检查译文 状态。

    译后状态 页面会显示当前选定内容中每种语言的已翻译、部分翻译和未翻译键的数量。

    点击语言旁边的 查看详情,即可打开该语言的已连接键明细。使用 全部已翻译未翻译 筛选器来缩小列表范围。

如果内容成功拉取到 Figma,系统会显示 拉取完成 窗口,其中包含已更新图层的摘要。

当为多种语言拉取内容时,在编辑器中打开键 按钮会以项目的默认语言作为原文/源语打开该键。

Figma Buzz

Figma Buzz 是一款工具,品牌设计师和营销团队可以直接在 Figma 生态系统中大规模创建符合品牌形象的视觉资产。它包含一套模板、一个简化的设计编辑器、资产批量创建以及 AI 驱动的编辑功能。

用于 Buzz 的 Phrase Strings 插件允许直接在 Buzz 内本地化文本内容,提供与 Figma 设计集成相同的功能:

注释

不支持实时预览。

该插件可从 Buzz 的 插件 菜单中获取。激活后,它可以保存以供将来使用,并通过在 Figma Buzz 侧边栏的模态窗口中打开它,在选定的设计上运行。文本图层会自动检测并显示在插件中。

然后可以将设计内容推送到关联的 Strings 项目进行翻译。翻译完成后,用户可以将本地化内容拉回 Buzz,这会创建一个包含设计译文的新行。

在 Buzz 中,上传 Figma 预览 开关和推送键之前的译文语言选择不可用。从 Buzz 推送键时,会自动使用 Strings 项目中配置的所有译文语言。

这篇文章有帮助吗?

Sorry about that! In what way was it not helpful?

The article didn’t address my problem.
I couldn’t understand the article.
The feature doesn’t do what I need.
Other reason.

Note that feedback is provided anonymously so we aren't able to reply to questions.
If you'd like to ask a question, submit a request to our Support team.
Thank you for your feedback.