一种将设计稿转化为代码的方法、装置、设备及介质，该转化为代码的方法包括如下步骤：在设计稿对应的设计软件的插件中设定统一标准的design Token，基于标准统一的design Token制作标准化的车载系统页面；其中，对每个标准化的车载系统页面的设计元素引用统一标准的design Token；基于JavaScript运行环境Node.js下配置的解析规则，通过自动化工具将Json文件转化为java格式进行代码编写，将design Token转化为Json文件；标准化的车载系统页面变更设计元素，更新design Token，转化更新的Json文件得到对应的代码。本申请通过对不同屏幕进行自动化批量创建文件，根据不同屏幕分辨率基于一定比例对各项Token值调整进行改进，提高了工作效率，避免了创建文件中内容的遗漏和差错，实现了多平台不同屏幕多分辨率的适配。的适配。的适配。
【技术实现步骤摘要】
一种将设计稿转化为代码的方法、装置、设备及介质
[0001]本专利技术属于设计稿转化为代码的
，特别是涉及一种将设计稿转化为代码的方法、装置、设备及介质。
技术介绍
[0002]随着设计系统的发展，设计师在设计系统时会定义很多的样式和组件库来提升设计系统的一致性和效率，但是由于设计项目的复杂性，设计产品的迭代周期性，及反复沟通的信息差等因素，在进行系统设计和设计迭代时，往往设计的整个过程不断进行修改，难以做到快速高效的完成设计稿和代码的转化。
[0003]同时在设计项目的过程中，界面设计经常经多方评审而反复进行修改，多次修改容易造成颜色、文字等设计元素改变，但目前无法集中管理设计中修改的设计元素变量，继而导致在研发阶段在写代码时无法第一时间获取设计中全部设计元素变量的更新，常常导致整个车载系统在设计上设计稿和代码上设计元素变量的不一致。
[0004]鉴于目前设计系统中设计稿管理存在的缺陷，对解决现有设计系统无法集中管理设计中修改的设计元素变量，在第一时间获取设计中全部设计元素变量的更新，导致整个车载系统设计稿和代码设计元素变量不一致的需求就显得尤其重要。
技术实现思路
[0005]本专利技术提供一种将设计稿转化为代码的方法、装置、设备及介质，以解决现有设计系统无法集中管理设计中修改的设计元素变量，以增强设计中全部设计元素变量统一的更新效率，保证整个车载系统设计稿和代码设计元素变量的一致性。
[0006]本专利技术的目的及解决其技术问题是采用以下技术方案来实现的。
[0007]本专利技术一方面提供一种将设计稿转化为代码的方法，在车载系统中应用封装的视觉样式参数design Token，包括：
[0008]在设计稿对应的设计软件插件中设定统一标准的design Token，基于标准统一的design Token制作标准化的车载系统页面；其中，对每个标准化的车载系统页面的设计元素引用统一标准的design Token；
[0009]基于JavaScript运行环境Node.js下配置的解析规则，通过自动化工具将Json文件转化为java格式进行代码编写，将design Token转化为Json文件；
[0010]标准化的车载系统页面变更所述设计元素，更新design Token，转化更新的Json文件得到对应的代码。
[0011]可选的，封装的视觉样式参数design Token为与统一标准封装的视觉样式对应的值或名称。
[0012]可选的，对每个标准化的车载系统页面的设计元素设计标注的颜色和文字引用统一标准的design Token包括：
[0013]在车载界面设计中，调用统一标准的design Token，制作标准化的车载系统页面
中使用的所述设计元素；
[0014]其中，封装的视觉样式参数design Token包括标准化的车载系统页面的界面中用到的所述设计元素；所述设计元素包括文字和颜色。
[0015]可选的，在设计软件的插件中设定统一标准的design Token，基于标准统一的design Token制作标准化的车载系统页面包括：
[0016]在界面设计中提炼出具有通用性设计样式的设计元素；
[0017]整理所述设计元素及所述设计元素对应的Token值；
[0018]将整理的具有通用性设计样式的所述设计元素上传至设计插件figma Token中得到所述设计元素对应的design Token；
[0019]基于所述设计元素对应的标准统一的design Token制作标准化的车载系统页面的界面中用到的所述设计元素；
[0020]将所述设计元素应用于标准化的车载系统页面制作完成标准化的车载系统页面。
[0021]可选的，在界面设计中提炼出具有通用性的设计样式的设计元素包括：
[0022]提炼具有通用性的颜色和所述颜色的色彩饱和度、透明度等一系列的梯度色板；
[0023]提炼具有通用性的文字和所述文字的尺寸、间距、圆角、阴影和描边；
[0024]其中，每个所述文字和/或颜色对应一个design Token的名称。
[0025]可选的，通过自动化工具将Json文件转化为java格式进行代码编写，将design Token转化为Json文件包括：
[0026]将设计插件figma Token与代码共享平台github关联；
[0027]在界面设计过程中，设计插件figma Token自动将每个标准化的车载系统页面中设计元素对应的统一标准的design Token转化为Json的格式并上传到github平台；
[0028]在github平台通过拉取操作获取通过所述design Token转化的Json文件。
[0029]可选的，标准化的车载系统页面变更所述设计元素，更新design Token，转化更新的Json文件得到对应的代码包括：
[0030]在标准化的车载系统页面中修改所述设计元素，更新Token对应的value值，更新互相引用和联动的Token值，以及包含Token值的design Token文件；
[0031]更新设计界面中所述设计元素；
[0032]转化更新的Json文件得到对应更新的代码。
[0033]本专利技术另方面提供一种将设计稿转化为代码的装置，该装置包括：
[0034]页面设计单元，用于在设计稿对应的设计软件插件中设定统一标准的design Token，基于标准统一的design Token制作标准化的车载系统页面；其中，对每个标准化的车载系统页面的设计元素引用统一标准的design Token；
[0035]解码转换单元，用于基于JavaScript运行环境Node.js下配置的解析规则，通过自动化工具将Json文件转化为java格式进行代码编写，将design Token转化为Json文件；
[0036]代码更新单元，用于标准化的车载系统页面变更所述设计元素，更新design Token，转化更新的Json文件得到对应的代码。
[0037]本专利技术另方面提供一种电子设备，包括：
[0038]存储器，用于存储非暂时性计算机可读指令；以及
[0039]处理器，用于运行所述计算机可读指令，使得所述计算机可读指令被所述处理器
执行时实现上述所述的方法。
[0040]本专利技术另方面提供一种计算机可读存储介质，包括计算机指令，当所述计算机指令在设备上运行时，使得所述设备执行上述所述的方法。
[0041]本专利技术与现有技术相比具有明显的优点和有益效果。借由上述技术方案，本专利技术至少具有以下优点及有益效果之一：
[0042]一、本专利技术通过在车载系统中应用封装的视觉样式参数design Token，将在设计稿对应的设计软件插件中设定统一标准的design Token，基于标准统一的design Token制作标准化的车载系统页面；本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种将设计稿转化为代码的方法，在车载系统中应用封装的视觉样式参数design Token，其特征在于，包括：在设计稿对应的设计软件插件中设定统一标准的design Token，基于标准统一的design Token制作标准化的车载系统页面；其中，对每个标准化的车载系统页面的设计元素引用统一标准的design Token；基于JavaScript运行环境Node.js下配置的解析规则，通过自动化工具将Json文件转化为java格式进行代码编写，将design Token转化为Json文件；标准化的车载系统页面变更所述设计元素，更新design Token，转化更新的Json文件得到对应的代码。2.根据权利要求1所述的适配方法，其特征在于，封装的视觉样式参数design Token为与统一标准封装的视觉样式对应的值或名称。3.根据权利要求2所述的适配方法，其特征在于，对每个标准化的车载系统页面的设计元素设计标注的颜色和文字引用统一标准的design Token包括：在车载界面设计中，调用统一标准的design Token，制作标准化的车载系统页面中使用的所述设计元素；其中，封装的视觉样式参数design Token包括标准化的车载系统页面的界面中用到的所述设计元素；所述设计元素包括文字和颜色。4.根据权利要求3所述的适配方法，其特征在于，在设计软件的插件中设定统一标准的design Token，基于标准统一的design Token制作标准化的车载系统页面包括：在界面设计中提炼出具有通用性设计样式的设计元素；整理所述设计元素及所述设计元素对应的Token值；将整理的具有通用性设计样式的所述设计元素上传至设计插件figma Token中得到所述设计元素对应的design Token；基于所述设计元素对应的标准统一的design Token制作标准化的车载系统页面的界面中用到的所述设计元素；将所述设计元素应用于标准化的车载系统页面制作完成标准化的车载系统页面。5.根据权利要求4所述的适配方法，其特征在于，在界面设计中提炼出具有通用性的设计样式的设计元素包括：提炼具有通用性的颜色和所述颜色的色彩饱和度、透明度等一系列的梯度色板；提炼具有通用性的文字和所述文字的尺寸、间距、圆角、阴影和...
【专利技术属性】
技术研发人员：史慧，
申请(专利权)人：合众新能源汽车股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。