Skip to content
i18n JSON exporter

i18n JSON exporter

by Leandro Cassa

Effortlessly export your Figma i18n variables to a React-compatible JSON format

FreeFigma

Installs

17

Likes

6

Users

71

Views

154

Preview

i18n JSON exporter preview

About this plugin

Escape the time-consuming manual localization work and costly third-party tools with their cumbersome plugins. Leverage the power of Figma variables for efficient i18n.

Simply use your Design System or a central library file to create i18n keys, and then effortlessly export them for development with this plugin.

Step 1Setup your Figma variables. Create a collection, add a columns (modes) for each language you wish to localize.

Not a stepUse those variables to replace your labels, input placeholders and more. Then use the "Appearance > Apply variable mode" to switch between languages (modes). I suggest having an "ID" mode with the i18n keys, like $general.table.label_lastModified.

Step 2Run this plugin, select a collection and modes desired, then click "Export JSON file".

NoteThis plugin uses the variable group path to create a hierarchical structure in the exported JSON. For example, a variable named general / table / label_lastModified would be exported as:{ "general": { "table": { "label_lastModified": "Last modified" } }}Future featuresLeave comments to vote on the following features I planned and what features you would like to see on this plugin.

Github Merge Request integrationSupport to different JSON formatsTransformation capabilities

More accessibility tools plugins

View all