You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
On the page, when you open **String details**, you can define a variable by using the [ICU syntax](https://docs.tolgee.io/platform/translation_process/tolgee_universal_icu_placeholders) you know from Tolgee (`{varName}`). This way, you can later find it on the Tolgee platform, and the developers will know how to approach it.
In the **String details** page, you can also mark a string as plural by checking the **Plural** checkbox. This allows to define two different texts. One for a singular form, and the other for more the amount grater than one. It is also possible to add one for a zero. In the “Values for Figma” field, you can set a default value that will be shown in Figma so you can work with the design with the text and see an example. The “Values for Figma” works for both variables and plurals alike.
40
+
In the **String details** page, you can also mark a string as plural by checking the **Plural** checkbox. This allows to define two different texts. One for a singular form, and the other for more the amount grater than one. It is also possible to add one for a zero. In the "Values for Figma" field, you can set a default value that will be shown in Figma so you can work with the design with the text and see an example. The "Values for Figma" works for both variables and plurals alike.
41
+
42
+
To add a number to the fields simply write a "#" sign.
description: Learn how to install and setup Tolgee Figma plugin. First, you need to install the plugin from the Figma Community by clicking on the Try it out button.
6
6
---
7
7
@@ -11,7 +11,9 @@ import { FigmaScreenshotWrapper } from '../../shared/_FigmaScreenshotWrapper';
11
11
12
12
First, you need to install the plugin from the [Figma Community](https://www.figma.com/community/plugin/1212381421658754793/Tolgee) by clicking on the ”**Open in…**” or “Open in Dev Mode” button.
13
13
14
-
You can find the Tolgee plugin in Figma by clicking the **Actions icon** (shortcut CTRL + K or ⌘ + K) **→ “Plugins & widgets”** in the toolbar, search for "Tolgee," and click Run. Alternatively, click the Figma button in the top left corner, then select **Plugins → Manage Plugins…** and search for Tolgee
14
+
You can find the Tolgee plugin in Figma by clicking the **Actions icon** (shortcut CTRL + K or ⌘ + K) **→ “Plugins & widgets”** in the toolbar, search for "Tolgee," and click Run.
15
+
16
+
Alternatively, click the Figma button in the top left corner, then select **Plugins → Manage Plugins…** and search for Tolgee
15
17
16
18
## Setup
17
19
@@ -21,18 +23,80 @@ If you are using the self-hosted version, you can update the "Tolgee URL" field
21
23
22
24
Then you need to click on **Validate** to validate the provided credentials.
After the credentials are validated, you can see the name of the connected project. Clicking on the name will take you to the project page on the platform. Next, you can select the current language of your Figma file.
After connecting to the project with an API key, you will see a checkbox for using [namespaces](/platform/translation_keys/namespaces).
35
+
36
+
When ticking the checkbox, additional settings appear under it. Make sure to scroll down as they may be outside your current window size.
37
+
38
+
In the default namespaces selector, you can choose from existing ones or create a new one by clicking **+ Set custom**, and then you can choose a name for it.
25
39
26
-
After the credentials are validated, select the language of the Figma file, the default namespace for new keys (if you use namespaces), and whether to hide the namespace selector.
In this section, you can find how to use more detailed features of the plugin to for example omit numbers or text that does not need translating.
44
+
In this section, you can find out how to use more detailed features of the plugin, such as prefilling keys, omitting numbers or text that does not need translating.
45
+
46
+
### Strings and Keys
47
+
48
+
After initial setup and clicking **Next**, you can see additional settings that have two parts **Key name** and **Ignore strings**.
Prefill key name section helps you automatically generate names for the [translation keys](/platform/translation_keys/keys) based on the information that you have in figma using information like the name of the element or the frame.
55
+
56
+
After clicking on the checkbox **prefill key name**, you will see a field called **Key format** and a selector **Formatting style**. When you start choosing the options, there will also be a preview at the bottom so you can see what it will look like before continuing.
57
+
58
+
**Working with Key format:**
59
+
60
+
The key format field lets you customize how the prefilled keys will look like. It creates a template for all the keys that will be prefilled. The template can be defined with text, separators, and variables.
61
+
62
+
When clicking on **Key format**, you will see the following variables to choose from:
63
+
- artboard (name of the artboard frame)
64
+
- component (name of the nearest component)
65
+
- element name (name of the string)
66
+
- element text (displayed text of the string)
67
+
- frame (name of the nearest frame)
68
+
- group (name of the nearest group)
69
+
- section (name of the nearest section)
70
+
71
+
You can click on whichever variables you like and add them. Between the parts, you can use separators like ".", ":", etc., or static text.
**Formatting style** lets you choose how auto-generated keys will be formatted. It helps you maintain consistent formatting by automatically handling spaces and capitalization.
76
+
77
+
The following options for **Formatting style** are available:
78
+
- keep original format
79
+
- element_name
80
+
- Element_name
81
+
- elementName
82
+
- ElementName
83
+
- elementname
84
+
85
+
So if the original text is "Element name", it will change it according to the format that you choose.
86
+
87
+
### Ignore Strings
88
+
89
+
These checkboxes allow you to choose which string will not be used for localization. Hidden layers and numbers are hidden by default, as in most cases, they do not need to be translated. Additionally, you can also hide text layers with a specific prefix of your choise. By default, it is prefilled with an underscore sign, but you can change it.
90
+
91
+
### Push
92
+
93
+
The last part of the initial setup is called **Push**. Here you can choose if you want to update screenshots when pushing, which is turned on by default.
31
94
32
-
### Ignoring Numbers and Certain Text
95
+
Another option is **Add tags**. It will include [tags](/platform/translation_keys/tags) together with the [keys](/platform/translation_keys/keys) that you push to the Tolgee platform. Pushing means adding the information from Figma to the Tolgee platform.
33
96
34
-
You can select which text nodes should be considered for translation. By default, Tolgee filters out the text nodes, whose name starts with the underscore "_" and the nodes that contain purely numbers. You can adjust these settings to your needs.
97
+
Here you can choose from existing tags or add new tags by typing and then clicking **Add** or pressing Enter on your keyboard.
35
98
36
-
Then click **Save**, and you are now ready to use the plugin!
99
+
> Note: if someone adds a tag on the platform, it will not appear here - this function is just one way from Figma
Copy file name to clipboardExpand all lines: platform/integrations/figma_plugin/usage.mdx
+27-15Lines changed: 27 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -17,24 +17,24 @@ After installing the plugin from the [Figma plugin page](https://www.figma.com/c
17
17
18
18
1. Access the plugin by clicking the **Actions** icon in the toolbar (shortcut CTRL + K or ⌘ + K), or click the Figma button in the top left corner, then select **Plugins → Manage Plugins…**
19
19
2. Find and open “Tolgee”
20
-
3. Insert your [API key](https://docs.tolgee.io/platform/account_settings/api_keys_and_pat_tokens)
20
+
3. Insert your [API key](/platform/account_settings/api_keys_and_pat_tokens)
21
21
4. Keep the Tolgee URL default if you are not self-hosting
22
-
5. Click “Validate” and then “Save”
22
+
5. Click **Validate** and then **Next**
23
23
6. Done!
24
24
25
-
A full guide can be found on the [Setup](https://docs.tolgee.io/platform/integrations/figma_plugin/setup) docs page
25
+
A full guide can be found on the [Setup](/platform/integrations/figma_plugin/setup) docs page
26
26
27
27
28
28
29
29
## Push: Adding New Strings and Translations
30
30
31
-
If you are working on a **new project** and would like to start localizing, you need to provide key names to each text that you want to translate with Tolgee. To add the keys, you should**:**
31
+
If you are working on a **new project** and would like to start localizing, you need to provide key names to each text that you want to translate with Tolgee. To add the keys, you should:
32
32
33
33
1. Choose the frame or just the text for which you want to add the keys
34
34
2.[Name your key](https://docs.tolgee.io/blog/naming-translation-keys)
35
-
3. Click Push to upload the changes to Tolgee
36
-
4. By default, the plugin will create (or update) screenshots to the keys - you can disable this by unchecking the checkbox.
37
-
5. Then, if everything is okay, click “Push to Togee” to add the new keys
35
+
3. Click **Push** to upload the changes to Tolgee
36
+
4. By default, the plugin will create (or update) screenshots to the keys - you can disable this by unchecking the checkbox in the settings.
37
+
5. Then, if everything is okay, click **Push to Togee** to add the new keys
38
38
6. Now you should be able to find the key on the Tolgee platform, together with the screenshot of the text in your base language
39
39
40
40
> The plugin uses Figma `frames` to decide what a "screen" is, so if the screenshots are not properly created, check if you wrap each screen in a `frame`. If a string occurs in multiple frames, the top-level one is taken.
@@ -44,7 +44,7 @@ If you are working on a **new project** and would like to start localizing, you
44
44
45
45
## Pull: Working with existing translations and keys
46
46
47
-
If you are working on **a Figma file that****already has the [keys](https://docs.tolgee.io/platform/translation_keys/keys)** added on Tolgee, you can select the whole frame or just the text string and click “**Pull**” in the Tolgee plugin window to update them.
47
+
If you are working on **a Figma file that****already has the [keys](/platform/translation_keys/keys)** added on Tolgee, you can select the whole frame or just the text string and click “**Pull**” in the Tolgee plugin window to update them.
48
48
49
49
### Connecting Figma to Existing Translations on Toggle
50
50
@@ -54,21 +54,21 @@ First, click on the “Link” icon.
Second, select a key from the 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).
@@ -103,7 +106,7 @@ Copies can be used to work with the translated versions of the project without c
103
106
104
107
-**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.
105
108
-**Copy with languages** - this creates a copy for each selected language with texts replaced with their translation in given language.
106
-
1. To create a page copy, first click ”**Create a copy”**
109
+
1. To create a page copy, first click **"Create a copy"**
107
110
2. Choose whether you would like to create a copy with key names or with translations:
108
111
3. After you click **Create**, the plugin will automatically create new page(s) according to what you selected.
109
112
@@ -119,11 +122,20 @@ If you want to update only translations of some text, first select the text and
119
122
120
123
121
124
122
-
## Locating translation on the page
125
+
## Locating Translation on the Page
123
126
124
127
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 text is in the center of your screen.
There is an "icon" in the bottom right corner. Click and hold to change the window size using it. It can help to see more data, especially when you have long lists of keys.
0 commit comments