Filter by screenshots

Learn how to filter your translation keys based on the screenshots.

Ilya Krukowski avatar
Written by Ilya Krukowski
Updated over a week ago

Suppose you have uploaded a handful of screenshots to the project and linked them to the existing translation keys. How would you filter out only those keys that are linked to a specific screenshot? There is a special filter by screenshots feature available!

Filtering by screenshots

To get started, open your project editor and click on the Filter by screenshots icon. Please note that this icon won't be visible if there are no screenshots uploaded to the project. Next, you can click on one of the screenshots to display only the keys linked to it:

Now you will see only the relevant keys and can manage them as needed!

Organizing screenshots with tags

What if you have many uploaded screenshots and it is becoming too hard to find the required one? Organize your screenshots with tags!

Adding screenshot tags

To add one or more tags to a screenshot, proceed to the Screenshots page by clicking on the corresponding menu item:

To quickly manage tags for a single screenshot, click on the label icon under the title:

Alternatively, you can click on the screenshot itself and edit its details in a separate dialog:

To add/remove tags to/from multiple screenshots, select them by ticking checkboxes next to their names and then select the Tags: add/remove action from the dropdown:

Enter the tag names and press either Remove or Add button.

Searching screenshots by tags

Once you have tagged the screenshots, you may filter them by tags. Return to the project editor, enable the Filter by screenshots feature and choose one of the options from the dropdown:

  • All screenshots — list all the screenshots uploaded to the current project.

  • Tags contains any of — list the screenshots that have at least one of the chosen tags assigned.

  • Tag contains all — list the screenshots that have all the chosen tags assigned. For example, suppose there are two screenshots: Setup (with the "setup", "main", and "priority" tags) and Welcome (with the "main" tag). You choose to list screenshots that contain all of the following tags: "setup" and "main". The Setup screenshot will be listed because it has both tags (the "priority" tag is simply ignored). The Welcome screenshot won't be listed because it does not have the "setup" tag.

  • Tag equals — list the screenshots that have only the chosen tags assigned. For example, there are two screenshots: Setup (with the "setup", "main", and "priority" tags) and Welcome (with the "main" and "priority" tags). You choose to list screenshots with tag equals to "main" and "priority". The Welcome screenshot will be listed because it has exactly the same tags. The Setup will not be listed because it also has a "priority" tag so the match is not exact.

  • Without tags — list only the untagged screenshots.

Implementing in your workflow

Filtering keys by screenshots is especially handy when used in conjunction with the Figma or Sketch plugin. For example:

  • You have a project on Figma with designs for multiple pages.

  • You upload translation keys and generate screenshots for each designed page.

  • Then you proceed to Lokalise and assign tags to each generated screenshot, for instance: "main_page", "registration", "about", etc.

  • Then you open the project editor, open Filter by screenshots and search for a specific screenshot by its tags.

  • Lastly, you filter the keys by the chosen screenshot and perform translations.

This is almost like a live translation editing because each screenshot represents a single page, and each translation key is highlighted on the screenshot!

Did this answer your question?