You need to enable JavaScript to run this app.
导航

Volcano for Figma 插件

最近更新时间2023.02.08 15:16:18

首次发布时间2023.02.06 11:43:55

1. 安装插件

1.1 授权登录

Volcano for Figma 插件支持文案推送和 UI 本地化,插件暂时仅支持在 Figma 客户端使用,且需登录 国际化翻译平台 账号。

在【Resources(资源) - Plugins(插件)】中搜索并找到 Volcano for Figma 插件,添加插件后,首次点击【Run】,需使用国际化翻译平台的账号进行登录。

浏览器登录 国际化翻译平台 账号,前往【个人主页 - API访问密钥】,点击【新建密钥】获取 Access Key ID 和 Secret Access Key,获取后将其复制到 Figma 插件的授权窗口中,点击【授权】即可开始使用插件。

1.2 关联文案项目

为了将文案推送和同步至国际化翻译平台,在首次使用插件之前,需关联你们团队在国际化翻译平台上管理的 APP 或网页产品的文案项目。

打开插件,将自动显示你有管理权限的项目,支持搜索选择进行关联。



若下拉菜单中未找到目标项目,可能是你没有项目的管理权限或未加入项目,可联系项目创建者将你添加为文案项目管理员;添加后回到 Figma,刷新插件即可关联你的项目。下图为在国际化翻译平台中添加为管理员的演示:

1.3 打开插件

完成安装后,打开一个有编辑权限的 Figma 设计稿,点击左上角的 【Resources → Plugin】,搜索“Volcano”即可看到 Volcano for FIgma 已经在插件列表了,点击 Run 即可开始使用插件。
💡 Tips: 仅当对设计稿有编辑权限时才可使用插件哦,若无编辑权限,可将原设计稿复制一份到自己的 Figma 文件中,就拥有编辑权限了。

1.4 退出账号

在插件底部工具栏,可查看帮助手册、退出登录、切换插件使用语言、前往文案项目主页。

2. Figma 推送文案到国际化翻译平台

将 Figma 设计稿中的文案推送到关联的国际化翻译平台文案项目中是 Volcano for Figma 插件的核心能力之一,它节省了团队产品经理和研发人员的文案和截图搬运工作,提升了团队协作效率并可降低由于文案搬运导致的错误率;其次,可前置文案写作和译员的工作流程,为他们预留出更多的时间打磨翻译文案,提高了文案的翻译质量。在设计师完成了设计稿,并确认源文案内容后,即可开始推送流程。

2.1 选择或自定义 Key 命名模式

选择 Key 模式

在插件的「设置」页面可以选择不同的组合方式自动为文本生成 Key,如 %page、%frame 和 element(即图层名)或 content(即文本内容)之间的组合,自动为原文生成 Key,并采用 “_” 链接

自定义 Key 模式,为 Key 添加前缀或后缀

为更好的识别 Key 内容,可自定义 Key 模式,如为 Key 添加前缀或后缀

2.2 确定文案扫描范围

确认文案并准备好 Key 后,打开插件并定位至「推送文案」功能模块,可点击【扫描整页】按钮或选择部分 Frames 或 Text layers 后点击【扫描所选】按钮,即进入文案列表选择页面。
使用Tip: 仅需推送少量文案时,可按住快捷键 ⌘+⇧(Mac 系统)或 Ctrl+⇧ (Windows 系统)更精准的选中要推送的目标文案。

2.3 选择要推送的文案

选择文案 确定扫描范围后,插件将扫描到的所有文本显示为文案内容和 Key,勾选要推送的目标文案后,点击【去推送设置】即可前往下一步。

编辑文案 可点击【编辑文案】按钮(铅笔图标),修改 Key 和文本内容、开启复数开关,并添加其复数源文案内容,默认修改将同步更改文本内容,点击【保存】后编辑生效。

定位文案 点击【定位文案】(靶心图标)按钮,插件将自动使该文案显示在 Figma 中心并呈选中态,可用于核对所选文案的设计稿,明确其是否为目标文案。

从列表移除
如可以确认文本无需推送到平台的文案项目,可在扫描列表或已选文案详情页,点击【从列表移除】按钮(x图标)。

导出为 Json 文件
所选文案支持导出为本地 Json 文件,若存在重复 Key 文本,将自动过滤。

关联新项目或修改 Key 模式
若同一设计稿中的文案属于不同的文案项目,建议分项目完成文案的推送。在文案扫描列表支持修改关联项目。

2.4 推送

推送设置
选择要推送的文案后进入推送设置页面,你可以选择文案上传至一个翻译任务或者空间,设置文案是否上传截图,若是,截图将存储至项目「截图」Tab 下,并自动关联源文案。同时,你也可设置新 Key 是否主动新建和已存在的 Key 是否更新文案,设置完成后点击【推送到国际化翻译平台】开始推送流程。当进度达 100% 后推送完成并进入推送结果页面。


关联截图 启用「上传截图」后,文本的最顶层 Frame/Group 将作为文本的截图范围,推送后自动将截图上传到文案项目并绑定源文案。为了更好的截图效果,建议以实际页面大小作为最顶层 Frame/Group,如为 Iphone 11 Pro输出设计图,则最顶层 frame 尺寸为 375x812,网页设计 Frame 为1440x960,等。Frame 范围过大可能导致截图生成和上传失败。

推送成功 在推送结果页面,可以查看新增的文案数、更新的文案数和上传的截图数量。此时你可以选择点击【打开平台】按钮,浏览器将访问推送的任务或空间文案列表页面,你可以检查文案和截图(若开启)是否上传成功。或者点击【完成】按钮回到插件首页,开启新的推送任务。

2.5 推送失败可修改后重新推送

若推送结果页面显示有推送失败的文案,点击【详情】按钮可进入失败详情页。页面将显示未成功推送的文案列表,点击文案的【编辑按钮】可查看该文案的失败原因,根据提示修改并保存后可重新推送文案。

2.6 平台文案项目更新

推送成功后,关联的文案项目内有以下更新:

  1. 文案列表:推送的任务或空间文案列表将新增或更新源文案及其截图信息;

  1. 项目截图 Tab:将自动存储源文案所在设计稿截图,若多条文案为同一设计稿,将自动关联在一张截图上;

  1. 操作记录:在全局和单条文案的操作记录页面,使用插件产生的记录标识”来自 Figma“;

3. UI 本地化

Volcano for Figma 的第二个主要功能为 UI 本地化,即一键将设计稿显示为特定语言,帮助设计师快速检查多语言的界面效果,避免因为文本的长度、高度、语言方向(如 RTL) 等导致的溢出、截断等不符合预期的界面表现,提高设计输出质量。译文可选择来源于机器翻译或平台的文案项目。

3.1 译文来源于机器翻译

插件默认使用机器翻译文案,适用于未使用国际化翻译平台管理项目、或文案还未完成翻译的情况,机器翻译支持语言丰富、不受限于译文,可帮助设计师快速查看多语言效果;

3.2 译文来源于平台文案项目

插件也可选择来源于国际化翻译平台文案项目的译文,可以在译文翻译完成后使用,将产品的真实译文显示在多语言设计稿,不仅可用于检查多语言效果,也可实现翻译文案的验收和走查。

3.3 置顶语言

机器翻译支持的语言数量较多,或项目目标语言较多时,可将关注的语言置顶,方便快速选择需要的语言。如长语言德语、RTL 语言阿拉伯语等。

3.4 生成新页面,或原页面覆盖

在设置中选择「按语言生成新页面」时,可选择多个多个目标语言,确认后将在原页面下为每个语言生成新页面。若选择「覆盖原页面」,确认后将直接在原设计稿显示为目标语言译文。

4. 更多使用指南

4.1 插件语言

插件目前仅支持简体中文和英语,默认为简体中文,可点击插件右下角切换语言;

4.2 访问火山引擎官网

在插件的使用过程中,可随时点击右下角的 【首页】按钮访问国际化翻译平台官网进入项目查看信息;

4.3 帮助文档

点击插件左下角的【帮助】按钮了解插件的详细信息和操作指南;

4.4 须再次强调的操作 Tips

  • 推送少量文案时,可按住快捷键 ⌘+⇧(Mac 系统)或 Ctrl+⇧ (Windows 系统)更精准的选中要推送的目标文案;

  • 文本图层的最上层 Frame 将作为文案的截图,因此,为了获得最佳的截图效果,建议设计师在一个关键页面之上不要再嵌套上层 Frame。

  • Figma 操作技巧:1. 快捷键 ⌘+/ 搜索”Volcano for Figma“可快速调出插件;2.快捷键 ⌥+⌘+P 连续使用插件;