System and method for generating and managing documents corresponding to UI design drawings

Abstract

The invention discloses a system and a method for generating and managing a document corresponding to a UI (User Interface) design drawing. The system comprises a Figma plug-in end and a cloud management platform, the Figma plug-in is used for extracting text data corresponding to a text node in a Figma file, generating a text document according to the text data and uploading the text document to the cloud management platform; the cloud management platform is used for receiving the text document sent by the Figma plug-in and managing the text document, and the management operation comprises at least one of storage, editing and exporting. By means of the technical scheme, all text nodes can be automatically extracted, manual searching one by one is not needed, manual input errors are avoided, and repeated confirmation between a UI and a product is reduced.

Description

Technical Field

[0001] The embodiments of the present invention relate to the field of information technology, and in particular to a system and method for generating and managing documents corresponding to UI design drawings. Background Technology

[0002] Currently, the conversion between UI (User Interface) design and product documentation mainly relies on the following methods: 1. Purely manual method: After completing the design draft, the UI designer manually organizes the UI text. Product managers or operations personnel manually enter the text into Excel or other documents by viewing the UI images. This process relies entirely on manual identification, copying, pasting, and organization. 2. Semi-automated tool method: Using the export function of design software such as Figma and Sketch (the mainstream tool for drawing UI images), text resources are exported, and text is extracted in batches through plugins or scripts. However, the text lacks structured processing and requires manual secondary organization and classification. 3. Traditional document management method: Using general document tools such as Excel and Word to manage Texttool (a small function for text formatting in Sketch, called the Text panel in Figma), version management is carried out through file naming and folder structure, but there is a lack of direct association and traceability mechanism with the design draft. Summary of the Invention

[0003] This invention provides a system and method for generating and managing documents corresponding to UI design drawings, which can automatically extract all text nodes without manual searching, avoid manual input errors, and reduce repeated confirmations between UI and product.

[0004] According to one aspect of the present invention, a system for generating and managing UI design drawings corresponding to documents is provided, comprising: a Figma plugin and a cloud management platform;

[0005] The Figma plugin is used to extract text data corresponding to text nodes in a Figma file, generate a text document based on the text data, and upload the text document to the cloud management platform.

[0006] The cloud management platform is used to receive text documents sent by the Figma plugin and manage the text documents. The management operations include at least one of storage, editing and exporting.

[0007] In some embodiments of the present invention, extracting text data corresponding to text nodes in a Figma file includes:

[0008] Identify the project name in a Figma file;

[0009] Iterate through all pages in the project corresponding to the project name;

[0010] Obtain the text nodes contained in each of the aforementioned pages;

[0011] Extract the text data corresponding to each text node; the text data includes at least one of the following: text content, location information, and style information.

[0012] In some embodiments of the present invention, the Figma plugin is also used for:

[0013] Based on preset naming rules, naming information is generated for each text node; the naming information includes: space identifier, page name, component name, and Figma node ID;

[0014] Based on preset text filtering rules, text nodes under each scene type are filtered.

[0015] In some embodiments of the present invention, the Figma plugin is also used for:

[0016] Generate corresponding screenshots for each page;

[0017] Record the positional mapping relationship between the screenshot and the text node;

[0018] Generate accessible Uniform Resource Locator (URL) links.

[0019] In some embodiments of the present invention, the Figma plugin is also used to update project version information after the text document is uploaded to the cloud management platform.

[0020] In some embodiments of the present invention, the cloud management platform is used for:

[0021] Display the project information corresponding to the text document; the project information includes at least one of the following: project name, creation time, version information, and number of exports.

[0022] In some embodiments of the present invention, the interface layout of the cloud management platform is as follows: the left side of the interface is a list of text documents, displaying all text items to be filled in; the right side of the interface is a UI diagram of the current page.

[0023] The cloud management platform is used to edit the text document, including:

[0024] When it is detected that a text input box in the text field to be filled is selected, the corresponding target position is highlighted on the UI diagram;

[0025] The text function is determined based on the Figma node ID and the target location.

[0026] In some embodiments of the present invention, the cloud management platform is used for:

[0027] The project version information is compared with historical version information to determine the modifications.

[0028] In some embodiments of the present invention, the cloud management platform exports the text document in at least one of the following formats: standard table format, key-value pair format, and plain text table format.

[0029] According to another aspect of the present invention, a method for generating and managing documents corresponding to UI design drafts is provided, comprising:

[0030] Using the Figma plugin, extract the text data corresponding to the text nodes in the Figma file, generate a text document based on the text data, and upload the text document to the cloud management platform;

[0031] The cloud management platform receives text documents sent by the Figma plugin and manages the text documents. The management operations include at least one of storage, editing, and exporting.

[0032] This invention proposes a system for generating and managing UI design drawings corresponding to documents, comprising a Figma plugin and a cloud management platform. The Figma plugin is used to extract text data corresponding to text nodes in Figma files, generate text documents based on the text data, and upload the text documents to the cloud management platform. The cloud management platform receives the text documents sent by the Figma plugin and manages them, including at least one of storage, editing, and exporting. This invention automates the extraction of all text nodes, eliminating the need for manual searching, avoiding manual input errors, and reducing repeated confirmations between the UI and product teams.

[0033] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of the present invention, nor is it intended to limit the scope of the invention. Other features of the invention will become readily apparent from the following description. Attached Figure Description

[0034] To more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of the present invention and should not be regarded as a limitation on the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0035] Figure 1This is a schematic diagram of the structure of a UI design drawing corresponding document generation and management system according to an embodiment of the present invention;

[0036] Figure 2 This is a flowchart of a method for generating and managing UI design drawings and their corresponding documents, as described in an embodiment of the present invention. Detailed Implementation

[0037] 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.

[0038] 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 their derivatives, are intended to cover 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.

[0039] It is understood that before using the technical solutions disclosed in the various embodiments of this disclosure, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this disclosure in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.

[0040] Example 1

[0041] In existing technologies, the use of components by developers mainly suffers from the following objective drawbacks:

[0042] 1. Inefficient:

[0043] Problem description: Manually extracting text is time-consuming and labor-intensive. A project with 100+ text nodes requires 2-4 hours of manual processing. Repetitive work consumes a lot of time for designers and product managers. When the project is iterated, the text needs to be manually compared and updated again.

[0044] Technical reason: The lack of an automated text node recognition and extraction mechanism makes it impossible to process all pages of the entire project in batches.

[0045] 2. High error rate:

[0046] Problem description: Manual extraction is prone to omissions, typos, formatting errors, etc. The text and design draft are difficult to match accurately, product personnel have difficulty locating the text, and the text is prone to being out of sync when the version is updated.

[0047] Technical reasons: Lack of automatic verification and location marking mechanism, and no effective version comparison and synchronization mechanism.

[0048] 3. Disorganized version control:

[0049] Problem description: It is difficult to trace the history of multiple versions of Texttool documentation. Different versions exported by different people are inconsistent, there is no unified management entry point, and it is impossible to quickly trace back to the content of a specific version.

[0050] Technical reasons: Lack of a centralized version management system and no function to automatically save historical records.

[0051] 4. Lack of structured processing:

[0052] Problem description: The extracted text lacks a unified ID naming rule and structure, making it impossible to distinguish text in different scenarios (such as list items, buttons, pop-ups, etc.), and lacks flexible filtering and export rules.

[0053] Technical reasons: Lack of intelligent text classification and recognition algorithms, and no configurable rule engine.

[0054] 5. Difficulty in collaboration:

[0055] Problem description: Communication costs between UI and product teams are high, requiring repeated confirmation of text placement and content. Conflicts and overlaps are prone to occur when multiple people collaborate, and there is a lack of permission management and collaboration processes.

[0056] Technical reasons: Lack of a unified collaboration platform, and no real-time synchronization and conflict resolution mechanisms.

[0057] To address the aforementioned pain points, this invention proposes a system for intelligently acquiring Texttool documents from UI design drawings, comprising two core components: a Figma plugin for UI designers to extract text nodes and upload data; and a cloud management platform for product managers to receive, store, edit, and export Texttool documents.

[0058] Figure 1This is a schematic diagram of a UI design drawing corresponding document generation and management system according to an embodiment of the present invention. This embodiment is applicable to the generation and management of UI design drawing corresponding documents. The system can be implemented using software and / or hardware, and can be integrated into any device that provides the function of generating and managing UI design drawing corresponding documents, such as… Figure 1 As shown, the document generation and management system corresponding to the UI design drawings specifically includes: Figma plugin 101 and cloud management platform 102.

[0059] It should be noted that the Figma plugin client 101 can be a smart device client with the Figma plugin installed, such as a computer or tablet. This embodiment does not limit this.

[0060] The Figma plugin is used to extract text data corresponding to text nodes in a Figma file, generate a text document based on the text data, and upload the text document to the cloud management platform 102.

[0061] Here, a text node can refer to a node in a Figma file with the type TEXT, text data can refer to information data such as text content, position, and style, and a text document can be a Texttool document.

[0062] In its specific implementation, the Figma plugin can be used for project identification and traversal, and its technical implementation is as follows:

[0063] Data structure definition:

[0064] interface TextToolData{

[0065] project: string; / / Project name

[0066] version: string; / / Version identifier

[0067] exportTime: timestamp; / / Export time

[0068] exporter: string; / / Exporter

[0069] pages: PageItem[]; / / An array of page items

[0070] pageImgList: PageImage[]; / / List of images on the page

[0071] }

[0072] Example of PageItem data structure:

[0073] {

[0074] "id": "proj_homepage_NODE_12345", / / Automatically generated unique ID

[0075] "pageName": "Homepage",

[0076] "textTools": TextToolItem[]; / / Array of text tool items

[0077] }

[0078] Example of TextToolItem data structure:

[0079] {

[0080] "id": "proj_homepage_banner_title_NODE_12345", / / Automatically generated unique ID

[0081] "pageName": "Homepage",

[0082] "componentName": "Main Banner",

[0083] "position": {"x": 120, "y": 80, "width": 600, "height": 40}, / / Coordinates and dimensions on the canvas

[0084] "uiText": "Welcome to our platform", / / Original text in Figma

[0085] "pageImgId": "eregfv344dfg67lop0", / / This ID can be used to retrieve the corresponding UI design draft, making it easy to display on the management platform and mark the current editing position of the texttool.

[0086] "pageImgUrl": "https: / / ... / homepage_thumbnail.png", / / URL of the current page's thumbnail

[0087] "nodeId": "12345", / / Figma internal node ID, used for reverse positioning

[0088] "category": "banner_title" / / Preliminary categorization based on layer name or location by the plugin

[0089] }

[0090] Processing flow:

[0091] 1. Project Recognition: Automatically identifies the project name in the current Figma file;

[0092] 2. Page traversal: Traverse all Pages in the project;

[0093] 3. Node scanning: Depth-first traversal of all nodes of each Page;

[0094] 4. Text Recognition: Filter nodes with type "TEXT";

[0095] 5. Data extraction: Extract information such as text content, location, and style.

[0096] The cloud management platform 102 is used to receive text documents sent by the Figma plugin and to manage the text documents.

[0097] The management operations include at least one of storage, editing, and exporting.

[0098] This invention proposes a system for generating and managing UI design drawings corresponding to documents, comprising a Figma plugin and a cloud management platform. The Figma plugin is used to extract text data corresponding to text nodes in Figma files, generate text documents based on the text data, and upload the text documents to the cloud management platform. The cloud management platform receives the text documents sent by the Figma plugin and manages them, including at least one of storage, editing, and exporting. This invention automates the extraction of all text nodes, eliminating the need for manual searching, avoiding manual input errors, and reducing repeated confirmations between the UI and product teams.

[0099] Optionally, extract the text data corresponding to the text nodes in the Figma file, including:

[0100] Identify the project name in a Figma file.

[0101] Specifically, the Figma plugin performs project identification, automatically recognizing the project name of the current Figma file.

[0102] Iterate through all pages in the project corresponding to the project name.

[0103] Specifically, the Figma plugin performs page traversal, iterating through all Pages in the project.

[0104] Retrieve the text nodes contained in each of the aforementioned pages.

[0105] Specifically, the Figma plugin performs node scanning, traversing all nodes of each page in a depth-first manner, and then performs text recognition to filter nodes with the type "TEXT".

[0106] Extract the text data corresponding to each of the text nodes.

[0107] The text data includes at least one of the following: text content, location information, and style information.

[0108] Specifically, the Figma plugin extracts data, including text content, location, and style information.

[0109] Optionally, the Figma plugin is also used for:

[0110] Based on preset naming rules, naming information is generated for each text node.

[0111] The naming information includes: space identifier, page name, component name, and Figma node ID.

[0112] For example, a default naming rule can be set:

[0113] Format: [Space Identifier]_[Page Name]_[Component Name]_[Figma Node ID].

[0114] Example: login_loginPage_loginButton_abc123.

[0115] Among them, intelligent naming optimization includes: space identifier: automatically identified based on file path (login, home, profile, common, etc.); page name: taken as the camelCase version of Figma page name; component name: automatically inferred based on parent component (Button, Input, Title, Text, etc.); unique identifier: appended Figma node ID to ensure uniqueness.

[0116] Based on preset text filtering rules, text nodes under each scene type are filtered.

[0117] For example, the smart text filtering rules are shown in Table 1.

[0118]

[0119] Among them, Item represents the smallest unit of "a row / card" in the list; Title represents the main name of the information, with the largest font size for easy identification; Label represents the "field name" for input boxes, switches, and other controls, telling the user what to fill in; Placeholder represents the "ghost hint" in the input box, which disappears as soon as you type, and is only for example; Button represents the clickable "action button", responsible for submitting, saving, and proceeding to the next step; Dialog / Modal represents the "forced pop-up" floating on the top of the page, requiring a response to continue; Input represents the "empty box" that receives user information, including text, numbers, and passwords; Navigation represents the "road sign system" of the entire site / app, with the bottom tab, sidebar, and breadcrumbs collectively referred to as navigation.

[0120] Optionally, the Figma plugin is also used for:

[0121] Generate a corresponding screenshot for each page.

[0122] Specifically, the Figma plugin is also used for page screenshot generation. First, it generates a high-resolution PNG (Portable Network Graphics, a lossless bitmap format that supports alpha channels) screenshot for each page.

[0123] Record the positional mapping relationship between the screenshot and the text node.

[0124] Specifically, the location mapping relationship between screenshots and text nodes is recorded, compressed, and uploaded to cloud storage.

[0125] Generate accessible Uniform Resource Locator (URL) links.

[0126] Specifically, it generates accessible URL (Uniform Resource Locator) links.

[0127] Optionally, the Figma plugin is also used to update project version information after the text document is uploaded to the cloud management platform.

[0128] In practice, the Figma plugin is also used for data uploading and synchronization. The specific upload process can be described as follows: package all text data and screenshots locally, call the cloud API (Application Programming Interface) to create a new version record, upload large files in chunks, verify data integrity, and update the project version history.

[0129] Optionally, the cloud management platform is used for:

[0130] Display the project information corresponding to the text document.

[0131] The project information includes at least one of the following: project name, creation time, version information, and number of exports.

[0132] In its implementation, the cloud management platform has a project list display function, which can display all projects imported from Figma and show basic information about the projects, such as name, creation time, latest version, and number of exports.

[0133] For example, the project details structure can be represented as follows:

[0134] project:

[0135] ├──Basic Information

[0136] │ ├── Project Name

[0137] │ ├──Figma file link

[0138] │ ├── Creation Time

[0139] │ └── Person in charge

[0140] ├──Version History

[0141] │ ├──Version 1.0 (Date 1 Time 1)

[0142] │ ├──Version 1.1 (Date 2 Time 2)

[0143] │ └──Version 2.0 (Date 3 Time 3)

[0144] └──Texttool list

[0145] ├──All text items in the current version

[0146] ├──Group by page

[0147] └──Grouped by component

[0148] In addition, the cloud management platform also supports project searching and filtering, as well as project archiving and deletion.

[0149] Optionally, the interface layout of the cloud management platform is as follows: the left side of the interface is a list of text documents, displaying all text items to be filled in; the right side of the interface is a UI image of the current page.

[0150] The layout of the Texttool editing and filling interface on the cloud management platform can be as follows:

[0151] Left side: Texttool list, displaying all text fields to be filled; Right side: UI image of the current page, displayed in a fixed position; Interaction: When a text input box is clicked, the corresponding position is highlighted on the UI image.

[0152] The cloud management platform is used to edit the text document, including:

[0153] When a text input box in the text field to be filled is detected to be selected, the corresponding target position is highlighted on the UI diagram.

[0154] The text function is determined based on the Figma node ID and the target location.

[0155] In actual operation, the core functions of the cloud management platform include: 1. Real-time location marking: When a text input box is clicked, the corresponding position is highlighted on the UI image; 2. Intelligent prompts: Automatically infers text based on ID and location; 3. Batch editing: Supports batch modification of text of the same type; 4. Automatic / manual saving: Supports manual saving and can be set to automatically save drafts after a certain period of time or after a certain number of changes to prevent data loss.

[0156] Optionally, the cloud management platform is used for:

[0157] The project version information is compared with historical version information to determine the modifications.

[0158] Specifically, the cloud management platform also features intelligent fill-in assistance. For example, it performs intelligent ID inference: automatically inferring text type based on node paths; for instance, IDs containing "button" are inferred as button text, and those containing "title" are inferred as title text. It also performs automatic content completion: comparing historical versions and prompting for modifications; recommending similar text from other pages in the same project; and providing a library of commonly used text templates.

[0159] Optionally, the cloud management platform may export the text document in at least one of the following formats: standard table format, key-value pair format, and plain text table format.

[0160] In actual operation, the cloud management platform has document export and version management functions, including: 1. Export function: Export formats include: Excel format (standard table format, containing all fields); JSON format (structured data, easy for program processing); CSV format (comma-separated, good compatibility); Custom templates: Customize the export format according to business needs. 2. Version management mechanism: Automatically create a version record for each export, including version number, export time, operator, content snapshot, and change comparison. 3. Historical version tracking: View the historical content of any version; version comparison function, displaying added, deleted, and modified content; rollback to a specified version; branch version management (experimental modifications).

[0161] In addition, the cloud management platform can also perform permission and collaboration management, as shown in Table 2.

[0162]

[0163] In actual operation, the system locks the editing process to avoid conflicts when multiple people are editing at the same time, provides comment and annotation functions, has message notification functions (version updates, task assignments, etc.), and records operation logs during the process for traceability.

[0164] The technical solutions of the embodiments of the present invention can achieve the following beneficial effects:

[0165] 1. Improved Efficiency: Specific benefits include: one-click automatic extraction of all text nodes, eliminating the need for manual searching; intelligent filtering of duplicate content, reducing unnecessary work; batch editing and exporting, significantly improving processing speed; and automatic saving and version management, avoiding repetitive tasks. Quantifiable metrics: Time savings: Reduced from 2-4 hours manually to 5-10 minutes, increasing efficiency by over 95%; Labor costs: Reduced workload for UI designers and product managers by 80%; Project iteration: Version update efficiency increased by 3-5 times.

[0166] 2. Improved Accuracy: Ensuring Mechanisms: Automated extraction avoids manual input errors; location annotations ensure a one-to-one correspondence between text and design drafts; version comparison function promptly identifies differences; historical records are traceable for easy error correction. Quality Improvement: Reduced Error Rate: From manual error rate to near 0%; Omission Rate: Automated traversal ensures no omissions; Consistency: Unified naming rules and processing procedures.

[0167] 3. Optimize Collaboration Process: Process Optimization: UI designers focus on design and upload with one click; product managers can intuitively see the text location and quickly fill it out; version changes are automatically notified to relevant personnel; historical versions are always available to avoid information loss. Collaboration Improvement: Communication Costs: Reduced repeated confirmations between UI and product teams; Information Synchronization: Real-time updates, everyone can see the latest version; Clear Responsibilities: Traceable operation records and clear division of labor.

[0168] 4. Enhanced Maintainability: Convenient Maintenance: Version Tracking: Complete version history, rollback at any time; Change Tracking: Clear modification records and comparisons; Knowledge Accumulation: Unified management of Texttool documents, forming assets. Long-Term Value: Texttool history is clear at a glance during project handover; new members quickly understand the project's document structure; documents from multiple projects can be reused, accumulating a template library; data statistical analysis assists in product decision-making.

[0169] 5. Flexibility and Scalability: Rule Engine: Configurable filtering rules adapt to different project needs; customizable export templates meet diverse output formats; extensible ID naming rules support enterprise standards. Platform Compatibility: Supports multiple design software (Figma, Sketch, Adobe XD, etc.); supports multiple export formats (Excel, JSON, CSV, etc.); open API interface allows for integration with other systems.

[0170] Example 2

[0171] Figure 2 This is a flowchart illustrating a method for generating and managing UI design draft corresponding documents according to an embodiment of the present invention. This embodiment is applicable to the generation and management of UI design draft corresponding documents. This method can be executed by the UI design draft corresponding document generation and management system of this embodiment, which can be implemented using software and / or hardware, such as... Figure 2 As shown, the method specifically includes the following steps:

[0172] S201. Using the Figma plugin, extract the text data corresponding to the text nodes in the Figma file, generate a text document based on the text data, and upload the text document to the cloud management platform.

[0173] S202. Receive the text document sent by the Figma plugin and manage the text document.

[0174] The management operations include at least one of storage, editing, and exporting.

[0175] This invention extracts text data corresponding to text nodes in a Figma file using a Figma plugin, generates a text document based on the text data, and uploads the text document to a cloud management platform. The cloud management platform receives the text document sent by the Figma plugin and manages the text document, including at least one of storage, editing, and exporting. This invention automates the extraction of all text nodes, eliminating the need for manual searching, avoiding manual input errors, and reducing repeated confirmations between the UI and product teams.

[0176] Optionally, extract the text data corresponding to the text nodes in the Figma file, including:

[0177] Identify the project name in a Figma file;

[0178] Iterate through all pages in the project corresponding to the project name;

[0179] Obtain the text nodes contained in each of the aforementioned pages;

[0180] Extract the text data corresponding to each text node; the text data includes at least one of the following: text content, location information, and style information.

[0181] Optionally, the method further includes:

[0182] The Figma plugin generates naming information for each text node based on preset naming rules. The naming information includes: space identifier, page name, component name, and Figma node ID. Based on preset text filtering rules, text nodes under each scene type are filtered.

[0183] Optionally, the method further includes:

[0184] The Figma plugin generates corresponding screenshots for each page; records the positional mapping relationship between the screenshots and the text nodes; and generates accessible Uniform Resource Locator (URL) links.

[0185] Optionally, the method further includes:

[0186] The Figma plugin updates the project version information after the text document is uploaded to the cloud management platform.

[0187] Optionally, the method includes:

[0188] The cloud management platform displays the project information corresponding to the text document; the project information includes at least one of the following: project name, creation time, version information, and number of exports.

[0189] Optionally, the interface layout of the cloud management platform is as follows: the left side of the interface is a list of text documents, displaying all text items to be filled in; the right side of the interface is a UI image of the current page.

[0190] The method includes:

[0191] Through the cloud management platform, when the text input box in the text field to be filled is detected to be selected, the corresponding target position is highlighted on the UI image; the text function is determined based on the Figma node ID and the target position.

[0192] Optionally, the method includes:

[0193] The project version information is compared with historical version information through the cloud management platform to determine the content to be modified.

[0194] Optionally, the cloud management platform may export the text document in at least one of the following formats: standard table format, key-value pair format, and plain text table format.

[0195] The technical solutions of the embodiments of the present invention can achieve the following beneficial effects:

[0196] 1. Improved Efficiency: Specific benefits include: one-click automatic extraction of all text nodes, eliminating the need for manual searching; intelligent filtering of duplicate content, reducing unnecessary work; batch editing and exporting, significantly improving processing speed; and automatic saving and version management, avoiding repetitive tasks. Quantifiable metrics: Time savings: Reduced from 2-4 hours manually to 5-10 minutes, increasing efficiency by over 95%; Labor costs: Reduced workload for UI designers and product managers by 80%; Project iteration: Version update efficiency increased by 3-5 times.

[0197] 2. Improved Accuracy: Ensuring Mechanisms: Automated extraction avoids manual input errors; location annotations ensure a one-to-one correspondence between text and design drafts; version comparison function promptly identifies differences; historical records are traceable for easy error correction. Quality Improvement: Reduced Error Rate: From manual error rate to near 0%; Omission Rate: Automated traversal ensures no omissions; Consistency: Unified naming rules and processing procedures.

[0198] 3. Optimize Collaboration Process: Process Optimization: UI designers focus on design and upload with one click; product managers can intuitively see the text location and quickly fill it out; version changes are automatically notified to relevant personnel; historical versions are always available to avoid information loss. Collaboration Improvement: Communication Costs: Reduced repeated confirmations between UI and product teams; Information Synchronization: Real-time updates, everyone can see the latest version; Clear Responsibilities: Traceable operation records and clear division of labor.

[0199] 4. Enhanced Maintainability: Convenient Maintenance: Version Tracking: Complete version history, rollback at any time; Change Tracking: Clear modification records and comparisons; Knowledge Accumulation: Unified management of Texttool documents, forming assets. Long-Term Value: Texttool history is clear at a glance during project handover; new members quickly understand the project's document structure; documents from multiple projects can be reused, accumulating a template library; data statistical analysis assists in product decision-making.

[0200] 5. Flexibility and Scalability: Rule Engine: Configurable filtering rules adapt to different project needs; customizable export templates meet diverse output formats; extensible ID naming rules support enterprise standards. Platform Compatibility: Supports multiple design software (Figma, Sketch, Adobe XD, etc.); supports multiple export formats (Excel, JSON, CSV, etc.); open API interface allows for integration with other systems.

[0201] It should be understood that the various forms of processes shown above can be used, with steps reordered, added, or deleted. For example, the steps described in this invention can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution of this invention can be achieved, and this is not limited herein.

[0202] The specific embodiments described above do not constitute a limitation on the scope of protection of this invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this invention should be included within the scope of protection of this invention.

Claims

1. A system for generating and managing UI design draft corresponding documents, characterized in that, include: Figma plugin and cloud management platform; The Figma plugin is used to extract text data corresponding to text nodes in a Figma file, generate a text document based on the text data, and upload the text document to the cloud management platform. The cloud management platform is used to receive text documents sent by the Figma plugin and manage the text documents. The management operations include at least one of storage, editing and exporting.

2. The system according to claim 1, characterized in that, Extract the text data corresponding to the text nodes in the Figma file, including: Identify the project name in a Figma file; Iterate through all pages in the project corresponding to the project name; Obtain the text nodes contained in each of the aforementioned pages; Extract the text data corresponding to each text node; the text data includes at least one of the following: text content, location information, and style information.

3. The system according to claim 1, characterized in that, The Figma plugin is also used for: Based on preset naming rules, naming information is generated for each text node; The naming information includes: space identifier, page name, component name, and Figma node ID; Based on preset text filtering rules, text nodes under each scene type are filtered.

4. The system according to claim 1, characterized in that, The Figma plugin is also used for: Generate corresponding screenshots for each page; Record the positional mapping relationship between the screenshot and the text node; Generate accessible Uniform Resource Locator (URL) links.

5. The system according to claim 1, characterized in that, The Figma plugin is also used to update project version information after the text document is uploaded to the cloud management platform.

6. The system according to claim 1, characterized in that, The cloud management platform is used for: Display the project information corresponding to the text document; the project information includes at least one of the following: project name, creation time, version information, and number of exports.

7. The system according to claim 3, characterized in that, The cloud management platform has the following interface layout: the left side of the interface is a list of text documents, displaying all text items to be filled in; the right side of the interface is the UI image of the current page. The cloud management platform is used to edit the text document, including: When it is detected that a text input box in the text field to be filled is selected, the corresponding target position is highlighted on the UI diagram; The text function is determined based on the Figma node ID and the target location.

8. The system according to claim 5, characterized in that, The cloud management platform is used for: The project version information is compared with historical version information to determine the modifications.

9. The system according to claim 1, characterized in that, The cloud management platform exports the text document in at least one of the following formats: standard table format, key-value pair format, and plain text table format.

10. A method for generating and managing documents corresponding to UI design drafts, characterized in that, include: Using the Figma plugin, extract the text data corresponding to the text nodes in the Figma file, generate a text document based on the text data, and upload the text document to the cloud management platform; The cloud management platform receives text documents sent by the Figma plugin and manages the text documents. The management operations include at least one of storage, editing, and exporting.

Images