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.

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. 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.

Edits in Figma Files 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 for developers?

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 new key values are added to the Developer file
• Key in Figma base file has changed since last time generation was run -> Figma wins new key values are added to the Developer file
• Key in Figma target file has changed since last time generation was run -> Figma wins the Developer files are overwritten
• Developer changed a Figma key in the Dev resource file and the change was imported -> Developer wins

Value Changes

• If the value of the Figma files (source and/or target) do not change -> Developer wins the developer changes to the value are kept
• 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 the Developer files values are updated, even if the developer modified those values before the new generation.
  • 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