App Store screenshots across three device sizes

Same mobile team, same submission. Now the set has to cover three iPhone sizes. The headlines have to be identical across all three. Layout can change with the canvas. Copy cannot. This is the same review cycle as the one-size set, with more canvases.

The people doing this already wrote the headlines once. They should not type them again for size two and size three. If review changes a line, that change has to land on all eighteen images from one file.

The job is eighteen images: three iPhone size groups, six artboards each. One shared copy file feeds the whole run. You export once. Files nest by device-size group. Per-size layout lives on each artboard. The words do not.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same copy, many artboards, many images. There is no batch product, no queue, no orchestrator.

The component is the appstore preset: three iPhone size groups times six artboards each. Per-size layout differences live in each artboard’s own meta.dimensions. The screens themselves stay the same components. Dimensions are per-asset, which is why the three sizes can share copy and still disagree on canvas.

Data is one shared --data appstore-copy.json applied across the whole run so all three sizes read the same headlines. --data applies to every artboard in the run and is never written back into .lerret/. Copy stays identical across sizes by construction, because it is the same file feeding all of them.

The output is 18 PNGs, nested by device-size group. Three groups, six files each.

You use Lerret because copy stays identical across sizes by construction. Per-size layout differences live in each artboard’s own meta.dimensions. A design file with eighteen frames will miss a headline on some of them. Screenshots from three simulators will not share scale, and they will not share the headline band. The shared --data file is how the three size groups stay on the same words.

npx @lerret/cli@latest export --data appstore-copy.json

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