Figma marketing website features sections

Somewhere below the hero, a marketing page has to stop claiming and start showing. The features section is that run of blocks, where a product's capabilities finally get names, icons, and screenshots. It is also where most pages sag, because the writing quietly turns into a list of nouns lifted from the engineering backlog. The layouts above settle the layout half of the problem. The other half is yours.

Alternating, grid, or tabs

The Type property splits the set into a few layout families. Alternating layouts run full-width blocks where the text and the image swap sides as you scroll. Simple icon layouts are the two, three, and four-column grids. Icon cards and integration icon grids put each item in its own bordered container. Icons and image, icons and mockup, center mockup, and large screen mockup pair copy with a product shot at different crops. Twelve tabs mockup layouts let one section hold several screens behind a tab strip.

The real choice is how many things you have and whether you can show them: an alternating layout wants four to six capabilities you can picture, a three-column icon grid is for the ones you can only describe, and a tabbed section is for when you have twelve and refuse to cut any. People scan before they read, and NN/g's original F-shaped pattern eyetracking study is a good reminder that the first two or three words of each heading do most of the work.

Benefits go in the heading, features go underneath

Each cell in these grids is a feature text instance: an icon, a heading, and supporting text, 384px wide in the standard desktop grid, 560px in the wide two-column arrangement, and 343px on mobile. The heading is the line people actually read, so put the outcome there and leave the mechanism for the supporting text. "Ship on a Friday without a release meeting" earns its space; "Automated deployment pipeline" is a backlog ticket.

Icons carry almost none of that meaning on their own, which NN/g's icon usability research has been saying for years: outside a handful of genuinely universal symbols, an unlabelled icon is decoration. The featured icon and integration icon variants exist so the heading has a consistent left edge to sit against, which matters more in a three-column grid than it sounds.

The tabbed feature section

The tabs layouts use a separate feature tab component with current and inactive states and both vertical and horizontal orientations, 400px wide on desktop and 343px on mobile, a similar current/inactive pairing to the horizontal tabs used elsewhere in the kit. Prototyping one is a variant swap per tab, and Figma's component properties cover the instance swap that lets a single panel hold a different screenshot behind each tab.

One caution. A tabbed section hides most of its content by default, so everything behind the second tab is content you have decided most visitors will never see. If a capability is the reason someone buys, do not file it under tab four.

Sections compose into pages

Features sections are the middle of a stack that opens with a header section and closes with a CTA section. Both the landing page examples and the pricing page examples pull their middle from this file, so a page reorder is a matter of dragging frames around, and a change to your feature text style lands on every block at once.

Every layout has a designed 375px mobile version beside the 1,440px desktop one, in light and dark, and the four simple icon layouts also come in a brand theme for the block you want sitting in your primary color. For the integration grids, the integration icons are already drawn, and the free placeholder logos fill the gaps while you wait on legal.

None of this has to be rebuilt for the browser. Untitled UI React features sections are open source, built with Tailwind CSS and React Aria, with the tab behaviour and keyboard navigation handled for you.