Code conversion method and device and electronic equipment

Abstract

The embodiment of the invention provides a code conversion method. The code conversion method comprises the following steps: selecting a target node in a graphical design file; generating component information based on the target node; analyzing and reconstructing the component information; and according to the analyzed and reconstructed component information, generating an executable code according to a target code language and a framework, and outputting the executable code. According to the code conversion method provided by the embodiment of the invention, the graphical design file can be automatically converted into the executable code, so that the code development efficiency is improved. The embodiment of the invention further provides a code conversion device and electronic equipment.

Description

Technical Field

[0001] Embodiments of the present application relate to the technical field of computer-aided design and code generation. Specifically, the present application relates to a code conversion method, apparatus, and electronic device. Background Art

[0002] Design To Code is a method or process for converting designs into code. It is commonly used to convert visual or interface designs into front-end code in order to implement the appearance and functionality of the design in a website or application.

[0003] Figma is a leading online collaborative design tool designed specifically for UI / UX designers and teams. As a cloud-based design platform, Figma allows multiple people to jointly edit design files in real time, improving the collaboration efficiency among teams. Whether it is design, prototyping, or sharing, Figma provides a one-stop solution, making it a powerful tool in the field of digital product design.

[0004] In the existing R & D process, developers manually code by viewing Figma design files, which is time-consuming and error-prone in both the coding and inspection processes. Therefore, a design-to-code tool is needed that can automatically convert design files into high-quality code to improve development efficiency. Summary of the Invention

[0005] In view of the problems existing in the above-mentioned prior art, embodiments of the present application provide a code conversion method, apparatus, and electronic device, which can automatically convert graphical design files into executable code, thereby improving code development efficiency.

[0006] In a first aspect, an embodiment of the present application provides a code conversion method, including the following steps:

[0007] Select a target node in the graphical design file;

[0008] Generate component information based on the target node;

[0009] Analyze and reconstruct the component information; and

[0010] Generate and output executable code according to the analyzed and reconstructed component information, the target code language, and the framework.

[0011] Further, the component information includes: component type, component attribute information, component layout information, and composite component information. The generating component information based on the target node includes:

[0012] Generate the component type and the component attribute information based on the selected node and sub-nodes in the graphical design file;

[0013] Identify the component layout information of the component; and

[0014] Analyze the composite component information of the component.

[0015] Further, the generating the component type and the component attribute information includes:[[]]

[0016] Design a component recognition algorithm according to the design specifications; and

[0017] Based on the nodes and sub-nodes in the selected graphical design file, identify the component type and the component attribute information through the component recognition algorithm.

[0018] Further, the identifying the component layout information of the component includes:[[]]

[0019] Design a layout recognition algorithm according to the structural characteristics presented by the component; and

[0020] Through the layout recognition algorithm, identify the component layout information of the component.

[0021] Further, the analyzing and reconstructing the component information includes:[[]]

[0022] Separate and delete redundant components from the component information;

[0023] Analyze and adjust the layout of the component; and

[0024] Simplify the component.

[0025] Further, the generating and outputting executable code according to the analyzed and reconstructed component information according to the target language and framework includes:[[]]

[0026] Obtain a code generator factory; and

[0027] According to the analyzed and reconstructed component information, through the code generator factory, generate and output executable code according to the target language and framework.

[0028] Further, before the target node in the selected graphical design file, it further includes:[[]]

[0029] Identify the target node in the graphical design file.

[0030] In a second aspect, an embodiment of the present application further provides a code conversion device, including:[[]]

[0031] A node selection module, configured to select a target node in a graphical design file;

[0032] A component information generation module, configured to generate component information based on the target node;

[0033] An analysis and reconstruction module, configured to analyze and reconstruct the component information; and

[0034] A code generation module, configured to generate and output executable code according to the analyzed and reconstructed component information, the target code language, and the framework.

[0035] In a third aspect, an embodiment of the present application further provides an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the program, it implements the code conversion method according to the first aspect described above.

[0036] In a fourth aspect, an embodiment of the present application further provides a computer-readable storage medium, on which a computer program is stored. The computer program is used to implement the code conversion method according to the first aspect described above.

[0037] In a fifth aspect, an embodiment of the present application further provides a computer program product, on which a computer program is stored. The computer program is used to implement the code conversion method according to the first aspect described above.

[0038] The embodiments of the present application bring the following beneficial effects:

[0039] In the code conversion method provided by the embodiments of the present application, first, a target node in the graphical design file is selected, then component information is generated based on the target node, and the component information is analyzed and reconstructed. Finally, executable code is generated and output according to the analyzed and reconstructed component information, the target code language, and the framework. The code conversion method provided by the embodiments of the present application can automatically convert a graphical design file into executable code, thereby improving the code development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings required for the description of the embodiments or the prior art. Obviously, the drawings in the following description are only some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on the structures shown in these drawings without creative efforts.

[0041] Figure 1 It is a flowchart of the code conversion method provided by the embodiments of the present application;

[0042] Figure 2 It is a structural diagram of the code conversion device provided by the embodiments of the present application;

[0043] Figure 3 Schematic diagram of the electronic device provided by the embodiment of the present application.

[0044] The realization of the purpose of the present application, functional features and advantages will be further described with reference to the embodiments and the accompanying drawings. Specific embodiments

[0045] The following will clearly and completely describe the technical solutions in the embodiments of the present application with reference to the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all of the embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present application without creative efforts shall fall within the protection scope of the present application.

[0046] In the description and claims of the present application and the above accompanying drawings, the terms "first" and "second" are only used for descriptive purposes and cannot be understood as indicating or implying relative importance or implicitly indicating the quantity of the indicated technical features. Thus, the features defined with "first" and "second" may explicitly or implicitly include one or more of such features. In the description of the present application, unless otherwise specified, the meaning of "a plurality" is two or more. For those of ordinary skill in the art, the specific meanings of the above terms in the present application can be understood according to specific circumstances.

[0047] Refer to Figure 1 , Figure 1 is a flowchart of a code conversion method according to an embodiment of the present application. As Figure 1 shown, the code conversion method of the embodiment of the present application includes the following steps:

[0048] S101: Select a target node in the graphical design file;

[0049] Specifically, before selecting the target node of the graphical design file, it is necessary to parse the structure of the design file, such as the file format of Figma or Sketch. Usually, these tools will export JSON data, which contains information such as layers, styles, and positions. It is necessary to read this data through a parser, for example, and then select the target node in some way (such as user interaction or automatic recognition). Automatic recognition may involve image recognition technology, such as using OpenCV or machine learning models to identify UI elements, such as buttons, input boxes, etc. In addition, the user may want to select nodes manually, so it is necessary to design a user interface that allows the user to select elements by box selection or clicking in the design preview.

[0050] S102: Generate component information based on the target node;

[0051] That is, obtain the component information of the target node, including component type, attributes (such as color, font, size), and layout information (such as position, layer, responsive rules). Component type recognition may require a predefined rule library. For example, determine whether it is a button, card, or form based on the name, style, or sub-element structure of the layer. Attribute information can be directly obtained from the exported data of the design tool, but unit conversion needs to be noted, such as converting pixels to rem or percentages. Layout information may require parsing the coordinates and sizes in the design file and converting them into parameters for relative layout or responsive layout. In addition, it is necessary to process the constraint conditions in the design tool, such as Auto Layout or Constraints, and convert them into CSS Grid, Flexbox, or framework-specific layout code.

[0052] S103: Analyze and reconstruct the component information; and

[0053] Analyzing and reconstructing the component information may include redundancy filtering, such as merging duplicate styles and extracting inline styles into CSS classes; layout optimization, such as simplifying nested layout structures and optimizing the use of Flex or Grid; business component simplification, such as decomposing complex components into smaller, reusable components, or generating code related to state management (such as React's useState or Redux's action).

[0054] S104: Generate and output executable code according to the analyzed and reconstructed component information, based on the target code language and framework.

[0055] This step requires generating the corresponding code structure according to the selected framework (such as React, Vue, Angular) and programming language (such as TypeScript, JavaScript). A template engine may be needed to generate component code and handle JSX, template syntax, etc. At the same time, it is necessary to handle framework-specific functions, such as React's Hooks, Vue's directives, or Angular's dependency injection. In addition, the generated code needs to conform to the code style and specifications of the project, and it may be necessary to integrate Prettier or ESLint for automatic formatting. The maintainability of the code also needs to be considered, such as generating a clear component structure, adding necessary comments or documentation.

[0056] Therefore, in the code conversion method provided by the embodiments of the present application, first, a target node in the graphical design file is selected. Then, based on the target node, component information is generated, and the component information is analyzed and reconstructed. Finally, based on the analyzed and reconstructed component information, executable code is generated and output according to the target code language and framework. The code conversion method provided by the embodiments of the present application can automatically convert a graphical design file into executable code, thereby improving the code development efficiency.

[0057] Further, in some embodiments of the present application, the component information includes: component type, component attribute information, component layout information, and composite component information. The generating component information based on the target node includes:

[0058] Generating the component type and the component attribute information based on the selected node and sub-nodes in the graphical design file;

[0059] Identifying the component layout information of the component; and

[0060] Analyzing the composite component information of the component.

[0061] Specifically, the component type should refer to what type of component it is, such as a button, a text box, etc. The component attribute information may include attributes such as color, size, position, etc. The component layout information may involve the arrangement method of components on the page, such as grid layout, flow layout, etc. The composite component information refers to a complex component composed of multiple sub-components, such as a navigation bar containing multiple buttons and icons.

[0062] Therefore, the generating component information based on the target node includes: generating the component type and the component attribute information based on the selected node and sub-nodes in the graphical design file; identifying the component layout information of the component; and analyzing the composite component information of the component, thereby providing a basis for subsequent code generation. In an embodiment of the present application, the node corresponding to the Figma design file to be identified is selected, and then, for example, a D2C plugin can be run, and the plugin generates component information such as component type, component attribute information, layout information, etc. for the node and all its sub-nodes.

[0063] Further, in some embodiments of the present application, the generating the component type and the component attribute information includes:

[0064] Designing a component recognition algorithm according to the design specifications; and

[0065] Based on the selected node and sub-nodes in the graphical design file, identifying the component type and the component attribute information through the component recognition algorithm.

[0066] That is, the component recognition algorithm needs to be based on design specifications, such as including component standards, naming rules, attribute definitions, etc. in the design system. Then, the nodes in the design file are processed by this algorithm to extract type and attribute information. Through the above settings, the code conversion method provided by the embodiments of the present application can accurately identify the type and attribute information of components, so as to accurately generate code.

[0067] Further, in some embodiments of the present application, the identifying the component layout information of the component includes:

[0068] Designing a layout recognition algorithm according to the structural characteristics presented by the component; and

[0069] Identifying the component layout information of the component through the layout recognition algorithm.

[0070] Specifically, the layout recognition algorithm is a set of algorithms designed according to the structural characteristics presented by the component. The layout recognition algorithm can identify the layout information of the component, support horizontal layout, vertical layout, grid layout, flow layout, etc. Through the above settings, the code conversion method provided by the embodiments of the present application can accurately identify the layout information of the component, so as to accurately generate code.

[0071] Further, in some embodiments of the present application, the analyzing and reconstructing the component information includes:

[0072] Separating and deleting redundant components from the component information;

[0073] Analyzing and adjusting the layout of the component; and

[0074] Simplifying the component.

[0075] Specifically, the hierarchy of nodes in files such as Figma does not match the interface hierarchy. First, redundant components are separated and deleted, which can reduce the complexity of the component structure and the complexity of generating code. Secondly, the layout of the component is analyzed and adjusted, because the layout only describes the layout method of the component, and some special positions cannot be accurately represented, which can accurately generate code in the code generation process. Finally, the business component is simplified, which can reduce the complexity of the code in the code generation process.

[0076] Further, in some embodiments of the present application, the generating and outputting executable code according to the analyzed and reconstructed component information according to the target language and framework includes:

[0077] Obtaining a code generator factory; and

[0078] Generating and outputting executable code according to the analyzed and reconstructed component information through the code generator factory according to the target language and framework.

[0079] Specifically, obtaining the code generator factory is mainly to adapt to generating code for different languages and different component libraries. For example, the D2C tool implements C++ / Qt code generation based on the Filmora product component library.

[0080] Furthermore, in some embodiments of the present application, before selecting the target node in the selected graphical design file, it further includes:

[0081] Identifying the target node in the graphical design file.

[0082] That is, before selecting the target node of the graphical design file, it is necessary to first identify the target node of the graphical design file. For example, for file formats such as Figma or Sketch, usually these tools will export JSON data, which contains information such as layers, styles, and positions. It is necessary to read this data through, for example, a parser, so as to facilitate accurate subsequent component information identification and further facilitate accurate code generation.

[0083] Figure 2 It is a structural block diagram of the code conversion device 200 according to an embodiment of the present application. As Figure 2 shown, the code conversion device 200 according to an embodiment of the present application includes: a node selection module 210, a component information generation module 220, an analysis and reconstruction module 230, and a code generation module 240, where:

[0084] The node selection module 210 is used to select the target node in the graphical design file;

[0085] The component information generation module 220 is used to generate component information based on the target node;

[0086] The analysis and reconstruction module 230 is used to analyze and reconstruct the component information; and

[0087] The code generation module 240 is used to generate and output executable code according to the analyzed and reconstructed component information, according to the target code language and framework.

[0088] In the code conversion device provided by the embodiment of the present application, first, the target node in the graphical design file is selected, then component information is generated based on the target node, and the component information is analyzed and reconstructed. Finally, executable code is generated and output according to the analyzed and reconstructed component information, according to the target code language and framework. The code conversion device provided by the embodiment of the present application can automatically convert the graphical design file into executable code, thereby improving the code development efficiency.

[0089] It should be noted that the specific implementation of the code conversion device in the embodiments of the present application is similar to that of the code conversion method in the embodiments of the present application. For details, please refer to the description in the method section and will not be elaborated here.

[0090] Figure 3 FIG. is a schematic structural diagram of an electronic device 300 according to an embodiment of the present application.

[0091] As Figure 3 shown, the electronic device 300 includes a central processing unit (CPU) 301, which can perform various appropriate actions and processes according to the program stored in the read-only memory (ROM) 302 or the program loaded from the storage section 302 into the random access memory (RAM) 303. In the RAM 303, various programs and data required for the operation of the electronic device 300 are also stored. The CPU 301, ROM 302, and RAM 303 are connected to each other via a bus 304. The input / output (I / O) interface 305 is also connected to the bus 304.

[0092] The following components are connected to the I / O interface 305: an input section 306 including a keyboard, a mouse, etc.; an output section 307 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc. and a speaker, etc.; a storage section 308 including a hard disk, etc.; and a communication section 309 including a network interface card such as a LAN card, a modem, etc. The communication section 309 performs communication processing via a network such as the Internet. The drive 310 is also connected to the I / O interface 305 as required. A removable medium 311, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 310 as required so that a computer program read from it can be installed into the storage section 308 as required.

[0093] Particularly, according to the embodiments of the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present application includes a computer program product, which includes a computer program carried on a machine-readable medium, and the computer program includes program codes for performing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication section 309, and / or installed from the removable medium 311. When the computer program is executed by the central processing unit (CPU) 301, the above functions defined in the electronic device of the present application are executed.

[0094] It should be noted that the computer-readable medium shown in this application can be a computer-readable signal medium, a computer-readable storage medium, or any combination of the two. A computer-readable storage medium can be, for example, but not limited to, an electronic device, apparatus, or device of electricity, magnetism, light, electromagnetic, infrared, or semiconductor, or any combination of the above. More specific examples of the computer-readable storage medium can include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0095] In this application, a computer-readable storage medium can be any tangible medium that contains or stores a program, which can be used by or in conjunction with an instruction-executing electronic device, apparatus, or device. And in this application, a computer-readable signal medium can include a data signal propagated in a baseband or as part of a carrier wave, which carries computer-readable program code. Such a propagated data signal can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. A computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in conjunction with an instruction-executing electronic device, apparatus, or device. The program code contained on the computer-readable medium can be transmitted by any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0096] The flowcharts and block diagrams in the accompanying drawings illustrate the possible architectures, functions, and operations of a processing receiving device, method, and computer program product according to various embodiments of this application. In this regard, each block in the flowchart or block diagram can represent a module, a program segment, or a part of code, and the foregoing module, program segment, or part of code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the blocks may occur in a different order from that marked in the accompanying drawings. For example, two consecutive blocks shown may actually be executed substantially in parallel, and they can sometimes be executed in the reverse order, depending on the functions involved. It should also be noted that each block in the block diagram and / or flowchart, and the combination of blocks in the block diagram and / or flowchart, can be implemented by a dedicated hardware-based electronic device for performing the specified function or operation, or can be implemented by a combination of dedicated hardware and computer instructions.

[0097] The units or modules involved in the embodiments described in this application can be implemented in software or in hardware. The described units or modules can also be provided in a processor, and when the processor executes the program, it implements the code conversion method:

[0098] Select a target node in the graphical design file;

[0099] Generate component information based on the target node;

[0100] Analyze and reconstruct the component information; and

[0101] Generate and output executable code according to the analyzed and reconstructed component information, the target code language, and the framework.

[0102] As another aspect, the present application also provides a computer-readable storage medium, which may be included in the electronic device described in the above embodiments; or may exist alone without being assembled into the electronic device. The above computer-readable storage medium stores one or more programs, and when the foregoing programs are executed by one or more processors, they implement the code conversion method described in this application:

[0103] Select a target node in the graphical design file;

[0104] Generate component information based on the target node;

[0105] Analyze and reconstruct the component information; and

[0106] Generate and output executable code according to the analyzed and reconstructed component information, the target code language, and the framework.

[0107] As another aspect, the present application also provides a computer program product, which may be included in the electronic device described in the above embodiments; or may exist alone without being assembled into the electronic device. The above computer program product stores one or more programs, and when the foregoing programs are executed by one or more processors, they implement the code conversion method described in this application:

[0108] Select a target node in the graphical design file;

[0109] Generate component information based on the target node;

[0110] Analyze and reconstruct the component information; and

[0111] Generate and output executable code according to the analyzed and reconstructed component information, the target code language, and the framework.

[0112] The above are only the preferred embodiments of the present application, and do not limit the patent scope of the present application accordingly. Any equivalent structural transformation made under the application concept of the present application by using the content of the specification and drawings of the present application, or any direct / indirect application in other related technical fields, is included in the patent protection scope of the present application.

Claims

1. A code conversion method, characterized in that, It includes the following steps: Select the target node in the graphical design file; Generate component information based on the target node; Analyze and reconstruct the component information; and Generate and output executable code according to the analyzed and reconstructed component information, the target code language, and the framework.

2. The code conversion method according to claim 1, wherein The component information includes: component type, component attribute information, component layout information, and composite component information. Generating the component information based on the target node includes: Generating the component type and the component attribute information based on the nodes and sub-nodes in the selected graphical design file; Identifying the component layout information of the component; and Analyzing the composite component information of the component.

3. The code conversion method according to claim 2, wherein Generating the component type and the component attribute information includes: Designing a component recognition algorithm according to the design specification; and Identifying the component type and the component attribute information based on the nodes and sub-nodes in the selected graphical design file through the component recognition algorithm.

4. The code conversion method according to claim 2, characterized in that Identifying the component layout information of the component includes: Designing a layout recognition algorithm according to the structural characteristics presented by the component; and Identifying the component layout information of the component through the layout recognition algorithm.

5. The code conversion method according to claim 1, characterized in that, Analyzing and reconstructing the component information includes: Separating and deleting redundant components from the component information; Analyzing and adjusting the layout of the component; and Simplifying the component.

6. The code conversion method according to claim 1, wherein: Generating and outputting executable code according to the analyzed and reconstructed component information, the target language, and the framework includes: Obtaining a code generator factory; and Generating and outputting executable code according to the analyzed and reconstructed component information, the target language, and the framework through the code generator factory.

7. The code conversion method according to claim 1, characterized in that Before the target node in the selected graphical design file, it further includes: Identifying the target node in the graphical design file.

8. A code conversion device, characterized in that, It includes: A node selection module for selecting the target node in the graphical design file; A component information generation module for generating component information based on the target node; An analysis and reconstruction module for analyzing and reconstructing the component information; and A code generation module for generating and outputting executable code according to the analyzed and reconstructed component information, the target code language, and the framework.

9. An electronic device, characterized in that, It includes a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the program, it implements the code conversion method according to any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program for implementing the code conversion method according to any one of claims 1-7.

Images