How Our Plugin Brings Something New

Product Features

This week, we continue our exploration from last week, diving deeper into our thought process and strategic choices. If you're interested and want to understand everything, we invite you to read Revolutionizing Localization: Our Journey, Challenges, and Ambitions. Now that you have all the context, it's time to present our new product. Ready? Let's go!

We’ve been working on it for the last few months, and it’s officially live → have a try here, it’s fully free. This Figma Plugin is designed to make localization smoother and more intuitive. The idea is simple: as developers go on Figma to see what they need to code, and have to create (or reuse) localization keys while developing, why not having these keys automatically managed and displayed in Figma?

Our Plugin mostly does 3 different things:

1. It can automatically generate new keys, according to your nomenclature - naming conventions - directly in Figma, based on the context of your Figma files. That is why it is important to add your existing localization keys.
2. It is able to retrieve existing keys whenever it’s needed. This means that when generating keys on a specific frame, it will retrieve existing keys in your database whenever there is a match, and it will generates the missing keys according to the current context and your naming convention. This is why it is even more important to add your existing localization keys, as it will avoid duplicates.
3. Then you can display keys directly in Figma, so you can integrate them seamlessly.

We wanted to have a super simple onboarding flow, mostly because will be having a PLG (Product Led Growth) strategy, needing a really smooth process. As easy as an onboarding process can sound, we’re facing several issues:

• Having a Google SSO is not that easy at all on a Figma plugin, if you want to get a really smooth experience, not having to copy paste unique keys etc.
• Onboarding should be lean and quick so that we don’t face too many drop outs. Nonetheless, we need some data to have a real ‘Waou effect’ when using the Plugin.

To understand the latest point, you need to know how our Plugin works, and why it is so much more powerful and intelligent than any other existing solution to generate and retrieve keys.

What is truly needed for this ‘Waou effect’ is your current localization keys. Because it will enable our Plugin’s 2 core features to be perfect:

• Generation will follow your current naming convention or pattern
• Keys will be retrieved if they already exists

The key challenge we faced was that many potential users might not have any localization files when they're just starting their localization journey. Plus, we noticed that people are often hesitant about sharing their data, which could create significant friction and lead to users dropping out of the process.

This insight came from a fascinating article I read recently about optimizing onboarding flows with and without data integration. The study showed two distinct patterns: when users uploaded their data during onboarding, they found immense value in the product and rarely churned. However, without data upload, while more users initially tried the product, they often failed to see its full potential and dropped off later. This presents a classic dilemma for data-dependent products: you either face high dropout rates during onboarding by requiring data upfront, or you risk losing users later when they don't experience the product's complete value proposition.

In our case, we’re quite lucky as the Plugin is still of great use even without any data. Importing existing localization keys is just the cherry on the cake, making the Plugin awesome to use.

And so our current onboarding process is the following:

1. Define your source language, meaning the language used in Figma to design screens.
2. Import localization keys file in CSV, XML or JSON if you have some.
3. It’s already set-up, you’re ready to select any frame and generate localization keys.

From there, the tool generates keys automatically, which you can tweak if needed. Finally, you can export everything ready to use in your localization platform or directly in your IDE.

Comparison with Other Existing Plugins

Ok, you might want to dive in. To give you a clearer vision of what's happening, we’ll compare the plugin with existing solutions today. And if you’re still here, reading this article, without even knowing what a localization key is, have a look at this previous article. Why Traditional Localization Tools Are Failing.

Let’s be honest: the way most Figma plugins handle localization keys is broken. They rely on frame names to generate keys, which results in chaotic outputs like Frame15034.Frame182.forgot-password. Some tools suggest carefully naming your frames to improve this process, but let’s face it – that’s like patching a sinking ship with duct tape. It’s not sustainable, and it’s definitely not efficient.

The real problem? These solutions create more issues than they solve.

First, they waste your time. Designers are forced to spend hours naming frames instead of focusing on design. Then there’s the chaos that comes with maintenance duplicate a frame for a different state, and suddenly, your “perfect” naming system falls apart.

After countless conversations with design teams, we’ve heard the same frustration over and over: no one has time to manage complex naming conventions or micromanage localization keys. The truth is, frame-based key generation doesn’t work because it ignores how modern design teams actually operate.

A Smarter Approach to Localization Keys

What if we stopped asking humans to think like machines and started teaching machines to think like humans? That’s the idea behind Gleef. We’ve completely reimagined localization key management, leveraging AI to understand your designs and generate keys that make sense.

Here are the three key points we focused on to deliver a product that truly addresses all the issues we’ve identified earlier.

• Context-Aware Key Generation: Forget frame-based gibberish. Our AI recognizes what each text element is and how it’s used so a login button is always identified as a login button, no matter where it lives in your file.
• Intelligent Duplicate Prevention: No more hunting down twenty versions of "submit." Our system recognizes that “log in,” “login,” and “sign in” all mean the same thing and handles them intelligently.
• Seamless Integration in Figma: Key management is no longer an abstract, disconnected process. With Gleef, you can manage keys visually, directly within your Figma files no need to jump between tools.

Concretely, how does it work?

We've seen everything our plugin can do, and now I think it might be interesting to look at how it actually works so you can better understand the product.

The role of AI

Just a brief reminder if it’s not already crystal clear. Without artificial intelligence, automating localization keys relies on two main solutions, and honestly, they are far from perfect:

1. Use element names or their content. Many plugins do this, but let’s be honest: you quickly end up with horrors like "frame1.frame2..." and, even worse, as soon as you duplicate an element, you get duplicated keys.
2. Automatically generate unique identifiers. It’s a solution in theory, but these identifiers have no connection to the textual content. The result? It’s impossible to reuse or easily adapt the keys later. It seems "cool" at first, but in practice, it's a nightmare to manage.

We rely on a method called Retrieval-Augmented Generation (RAG), which combines contextual search with automatic generation. Basically, this allows us to produce relevant keys while ensuring we don’t reinvent the wheel every time.

We didn’t develop our own AI model that’s not where we wanted to spend our energy. Instead, we built assistants and worked on prompt engineering to address real needs. The idea is to:

• Identify existing keys: When a key already exists in the context, there’s no need to create a new one. We avoid unnecessary duplicates and keep everything clean.
• Create truly contextual keys: When a new key is needed, we generate it while considering the entire context of your files. And most importantly, we fully respect the naming conventions you already use.

One of the biggest advantages of our approach is maintaining a consistent and rigorous naming convention. We avoid common mistakes like using inconsistent keys, such as "register" and "signup" in the same project. Thanks to our system, we follow an internal logic that prevents these duplicates and confusions.

We take into account the existing key database, which allows us to easily find already created keys instead of generating new ones each time. This helps maintain good organization and a level of rigor in key management by enforcing clear conventions and preventing chaos.

Once everything is set up, we send your Figma elements to our AI, which can identify each element as a placeholder, a button, or a label, and even recognize the type of screen. From there, the AI generates relevant keys that are perfectly adapted to the context of your project. Simple, efficient, and most importantly, well-organized.

The Importance of Context at Gleef

The last part is particularly important to me because it reflects our way of thinking. Context is at the heart of our approach. We firmly believe that context is essential to ensure accurate and relevant translations and localization keys. Take translation as an example: the word "remote" can have multiple meanings depending on the context, and if that context is ignored, you risk ending up with an incorrect translation. The same logic applies to key generation. Adding context when creating keys allows us to produce more relevant, reusable, and easily searchable keys, significantly improving the efficiency of the localization process.

This is why we chose to work directly within Figma. By staying in this environment, we ensure that everyone whether designers, developers, or translators shares the same context. This allows us to create keys that are truly adapted to the project while maintaining rigor and consistency. For us, this approach is not just a technical solution but a true vision: bringing context back to the center of localization to offer a smoother, more organized, and more efficient workflow. It’s our motto and the direction we are heading.

I bet you can guess what's coming next... We're diving deep into our next feature, which you might have spotted in the plugin: translation. But this isn't your typical machine translation service - we're aiming for something special. We want to recreate that same "wow" moment that users experience with our localization keys generator, but this time for actual translation (the real heart of localization). And guess what? We're already in Beta phase - if you're as excited about this as we are, you can join our beta program through the waiting list.

Conclusion

We are convinced that localization should no longer be a hindrance, but an asset for product teams. Our AI-first approach saves time, prevents inconsistencies, and integrates seamlessly into the workflow of designers and developers. We continue to improve Gleef based on user feedback, so if you have ideas or specific needs, we are all ears. Together, we are shaping the future of localization.

‍