Feature launch card

A PM needs this card on each feature GA. Feature name, one-line benefit, a small UI fragment. The social post and the blog header have to say the same name. Two sizes, one set of fields.

This is GA day. The feature has a name, a benefit line, and a tag. Those three fields have to appear on the social card and on the blog header without disagreeing. You should not update one frame and miss the other.

The job is two images from one set of fields: 1200×630 for social, 1200×800 for the blog header. Two artboards, one data file. You fill { feature, benefit, tag } and export both. Next GA is a new file and the same two artboards.

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

The component is .lerret/marketing/feature-launch.jsx. It draws the feature name, the one-line benefit, and a small illustrative UI fragment. Two artboards share those fields and differ in size. The fragment is on the component. The name, the benefit, and the tag are in the data. Dimensions are per-asset, so the blog header is not a crop of the social card.

Data is { feature, benefit, tag } per launch. One set of fields, two sizes. That pairing is why the blog and the social post never disagree about the feature name. Same component family, two canvases. Swap the file on the next GA.

The images are a PNG at 1200×630 for social, plus a 1200×800 variant for the blog header.

You use Lerret because two sizes, two artboards, and one set of fields means the blog and the social post never disagree about the feature name. A design file with two frames will get the name updated on one of them. A screenshot of the feature in the app will not give you both sizes, and it will not give you the benefit line.

npx @lerret/cli@latest export

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