Density / breakpoint set for one component

The design systems team needs this when documenting responsive behavior. One component has to be shown at three widths. The content stays the same. The canvas size is what changes. That is what meta.dimensions is for: per-artboard width. Variants share an asset’s meta.dimensions, so a same-card-at-three-sizes case has to be three artboard files, not three named exports.

This happens when you document the breakpoints, not once when the component is first drawn. The person doing it already owns the component. They should not screenshot three browser widths and hope the crops match.

The job is three PNGs at the documented breakpoint widths. You wrap the same component in three artboards. You feed all three from one shared data file. One export writes the set. The next breakpoint you want to document is another artboard with its own meta.dimensions.

Give Lerret three artboards under .lerret/ and one shared data file. export writes three PNGs. Same component, three canvas sizes, one run.

The component is three artboards wrapping the same component at three widths via meta.dimensions. The layout differences live in each artboard. The fields do not. You do not retype the label at each width.

Data is one shared data file feeding all three. The values stay identical across the widths by construction, because it is the same file. You do not keep a copy of the fields per width. The three artboards differ only in meta.dimensions.

The images are three PNGs at the documented breakpoint widths. One export writes all three. The widths are the ones you already document for the component.

Per-artboard dimensions is the right tool here. One component, three canvas sizes, one export. A design file with three frames will keep the copy in sync by hand. You use Lerret because the widths are meta.dimensions, and the fields are one file.

Per-artboard dimensions is exactly the right tool here. One component, three canvas sizes, one export. There is no batch product, no queue, no orchestrator. The three PNGs are the documented breakpoint widths.

npx @lerret/cli@latest export

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