Following the development of the Oltre by Lumpalab brand identity and visual language, my client needed to adapt the Amazon assets to promote the products across different markets. If you’d like to see the full project, you can check it out here: Oltre — Brand Identity & Art Direction
Lumpalab is based in Italy and wanted to expand and sell its products in the UK, France, Spain, and Portugal. The main challenge was to adapt the original Italian designs and translate them into four additional languages, while keeping the visual identity and messaging consistent across all markets.
Thinking Ahead and Building for Scalability
But wait—you have four designs, so is it really worth building an entire workflow just to translate some text?
First of all, it’s not just four designs. There are four designs for each of the four bottles Lumpalab initially sells, which already brings us to 16 assets. And what happens when more products are added?
That’s why it’s important to think ahead and build a scalable structure before things get out of hand. So, what are our options for translating our ads? Let’s explore some of the available approaches, look at the pros and cons of each one, and draw some conclusions.
1. Localizing with Figma Agent
The first option we’re going to explore is asking Figma Agent directly to translate the selected frames. It’s not really an automation, since we still have to manually select the frames and ask the agent to translate them through a conversation. However, since the original designs were created in Figma, I thought it would be useful to try this approach rather than moving everything to another tool.
It took about two minutes, and three of the pieces were translated without any issues. But then we hit a problem. For one of the pieces, the translation itself was correct, but Figma Agent broke the words at arbitrary points. As a result, the entire paragraph became fragmented and the text overflowed the design.
On the left, you can see the result generated by the agent. On the right, you can see how the words should actually be broken across the lines. The version on the right would probably still need some manual adjustments to the font size to prevent the text from overlapping the image, but we’ll leave that out of the analysis for now.
Figma Agent Overview
Time: 2 minutes.
Cost: $0. The agent currently displays: “This prompt uses 0 AI credits while in beta. After beta, it will use 72 credits.” As a reference, Figma’s Professional (Pro) plan includes 3,000 AI credits and costs $20/month.
Summary: Considering that it took only two minutes and successfully translated three out of four frames, this could be considered a quick solution when we need to get something done in a pinch. However, since it doesn’t give us a scalable workflow, I’d keep this option for last-minute requests or urgent adaptations, always reviewing and manually adjusting the final result.
2. Localizing with a Weave Workflow Using Figma Node
Recently, Weave, the node-based tool for building scalable workflows, introduced the Figma Node. It allows you to connect your Figma designs and Weave workflows into a single, live, two-way system.
Here, Gal Sharir and Ron Baranov explain in detail how it works:
Unlike the previous approach, where we simply asked the agent to translate specific frames, this method involves building a workflow that can be reused and scaled over time.
Let’s say that, down the road, the brand decides to expand into additional countries with different languages. In that case, we would already have most of the infrastructure in place, making it much easier to adapt the existing designs to new markets.
To preserve the synchronization capabilities of the Figma Node, I structured the workflow so that each sentence is connected to its own text field. This allows me to run the translation step for whichever language I need, while keeping the Figma designs connected to the workflow.
But once again, something unexpected happened! 🫣 Damn those French people and their ridiculously long words breaking my design! Just kidding! We’re here to ensure consistency and make the workflow inclusive for every country and language.
So yes, by using Weave we now have a reusable workflow that can be extended to future languages. But we still have the same problem: if the translated text is longer than expected in a particular language, the entire design can break.
Weave Workflow with Figma Node Overview
Time: Workflow setup: 30 minutes. Running the workflow for each new language: 1 minute.
Cost: 1 credit per translation when running the Any LLM module.
Summary: I think this is an excellent option for building a scalable workflow, especially with future languages in mind. However, the issue we encountered with text overflowing means we still need to make manual adjustments to the final frame in Figma. I would use this workflow as the foundation for scaling future creative adaptations, while always reviewing and adjusting the final results manually.
4. Localizing Through Claude via MCP
The last option we’re going to explore is talking directly to our AI agent. In my case, I use Claude most of the time. Instead of working directly inside Figma, we’ll simply ask Claude, through a natural-language conversation, to access our Figma file, find the relevant frames, and translate them.
But if we already have a Figma Agent right there inside Figma, why would we want to have Claude access our file? You’ll see.
But there’s one important step first: to access your Figma files, you need to connect your AI agent to Figma. This video explains how to connect Figma with your favorite AI agent:
So, I gave Claude a simple instruction: “Could you find the frame ‘Balance – IT’ and translate it to French?”
And the result was surprisingly good:
Claude provides a comparison table showing the original Italian text alongside the new French translation. It also explains that it left “Madhou” and “710 ml” unchanged because it correctly identified them as the model name and product measurement, neither of which needed to be translated.
But the most interesting part is what happened with the new headline: “L’équilibre à chaque gorgée.” Claude realized that the translation would take up three lines and break the original layout, so it automatically adjusted the text to preserve the design. 👏 This is exactly the kind of proactive, context-aware behavior we want from our AI agents: not just translating the content, but understanding the design and making decisions accordingly.
Now that’s a smart agent.
Claude Code via MCP Overview
Time: 3 minutes.
Cost: Claude estimates between 6,000 and 8,000 tokens for the task, including finding the frame, generating the duplication and translation code, adjusting the headline, taking the two screenshots, and providing the final response.
Around 500,000 tokens were processed in total. There were approximately six model calls, with each one re-reading the full context (around 80,000 tokens). Most of that context was served from cache, so it has a much smaller impact on the usage limit. In practice, the translation consumed only a very small fraction of the available limit: the entire session was at around 2% of the five-hour limit.
My Claude plan is Pro, which costs $20/month.
Summary: This was definitely the most intelligent and proactive agent of the three. It detected the problem with the headline and came up with a solution on its own. A real champ.
It’s also extremely convenient to make the request directly from the chat window where you’re already working, without having to switch between different tools.
What we don’t have here is the clearly defined scalability of a workflow like the one we built in Weave. If the brand decides to add another language, we would simply need to make the request again. That’s not really a problem, though—it just means keeping our Figma file well organized, with clear naming conventions and a consistent.
Conclusions
Asking Claude to modify the Figma frames and handle the translations was the most effective approach. With comparable time and cost, it proved to be more proactive: it detected problems and solved them on its own.
Could I modify the Weave workflow and prompt another model to generate a new creative while maintaining consistency and preventing text from breaking? Sure. But I would lose the fundamental synchronization provided by the Figma Node.
So, if anyone has found the ultimate workflow for localizing designs, let me know. I’ll keep exploring.
