diff --git a/platform/integrations/figma_plugin/formatting_text_and_variables.mdx b/platform/integrations/figma_plugin/formatting_text_and_variables.mdx index 1b059b96e..ac0939227 100644 --- a/platform/integrations/figma_plugin/formatting_text_and_variables.mdx +++ b/platform/integrations/figma_plugin/formatting_text_and_variables.mdx @@ -18,7 +18,7 @@ If your text contains any of these tags, the plugin will automatically format th # Using Plurals and Variables @@ -27,19 +27,21 @@ You can use Tolgee's Plurals and Variables in Figma. To define a variable or mar 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. +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. + +To add a number to the fields simply write a "#" sign. \ No newline at end of file diff --git a/platform/integrations/figma_plugin/setup.mdx b/platform/integrations/figma_plugin/setup.mdx index 3a1149d6b..2904df343 100644 --- a/platform/integrations/figma_plugin/setup.mdx +++ b/platform/integrations/figma_plugin/setup.mdx @@ -1,7 +1,7 @@ --- id: setup -title: Setup -sidebar_label: Setup +title: Setup & Settings +sidebar_label: Setup & Settings 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. --- @@ -11,7 +11,9 @@ import { FigmaScreenshotWrapper } from '../../shared/_FigmaScreenshotWrapper'; 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. -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 +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 ## Setup @@ -21,18 +23,80 @@ If you are using the self-hosted version, you can update the "Tolgee URL" field 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. + + + +### Use Namespaces + +After connecting to the project with an API key, you will see a checkbox for using [namespaces](/platform/translation_keys/namespaces). + +When ticking the checkbox, additional settings appear under it. Make sure to scroll down as they may be outside your current window size. + +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. -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. + ## Settings -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. +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. + +### Strings and Keys + +After initial setup and clicking **Next**, you can see additional settings that have two parts **Key name** and **Ignore strings**. + + + +### Key Name + +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. + +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. + +**Working with Key format:** + +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. + +When clicking on **Key format**, you will see the following variables to choose from: +- artboard (name of the artboard frame) +- component (name of the nearest component) +- element name (name of the string) +- element text (displayed text of the string) +- frame (name of the nearest frame) +- group (name of the nearest group) +- section (name of the nearest section) + +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. + +The following options for **Formatting style** are available: +- keep original format +- element_name +- Element_name +- elementName +- ElementName +- elementname + +So if the original text is "Element name", it will change it according to the format that you choose. + +### Ignore Strings + +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. + +### Push + +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. -### Ignoring Numbers and Certain Text +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. -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. +Here you can choose from existing tags or add new tags by typing and then clicking **Add** or pressing Enter on your keyboard. -Then click **Save**, and you are now ready to use the plugin! +> Note: if someone adds a tag on the platform, it will not appear here - this function is just one way from Figma +> - + diff --git a/platform/integrations/figma_plugin/usage.mdx b/platform/integrations/figma_plugin/usage.mdx index f88c9718f..5fcbc38cc 100644 --- a/platform/integrations/figma_plugin/usage.mdx +++ b/platform/integrations/figma_plugin/usage.mdx @@ -17,24 +17,24 @@ After installing the plugin from the [Figma plugin page](https://www.figma.com/c 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…** 2. Find and open “Tolgee” -3. Insert your [API key](https://docs.tolgee.io/platform/account_settings/api_keys_and_pat_tokens) +3. Insert your [API key](/platform/account_settings/api_keys_and_pat_tokens) 4. Keep the Tolgee URL default if you are not self-hosting -5. Click “Validate” and then “Save” +5. Click **Validate** and then **Next** 6. Done! -A full guide can be found on the [Setup](https://docs.tolgee.io/platform/integrations/figma_plugin/setup) docs page +A full guide can be found on the [Setup](/platform/integrations/figma_plugin/setup) docs page ![Installing and Connecting the Plugin Video Guide](/img/docs/platform/figma-plugin/installing-and-connecting-the-plugin.gif) ## Push: Adding New Strings and Translations -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**:** +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: 1. Choose the frame or just the text for which you want to add the keys 2. [Name your key](https://docs.tolgee.io/blog/naming-translation-keys) -3. Click Push to upload the changes to Tolgee -4. By default, the plugin will create (or update) screenshots to the keys - you can disable this by unchecking the checkbox. -5. Then, if everything is okay, click “Push to Togee” to add the new keys +3. Click **Push** to upload the changes to Tolgee +4. By default, the plugin will create (or update) screenshots to the keys - you can disable this by unchecking the checkbox in the settings. +5. Then, if everything is okay, click **Push to Togee** to add the new keys 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 > 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 ## Pull: Working with existing translations and keys -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. +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. ### Connecting Figma to Existing Translations on Toggle @@ -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). To **remove a connection**, click on the "link" icon again and click **Remove connection** ## How to Switch Languages and Add New Translations from the Platform @@ -92,9 +92,12 @@ If you want to update only some translations, select the keys and click **Pull** If you want to update new translations for all texts, click **Pull all**. +> It works similarly for pushing, where you can select objects or push all. +> + ## Creating and Updating Page Copies @@ -103,7 +106,7 @@ Copies can be used to work with the translated versions of the project without c - **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. -1. To create a page copy, first click ”**Create a copy”** +1. To create a page copy, first click **"Create a copy"** 2. Choose whether you would like to create a copy with key names or with translations: 3. After you click **Create**, the plugin will automatically create new page(s) according to what you selected. @@ -119,11 +122,20 @@ If you want to update only translations of some text, first select the text and ![Updating A Copy Video Guide](/img/docs/platform/figma-plugin/updating-a-copy.gif) -## Locating translation on the page +## 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 text is in the center of your screen. + +## Changing Window Size + +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. + + \ No newline at end of file diff --git a/static/img/docs/platform/figma-plugin/adding-new-strings-and-translations.gif b/static/img/docs/platform/figma-plugin/adding-new-strings-and-translations.gif index ade9c056d..40d59f2e0 100644 Binary files a/static/img/docs/platform/figma-plugin/adding-new-strings-and-translations.gif and b/static/img/docs/platform/figma-plugin/adding-new-strings-and-translations.gif differ diff --git a/static/img/docs/platform/figma-plugin/creating-and-updating-page-copies.gif b/static/img/docs/platform/figma-plugin/creating-and-updating-page-copies.gif index 78bb97d18..6f4b59684 100644 Binary files a/static/img/docs/platform/figma-plugin/creating-and-updating-page-copies.gif and b/static/img/docs/platform/figma-plugin/creating-and-updating-page-copies.gif differ diff --git a/static/img/docs/platform/figma-plugin/installing-and-connecting-the-plugin.gif b/static/img/docs/platform/figma-plugin/installing-and-connecting-the-plugin.gif index d91c0c42f..2a5cc455b 100644 Binary files a/static/img/docs/platform/figma-plugin/installing-and-connecting-the-plugin.gif and b/static/img/docs/platform/figma-plugin/installing-and-connecting-the-plugin.gif differ diff --git a/static/img/docs/platform/figma-plugin/namespaces-set-up.webp b/static/img/docs/platform/figma-plugin/namespaces-set-up.webp new file mode 100644 index 000000000..b1c5365b4 Binary files /dev/null and b/static/img/docs/platform/figma-plugin/namespaces-set-up.webp differ diff --git a/static/img/docs/platform/figma-plugin/prefill-key-names.gif b/static/img/docs/platform/figma-plugin/prefill-key-names.gif new file mode 100644 index 000000000..4b0de05b4 Binary files /dev/null and b/static/img/docs/platform/figma-plugin/prefill-key-names.gif differ diff --git a/static/img/docs/platform/figma-plugin/setup-after-validation.png b/static/img/docs/platform/figma-plugin/setup-after-validation.png deleted file mode 100644 index c13733d79..000000000 Binary files a/static/img/docs/platform/figma-plugin/setup-after-validation.png and /dev/null differ diff --git a/static/img/docs/platform/figma-plugin/setup-after-validation.webp b/static/img/docs/platform/figma-plugin/setup-after-validation.webp new file mode 100644 index 000000000..2cf9b95fe Binary files /dev/null and b/static/img/docs/platform/figma-plugin/setup-after-validation.webp differ diff --git a/static/img/docs/platform/figma-plugin/setup-before-validation.png b/static/img/docs/platform/figma-plugin/setup-before-validation.png deleted file mode 100644 index 32753920b..000000000 Binary files a/static/img/docs/platform/figma-plugin/setup-before-validation.png and /dev/null differ diff --git a/static/img/docs/platform/figma-plugin/setup-before-validation.webp b/static/img/docs/platform/figma-plugin/setup-before-validation.webp new file mode 100644 index 000000000..aeaf1493c Binary files /dev/null and b/static/img/docs/platform/figma-plugin/setup-before-validation.webp differ diff --git a/static/img/docs/platform/figma-plugin/setup-during-validation.webp b/static/img/docs/platform/figma-plugin/setup-during-validation.webp new file mode 100644 index 000000000..6552657c3 Binary files /dev/null and b/static/img/docs/platform/figma-plugin/setup-during-validation.webp differ diff --git a/static/img/docs/platform/figma-plugin/switch-languages.gif b/static/img/docs/platform/figma-plugin/switch-languages.gif index 59a3eb943..c451dd2b8 100644 Binary files a/static/img/docs/platform/figma-plugin/switch-languages.gif and b/static/img/docs/platform/figma-plugin/switch-languages.gif differ diff --git a/static/img/docs/platform/figma-plugin/updating-a-copy.gif b/static/img/docs/platform/figma-plugin/updating-a-copy.gif index 1e229be0a..a72296353 100644 Binary files a/static/img/docs/platform/figma-plugin/updating-a-copy.gif and b/static/img/docs/platform/figma-plugin/updating-a-copy.gif differ diff --git a/static/img/docs/platform/figma-plugin/usage-connect-key-select.png b/static/img/docs/platform/figma-plugin/usage-connect-key-select.png deleted file mode 100644 index 4658a7484..000000000 Binary files a/static/img/docs/platform/figma-plugin/usage-connect-key-select.png and /dev/null differ diff --git a/static/img/docs/platform/figma-plugin/usage-connect-key-select.webp b/static/img/docs/platform/figma-plugin/usage-connect-key-select.webp new file mode 100644 index 000000000..59a3eb40e Binary files /dev/null and b/static/img/docs/platform/figma-plugin/usage-connect-key-select.webp differ diff --git a/static/img/docs/platform/figma-plugin/usage-connect-to-existing-key.png b/static/img/docs/platform/figma-plugin/usage-connect-to-existing-key.png deleted file mode 100644 index ade8d95fe..000000000 Binary files a/static/img/docs/platform/figma-plugin/usage-connect-to-existing-key.png and /dev/null differ diff --git a/static/img/docs/platform/figma-plugin/usage-connect-to-existing-key.webp b/static/img/docs/platform/figma-plugin/usage-connect-to-existing-key.webp new file mode 100644 index 000000000..a729ee70b Binary files /dev/null and b/static/img/docs/platform/figma-plugin/usage-connect-to-existing-key.webp differ diff --git a/static/img/docs/platform/figma-plugin/usage-copy-pull-all.png b/static/img/docs/platform/figma-plugin/usage-copy-pull-all.png deleted file mode 100644 index 6b58a115c..000000000 Binary files a/static/img/docs/platform/figma-plugin/usage-copy-pull-all.png and /dev/null differ diff --git a/static/img/docs/platform/figma-plugin/usage-formatting.png b/static/img/docs/platform/figma-plugin/usage-formatting.png deleted file mode 100644 index f55de967d..000000000 Binary files a/static/img/docs/platform/figma-plugin/usage-formatting.png and /dev/null differ diff --git a/static/img/docs/platform/figma-plugin/usage-formatting.webp b/static/img/docs/platform/figma-plugin/usage-formatting.webp new file mode 100644 index 000000000..50624715a Binary files /dev/null and b/static/img/docs/platform/figma-plugin/usage-formatting.webp differ diff --git a/static/img/docs/platform/figma-plugin/usage-locate-string.png b/static/img/docs/platform/figma-plugin/usage-locate-string.png deleted file mode 100644 index 5310ffcf2..000000000 Binary files a/static/img/docs/platform/figma-plugin/usage-locate-string.png and /dev/null differ diff --git a/static/img/docs/platform/figma-plugin/usage-locate-string.webp b/static/img/docs/platform/figma-plugin/usage-locate-string.webp new file mode 100644 index 000000000..843a4bda5 Binary files /dev/null and b/static/img/docs/platform/figma-plugin/usage-locate-string.webp differ diff --git a/static/img/docs/platform/figma-plugin/usage-pull-all.png b/static/img/docs/platform/figma-plugin/usage-pull-all.png deleted file mode 100644 index 47e069009..000000000 Binary files a/static/img/docs/platform/figma-plugin/usage-pull-all.png and /dev/null differ diff --git a/static/img/docs/platform/figma-plugin/usage-pull-all.webp b/static/img/docs/platform/figma-plugin/usage-pull-all.webp new file mode 100644 index 000000000..300034ed7 Binary files /dev/null and b/static/img/docs/platform/figma-plugin/usage-pull-all.webp differ diff --git a/static/img/docs/platform/figma-plugin/usage-push-setup.webp b/static/img/docs/platform/figma-plugin/usage-push-setup.webp new file mode 100644 index 000000000..57471766d Binary files /dev/null and b/static/img/docs/platform/figma-plugin/usage-push-setup.webp differ diff --git a/static/img/docs/platform/figma-plugin/usage-remove-connection.png b/static/img/docs/platform/figma-plugin/usage-remove-connection.png deleted file mode 100644 index af4943dad..000000000 Binary files a/static/img/docs/platform/figma-plugin/usage-remove-connection.png and /dev/null differ diff --git a/static/img/docs/platform/figma-plugin/usage-remove-connection.webp b/static/img/docs/platform/figma-plugin/usage-remove-connection.webp new file mode 100644 index 000000000..bf45f784d Binary files /dev/null and b/static/img/docs/platform/figma-plugin/usage-remove-connection.webp differ diff --git a/static/img/docs/platform/figma-plugin/usage-string-details-plural.png b/static/img/docs/platform/figma-plugin/usage-string-details-plural.png deleted file mode 100644 index 23d04f069..000000000 Binary files a/static/img/docs/platform/figma-plugin/usage-string-details-plural.png and /dev/null differ diff --git a/static/img/docs/platform/figma-plugin/usage-string-details-plural.webp b/static/img/docs/platform/figma-plugin/usage-string-details-plural.webp new file mode 100644 index 000000000..f00b968bd Binary files /dev/null and b/static/img/docs/platform/figma-plugin/usage-string-details-plural.webp differ diff --git a/static/img/docs/platform/figma-plugin/usage-string-details-variable.png b/static/img/docs/platform/figma-plugin/usage-string-details-variable.png deleted file mode 100644 index 749c6ba5d..000000000 Binary files a/static/img/docs/platform/figma-plugin/usage-string-details-variable.png and /dev/null differ diff --git a/static/img/docs/platform/figma-plugin/usage-string-details-variable.webp b/static/img/docs/platform/figma-plugin/usage-string-details-variable.webp new file mode 100644 index 000000000..d7f20f8c4 Binary files /dev/null and b/static/img/docs/platform/figma-plugin/usage-string-details-variable.webp differ diff --git a/static/img/docs/platform/figma-plugin/usage-string-details.png b/static/img/docs/platform/figma-plugin/usage-string-details.png index d1af268d9..460bdbc79 100644 Binary files a/static/img/docs/platform/figma-plugin/usage-string-details.png and b/static/img/docs/platform/figma-plugin/usage-string-details.png differ diff --git a/static/img/docs/platform/figma-plugin/usage-string-details.webp b/static/img/docs/platform/figma-plugin/usage-string-details.webp new file mode 100644 index 000000000..838d9aa4f Binary files /dev/null and b/static/img/docs/platform/figma-plugin/usage-string-details.webp differ diff --git a/static/img/docs/platform/figma-plugin/window-resize.gif b/static/img/docs/platform/figma-plugin/window-resize.gif new file mode 100644 index 000000000..32224b145 Binary files /dev/null and b/static/img/docs/platform/figma-plugin/window-resize.gif differ