一种基于figma的前端国际化多语言转换方法及系统技术方案

本发明专利技术公开了一种基于figma的前端国际化多语言转换方法及系统，接收figma插件于设计图页面中收集的文本信息，将接收到的文本信息与设计图网页绑定，提供可视化编辑文案界面，根据文案被翻译或增删修改的情况作出通知，接收figma插件的页面文本信息更新请求，传送更新后的相应文本信息至figma插件用以更新设计图，从figma插件获取最新文本信息，提供可视化查询文案界面用以重新编译代码，与多语言组件建立长连接或短连接，将最新文本信息数据推送多语言组件用以更新语言包、解析语言包并进行多语言的切换，可以实现设计师的批量上传文案，产品经理在线调整文案，技术人员直接开发页面，实现多语言文案数据的快速交换，提高工作效率。作效率。作效率。

【技术实现步骤摘要】
一种基于figma的前端国际化多语言转换方法及系统


[0001]本专利技术涉及互联网通讯领域，特别是涉及一种基于figma的前端国际化多语言转换方法及一种基于figma的前端国际化多语言转换系统。

技术介绍

[0002]网页多语言化是网页应用走向国际市场的第一步，也是最基本的需求。目前最常用的解决思路是技术人员在按照设计图进行页面开发时，需要手动将页面用到的文案按key
‑
value的格式以及一种语言一个文件的方式登记在本地，然后再誊抄一份给产品经理翻译，待翻译后再逐个语言逐个词条地更新到本地文件，然后设计师再手动更新自己的设计图，以保持设计和开发的一致性。代码运行时会根据语言环境加载对应的语言包然后展示在页面上。
[0003]然而现有的方法存在很多弊端，其中就包括当产品经理对文案有调整时，技术人员就不得不对每个语言包文件的内容进行调整，若修改内容很多且频繁，语言类型亦很多的情况下，会对技术人员造成不少的负担，同时为了保证开发和设计的一致性，设计师也不得不频繁更新设计稿，这样会很大程度降低工作效率。其次，项目打包时会将多语言文件和前端代码包打包在一起，当语言类型过多和语言包过大时，编译产物的体积会很大，会直接导致用户浏览器加载变慢，严重影响用户体验。
[0004]尽管现在市场上也有几种优化方案，例如使用webpack工具，在项目编译阶段自动采集文案信息并上报，让产品经理进行在线翻译，但在实际场景中代码写法太多，很多情况下都是工具无法识别的，进而导致效率低下。另外，还存在一种方案是文案由统一的文案平台维护，设计师和技术人员直接从文案平台导出项目用到的文案，但实际上同一段中文在网页不同的地方往往有不同的翻译，这就导致技术人员在选择文案上会存在很大的疑惑，同时，产品经理在录入文案时也会存在遗漏问题。因此，亟需一种大幅度提升文案采集、调整准确性和高效性、以及降低编译产物的网页多语言转换技术。

技术实现思路

[0005]为克服上述现有技术存在的不足，本专利技术之目的在于提供一种基于figma的前端国际化多语言转换方法及系统，以大幅度提升文案采集的便捷性、文案调整的准确性和高效性，并显著降低编译产物。
[0006]为达上述目的，本专利技术提出一种基于figma的前端国际化多语言转换方法，包括以下步骤：接收figma插件于设计图页面中收集的文本信息，包括上次提交的设计图的文本信息和最新设计图的文本信息；将接收到的文本信息与设计图网页绑定，提供可视化编辑文案界面，根据文案被翻译或增删修改的情况作出通知；接收figma插件的页面文本信息更新请求，传送更新后的相应文本信息至figma插
件用以更新设计图；从figma插件获取最新文本信息，提供可视化查询文案界面用以重新编译代码；与多语言组件建立长连接或短连接，将最新文本信息数据推送多语言组件用以更新本地语言包、解析语言包并进行多语言的切换。
[0007]作为本专利技术的进一步优化，所述文本信息为设计图页面中所有非隐藏的文字节点和文字节点对应的内容，所述一个文字节点对应一句文案，或者对应按照回车拆分或/和按照字体样式拆分的子文案。
[0008]作为本专利技术的进一步优化，所述文案和子文案均包含一个作为文案唯一标识的自增文案ID，所述文案ID与文字节点绑定，用以将设计图页面所用文案信息与figma插件本地上一次提交信息作对比，筛选出有修改的文案，根据文案ID与文字节点的绑定关系更新对应文字节点的内容。
[0009]作为本专利技术的进一步优化，所述根据文案情况作出通知进一步具体为：对待翻译的文案通知翻译，并调取翻译工具API接口获取翻译结果；对增删修改的文案通知更新设计图，并通知重新编译代码。
[0010]作为本专利技术的进一步优化，与多语言组件建立长连接发生于项目启动后，进一步具体为：与多语言组件的第一组件建立长连接，自动与第一组件连接并传输最新数据，最新数据被按照语言类型分文件并以key
‑
value的格式保存为置于静态资源目录下的json文件；于文案变动时，自动推送最新数据至所述第一组件。
[0011]作为本专利技术的进一步优化，与多语言组件建立短连接发生于项目编译后，进一步具体为：与多语言组件的第二组件建立短连接，自动与多语言组件连接并传输最新数据，最新数据按照语言类型分文件并以key
‑
value的格式保存为置于静态资源目录下的json文件。
[0012]作为本专利技术的进一步优化，解析语言包还包括以下步骤：多语言组件的第三组件根据当前语言环境请求对应的语言包静态资源文件，并将获取到的数据置于window对象中以便三个javascript函数使用。
[0013]作为本专利技术的进一步优化，多语言的切换通过多语言组件的第四组件提供三个javascript函数进行，进一步包括以下步骤：第一javascript函数从window对象中根据文案的名称获取对应内容，入参为文案的名称，出参则为文案内容；第二javascript函数获取当前语言类型，无入参，出参为当前语言类型，内容是统一的语系/地区码；第三javascript函数切换当前语言类型，入参为要切换的语言类型，无出参，切换后执行jsvascript的window.reload函数实现页面重加载，触发多语言组件的第三组件重新加载文案信息至window对象中。
[0014]为达上述目的，本专利技术还提出一种基于figma的前端国际化多语言转换系统，包括：figma插件，用以从设计图页面采集文本信息，将文本信息上传至文案管理平台，
请求文案管理平台发送更新后的文案，从文案管理平台下载更改后的文本信息，更新本地文本信息；文案管理平台，用以接收figma插件发送的文本信息，接收figma插件更新文本信息请求，向figma插件和多语言组件发送最新数据，提供可视化编辑文案界面和可视化查询文案界面，根据文案被翻译或增删修改的情况作出通知；多语言组件，用以与文案管理平台建立长连接或短连接，获取或接受文案管理平台的最近数据，解析语言包并进行多语言的切换。
[0015]作为本专利技术的进一步优化，所述多语言组件包括第一组件、第二组件、第三组件和第四组件；所述第一组件设于项目启用脚本，用以与所述文案管理平台建立长连接，自动连接并传输最新数据，文案变动时自动推送最新数据至所述第一组件；所述第二组件设于项目编译脚本，用以与所述文案管理平台建立短连接，自动连接并传输最新数据；所述最新数据按照语言类型分文件并以key
‑
value的格式保存为置于静态资源目录下的json文件；所述第三组件用以根据当前语言环境请求对应的语言包静态资源文件，并将获取到的数据置于window对象中，所述第四组件包括三个javascript函数，用以获取文案内容、获取语言类型和切换语言类型，实现多语言切换。
[0016]与现有技术相比，本专利技术一种基于figma的前端国际化多语言转换方法及系统，本专利技术公开的一个方面带来的有益效果为：（1）设计师在完成网页设计后可以一键批本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于figma的前端国际化多语言转换方法，包括以下步骤：接收figma插件于设计图页面中收集的文本信息，包括上次提交的设计图的文本信息和最新设计图的文本信息；将接收到的文本信息与设计图网页绑定，提供可视化编辑文案界面，根据文案被翻译或增删修改的情况作出通知；接收figma插件的页面文本信息更新请求，传送更新后的相应文本信息至figma插件用以更新设计图；从figma插件获取最新文本信息，提供可视化查询文案界面用以重新编译代码；与多语言组件建立长连接或短连接，将最新文本信息数据推送多语言组件用以更新本地语言包、解析语言包并进行多语言的切换。2.如权利要求1所述的一种基于figma的前端国际化多语言转换方法，其特征在于，所述文本信息为设计图页面中所有非隐藏的文字节点和文字节点对应的内容，所述一个文字节点对应一句文案，或者对应按照回车拆分或/和按照字体样式拆分的子文案。3.如权利要求2所述的一种基于figma的前端国际化多语言转换方法，其特征在于：所述文案和子文案均包含一个作为文案唯一标识的自增文案ID，所述文案ID与文字节点绑定，用以将设计图页面所用文案信息与figma插件本地上一次提交信息作对比，筛选出有修改的文案，根据文案ID与文字节点的绑定关系更新对应文字节点的内容。4.如权利要求3所述的一种基于figma的前端国际化多语言转换方法，其特征在于，所述根据文案情况作出通知进一步具体为：对待翻译的文案通知翻译，并调取翻译工具API接口获取翻译结果；对增删修改的文案通知更新设计图，并通知重新编译代码。5.如权利要求4所述的一种基于figma的前端国际化多语言转换方法，其特征在于，与多语言组件建立长连接发生于项目启动后，进一步具体为：与多语言组件的第一组件建立长连接，自动与第一组件连接并传输最新数据，最新数据被按照语言类型分文件并以key
‑
value的格式保存为置于静态资源目录下的json文件；于文案变动时，自动推送最新数据至所述第一组件。6.如权利要求5所述的一种基于figma的前端国际化多语言转换方法，其特征在于：与多语言组件建立短连接发生于项目编译后，进一步具体为：与多语言组件的第二组件建立短连接，自动与多语言组件连接并传输最新数据，最新数据按照语言类型分文件并以key
‑
value的格式保存为置于静态资源目录下的json文件。7.如权利要求6所述的一种基于figma的前端国...

【专利技术属性】
技术研发人员：吕承通，周津，周小明，杨旭，徐子尧，刘召阳，
申请(专利权)人：数数信息科技上海有限公司，
类型：发明
国别省市：