Designing across aspect ratios and formats

0:00 Designing across aspect ratios

Here's the reality of modern design work. You rarely make one design. You make one idea in five shapes. A tall story, a portrait feed post, a square, a wide thumbnail, maybe a banner. And the lazy way to do it, stretching or cropping one design to fit, gives you squashed logos, chopped-off heads and headlines hiding behind buttons. In this lecture, you'll learn the common aspect ratios, the difference between aspect ratio and resolution, the core and flex method for adapting layouts, and a multi-format setup in Figma. By the end, you'll be able to take one message and produce a clean set of formats that all look like one campaign.

0:49 Why it matters

Why does this matter? Because every platform, and every placement within a platform, favors different shapes. Vertical full-screen for stories and short video. Portrait for feeds. Wide for video thumbnails and link previews. If your message only works in one shape, you're either leaving placements empty or publishing broken versions. Think of it like packing for different trips. You don't bring the same suitcase packed the same way for a weekend and a month. You keep the essentials and change what surrounds them. That's exactly the core and flex idea we'll use.

1:29 Common ratios (verify current specs)

Let's get the shapes straight. One to one, square, for some feed posts and profile images. Four to five, portrait, for feed posts and ads that take up more screen. Three to four, which some platforms now use for feed and profile grid displays. Nine to sixteen, vertical full screen, for stories, Reels, Shorts, TikTok and vertical ads. Sixteen to nine, landscape, for video thumbnails and presentations. And about one point nine one to one for link previews. Common pixel sizes are ten eighty square, ten eighty by thirteen fifty, and ten eighty by nineteen twenty. Platforms change recommended sizes and grid crops regularly, so check the current help pages before a big campaign.

2:19 Ratio vs resolution

Now a quick distinction that trips people up. Aspect ratio is the shape. Resolution is the number of pixels. Ten eighty by thirteen fifty and twenty-one sixty by twenty-seven hundred are the same four by five shape. The second just has four times as many pixels. Designing larger can keep text sharper after the platform compresses your upload, as long as you stay within upload limits. But changing resolution never fixes a wrong shape. If you upload a square to a vertical placement, the platform will crop it or pad it, and it won't ask you first.

3:01 Core and flex

Here's the method. Core and flex. Step one, define the core, the elements that must appear in every version: headline, key visual, logo or handle, and call to action. Step two, define the flex, the elements you can drop or move when space is tight: secondary text, decorative shapes, extra images. Step three, design the most demanding format first, usually the nine by sixteen, because of the platform overlays, or a tiny thumbnail. Step four, adapt outward by rearranging, not rescaling. A stacked layout in vertical becomes side by side in landscape. Step five, keep type sizes relative to the shorter side, so text stays readable in every format.

3:48 Worked example 1: a travel blender launch

Worked example one, simple. A product launch for a travel blender. Core: product photo, New travel blender, Pre-order now, and the logo. For the nine by sixteen story, the product photo takes the upper half, the headline sits in large type below it, and the call to action sits above the bottom safe zone. For four by five, the same stack, just tighter, and a short benefit line comes back in. For the square, the image takes about sixty percent with text in the remaining space. And for sixteen by nine, image on the left, text on the right. Four shapes, one campaign. Nothing is squashed, and every version keeps the core.

4:37 Worked example 2: a gym's Ramadan campaign

Worked example two, a business scenario with illustrative details. A gym in Riyadh launches a Ramadan timetable campaign in Arabic and English across stories, feed posts and a YouTube banner. Their first attempt resized one feed design everywhere. On stories, the timetable hid behind the reply bar. On the banner, the heads of the trainers were cut off. The designer switches to core and flex. Core: the Ramadan headline in both languages, the key class times, the trainer photo, and the booking link. Flex: the full weekly timetable, which only appears in the feed carousel. She designs the story first inside the safe zone, then rearranges for the feed and banner, keeping photos with space around the trainers so crops never cut heads.

5:30 Watch me do it: a multi-format set in Figma

Watch me do it in Figma. I create four frames side by side: nine by sixteen, four by five, one by one, and sixteen by nine. I build the core elements once as components: headline block, product image, logo lockup and call to action. I drop instances into each frame. In the vertical frame, the text stack is auto layout, so if I edit the headline, it reflows. I set constraints, so the logo is pinned bottom left and the button is pinned to bottom center. When I stretch the frame, they stay put. Then I turn on my safe-zone overlay for the story. Finally, I zoom out to phone size and check each frame. The sixteen by nine headline is too small, so I bump it up one step.

6:27 Automatic resizing

A word about automatic resizing. Tools like Canva, Adobe Express and Figma plugins can resize designs to other formats in seconds. That's a genuine time saver, especially for template-based work. But automation doesn't know what matters. It will crop faces, shrink text below readable sizes, and put your call to action under a platform's interface. So use it as a first draft. Then check every version at phone size against the core list. Is every core element there, readable, and outside the platform UI? If not, fix it by hand. Thirty seconds of checking saves a broken campaign.

7:10 Common mistakes

Common mistakes. Stretching or squashing designs to fit. Cropping one design into every shape and losing the subject. Designing the easiest format first and forcing the hard ones. Forgetting safe zones on vertical formats. Keeping the same font size in every format, so text is tiny in the wide one. And letting versions drift apart, with different colors or logo positions, so they no longer feel like one campaign. Keep the same type styles, colors and logo placement across the set, and let only the layout adapt.

7:48 Recap and try this now

Let's recap. One idea often needs several shapes. Know the common ratios, and remember that resolution doesn't fix the wrong shape. Use core and flex: define what must always appear, design the hardest format first, and rearrange rather than rescale. Build core elements as components with auto layout and constraints, use automatic resizing as a first draft only, and check every version at phone size. Try this now. Choose one message and produce it in nine by sixteen, four by five and sixteen by nine using the format planning template. Design the vertical first, and note what you rearranged for the other two.