chore: Figma documentation update for the new features

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
 
 <FigmaScreenshotWrapper
   aria-label="Usage - formatting text"
-  src="/img/docs/platform/figma-plugin/usage-formatting.png"
+  src="/img/docs/platform/figma-plugin/usage-formatting.webp"
 />
 
 # Using Plurals and Variables
@@ -27,19 +27,21 @@ You can use Tolgee's Plurals and Variables in Figma. To define a variable or mar
 
 <FigmaScreenshotWrapper
   aria-label="Usage - string details"
-  src="/img/docs/platform/figma-plugin/usage-string-details.png"
+  src="/img/docs/platform/figma-plugin/usage-string-details.webp"
 />
 
 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.
 
 <FigmaScreenshotWrapper
   aria-label="Usage - string details"
-  src="/img/docs/platform/figma-plugin/usage-string-details-variable.png"
+  src="/img/docs/platform/figma-plugin/usage-string-details-variable.webp"
 />
 
-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.
 
 <FigmaScreenshotWrapper
   aria-label="Usage - string details"
-  src="/img/docs/platform/figma-plugin/usage-string-details-plural.png"
+  src="/img/docs/platform/figma-plugin/usage-string-details-plural.webp"
 />

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.
 
-<FigmaScreenshotWrapper src="/img/docs/platform/figma-plugin/setup-before-validation.png" />
+<FigmaScreenshotWrapper src="/img/docs/platform/figma-plugin/setup-before-validation.webp" />
+
+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.
+
+<FigmaScreenshotWrapper src="/img/docs/platform/figma-plugin/setup-during-validation.webp" />
+
+### 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.
+<FigmaScreenshotWrapper src="/img/docs/platform/figma-plugin/namespaces-set-up.webp" />
 
 ## 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**.
+
+<FigmaScreenshotWrapper src="/img/docs/platform/figma-plugin/setup-after-validation.webp" />
+
+### 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.
+
+<FigmaScreenshotWrapper src="/img/docs/platform/figma-plugin/prefill-key-names.gif" />
+
+**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
+>
 
-<FigmaScreenshotWrapper src="/img/docs/platform/figma-plugin/setup-after-validation.png" />
+<FigmaScreenshotWrapper src="/img/docs/platform/figma-plugin/usage-push-setup.webp" />

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.
 
 <FigmaScreenshotWrapper
   aria-label="Usage - connect to existing key"
-  src="/img/docs/platform/figma-plugin/usage-connect-to-existing-key.png"
+  src="/img/docs/platform/figma-plugin/usage-connect-to-existing-key.webp"
 />
 
 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).
 
 <FigmaScreenshotWrapper
   aria-label="Usage - select existing key"
-  src="/img/docs/platform/figma-plugin/usage-connect-key-select.png"
+  src="/img/docs/platform/figma-plugin/usage-connect-key-select.webp"
 />
 
 To **remove a connection**, click on the "link" icon again and click **Remove connection**
 
 <FigmaScreenshotWrapper
   aria-label="Usage - remove connection to key"
-  src="/img/docs/platform/figma-plugin/usage-remove-connection.png"
+  src="/img/docs/platform/figma-plugin/usage-remove-connection.webp"
 />
 
 ## 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.
+>
+
 <FigmaScreenshotWrapper
   aria-label="Usage - pull all"
-  src="/img/docs/platform/figma-plugin/usage-pull-all.png"
+  src="/img/docs/platform/figma-plugin/usage-pull-all.webp"
 />
 
 ## 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.
 
 <FigmaScreenshotWrapper
   aria-label="Usage - locate string on the page"
-  src="/img/docs/platform/figma-plugin/usage-locate-string.png"
+  src="/img/docs/platform/figma-plugin/usage-locate-string.webp"
 />
+
+## 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.
+
+<FigmaScreenshotWrapper
+  aria-label="Usage - locate string on the page"
+  src="/img/docs/platform/figma-plugin/window-resize.gif"
+/>