Figma to Dev Generation Details

Figma Projects: For UI/UX Designers

Designers create interfaces in Figma, use the Figma Lingoport Plugin to push the strings to a Localyzer Figma Project. Those Figma strings can be translated. The translations can be shown in Figma using the Figma Lingoport plugin.

• See: Create_a_Figma_project

The Figma strings are kept in a repository. This repository is not for developers, it is only for Localyzer.

In the Figma repository, Figma files are located in 'figma/locales/<locale>/translation.json'. For example:

• figma/locales/en/translation.json
• figma/locales/fr/translation.json

In the Figma project, keys are created. Those keys will be used to generate the key/value pairs for Developer files via the messages.properties intermediary files. The Keys Figma File is located under:

• figma/locales/keys/translation.json

In parallel, some intermediary Figma Files are created to show the key/value pairs as a preparation step to generating Developer files. Their location follows this pattern:

• figma/locales/en/messages.properties
• figma/locales/fr/messages.properties

Source strings, translated strings, and keys are all visible from Figma using the Figma Lingoport Plugin.

Figma2Dev Projects: For Software Developers

Software developers can benefit from having resource files generated from the Figma Projects directly in a repository and format of their choice. There is no need to keep copying and pasting from the Figma design, be it the source or the target locale. Developers can have those references and values before even starting the actual code of the application.

Key value pairs for the Developer files (resource files) can be generated from the source and target strings of the Localyzer Figma project. To create a Figma to Dev project, see: Create_a_Localyzer_only_project#Figma_to_Dev

Developers files, generated or authored by developers, are typically resx, properties, JSON, .strings, strings.xml files.

Recommendation

Set up the destination Developer file in the Figma2Dev project when the Figma design for one set of elements is done and the translations are complete. This will provide developers with both source and target (translated) files to start their application.

Switch to a new generated destination Developer file to start a new set of design elements. You can also clear the Figma2Dev setting up, so that no more generation can overwrite the file developers are now working from.

By following this recommendation, Developers will avoid their changes being overwritten if the Figma design keeps changing.

Preferred: Separate Developer Files

Example: Part 1 - User Management page Figma Design

For example, a Figma design is finalized for User Management. The translations are validated. At this point, the Figma2Dev points to a file named "locales/user_management.en_US.resx". The following files are created:

  locales/user_management.en_US.resx
  locales/user_management.fr_FR.resx
  locales/user_management.ja_JP.resx

etc.

Example: Part 2 - Moving to a Billing page Figma Design

Now the Figma users are designing a Billing page: The billing Figma design uses a new Localyzer Figma project

• A new Figma project in Localyzer
• The Figma Lingoport plugin pointing to the new Figma Localyzer project

Switch the Figma2Dev to point to the new Figma project and a new destination file, for instance "locales/billing.en_US.resx" This will prevent the previously generated user_management.*.resx files to be overwritten, in case the developers want to make changes to the first set of key/value pairs.

The developer repository will now include:

  locales/billing.en_US.resx
  locales/billing.fr_FR.resx
  locales/billing.ja_JP.resx
  locales/user_management.en_US.resx
  locales/user_management.fr_FR.resx
  locales/user_management.ja_JP.resx

The billing Developer resource files could also be generated in a different developer repository, which could mean

• A new Developer repository with a new Figma2Dev project pointing to the billing.en_US.resx
• Clearing up the previous project Figma2Dev setting so the user_management developer files are not overwritten.

When developers change the generated values, Localyzer will track those changes. For example modified values in user_management.en_US.resx will be sent to translation and returned into their corresponding translated files.

The Localyzer project for developers can be configured to add new locales.

See below as to the impact of keeping the Figma design and the generated file in synch.

Alternative: Multiple Figma Projects -> One Developer File

This approach is nto recommended; however, this may be necessary in some cases.

When one Figma2Dev project needs to have multiple Figma project generated key/value pairs, best is to set the Figma project keys prefix separate.

For instance, a Localyzer Figma for User Management may have a UM prefix, and a separate Billing Localyzer Figma project a BI prefix. If the developer project has one file for both, say Resources.en_US.resx, then the key value coming from the two Figma projects will be clearly delineated and there will not no chance for the same key being generated from both.

The Figma2Dev configuration would for instance start pointing to the Localyzer User Management project and the Resources.en_US.resx, with key/values pairs like UM_File_17/File; Then that Figma design is finished and a new Figma Localyzer project is created, the Figma2Dev configuration would then point the the Billing Figma project and the same resource fileResources.en_US.resx, and the only keys generated would come from the Billing project, so BI_Cost_11/Cost. The User Management Figma project previously generated key/value would be considered 'outside' the generation, since the generation is from Billing.

Edits in Figma or Developer Files: Who Wins?

After initial translation of Figma project and generation of developer resource files, changes may occur in either. What happens to the generated resources in the Developer Files?

For the generated key/value from Figma, any change in Figma (updated value, new string, etc.) will overwrite all the generated resources in the corresponding Developer file. It will not affect key/value pairs which were created outside of the generation, as for instance an error message which would not be part of the Figma design.

Figma wins below means that all the key values coming from Figma are recreated and overwrite any edits done on those values by the developers or the translation. Key/value pairs created outside of the Figma2Dev generation are not touched. In the same developer files, you can have key/value pairs generated from Figma, and others created by developers, outside of the Figma design.

Here are some scenarios that may occur when editing both Figma and LRM resource files:

Key Changes

• A new key has been created in the Figma file(s) -> Figma wins
• Key in Figma source value has changed since last time generation was run -> Figma wins
• Key in Figma target value has changed since last time generation was run -> Figma wins
• Developer changed a Figma key (in effect, same as a key outside of Figma) in the Dev resource file and the change was imported -> Developer wins
• New key/value pairs are added in the Developer file -> Those are not affected

Value Changes

• If any value of either the Figma source file or its corresponding Figma translated file have changed since last time generation was run -> Figma wins
  • After the conversion both the Figma resource base file and target file have changed
  • There will be no NOT_IN_LRM error that usually occurs when both the base and target files have the same new key.

Restriction on the Developer Files Generation

• Generation of Developer Files from Figma project cannot happen when the Figma2Dev project has outstanding prep kits
• Parser type must support generation. The following parser types do not support Figma -> Dev generation.
  • text
  • binary
  • html
  • xhtml
• Parser types such as json or yaml cannot have language or global tags defined