Usage
Pushing texts from Figma into Tolgee
First, you need to provide key name to each text that you want to push to Tolgee. If you use namespaces in Tolgee, you can select what namespace should be used for given key.
To push all texts into Tolgee, first unselect all and then click Push all. If you need to push only some keys, select them first and click Push.
Then you will see an overview of the keys that will be pushed into Tolgee. By default, the plugin will create (or update) screenshots to the keys – you can disable this by unchecking the checkbox. To confirm the settings, click Push to Tolgee.
The plugin uses figma frames to decide what is a "screen" so if the screenshots are not properly created check if you wrap each screen in frame. If a string occurs in multiple frames the top-level one is taken.
Connecting to existing keys
If you have existing keys in Tolgee, you can connect them to the texts in Figma with our plugin.
First, click on the "link" icon.
Then select a key from list of keys that you want to connect the text to. You can edit the text in the Search field to find any key in Tolgee.
After you connect an existing key to the text, the "link" icon will be darker (or lighter when using the Dark theme). If you want to remove the connect, just click on the "link" icon again and click Remove connection.
Pulling texts from Tolgee into Figma
Once the keys are translated, you can pull them from Tolgee into Figma. Select a language on the main screen and then click Replace.
If there are some keys with missing translation in the selected language, they will be displayed on this screen.
If you want to update new translations for all texts, click Pull all.
If you want to update only some translations, select the keys and click Pull.
Creating page copies
With our plugin, you can create the following page copies:
- Copy with key names – this creates a copy with all texts replaced with the corresponding key names. Duplicate pages that contain key names are particularly useful for developers, as they provide clear guidance on which key names to use in the code.
- Copy with languages – this creates a copy for each selected language with texts replaced with their translation in given language.
To create a page copy, first click Create a copy:
Next, choose whether you would like to create a copy with key names or with translations:
After you click Create, the plugin will automatically create new page(s) according to what you selected.
Updating translated page copies
When you open the page copy, you can click Pull all to update all translations when no texts are selected.
If you want to update only translations of some keys, first select the keys and then click Pull.
Locating translation on the page
If you want to locate a string on the page, click on the more button and then on the Move to string button, which will align your figma view so that the node is in the center of your screen.
Formatting text
There are a few syntaxes supported to format the text for Figma. Supported are the following HTML tags:
<b>or<strong>– bold<i>or<em>– italic<u>– underline<br>– line break
If your text contains any of these tags, the plugin will automatically format the text in Figma. It will just work in the direction from Tolgee to Figma, so if you change the font weight or decoration for any of the connected texts in figma, this plugin won't recognize these changes.
Using Plurals and Variables
You can use Tolgee's Plurals and Variables in Figma. To define a variable or mark a string as plural, you need to go to the String details page in the plugin by clicking on the More button for a text.
In the String details page, you can define a variable by using the ICU syntax you know from Tolgee ({varName}) and mark a string as plural by checking the Plural checkbox.
