Figma-based flutter interface generation method, device, medium and program product

Abstract

The application discloses a Flutter interface generation method and device based on Figma, a medium and a program product. The method comprises the following steps: first, node data of a user graphical interface design is pulled from a Figma server; then, a unified intermediate data model is constructed according to the node data; then, the unified intermediate data model is mapped into an initial syntax tree corresponding to a Flutter interface; a plug-in in a preset plug-in chain is called to transform the initial syntax tree, and a target syntax tree is obtained; finally, Flutter interface code and a view model are generated according to the target syntax tree. The application effectively improves the Flutter interface development efficiency based on Figma.

Description

Technical Field

[0001] This invention relates to the field of software development technology, and in particular to a method, device, medium, and program product for generating Flutter interfaces based on Figma. Background Technology

[0002] The typical software development cycle for internet companies includes: requirements briefing → requirements development → testing cycle → code regression cycle → finalization and deployment. Within this cycle, UI design is often completed by designers using tools like Figma, while development requires hand-writing interface code and state logic based on the design drafts. This generally results in the following drawbacks: 1. Low development efficiency: Extensive repetitive coding of layouts and styles, with output speed heavily influenced by individual experience; 2. High communication costs and insufficient UI fidelity: Inconsistent layer / constraint / style definitions, leading to frequent reviews and rework; 3. Long testing and review cycles: Design changes and code are out of sync, lacking automatic difference identification and risk warnings; 4. Lack of standardization and reusability: Inconsistent naming, themes, fonts, and component granularity, making cross-project reuse difficult; 5. Insufficient online quality assurance: Lack of structured constraints and quality gates in the code, easily leading to UI regressions.

[0003] Therefore, there is an urgent need to invent a new method for generating Flutter interfaces to solve the problems of low development efficiency, difficulty in cross-project reuse, and lack of automatic difference recognition in existing technologies. Summary of the Invention

[0004] In view of this, embodiments of the present invention provide a method, device, medium and program product for generating Flutter interfaces based on Figma, which at least partially solves the problems existing in the prior art.

[0005] Other features and advantages of the invention will become apparent from the following detailed description, or may be learned in part by practice of the invention.

[0006] To achieve the above objectives, the embodiments of the present invention provide the following technical solutions:

[0007] According to a first aspect of the present invention, a method for generating a Flutter interface based on Figma is provided, the method comprising:

[0008] Retrieve node data from the user's graphical interface design from the Figma server;

[0009] Based on the node data, a unified intermediate data model is constructed;

[0010] The unified intermediate data model is mapped to the initial syntax tree corresponding to the Flutter interface;

[0011] The initial syntax tree is transformed by calling plugins in the preset plugin chain to obtain the target syntax tree;

[0012] Based on the target syntax tree, generate Flutter UI code and view model.

[0013] Furthermore, node data for the user's graphical interface design is retrieved from the Figma server, including:

[0014] Use the Figma API to pull node data from the Figma server for the user's graphical interface design.

[0015] Furthermore, the method also includes:

[0016] Extract the data to be verified from the unified intermediate data model. The data to be verified includes hierarchical structure, layout constraints, style tokens, reusable components, and instance relationships.

[0017] Perform field integrity verification and data caliber verification on the data to be verified.

[0018] Furthermore, the preset plugin chain includes an auto plugin, a token plugin, a custom plugin, and / or a ViewModel plugin. The auto plugin is used for automatic inference and normalization processing, the token plugin is used for designing token mapping, the custom plugin is used for customizing business rules, and the ViewModel plugin is used for logic / state binding generation.

[0019] Furthermore, the plug-in combination forms in the preset plug-in chain include straight chains, skip / selection forms, rearrangement, repeated execution, and / or branch parallelism followed by merging.

[0020] Further, based on the target syntax tree, Flutter UI code and view model are generated, including:

[0021] Based on the target syntax tree, generate the corresponding Flutter UI code;

[0022] Based on the state and interaction information in the target syntax tree, a view model corresponding to the Flutter interface code is generated.

[0023] Furthermore, the description also includes:

[0024] After generating the Flutter interface, record the current Flutter interface version and generate an interface change report based on the differences between the current Flutter interface and the historical Flutter interfaces.

[0025] According to a second aspect of the present invention, a Figma-based Flutter interface generation device is provided, the device comprising: a processor and a memory;

[0026] The memory is used to store one or more program instructions;

[0027] The processor is configured to run one or more program instructions to perform the steps of the Figma-based Flutter interface generation method as described in any of the preceding claims.

[0028] According to a third aspect of the present invention, a computer-readable storage medium is provided, on which a computer program is stored, wherein when executed by a processor, the computer program implements the steps of the Figma-based Flutter interface generation method as described in any of the preceding claims.

[0029] According to a fourth aspect of the present invention, a computer program product is provided, the computer program product including a computing program stored on a non-transitory computer-readable storage medium, the computer program including program instructions that, when executed by a computer, cause the computer to implement the steps of the Figma-based Flutter interface generation method as described in any of the preceding claims.

[0030] The present invention provides a Figma-based Flutter interface generation method, device, medium, and program product. First, node data of the user's graphical interface design is retrieved from the Figma server. Then, a unified intermediate data model is constructed based on the node data. Next, the unified intermediate data model is mapped to an initial syntax tree corresponding to the Flutter interface. Plugins in a preset plugin chain are called to transform the initial syntax tree to obtain a target syntax tree. Finally, Flutter interface code and a view model are generated based on the target syntax tree. This invention effectively improves the development efficiency of Figma-based Flutter interfaces. Attached Figure Description

[0031] To more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are merely exemplary, and those skilled in the art can derive other embodiments based on the provided drawings without creative effort.

[0032] Figure 1 A flowchart illustrating the Figma-based Flutter interface generation method provided in an embodiment of the present invention;

[0033] Figure 2This is a schematic diagram of the combination form of the preset plug-in chain provided in the embodiment of the present invention. Detailed Implementation

[0034] To enable those skilled in the art to better understand the present invention, the technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings of the embodiments of the present invention. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of the present invention.

[0035] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this invention are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of the invention described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0036] Figure 1 A flowchart of a Figma-based Flutter interface generation method according to an embodiment of the present invention is shown.

[0037] like Figure 1 As shown, the Flutter interface generation method based on Figma according to an embodiment of the present invention may include steps S100, S200, S300, S400 and S500.

[0038] In step S100, node data of the user's graphical interface design is retrieved from the Figma server.

[0039] Specifically, the above steps include:

[0040] The Figma API is used to retrieve node data of a specified file / page of user graphical interface design from the Figma server. The node data is in JSON format (Frame, Component, Text, Vector, Auto Layout, Color, Constraints, etc.).

[0041] Next, in step S200, a unified intermediate data model (Unified UIModel) is constructed based on the node data.

[0042] Preferably, embodiments of the present invention further include:

[0043] Extract the data to be verified from the unified intermediate data model. The data to be verified includes hierarchical structure, layout constraints, style tokens, reusable components, and instance relationships.

[0044] Perform field integrity checks and data caliber checks on the above-mentioned data to be verified, and provide repair suggestions based on the verification results (missing / abnormal).

[0045] In step S300, the unified intermediate data model is mapped to the initial syntax tree corresponding to the Flutter interface.

[0046] Specifically, the above steps include:

[0047] The Unified UI Model is mapped to the Initial Syntax Tree (AST) corresponding to the Flutter interface. The AST is used to express component trees, property bindings, constraints, interactive placeholders, and localizable text.

[0048] In step S400, the plugins in the preset plugin chain are called to transform the initial syntax tree to obtain the target syntax tree.

[0049] Specifically, the above steps include:

[0050] First, a pre-defined plugin chain is constructed. This chain includes auto plugins, token plugins, custom plugins, and / or ViewModel plugins. The auto plugin is used for automatic inference and normalization processing; the token plugin is used to design token mappings; the custom plugin is used to customize business rules; and the ViewModel plugin is used for logic / state binding generation. The plugin combinations within this pre-defined chain include linear chains, skip / selection forms, reordering, repeated execution, and / or branching and merging. Plugin order and dependencies are configurable, and internationalization, accessibility (A11y), and responsive adaptation capabilities are supported. Figure 2 A schematic diagram of the combined form of the preset plug-in chain is shown.

[0051] Then, the plugins in the preset plugin chain are called to gradually transform the initial syntax tree to obtain the target syntax tree (AST).

[0052] The embodiments of the present invention achieve configurable and extensible support for multi-dimensional specifications such as theme / font / naming / component granularity through AST and plugin mechanism.

[0053] Finally, in step S500, Flutter UI code and view model are generated based on the target syntax tree.

[0054] Specifically, the above steps include:

[0055] Based on the state and interaction information in the target syntax tree, generate the corresponding Flutter UI code (Widget) and the corresponding ViewModel.

[0056] Preferably, the ViewModel logic of the present invention is separated, with each page / component generating a corresponding ViewModel, centralizing state and side effects; the view is only responsible for display and binding, which facilitates unit testing and UI iteration.

[0057] Preferably, the present invention further includes:

[0058] After generating the Flutter interface, the current Flutter interface version is recorded. Based on the differences between the current Flutter interface and the historical Flutter interfaces, an interface change report, risk points, and a walkthrough checklist are generated. When requirements change, risks are automatically warned, the testing and regression cycles are shortened, and retrospective analysis and continuous improvement are supported.

[0059] In addition, this embodiment of the invention also provides a Figma-based Flutter interface generation device, which includes: a processor and a memory; the memory is used to store one or more program instructions; the processor is used to run one or more program instructions to perform the steps of the Figma-based Flutter interface generation method as described above.

[0060] In addition, embodiments of the present invention also provide a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the steps of the Figma-based Flutter interface generation method as described above.

[0061] In addition, embodiments of the present invention also provide a computer program product, which includes computer program instructions that, when executed by a processor, implement the steps of the Figma-based Flutter interface generation method as described above.

[0062] This invention proposes an automated Flutter UI generation method that uses the Figma API as the entry point, AST as the intermediate layer, a plugin chain as the extension mechanism, and ViewModel to achieve separation of view and logic. This method spans the entire "requirements-development-testing-regression-deployment" chain, significantly improving Flutter UI generation efficiency, reducing communication costs, and enhancing UI fidelity and online quality. This invention automatically generates UI template code, potentially reducing development costs by 30%–60%. It achieves a one-to-one mapping of colors, fonts, and constraints, resulting in high UI fidelity.

[0063] In this embodiment of the invention, the processor can be an integrated circuit chip with signal processing capabilities. The processor can be a general-purpose processor, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. It can implement or execute the methods, steps, and logic block diagrams disclosed in this embodiment of the invention. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the methods disclosed in this embodiment of the invention can be directly implemented by a hardware decoding processor, or implemented by a combination of hardware and software modules in the decoding processor. The software modules can be located in random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, registers, or other mature storage media in the art. The processor reads information from the storage medium and, in conjunction with its hardware, completes the steps of the above methods. The storage medium can be memory, for example, volatile memory or non-volatile memory, or may include both volatile and non-volatile memory. Non-volatile memory can be read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), or flash memory. Volatile memory can be random access memory (RAM), which is used as an external cache. By way of example, but not limitation, many forms of RAM are available, such as Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), Synchronous DRAM (SDRAM), Double Data Rate SDRAM (DDRSDRAM), Enhanced Synchronous DRAM (ESDRAM), Synchlink DRAM (SLDRAM), and Direct Rambus RAM (DRRAM).The storage media described in the embodiments of this invention are intended to include, but are not limited to, these and any other suitable types of memory. Those skilled in the art will recognize that the functions described in the above examples can be implemented using a combination of hardware and software. When applied software, the corresponding functions can be stored in a computer-readable medium or transmitted as one or more instructions or code on a computer-readable medium. Computer-readable media include computer storage media and communication media, wherein communication media include any medium that facilitates the transmission of computer programs from one place to another. Storage media can be any available medium accessible to general-purpose or special-purpose computers. Although the invention has been described in detail above with general description and specific embodiments, modifications or improvements can be made to it, which will be apparent to those skilled in the art. Therefore, such modifications or improvements made without departing from the spirit of the invention are all within the scope of protection claimed by the invention.

[0064] The above description is merely a preferred embodiment of the present invention and is not intended to limit the present invention in any way. Any simple modifications, equivalent changes, or alterations made by those skilled in the art using the disclosed technical content shall fall within the protection scope of the present invention.

Claims

1. A Flutter UI generation method based on Figma, characterized in that, The method includes: Retrieve node data from the user's graphical interface design from the Figma server; Based on the node data, a unified intermediate data model is constructed; The unified intermediate data model is mapped to the initial syntax tree corresponding to the Flutter interface; The initial syntax tree is transformed by calling plugins in the preset plugin chain to obtain the target syntax tree; Based on the target syntax tree, generate Flutter UI code and view model.

2. The Flutter interface generation method based on Figma according to claim 1, characterized in that, Retrieve node data from the Figma server for the user's graphical interface design, including: Use the Figma API to pull node data from the Figma server for the user's graphical interface design.

3. The Flutter interface generation method based on Figma according to claim 1, characterized in that, The method further includes: Extract the data to be verified from the unified intermediate data model. The data to be verified includes hierarchical structure, layout constraints, style tokens, reusable components, and instance relationships. Perform field integrity verification and data caliber verification on the data to be verified.

4. The Flutter interface generation method based on Figma according to claim 1, characterized in that, The preset plugin chain includes an auto plugin, a token plugin, a custom plugin, and / or a ViewModel plugin. The auto plugin is used for automatic inference and normalization processing, the token plugin is used for designing token mapping, the custom plugin is used for customizing business rules, and the ViewModel plugin is used for logic / state binding generation.

5. The Flutter interface generation method based on Figma according to claim 1, characterized in that, The plug-in combination forms in the preset plug-in chain include straight chains, skip / selection forms, rearrangement, repeated execution, and / or branch parallelism followed by merging.

6. The Flutter interface generation method based on Figma according to claim 1, characterized in that, Based on the target syntax tree, generate Flutter UI code and view model, including: Based on the target syntax tree, generate the corresponding Flutter UI code; Based on the state and interaction information in the target syntax tree, a view model corresponding to the Flutter interface code is generated.

7. The Flutter interface generation method based on Figma according to claim 1, characterized in that, The description also includes: After generating the Flutter interface, record the current Flutter interface version and generate an interface change report based on the differences between the current Flutter interface and the historical Flutter interfaces.

8. A Flutter UI generation device based on Figma, characterized in that, The device includes: a processor and a memory; The memory is used to store one or more program instructions; The processor is configured to run one or more program instructions to perform the steps of the Figma-based Flutter interface generation method as described in any one of claims 1 to 7.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the steps of the Figma-based Flutter interface generation method as described in any one of claims 1 to 7.

10. A computer program product, characterized in that, The computer program product includes computer program instructions that, when executed by a processor, implement the steps of the Figma-based Flutter interface generation method as described in any one of claims 1 to 7.

Images