CN114356480B - Front-end internationalization multi-language conversion method and system based on figma - Google Patents
Front-end internationalization multi-language conversion method and system based on figma Download PDFInfo
- Publication number
- CN114356480B CN114356480B CN202111622675.6A CN202111622675A CN114356480B CN 114356480 B CN114356480 B CN 114356480B CN 202111622675 A CN202111622675 A CN 202111622675A CN 114356480 B CN114356480 B CN 114356480B
- Authority
- CN
- China
- Prior art keywords
- text
- language
- component
- figma
- text information
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 30
- 238000006243 chemical reaction Methods 0.000 title claims abstract description 21
- 238000013461 design Methods 0.000 claims abstract description 63
- 230000000007 visual effect Effects 0.000 claims abstract description 14
- 230000006870 function Effects 0.000 claims description 38
- 238000013519 translation Methods 0.000 claims description 26
- 230000003068 static effect Effects 0.000 claims description 18
- 230000001960 triggered effect Effects 0.000 claims description 3
- 230000014616 translation Effects 0.000 description 23
- 238000010586 diagram Methods 0.000 description 13
- 238000005457 optimization Methods 0.000 description 11
- 238000011161 development Methods 0.000 description 8
- 230000008569 process Effects 0.000 description 6
- 238000012986 modification Methods 0.000 description 5
- 230000004048 modification Effects 0.000 description 5
- 238000004519 manufacturing process Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000005520 cutting process Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000012216 screening Methods 0.000 description 1
Landscapes
- Document Processing Apparatus (AREA)
- Stored Programmes (AREA)
Abstract
The invention discloses a front-end internationalization multi-language conversion method and system based on figma, which are used for receiving text information collected by a figma plug-in a design drawing page, binding the received text information with the design drawing webpage, providing a visual editing text interface, notifying according to the condition that a text is translated or added and deleted and modified, receiving a page text information updating request of the figma plug-in, transmitting updated corresponding text information to the figma plug-in for updating the design drawing, acquiring the latest text information from the figma plug-in, providing a visual inquiring text interface for recompiling codes, establishing long connection or short connection with a multi-language component, pushing the latest text information data to the multi-language component for updating a language package, analyzing the language package and switching the multiple languages, realizing batch uploading of the text by a designer, directly developing the page by a product manager on line, realizing quick exchange of the multi-language text data, and improving the working efficiency.
Description
Technical Field
The invention relates to the field of internet communication, in particular to a front-end internationalization multi-language conversion method based on figma and a front-end internationalization multi-language conversion system based on figma.
Background
Webpage multilingual is the first step in web application to go to the international market, and is also the most basic requirement. The most commonly used solution at present is that when a technician develops a page according to a design drawing, the technician needs to manually register the text used by the page locally according to the key-value format and a language-to-document mode, then transcribe the text for translation to a product manager, update the text to the local document language by language after translation, and then manually update the design drawing of the designer to maintain the consistency of design and development. The code is loaded with the corresponding language package according to the language environment and then displayed on the page when running.
However, the existing method has many drawbacks, including that when the product manager adjusts the document, the technician has to adjust the content of each language pack file, if the content is modified frequently and the language type is too many, a lot of burden is caused to the technician, and in order to ensure consistency of development and design, the designer has to update the design draft frequently, which reduces the working efficiency to a great extent. Secondly, the multilingual files and the front-end code packages are packaged together when the items are packaged, when the language types are too many and the language packages are too large, the volume of the compiled products is large, the loading of the user browser is directly caused to be slow, and the user experience is seriously affected.
Although there are several optimization schemes in the market at present, for example, a weback tool is used to automatically collect and report the text information in the project compiling stage, so that a product manager can translate the text information online, in a practical scene, the code writing method is too many, and in many cases, the tool cannot recognize the code writing method, thereby causing inefficiency. In addition, there is a scheme that the text is maintained by a unified text platform, designers and technicians directly derive the text used by the project from the text platform, but in reality, the same section of Chinese often has different translations at different places of the webpage, so that the technicians can have great confusion in selecting the text, and meanwhile, a product manager can have a missing problem when entering the text. Therefore, a web multi-language conversion technique is needed that greatly improves document collection, adjusts accuracy and efficiency, and reduces compilation products.
Disclosure of Invention
In order to overcome the defects in the prior art, the invention aims to provide a figma-based front-end internationalized multi-language conversion method and system, so that the convenience of document collection and the accuracy and high efficiency of document adjustment are greatly improved, and the compiling product is obviously reduced.
In order to achieve the above purpose, the present invention provides a figma-based front-end internationalization multi-language conversion method, which includes the following steps:
receiving text information collected by the figma plugin in a design drawing page, wherein the text information comprises text information of a design drawing submitted last time and text information of a latest design drawing;
binding the received text information with a webpage of a design drawing, providing a visual editing text interface, and notifying according to the condition that the text is translated or added and deleted and modified;
receiving a page text information updating request of the figma plugin, and transmitting updated corresponding text information to the figma plugin for updating the design drawing;
obtaining the latest text information from the figma plugin, and providing a visual query text interface for recompilation of codes;
and establishing long connection or short connection with the multilingual assembly, pushing the latest text information data to the multilingual assembly for updating the local language package, analyzing the language package and performing multilingual switching.
As further optimization of the invention, the text information is the content corresponding to all non-hidden text nodes and text nodes in the page of the design drawing, and one text node corresponds to one sentence of text, or corresponds to a sub-text split according to carriage return or/and split according to font style.
As a further optimization of the invention, the document and the sub-document both comprise a self-increment document ID serving as a document unique identifier, the document ID is bound with a text node, the document information used for designing the image page is compared with the last submitted information of the figma plugin, the modified document is screened out, and the content of the corresponding text node is updated according to the binding relation between the document ID and the text node.
As a further optimization of the invention, the notification according to the case is further specifically:
informing a document to be translated of translation, and invoking an API (application program interface) of a translation tool to obtain a translation result; and informing the updated design drawing of the added and deleted modified file and informing the recompilation of the code.
As a further optimization of the invention, the establishment of a long connection with a multilingual component occurs after the project is started, further concretely:
establishing long connection with a first component of the multi-language component, automatically connecting with the first component and transmitting latest data, wherein the latest data is divided into files according to language types and stored as json files under a static resource directory in a key-value format; and automatically pushing the latest data to the first component when the document changes.
As a further optimization of the present invention, the establishment of short connections with the multilingual components occurs after project compilation, further concretely:
and establishing short connection with a second component of the multi-language component, automatically connecting with the multi-language component, transmitting latest data, and storing the latest data as json files under the static resource directory according to the language type and the key-value format.
As a further optimization of the present invention, parsing the language package further comprises the steps of:
and a third component of the multi-language component requests a corresponding language package static resource file according to the current language environment, and places the acquired data in a window object so as to be used by three javascript functions.
As a further optimization of the present invention, the switching of the multiple languages is performed by providing three javascript functions by the fourth component of the multiple language component, further comprising the steps of:
the first javascript function obtains corresponding content from the window object according to the name of the document, the input parameter is the name of the document, and the output parameter is the content of the document;
the second javascript function obtains the current language type, no input parameters exist, the output parameters are the current language type, and the content is a unified language system/region code;
the third javascript function switches the current language type, the input parameter is the language type to be switched, no output parameter exists, the window/reload function of the jsvascript is executed after the switching to realize the page reloading, and the third component of the multi-language component is triggered to reload the text information into the window object.
To achieve the above object, the present invention further provides a figma-based front-end internationalized multilingual conversion system, including:
the figma plug-in is used for collecting text information from a design drawing page, uploading the text information to a document management platform, requesting the document management platform to send an updated document, downloading the changed text information from the document management platform, and updating local text information;
the text management platform is used for receiving text information sent by the figma plug-in, receiving a request for updating the text information by the figma plug-in, sending the latest data to the figma plug-in and the multi-language component, providing a visual editing text interface and a visual inquiring text interface, and notifying according to the condition that the text is translated or added and deleted and modified;
the multi-language component is used for establishing long connection or short connection with the document management platform, acquiring or receiving the latest data of the document management platform, analyzing the language package and performing multi-language switching.
As a further optimization of the present invention, the multilingual component includes a first component, a second component, a third component, and a fourth component;
the first component is arranged in a project enabling script and used for establishing long connection with the document management platform, automatically connecting and transmitting the latest data, and automatically pushing the latest data to the first component when the document changes;
the second component is arranged in a project compiling script and used for establishing short connection with the document management platform, automatically connecting and transmitting the latest data;
the latest data are divided into files according to language types and stored as json files placed under a static resource directory in a key-value format;
the third component is used for requesting a corresponding language package static resource file according to the current language environment and placing the acquired data in a window object, and the fourth component comprises three javascript functions used for acquiring the content of the document, acquiring the language type and switching the language type so as to realize multi-language switching.
Compared with the prior art, the front-end internationalization multi-language conversion method and system based on figma have the beneficial effects that one aspect of the invention has:
(1) After the design of the webpage is completed, a designer can upload the text in batches by one key, and the design diagram can be updated by one key during the adjustment of the follow-up text, so that the whole procedure is executed, the error probability is reduced, and the working efficiency is improved;
(2) The product manager can directly adjust the text on line without orally informing designers and technicians, and the translation efficiency can be improved by combining auxiliary translation;
(3) The technical staff directly develop the page, and the multilingual assembly automatically updates the document when the document is adjusted, so that the error probability can be reduced and the working efficiency can be improved without manual check;
(4) The influence of designers, product managers and technicians caused by document adjustment in the project development process is obviously reduced;
(5) The language package is split from the compiled product, so that the volume of the compiled product is obviously reduced, and the page loading speed and the user experience are obviously improved.
Drawings
FIG. 1 is a flow chart showing the steps of a method for performing a front-end internationalization multi-language conversion based on figma according to the present invention;
FIG. 2 is a flowchart showing the steps for collecting the latest design pattern of a figma plug-in according to one embodiment of the present invention;
FIG. 3 is a flowchart showing the steps of comparing the latest design pattern of the figma plug-in with the pattern of the last submitted design pattern according to one embodiment of the present disclosure;
FIG. 4 is a flowchart illustrating steps for updating a figma plug-in document according to one embodiment of the present disclosure;
FIG. 5 is a flowchart illustrating steps for updating a language package based on long connections according to one embodiment of the present disclosure;
FIG. 6 is a flowchart illustrating steps for updating a language package based on a short connection in accordance with one embodiment of the present disclosure;
FIG. 7 is a system architecture diagram of a figma-based front-end internationalized multilingual conversion system according to the present invention;
FIG. 8 is a schematic diagram of a multi-lingual component according to one embodiment of the invention;
FIG. 9 is a flowchart illustrating the operation of a figma plug-in, a document management platform, a multi-language component, and a user according to one embodiment of the present disclosure;
FIG. 10 is a diagram of a logical framework in the development environment of one embodiment of the present disclosure;
FIG. 11 is a diagram of a logical framework in a production environment of one embodiment of the present disclosure.
Detailed Description
Other advantages and effects of the present invention will become readily apparent to those skilled in the art from the following disclosure, when considered in light of the accompanying drawings, by describing embodiments of the present invention with specific embodiments thereof. The invention may be practiced or carried out in other embodiments and details within the scope and range of equivalents of the various features and advantages of the invention.
It is noted that relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus.
When the multi-language development of the webpage is performed, the document can undergo three processes of collection, use and change, so three tools are needed: the figma plug-in, the document management platform and the multi-language component jointly realize the three processes.
Figma is one of the most commonly used tools for product interface design by designers in the market today, and the Figma's open platform also provides an interface for custom plug-in development for users. All text information is thus collected from the plan by means of the figma plug-in.
In the preferred embodiment of the present invention, the figma plug-in mainly has two functions, namely a file collection function and a file update function, which are mainly based on three modes: firstly, collecting the text in the design drawing; secondly, the designer actively modifies the design drawing and collects the text in the latest design drawing formed after modification; thirdly, the designer receives the notification to update the design drawing, and updates the text in the design drawing by using a figma plug-in based on the latest text of the text management platform. The first two documents are collected through a figma plug-in unit and uploaded to a document management platform; the latter receives the latest file of the file management platform through the figma plug-in unit and updates the design file.
In the preferred embodiment of the present invention, the document management platform primarily provides the product manager with the ability to visually edit documents, the technician with the ability to visually query for document information, and the ability to communicate with figma plug-ins and multi-language components.
In the preferred embodiment of the present invention, the multilingual assembly primarily provides the functionality to update language packs, parse language packs, and perform multilingual conversions.
Fig. 1 is a flow chart of steps of a figma-based front-end internationalization multi-language conversion method according to the present invention. As shown in fig. 1, the front-end internationalization multi-language conversion method based on figma of the present invention includes the following steps:
step S1, receiving text information collected by a figma plug-in a design drawing page, wherein the text information comprises the text information of a design drawing submitted last time and the text information of a latest design drawing;
as a preferred embodiment of the present invention, step S1 further comprises the steps of:
step S11, receiving text information in the latest design drawing collected by the figma plug-in, referring to fig. 2, step S11 further includes the following steps:
step S111, the figma plug-in acquires all non-hidden text nodes on the page and acquires the content of the non-hidden text nodes;
step S112, splitting a single statement into a plurality of sub-statements according to carriage returns;
further, the sentence of a node corresponds to a sentence, and when the sentence contains a carriage return, the sentence is cut into a plurality of sentences according to the carriage return.
Step S113, continuously splitting and forming a plurality of sub-sentences according to the font style;
further, when a sentence contains a plurality of text patterns, such as italics, font size, color, underlining, etc., the sentence is divided into a plurality of text patterns according to the font patterns.
Step S114, generating a unique document ID for each sentence and binding text nodes;
further, after the document is divided, a self-increasing document ID is generated and bound with the text node, wherein the document ID is the unique identification of the document, and the ID is unchanged when the document is modified.
Step S115, a sentence list is presented on a figma plug-in interface;
step S116, a user selects sentences to be uploaded and uploads data;
furthermore, after the file is generated, a designer can screen files which do not need to be uploaded on a language list of the plug-in page, and after the files are selected, the file information which needs to be uploaded is uploaded to the file management platform by one key.
Step S117, returning an uploading result;
further, when the designer finishes uploading, the interface returns an uploading result.
Step S12, when the design drawing is modified, receiving text information in the latest design drawing collected by the figma plug-in, referring to fig. 3, step S12 further includes the following steps:
step S121, the designer actively modifies the design drawing, the figma plug-in collects the latest document information, and step S11 is executed;
step S122, the figma plug-in compares the latest document information collected with the last document information collected, and judges whether the document of the current text node is the same as the last stored document;
step S123, when the text of the current text node is judged to be different from the last stored text, notifying a product manager to translate, and uploading the text information to a text management platform.
Step S2, binding the received text information with a webpage of a design drawing, providing a visual editing text interface, and notifying according to the condition that the text is translated or added and deleted and modified;
as a preferred embodiment of the invention, text information is bound with a design drawing webpage, and a product manager can check where a document is used based on one key of a document management platform;
the document management platform judges whether the document has been translated before, if so, the document management platform does not inform a product manager of translation; if the text information is not translated, i.e. the designer actively modifies the text, the received text information is the text information after updating the design drawing, and a product manager is informed of translating on a text management platform; the method can inform a product manager that the document needs to be processed on the document management platform in a mail, short message and other modes.
And meanwhile, calling a translation tool API interface to obtain a translation result, preferably a hundred-degree translation and google translation interface to obtain the translation result, and providing the translation result for a product manager for reference.
Step S3, receiving a page text information updating request of the figma plugin, and transmitting updated corresponding text information to the figma plugin for updating the design drawing;
referring to fig. 4, step S3 further includes the steps of:
step S31, after receiving the notice of updating the design diagram sent by the document management platform, a designer acquires the latest document information list from the document management platform;
further, the designer opens the figma plug-in, clicks the update button to request an update of the text information from the document management platform.
Step S32, according to the document ID and the content submitted last time locally, screening out the modified document;
further, the figma plug-in 600 downloads all used documents on the page to be updated on the document management platform 700 and compares it with the last uploaded information locally.
Step S33, updating node content according to the binding relation between the document ID and the text node;
further, when the text is updated, the content of the corresponding text node is updated according to the binding relation between the text node and the text ID so as to update the design drawing.
S4, acquiring the latest text information from the figma plugin, and providing a visual inquiry text interface for recompilation of codes;
step S5, establishing long connection or short connection with the multilingual assembly, pushing the latest text information data to the multilingual assembly for updating a local language package, analyzing the language package and performing multilingual switching;
as a preferred embodiment of the present invention, step S5 further comprises the steps of:
step S51, the document management platform establishes long connection with the multilingual assembly; referring to fig. 5, step S51 further includes:
step S511, a first component of the multi-language component establishes a long connection with the document management platform;
step S512, the multilingual component acquires the latest document information list from the document management platform;
further, the document management platform is automatically connected and the latest data is acquired when the project is started.
Step S513, the data is divided into files according to language types and saved as json files in key-value format, and step S512 is repeatedly executed.
Further, key is the name of the unique document and value is the document content. The json file is placed under the static resource catalog, so that the project is not compiled into a compiled product during compiling, and the size of the compiled product can be reduced.
In step S514, when the document changes, the document management platform automatically pushes the latest data to the components, the first component executes step S513, and repeatedly executes step S512 for developing the environment.
Step S52, the document management platform establishes short connection with the multilingual assembly; referring to fig. 6, the method further comprises the steps of:
step S521, a first component of the multi-language component establishes a short connection with the file management platform;
step S522, the multilingual component acquires the latest document information list from the document management platform;
step S523, the data is divided into files according to language types and saved as json files in key-value format, and step S522 is repeatedly executed.
Further, key is the name of the unique document and value is the document content. The json file is placed under the static resource catalog, so that the project is not compiled into a compiled product during compiling, and the size of the compiled product can be reduced.
Different from the first component, the second component is not connected with the document management platform in a long way, and only the current latest document information is acquired and stored, and then the subsequent processing flow is continued for the production environment.
And step S53, a third component of the multi-language component requests a corresponding language package static resource file according to the current language environment, and places the acquired data in a window object so as to be used by three javascript functions.
Step S54, the multi-language switching is performed by providing three javascript functions by the fourth component of the multi-language component, and further includes the following steps:
the first javascript function obtains corresponding content from the window object according to the name of the document, the input parameter is the name of the document, and the output parameter is the content of the document;
the second javascript function obtains the current language type, no input parameters exist, the output parameters are the current language type, and the content is a unified language system/region code;
the third javascript function switches the current language type, the input parameter is the language type to be switched, no output parameter exists, the window/reload function of the jsvascript is executed after the switching to realize the page reloading, and the third component of the multi-language component is triggered to reload the text information into the window object.
Fig. 7 is a structural framework diagram of a figma-based front-end internationalized multilingual conversion system according to the present invention. As shown in fig. 7, the front-end internationalization multi-language conversion system based on figma of the present invention includes:
the figma plug-in 600 is configured to collect text information from a design drawing page, upload the text information to the document management platform 700, request the document management platform 700 to send an updated document, download the modified text information from the document management platform 700, and update local text information;
as a preferred embodiment of the present invention, the text information of the figma plug-in 600 is content corresponding to all non-hidden text nodes and text nodes in the page of the design drawing, where one text node corresponds to a sentence, or corresponds to a sub-text split according to a carriage return or/and split according to a font style, where each of the text and sub-text includes a self-added text ID as a unique document identifier, and the text ID is bound with the text node and updates the content of the corresponding text node according to the binding relationship between the text ID and the text node.
The document management platform 700 is configured to receive text information sent by the figma plug-in 600, receive a request for updating the text information by the figma plug-in 600, send the latest data to the figma plug-in 600 and the multilingual assembly 800, provide a visual editing document interface and a visual inquiring document interface, and make a notification according to the translated or added/deleted and modified document;
as a preferred embodiment of the present invention, the document management platform 700 further includes: informing a document to be translated of translation, and invoking an API (application program interface) of a translation tool to obtain a translation result; and informing the updated design drawing of the added and deleted modified file and informing the recompilation of the code.
The multilingual component 800 is configured to establish a long connection or a short connection with the document management platform 700, obtain or accept the latest data of the document management platform 700, parse the language package, and perform multilingual switching.
Fig. 8 is a schematic structural diagram of a multilingual assembly 800 according to an embodiment of the present disclosure, referring to fig. 8, as a preferred embodiment of the present disclosure, the multilingual assembly 800 includes a first assembly 810, a second assembly 820, a third assembly 830, and a fourth assembly 840, and as a further optimization of the present embodiment, the fourth assembly 840 mainly includes three javascript functions, namely a first javascript function module 841, a second javascript function module 842, and a third javascript function module 843.
The first component 810 is configured to set up a project enabling script, and is configured to establish a long connection with the document management platform 700, automatically connect to and transmit the latest data, and automatically push the latest data to the first component 810 when the document changes;
the second component 820 is provided in the project compiling script, and is configured to establish a short connection with the document management platform 700, automatically connect with the document management platform, and transmit the latest data;
dividing the latest data into files according to language types and storing the files as json files under static resource directories in a key-value format;
the third component 830 is configured to request a corresponding static resource file of a language package according to a current language environment, and place the obtained data in a window object, and the fourth component 840 includes three javascript functions, which are configured to obtain contents of a document, obtain a language type, and switch a language type, so as to implement multi-language switching.
As a further optimization of this embodiment, the three javascript functions provided by the fourth component 840 are specifically:
the first javascript function module 841 is configured to obtain corresponding content from the window object according to the name of the document, where the input parameter is the name of the document, and the output parameter is the content of the document;
a second javascript function module 842, configured to obtain a current language type, where no input parameters and no output parameters are the current language type, and the content is a unified language system/region code, such as zh_cn, en-US, etc.;
the third javascript function module 843 is configured to switch the current language type, enter the language type to be switched, have no parameter, execute the window/read function of jsvascript after switching to implement page reloading, and then trigger the third component 830 of the multilingual component 800 to reload the text information into the window object, thereby implementing multilingual switching.
Fig. 9 is a flowchart illustrating operations between a figma plug-in, a document management platform, a multi-language component, and a user according to an embodiment of the present disclosure, and referring to fig. 9, the present disclosure is completed by the figma plug-in 600, the document management platform 700, and the multi-language component 800 together, so as to implement document data exchange between different users.
(1) When collecting the text, the designer opens the figma plug-in 600, and the figma plug-in 600 obtains all non-hidden text nodes on the page and obtains the content of the text nodes.
The sentence of a word node corresponds to a sentence, if the sentence contains carriage returns or different word patterns, the sentence is divided, and the sentence is specifically divided into:
if the sentence contains the carriage return, cutting the sentence into a plurality of documents according to the carriage return;
if a sentence contains a plurality of text patterns (italics, font size, color, underline, etc.), the sentence is divided into a plurality of text patterns according to the font patterns.
After the division of the file is completed, a self-increasing file ID is generated and is bound with the text nodes, wherein the file ID is the unique identification of the file, and the file ID is unchanged during file modification.
(2) If the designer actively modifies the design drawings, the figma plug-in 600 collects text information of the latest design drawings and updates the text.
When a designer actively modifies the design diagram, the figma plug-in acquires the latest document information and compares the latest document information with the last acquired document information, judges whether the document of the current text node and the document stored last time are the same, and if the current text node and the document stored last time are different, the figma plug-in considers that modification occurs and informs a product manager.
(3) The document is uploaded to the document management platform 700 through the figma plug-in 600.
After the files are collected or updated, a designer selects which files need to be uploaded and which files do not need to be uploaded on the page of the figma plug-in 600, selects the files needing to be uploaded, and uploads information to the file management platform 700 after the selection is completed.
(4) The document management platform 700 receives the document uploaded by the figma plug-in 600, and if the figma plug-in 600 judges that the document is modified, the document management platform 700 informs a product manager to translate the document in the design drawing.
When the file management platform 700 receives the information reported by the figma plug-in, the file is bound with the webpage of the design drawing, a product manager can check the places where the file is used by one key after the binding, then judge whether the file is translated before, and if the file is translated, the product manager is not informed of the translation; if the text is not translated, i.e. a designer actively modifies the design drawing to enable the text to be modified, notifying a product manager to the text management platform 700 for auditing and translation, and notifying the product manager that the text needs to be processed on the text management platform 700 in a mail, short message and other modes; and the document management platform 700 may invoke the hundred degree translation and google translation interface to obtain the translation results to provide references to the product manager.
(5) The product manager perfects, modifies or deletes the document in the document management platform 700.
(6) After the documents are added, deleted, and modified, the document management platform 700 notifies the designer of the updated design drawings, notifies the technician of the code recompilation, and automatically pushes the latest data to the connecting multilingual component 800.
(7) The designer receives the notification of the update of the design drawing, and the figma plug-in 600 performs the document update.
When the figma plug-in 600 updates the file, the designer receives the notification of the update design diagram sent by the file management platform 700, opens the figma plug-in 600, clicks the update button in the figma plug-in 600, downloads all the used files on the page to be updated from the file management platform 700, compares the files with the information uploaded last time, and updates the corresponding node text according to the binding relation between the text node and the file ID if the files are updated, and updates the design diagram.
(8) The multilingual component 800 receives the latest data automatically pushed by the document management platform 700 and updates the local language package.
The first component 810 of the multilingual component 700 establishes long connection with the document management platform 700, automatically connects the document management platform and acquires the latest data when the project is started, divides the data into files according to language types after the data are acquired and stores the files into json files in a key-value (the key is the unique name of the document and the value is the content of the document) format, the json files are placed under a static resource directory, the project is not compiled into a compiled product when compiled, and the size of the compiled product can be reduced.
(9) The technician receives the recompilation notification sent by the document management platform 700 to recompile the project.
(10) When the project is recompiled, the multilingual component 800 obtains the latest document from the document management platform 700, updating the local language package.
The second component 820 establishes a short connection with the document management platform 700, acquires the latest data from the document management platform 700, divides the data into files according to language types after the data are acquired, and stores the files into json files in a key-value (key is the unique name of the document and value is the content of the document) format, and the json files are placed under a static resource directory.
(11) After the multilingual assembly updates the language package, the language package is parsed.
The third component 830 obtains the current language environment, requests the corresponding language package static resource file according to the current language environment, and puts the obtained data into the window object.
(12) After the multi-language component analyzes the language package, the multi-language switching is performed.
The fourth component 840 includes three javascript function modules, and is configured to obtain content corresponding to a file name through the first javascript function module 841, specifically: acquiring corresponding content from the window object according to the name of the document, wherein the input parameter is the name of the document, and the output parameter is the content of the document;
the second javascript function module 842 is used for obtaining the current language type, no input parameters, no output parameters as the current language type, and unified language system/region code such as zh_cn, en-US, etc.;
the third javascript function module 843 is configured to switch the current language type, the input parameter is the language type to be switched, no output parameter exists, and after the switching, the window function of jsvascript is executed to implement page reloading, and further trigger the third component 830 to reload the text information into the window object, thereby implementing multi-language switching.
To further illustrate the different steps of a preferred embodiment of the present invention in a development environment (multi-language component establishes a long connection with the document management platform) and in a production environment (multi-language component establishes a short connection with the document management platform), a comparison is made with respect to fig. 10 and 11.
FIG. 10 is a diagram of a logical framework in a development environment in accordance with one embodiment of the present disclosure, and with reference to FIG. 10, in the process, a multi-language component establishes a long connection with a document management platform, since the project is in a hot update mode, i.e., the project file is automatically compiled upon modification, without the need for a technician to operate.
FIG. 11 is a diagram of a logical framework in a production environment according to one embodiment of the present disclosure, and referring to FIG. 11, a multi-language component establishes a short connection with a document management platform, requiring a technician to perform a compilation operation.
It should be noted that the above sequence numbers do not represent a completely fixed sequence, and those skilled in the art can change the above sequence without departing from the scope of the present invention.
The above embodiments are merely illustrative of the principles of the present invention and its effectiveness, and are not intended to limit the invention. Modifications and variations may be made to the above-described embodiments by those skilled in the art without departing from the spirit and scope of the invention. Accordingly, the scope of the invention is to be indicated by the appended claims.
Claims (5)
1. A front-end internationalization multi-language conversion method based on figma comprises the following steps:
receiving text information collected by the figma plugin in a design drawing page, wherein the text information comprises text information of a design drawing submitted last time and text information of a latest design drawing;
binding the received text information with a webpage of a design drawing, providing a visual editing text interface, and notifying according to the condition that the text is translated or added and deleted and modified;
receiving a page text information updating request of the figma plugin, and transmitting updated corresponding text information to the figma plugin for updating the design drawing;
obtaining the latest text information from the figma plugin, and providing a visual query text interface for recompilation of codes;
establishing long connection or short connection with the multilingual assembly, pushing the latest text information data to the multilingual assembly for updating a local language package, analyzing the language package and performing multilingual switching;
the parsing the language package further includes the steps of:
a third component of the multi-language component requests a corresponding language package static resource file according to the current language environment, and places the acquired data in a window object so as to be used by three javascript functions;
the establishment of a long connection with the multilingual assembly occurs after the project is started, and is further specifically:
establishing long connection with a first component of the multi-language component, automatically connecting with the first component and transmitting latest data, wherein the latest data is divided into files according to language types and stored as json files under a static resource directory in a key-value format; automatically pushing the latest data to the first component when the document changes;
the establishment of short connections with the multilingual assembly occurs after project compilation, and is further specified as:
establishing short connection with a second component of the multi-language component, automatically connecting with the multi-language component and transmitting latest data, wherein the latest data is divided into files according to language types and stored as json files under a static resource directory in a key-value format;
the fourth component of the multilingual component provides three javascript functions to switch multilingual, and the method further comprises the following steps:
the first javascript function obtains corresponding content from the window object according to the name of the document, the input parameter is the name of the document, and the output parameter is the content of the document;
the second javascript function obtains the current language type, no input parameters exist, the output parameters are the current language type, and the content is a unified language system/region code;
the third javascript function switches the current language type, the input parameter is the language type to be switched, no output parameter exists, the window/reload function of the jsvascript is executed after the switching to realize the page reloading, and the third component of the multi-language component is triggered to reload the text information into the window object.
2. The method of claim 1, wherein the text information is content corresponding to all non-hidden text nodes and text nodes in a design drawing page, one text node corresponds to one sentence, or corresponds to a sub-sentence split according to carriage return or/and split according to font style.
3. The method for performing the front-end internationalization multi-language conversion based on figma according to claim 2, wherein: the text and the sub-text both comprise a self-increasing text ID serving as a text unique identifier, the text ID is bound with the text nodes, the text ID is used for comparing text information used by the design drawing page with the information submitted by the figma plugin at one time, modified text is screened out, and the content of the corresponding text nodes is updated according to the binding relation between the text ID and the text nodes.
4. The method for performing a figma-based front-end internationalized multilingual conversion as claimed in claim 3, wherein the notifying according to the case is further specifically:
informing a document to be translated of translation, and invoking an API (application program interface) of a translation tool to obtain a translation result; and informing the updated design drawing of the added and deleted modified file and informing the recompilation of the code.
5. A figma-based front-end internationalized multilingual conversion system comprising:
the figma plug-in is used for collecting text information from the design drawing page, uploading the text information to the document management platform, requesting the document management platform to send updated documents, downloading the changed text information from the document management platform and updating the local text information;
the text management platform is used for receiving text information sent by the figma plug-in, receiving a request for updating the text information by the figma plug-in, sending the latest data to the figma plug-in and the multi-language component, providing a visual editing text interface and a visual inquiring text interface, and notifying according to the condition that the text is translated or added and deleted and modified;
the multi-language component is used for establishing long connection or short connection with the document management platform, acquiring or receiving the latest data of the document management platform, analyzing a language package and performing multi-language switching;
the multi-language component comprises a first component, a second component, a third component and a fourth component;
the first component is arranged in a project enabling script and used for establishing long connection with the document management platform, automatically connecting and transmitting the latest data, and automatically pushing the latest data to the first component when the document changes;
the second component is arranged in a project compiling script and used for establishing short connection with the document management platform, automatically connecting and transmitting the latest data;
the latest data are divided into files according to language types and stored as json files placed under a static resource directory in a key-value format;
the third component is used for requesting a corresponding language package static resource file according to the current language environment, and placing the acquired data in a window object,
the fourth component comprises three javascript functions used for acquiring the content of the document, acquiring the language type and switching the language type, and realizing multi-language switching.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111622675.6A CN114356480B (en) | 2021-12-28 | 2021-12-28 | Front-end internationalization multi-language conversion method and system based on figma |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111622675.6A CN114356480B (en) | 2021-12-28 | 2021-12-28 | Front-end internationalization multi-language conversion method and system based on figma |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114356480A CN114356480A (en) | 2022-04-15 |
| CN114356480B true CN114356480B (en) | 2023-11-07 |
Family
ID=81103347
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111622675.6A Active CN114356480B (en) | 2021-12-28 | 2021-12-28 | Front-end internationalization multi-language conversion method and system based on figma |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114356480B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114896005A (en) * | 2022-04-26 | 2022-08-12 | 平安普惠企业管理有限公司 | Application program language configuration method based on artificial intelligence and related equipment |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106155652A (en) * | 2015-04-02 | 2016-11-23 | 阿里巴巴集团控股有限公司 | A kind of generation method and system of multi-language data file |
| CN109976840A (en) * | 2017-12-27 | 2019-07-05 | 航天信息股份有限公司 | The method and system of multilingual automatic adaptation are realized under a kind of separation platform based on front and back |
| CN110865827A (en) * | 2018-08-27 | 2020-03-06 | 阿里巴巴集团控股有限公司 | Data updating method, device and system |
| CN111061533A (en) * | 2019-12-18 | 2020-04-24 | 深圳前海环融联易信息科技服务有限公司 | Page multi-language display method and device, electronic equipment and computer storage medium |
| CN111427641A (en) * | 2020-02-27 | 2020-07-17 | 深圳壹账通智能科技有限公司 | Multi-language adaptation method, device, system, computer equipment and storage medium |
| CN113076164A (en) * | 2021-04-16 | 2021-07-06 | 北京沃东天骏信息技术有限公司 | Webpage language management method and device |
| CN113254014A (en) * | 2021-05-14 | 2021-08-13 | 北京自如信息科技有限公司 | Sketch plug-in-based interface development method, device and system |
| CN113641433A (en) * | 2021-08-10 | 2021-11-12 | 广州鲁邦通智能科技有限公司 | Multi-language page conversion method and unit of front-end internationalized multi-language file based on i18n technology |
| CN113687884A (en) * | 2020-05-18 | 2021-11-23 | 北京字节跳动网络技术有限公司 | File delivery method, device, system, equipment and storage medium |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US11249715B2 (en) * | 2020-06-23 | 2022-02-15 | Switchboard Visual Technologies, Inc. | Collaborative remote interactive platform |
-
2021
- 2021-12-28 CN CN202111622675.6A patent/CN114356480B/en active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106155652A (en) * | 2015-04-02 | 2016-11-23 | 阿里巴巴集团控股有限公司 | A kind of generation method and system of multi-language data file |
| CN109976840A (en) * | 2017-12-27 | 2019-07-05 | 航天信息股份有限公司 | The method and system of multilingual automatic adaptation are realized under a kind of separation platform based on front and back |
| CN110865827A (en) * | 2018-08-27 | 2020-03-06 | 阿里巴巴集团控股有限公司 | Data updating method, device and system |
| CN111061533A (en) * | 2019-12-18 | 2020-04-24 | 深圳前海环融联易信息科技服务有限公司 | Page multi-language display method and device, electronic equipment and computer storage medium |
| CN111427641A (en) * | 2020-02-27 | 2020-07-17 | 深圳壹账通智能科技有限公司 | Multi-language adaptation method, device, system, computer equipment and storage medium |
| CN113687884A (en) * | 2020-05-18 | 2021-11-23 | 北京字节跳动网络技术有限公司 | File delivery method, device, system, equipment and storage medium |
| CN113076164A (en) * | 2021-04-16 | 2021-07-06 | 北京沃东天骏信息技术有限公司 | Webpage language management method and device |
| CN113254014A (en) * | 2021-05-14 | 2021-08-13 | 北京自如信息科技有限公司 | Sketch plug-in-based interface development method, device and system |
| CN113641433A (en) * | 2021-08-10 | 2021-11-12 | 广州鲁邦通智能科技有限公司 | Multi-language page conversion method and unit of front-end internationalized multi-language file based on i18n technology |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114356480A (en) | 2022-04-15 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8375362B1 (en) | Wizard for web service search adapter | |
| CN110198247B (en) | Interface test method and system | |
| US20060174196A1 (en) | Advanced translation context via web pages embedded with resource information | |
| JP4888071B2 (en) | Program, copy and paste processing method, apparatus and recording medium | |
| US8875103B2 (en) | Method of testing multiple language versions of a software system using one test script | |
| KR100907671B1 (en) | How to Edit Recording Media and Character Input | |
| US20010018697A1 (en) | Structured document processing system and structured document processing method | |
| CN109144567B (en) | Cross-platform webpage rendering method and device, server and storage medium | |
| CN111045683A (en) | Applet code compiling method, device, equipment and medium | |
| US11418622B2 (en) | System and methods for web-based software application translation | |
| JP2001084147A (en) | Device and method for converting character string, and recording medium | |
| CN108197091B (en) | Method, system and related equipment for creating data table | |
| CN114356480B (en) | Front-end internationalization multi-language conversion method and system based on figma | |
| CN113139390A (en) | Language conversion method and device applied to code character strings | |
| CN113434133B (en) | Application building method, device, equipment and computer readable storage medium | |
| US20030158894A1 (en) | Multiterminal publishing system and corresponding method for using same | |
| KR20210089081A (en) | Landing page processing method, device, equipment and medium | |
| US10282174B2 (en) | Software layout processing localization | |
| CN111459537A (en) | Redundant code removing method, device, equipment and computer readable storage medium | |
| CN113821496B (en) | Database migration method, system, device and computer readable storage medium | |
| CN111984262A (en) | WeChat cascading style sheet file processing method, device, equipment and storage medium | |
| US20160203233A1 (en) | Storage and retrieval of structured content in unstructured user-editable content stores | |
| CN112287266A (en) | Processing method and device for webpage configuration, equipment and storage medium | |
| Le Zou et al. | On synchronizing with web service evolution | |
| CN114706580A (en) | Front-end webpage development method and device, storage medium and electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |