Developers vs. Designers: Two Approaches, One Tool

To start, it seems important to me to do a reminder of our basic approach towards developers and designers. We invite you to read a recent article that our COO wrote about our more detailed thought process and the steps we went through. “Revolutionizing Localization: Our Journey, Challenges, and Ambitions”.

Before releasing the product, we made sure to talk with many developers and designers to truly understand their problems. They highlighted a universal problem: managing translation keys is a massive time sink.

The current process? Slow, tedious, and full of friction. Teams either cobble together homemade solutions or struggle with rigid tools that don’t integrate into their workflow.

The day-to-day reality looks like this:

• Developers spend hours creating keys, only to end up with conflicts when their colleagues generate similar or contradictory keys.
• Designers move forward blindly, without seeing which keys are linked to their designs. And when a text needs updating? Good luck finding the associated key.

This fragmented approach kills productivity at every step.

And the worst part? Translation keys are the very foundation of localization. They are the bridge between design, development, and the final content. That’s why we wanted to develop a plugin that solves both sides of the problem.

Let's Dive Into the Heart of the Plugin

Importing Keys

Keys must be re-imported so they exist in the database, can be reused, and, most importantly, so we can create new ones that remain consistent with the existing ones.

Currently, the only possible way to import keys is by uploading a file containing the keys (JSON, CSV or XML). Two scenarios here:

1. You don’t have any localization software, and so just import your current locale files, in JSON
2. You use a localization software and so have to first export your keys, to import in Gleef.

We are making improvements to key import from Phrase and Lokalise. The import function has been operational for some time, and we have added a mechanism to store API credentials so that our users can re-import their keys without having to enter their credentials each time.

The UX side is also really important. For example, we are in the process of integrating a dropdown button that allows users to connect directly with an API key and select a project via a dropdown menu. This provides a smoother and more intuitive experience.

The overall goal is to simplify key import from external providers and optimize the process to make it as seamless as possible.

The Role of AI

Automating localization keys is a complex task, especially for teams combining design and development. Traditional automation solutions have significant limitations that make key management difficult and chaotic.

Without artificial intelligence, the most common method is to use element names or their content to generate keys. This approach quickly leads to unreadable names and duplicates, especially when an element is duplicated. The other solution is to generate unique identifiers for each element, but these identifiers are not linked to the textual content, making them difficult to manage and reuse.

To solve these issues, we opted for an approach using Retrieval-Augmented Generation (RAG), which combines contextual search and automatic generation. This allows us to produce relevant, reusable, and project-adapted keys.

We did not develop our own AI model, choosing instead to optimize prompt engineering and design intelligent assistants to meet users' specific needs. Our system is based on three key principles:

1. Identifying existing keys: If a key is already present, there’s no need to create a new one, preventing duplicates.
2. Generating contextual keys: We create keys by considering the overall context of the files while adhering to naming conventions.
3. Maintaining consistency: Our AI prevents common inconsistencies by enforcing a strict logic, ensuring a uniform naming structure.

We also take into account your existing key database, allowing already-created keys to be easily found instead of generating new ones every time. This approach promotes more rigorous management and prevents unnecessary naming clutter.

Once the system is in place, we send your Figma elements to our AI, which can identify each element (placeholder, button, label) and even recognize the screen type. Based on this information, the AI generates relevant keys that are perfectly suited to your project’s context. Simple, efficient, and, most importantly, well-organized.

Context, Yes Again

This point is fundamental for us because it fully embodies our philosophy. We place context at the core of our approach. We are convinced that a clear and well-defined context is essential to ensure accurate and relevant translations and localization keys.

Let’s take a concrete example: the word "cloud." Depending on the context, it can have multiple meanings. Without context, the translation could be incorrect. The same goes for key generation: by integrating context, we create more relevant, reusable, and easily retrievable keys, making the localization process much smoother.

This is why we decided to integrate our solution directly into Figma. By staying within this environment, we ensure that all stakeholders, designers, developers, and translators work with the same context. This way, each generated key is perfectly suited to the project while maintaining optimal consistency and precision.

For us, this approach goes far beyond a simple technical solution. It’s a vision: bringing context back to the heart of the localization process to provide a more fluid, structured, and efficient workflow. This is the commitment that guides our work and the direction we are following.

Best and Worst Practices in Localization: Focus on Key Management

Product localization is not just about translating content. A structured and consistent process is essential to ensure accurate translations, a smooth user experience, and efficient resource management. We’ve noticed that people have very different practices, especially when it comes to localization key management. So, here’s an overview of the best and worst practices in this area.

By applying these best practices, localization key management becomes smoother, translations gain relevance, and teams save valuable time. A well-structured process from the start helps prevent many long-term issues and ensures a consistent user experience on an international scale.

Frequently Asked Questions

I’ve gathered the 3 most frequently asked questions from the tech teams using our product. If you think some points need further clarification or haven’t been covered, feel free to send me an email I’d love to hear from you!

Is the Gleef Figma Plugin compatible with all localization tools?

Yes, the plugin generates ready-to-use localization files (CSV, JSON, XML), which you can import into any localization software or simply copy into your IDE for seamless integration into your development process.

We are actively working on direct integrations with Localize and Phrase to make connecting your project even easier.

How does the Gleef Figma Plugin integrate into my Figma workflow?

1. Import your localization files: Upload your existing files to get started.
2. Select the source language: Set the language used in your designs as the source.
3. Choose screens/frames: Pick the specific Figma frames or screens you want to localize.
4. Adjust keys: Review and refine the generated or re-used keys for accuracy.
5. Export ready files: Export keys to your preferred localization tool or copy them into your IDE.

Does the plugin support importing localization files?

Absolutely! The plugin allows you to upload your existing localization files to kickstart the process and align translations with your current workflow. It supports CSV, XML, and JSON.

Translation is coming

Translation is currently available only in beta testing but should be live for everyone starting next week. It will operate on the same model as key generation:

• Pricing: AI-powered translation will be free with a rate limit (token limit per hour), just like key management. You’ll have the option to remove this limit by reaching out to us.
• Efficiency: Our comparative tests soon to be the subject of a dedicated article clearly demonstrate a drastic increase in efficiency compared to any existing solution. The improvement over DeepL or Google Translate is striking, thanks to global contextualization. Compared to using an off-the-shelf AI model with a JSON file, the results are also significantly better due to the live translation memory. This eliminates the need to manually create a glossary and ensures consistency in your product by translating identical elements the same way whenever the context matches.
• Context: Our approach, always within Figma, ensures effective context management, guaranteeing translation consistency just as it does for key generation.
• Knowledge base: We want to change the current model, which often requires manually entering a glossary and creating a translation memory. Instead, this will be handled automatically based on the translations you validate or modify. This approach saves time while delivering far better translation consistency, whether compared to machine translation or even human translation (internal or external).

‍