In my last post I explored how to obtain international content to create designs that adapt to global markets. I explained how the traditional method, pseudolocalization, is fast but imprecise, since it always assumes a worst-case expansion that may not reflect reality. I suggested a more modern approach: using an AI prompt to identify the statistically longest and shortest locales for your specific strings, or using a spreadsheet with translation functions to achieve the same result much faster.
These are good improvements. However, they still rely on the design and UX writing team being interested enough in exploring the international experience, and then manually extracting content from the design file to later reimport it into a new design page.
In this post and the next, I am going to explore a different approach: asking Claude directly to extract the content present in the file and regenerate it with the translations already in place.
The first step is obtaining the content from a Figma page so it can be localized.
To do that, we need to give Claude access to Figma through the API. The process is straightforward, but there are some important things to keep in mind:
- In Figma Desktop, go to Help, then Account Settings, and click on Security. If you are using the web version, click on the Figma menu (F), Help and Account, then Account Settings, and click on Security.
- Scroll down to the Personal Access Tokens section and click Generate a new token.
- Give it a name, set the required permissions (you can ask Claude which ones it needs), and click Generate token.
- Here is the most important part: do not share the token directly with Claude or any other AI tool. Instead, run the following command in your terminal:
curl -s "https://api.figma.com/v1/files/zb52MAYkik16qlrVCzTDe8/nodes?ids=720-16" \ -H "X-Figma-Token: YOUR_TOKEN_HERE"
(Replace YOUR_TOKEN_HERE with the token provided by Figma.)
This will generate a JSON output that you can copy and safely share with Claude.
Once that’s done, you can share the Figma link with Claude and ask it to perform tasks on your behalf.
One thing I noticed: If the page is too large and contains comments or metadata that won’t appear in the UI, Claude can get confused and attempt to translate that content as well. My first recommendation is to work with a Figma page that is as clean as possible, ideally a duplicate stripped of any extra layers. From there, Claude is capable of extracting only the content that should be translated.
If you just want to see how your content might expand or contract across languages, you can use a prompt like:
"I have this Figma link and I want to see how it behaves in other languages. The languages my app supports are: Spanish, French, Russian, Simplified Chinese, and Japanese. Check the content in the file, translate it into those languages, and only generate the content for the longest and shortest ones."
However, if you are working on a Figma file with a lot of existing content and you are only interested in a few specific strings or designs, this approach might be overkill. In that case, I would recommend one of two alternatives.
The first is the fastest, though a bit rough around the edges. Place the designs that need localization mockups inside a Figma section, use the “Copy link to selection” option, and ask Claude to focus only on that area. This gives you a quick overview of how the content might look in other languages, but it limits what you can do with it. We will cover those possibilities in the next post.
The second approach involves using variables in Figma. Yes, Figma allows you to define your own variables. These are typically used for:
- Theming (for example, switching between light and dark mode instantly)
- Prototyping dynamic interactions without writing code
- Maintaining consistency across large design systems
The idea is to create a string variable (text) that can be reused wherever that content appears. If the content ever changes, you only need to update the variable and it will propagate across all your designs automatically.
This also makes it much easier to identify what is new in a Figma file, since all new content will belong to the same Collection (you can create as many collections as you need). From there, you can ask Claude to analyze the variables in a specific collection, and you will get a much faster response using far fewer tokens.
From here, a lot of possibilities open up, but to explore those we will need to move on to part 2 of this series.
See you in the next one!
Leave a Reply