Open Graph images for launches

A launch page can introduce a product, explain a change, and tell people what to do next. The image that travels with the link has less room. Give it one job. An event card can help people recognize the occasion, a feature card can show what they’ll get, and a brand card can make a new identity stick. The four examples below were reviewed at full size and at 240 pixels wide to see which parts carry the message.

Event cards give the name and date separate jobs

The Figma Config 2025 card at the top spends almost the entire upper half of the frame on its name. Each letter has a different silhouette, and the empty space below keeps the word apart from the collage on the right. The date and cities sit on black shapes at lower left. At thumbnail size, “May 2025” still reads clearly while the longer city line asks for more attention. Get the name and the timing to read first, then decide whether the location earns space on the image or belongs in the accompanying title.

Compare Config with Figma’s homepage share card. Config uses its space to make an event and date recognizable. The homepage makes a broader promise and uses a rotating stack of work to show what people can make. Decide how much time your audience will give the card, then protect the detail they need to recognize first. Play Figma’s homepage preview.

Universe reverses the emphasis. The Octocat face catches the eye, and the repeating shapes lead toward it from the left. The event name is still easy to pick out in the white strip at the bottom. The date and location are noticeably finer. A bottom crop would take the name with the details, leaving an image that says GitHub more readily than Universe. Borrow this split when you have a recognizable visual and room for the information strip. If the event name needs to survive a tighter crop, bring it closer to the focal point.

Feature cards show the change at the right scale

“LINEAR MOBILE” stays readable in two white lines. The version badge is smaller, and the phone screens are dim enough that most inbox text disappears in the thumbnail. The card still works because the change is clear from the headline and the device. If you’re releasing a product on mobile, that combination can carry the story. If you’re announcing shared cursors, use a tight crop where two colored cursors are visible. The surrounding toolbar can go. If the feature itself is the reason to open the link, give it enough space to be recognized.

Brand cards make one mark memorable

The white mark and the edge of the blue tile hold up as the hand and surrounding glow get darker at small sizes. The centered subject also stays intact in a tighter crop. It’s a useful reference for a brand reveal because the image has one thing to remember. The tradeoff is specificity. Someone unfamiliar with the mark needs the link title to identify Framer. For a new brand name, consider making the wordmark the object people see first. For a visual refresh of a familiar brand, a close view of the new mark may be enough.

Write the brief before you lay out the card

Write down the first thing someone should recognize, the visual that proves it, and the detail that can move to the link title. Imagine a fictional product called Harbor. An event card might read “Harbor Live” with “May 21” beside it, with the venue in the title. A feature card might read “Export comments” beside a close crop of the export panel, with the supported formats explained on the page. A brand reveal might use the new Harbor wordmark at large scale and put “Meet the new Harbor” in the title.

Make two roughs with the same message and shrink both to thumbnail size. Ask someone to name the launch from the image alone, then show them the image with the actual link title. Try a tighter crop as a stress test and check the preview in the places where you’ll share it. If an essential word disappears, move it or make it larger before adding anything else. The Open Graph image safe area guide shows how to check which parts of the composition can survive a crop.