i18n JSON exporter
by Leandro Cassa
Effortlessly export your Figma i18n variables to a React-compatible JSON format
Installs
17
Likes
6
Users
71
Views
154
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 allStark - Contrast & Accessibility AI Checker
by Stark
Fix Color Contrast and Typography issues and add WCAG annotations for a smooth design to dev handoff
Contrast
by Alex Carr
Quickly check and scan for contrast issues on gradients, images, blends, and fills.
Color Palettes ( Colorsinspo ) : Color & Accessibility Tools
by Manthankumar Satani
A free suite of integrated Color & Accessibility tools - 10+ tools free access 🔥
A11y - Color Contrast Checker
by Kelly Gorr
Text color accessibility