Figma has become an essential tool for agile teams looking to streamline their development process. It enables designers to quickly brainstorm new features, create accurate wireframes, and test functionality with prototypes without any development. Many teams define all possible use cases and related screens in Figma, which helps product managers, product owners, and content managers to understand what kind of screens and information users might encounter.
Designers can also iterate existing features faster, as they know that what they see in Figma is what users will see in the final product.
It's needless to say that having Figma as the Source of Truth is beneficial since it can decrease the delivery time and increase confidence in the work of product managers, product owners, content managers, designers, developers, and translators.
😤 Challenges of Using Figma for Localization 🔗
However, introducing localization into the workflow can bring more harm than good and actually increase the delivery time and decrease confidence when set up improperly. 😳
Localizing the content while having Figma as the source of truth includes, among others, the following challenges:
- All keys need to be defined in Figma to keep it as a single source of truth. 🖊️
- Developers need to be able to easily understand which key refers to the content they see in Figma when developing the provided design.
- Developers must download the keys into folders they need and usually need to change key names to work with them. 📁
- Designers find it difficult to keep track of which keys already exist in the TMS, making it challenging for translators to avoid duplicating work.
Despite these challenges, companies still choose Figma as the source of truth for their designs because it provides a single point of reference for everyone involved in the development process. With Figma designs as the source of truth, it is easier to keep track of changes, identify potential issues, and ensure that the final product meets the original vision.
Defining new keys in Figma also allows translators to start translating before the developers begin developing the features and uploading new keys. Translations and development can begin at the same time, decreasing the delivery time of new features. When done correctly, it can speed up developers' work as they can use readable keys without having to think of a key name and folder placement before using it.
What is a source key? Find the answer in our FAQ.
😎 The Benefits of Using Figma as the Source of Truth 🔗
Figma, when used as the source of truth, brings significant benefits to agile teams and the product development process, enabling seamless collaboration and boosting efficiency. By utilizing Figma as the central reference point, teams can leverage its features to streamline their workflows and enhance communication across various roles.
One notable advantage of using Figma is the ability for designers to rapidly iterate on features, wireframes, and prototypes. Designers can brainstorm and visualize new ideas, test functionality, and create accurate representations of the user interface without relying on development resources. This empowers them to explore different design possibilities and make informed decisions based on user feedback, resulting in more efficient design iterations and a better final product.
Figma's role as the source of truth extends beyond the design phase and benefits developers as well. With Figma designs serving as the foundation, developers can easily access the keys and assets provided by designers, eliminating the need to create them from scratch. This streamlines the development process and ensures that developers accurately implement the intended design elements, leading to a more cohesive and consistent user experience.
Moreover, Figma's integration with tools like Localazy simplifies the localization process. By defining keys directly in Figma, translators can start working on translations even before the development phase begins. This parallelization of translation and development not only reduces the time required for feature delivery but also facilitates better collaboration between designers, developers, and translators. 😎
Figma's role as the single source of truth also promotes transparency and alignment among team members. Product managers, product owners, and content managers can easily refer to the Figma designs to gain a comprehensive understanding of the product's screens, user interactions, and overall vision. This shared reference point fosters clear communication and ensures that everyone involved in the development process is on the same page, reducing the likelihood of misunderstandings or discrepancies. By embracing Figma as the central reference point, teams can streamline their workflows, reduce development time, and ensure a cohesive and user-centric final product.
🚩 How to Set Up the Development Workflow with Figma and Localazy 🔗
In this section, we will explore how to effectively set up the development workflow using Figma as the source of truth and Localazy for translations. By following these steps, you can streamline the process and save valuable time, all while maintaining a centralized reference point for your designs.
This approach is suitable for anyone who would like to use Figma as the Source of Truth without having to manually organize and rename keys in Figma. When opting for this approach, you should define all the strings and thus design all the possible screens and scenarios in Figma to prevent the necessity to create strings from multiple sources.
Localazy project & key clusters 🔗
To begin, sign up for Localazy and create a new project. Choose Developer English as the source language. This allows responsible individuals to review the content uploaded from Figma and finalize the English version for production.
If you prefer to finalize the English version directly in Figma and only use Localazy for translations into other languages, you can select English as the source language.
Next, navigate to the project's general settings section and enable Key clustering under the Import & Export settings.
This feature clusters keys with the same value uploaded from Figma under a single Localazy key. For example, if you upload a word cancel from multiple screens in Figma, they will all exist nested in a single Localazy source key. This offers several advantages:
- Duplicates are eliminated, ensuring a clean and organized translation process.
- The amount of content for translations is reduced since duplicates no longer exist.
- Developers have fewer keys to work with, as they can reuse keys with the same value whenever necessary. Additionally, duplicates are avoided in the codebase.
The original Figma keys are still preserved, so when designers download translations back to Figma, the original text nodes are accurately translated. The clustered keys are also appropriately highlighted in the Figma screenshots uploaded to Localazy.
Learn more about Key Clustering in the docs.
Figma plugin & upload 🔗
Install the Localazy Figma plugin and connect it to your project. Open the settings tab and ensure that the option Use node name as source key is unchecked. This configuration enables Figma's text elements to be identified in Localazy by their underlying Figma ID. Designers don't need to worry about naming the nodes manually since they are not vital for the translation process.
For those on the Agency plan, select "Upload keys with screenshots" to allow translators to easily reference the Figma designs during translations.
Choose the content you want to process and upload it all into a single Localazy file in your preferred format. It's crucial to upload everything into a single file to ensure that all keys with duplicate values are clustered in a single key. With this approach, there is generally no need to upload content into multiple files.
Review of the uploaded content 🔗
Return to Localazy and navigate to the translations page and click on Manage source language. Expand the Advanced filters and filter for Cluster strings. As you upload text nodes with duplicate values, you will see a special type of string prefixed with a label cluster_. Opening one of these strings reveals the clustered text nodes from Figma.
Upon reviewing the content, everything appears to be in order except for the one key mentioned above. Although the value of this key is Type, it actually carries two distinct meanings, making it a homonym. In the Figma design, it is evident that one instance refers to a specific type of appointment, while the other instance serves as a placeholder to prompt users to input a message.
It is important to note that these instances are not logical duplicates but rather value duplicates. To ensure accurate translations, it is necessary to split this cluster into two separate keys, allowing each meaning to be translated correctly. Based on the assumption that the type of appointment meaning will be more prevalent, we will designate it as the default cluster for all future uploaded keys with the same value.
Translate and review in Figma 🔗
Translators can now begin working on the translations. You can simulate their work by using the Pre-translate using MT function to quickly generate initial translations. Once the translations are complete, return to the Figma plugin and download the translated content.
Learn more about MT Pre-translate feature
If you intend to keep the translated versions in Figma, make sure to preserve the original frames. Remember, the original frames are linked to the keys in Localazy, not their copies. To ensure a smooth process, download the translations to the original frames, create a copy of the translated content, and then download the source language values back to the original designs.
Admittedly these are only machine-generated translations, but it appears that the design is not ready to handle the long German words 🙈
Prepare content for developers 🔗
With the translations in progress, development can also commence. As you may recall, we have uploaded all the content into a single file in Localazy to streamline the process for designers and avoid duplicate values. However, it is common for developers to store strings in separate files and export the content in various formats for different platforms, such as Android and iOS.
To address this, we will utilize Export aliases, which enable you to define key aliases for different export key names, and export file aliases for different target files during the export process. Let's begin by filtering for keys that do not have an Export file alias assigned yet. Currently, none of the keys have an alias defined, but in the future, this will help identify keys that developers have not reviewed.
Next, I will select multiple keys and assign them to export file aliases in bulk. Since the selected keys relate to the contact form stored in a separate module, I will export them to the designated folder.
Additionally, for each key, we will define a key alias. Key aliases can be specified within the original file's scope as well as within the export file alias, which is precisely what we need to do in this case.
The final step is to specify the type of content that will be generated. Once again, navigate to the General settings, and under Import & Export, choose the Generate key aliases in export file aliases option for the Content generation setting. This means that only key aliases defined within the export file aliases will be generated and exported by the developers. Referring to the example screenshot, only the key alias first_name will be generated in the src/modules/contact-form/strings.json file.
Learn more about Export Aliases in the docs
Use the content in the code 🔗
Now, all that remains is to configure your coding project and download both the source keys and the translations. Create a localazy.json file in the root directory of your project and paste the following configuration:
{
"readKey": "<your-read-key>",
"download": {
"files": "${path}/${lang}.json",
"includeSourceLang": false
}
}This configuration is minimalistic, and the beauty lies in its simplicity. Since no content will be uploaded from the code, the configuration only covers the download process. It specifies that all the content should be saved in the target folder defined using the export path aliases, named according to the language code.
Additionally, we chose not to download the source language since it was set as Developer English, intended for proofreading into production-ready English. There is no need to have the unfinished version in our code. If the translators are unable to complete all translations before development, the missing values will default to the developer's English (source language) value so that the developers can focus on the work without having to wait for translators to finish.
Now, using Localazy's CLI and the localazy download command, you should be able to successfully download all the translations from Localazy.
🔓 Join our beta program to access this feature 🔗
⚠️ Please note:️ Key Clusters are an experimental beta feature available only in our Early Access Program. To join the beta, please log in, click on the ❔ question mark icon in the top navigation, and select Get early access.
✔️ Conclusion 🔗
In conclusion, setting up a streamlined development workflow with Figma and Localazy can greatly enhance the efficiency and accuracy of translation processes. By leveraging Localazy's key clustering and export alias features, designers can continue creating Figma designs without modifications to their workflow while allowing for simultaneous translation and development with a single point of reference.
By implementing this optimized product development workflow, teams can save valuable time and resources while ensuring accurate translations and efficient collaboration between designers, translators, and developers. Figma and Localazy provide a powerful combination for streamlining the localization process, making it easier than ever to deliver multilingual applications and products to a global audience.
