Localized App Store screenshots

The mobile team runs this per supported locale. Same screens, same sizes, new copy. German runs long. Japanese runs short. The component’s CSS has to hold both. This is the same appstore preset, pointed at a different file.

The people doing this already have the artboards from the one-size and three-size sets. A locale should not mean a new design file. It should mean a new --data file and a new --out folder.

The job is the App Store set again, once per locale. You point --data at that locale’s file and --out at that locale’s folder. Nine locales is nine commands over the same components. There is no batch product, no queue, no orchestrator.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same components, data swapped, next locale’s images.

The component is the same appstore preset components. Nothing about the artboards changes for a locale. The data file does. German runs long and Japanese runs short. The component’s real CSS handles it, which a fixed design canvas does not.

Data is --data locales/de.json, then --data locales/ja.json, and so on. Each run writes to its own --out lerret-export/de (and the matching folder for the next locale). That is the first of the four bulk patterns: re-run export with a different --data file. Same components, new values, new images. --data applies to every artboard in the run and is never written back into .lerret/.

The image is a PNG at 1080×1920 per screen per locale. German goes to --out lerret-export/de. Japanese goes to its own --out on the next run. The artboards do not move.

You use Lerret because nine locales is nine commands over the same components. German runs long and Japanese runs short. The component’s real CSS handles it. A design file per locale will wrap by hand, differently each time. Screenshots of a localized build will not share the headline band, and they will not share crop.

npx @lerret/cli@latest export --data locales/de.json --out lerret-export/de

Start a project with npx create-lerret@latest. More in the use cases index.