Menu

1 / 2

Figma API-Driven i18n Automation: From "Waiting on UX" to Dev-Owned Exports

DEV Community·yuki uix·6 months ago
#0TWc6kVw
#frontend#figma#webdev#json#layer
Reading 0:00
15s threshold

Before we launched into a new country rollout, I took a hard look at our i18n workflow. Nobody was complaining loudly. But every time a translation task came up, you could feel the quiet dread in the team.

The bottleneck wasn't technical. It was a responsibility boundary that had been drawn in the wrong place.

The Workflow Nobody Questioned

Our UX designer used a Figma plugin to export translations as a JSON attachment, which she uploaded to the corresponding ticket. Dev would download it, do a local replace, then manually wire up strings in the codebase by matching layer names and context fields.

The exported JSON looked like this:

{ "items" : [ { "nodeId" : "12:345" , "layerName" : "Button Label" , "context" : "Homepage → Hero → CTA" , "figmaFile" : "Translation_EN_US_v3" , "lastUpdated" : "2024-01-15" , "value" : "Get Started" } ] }

Enter fullscreen mode

Exit fullscreen mode

The codebase only needed { "button.label": "Get Started" } .…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.