Figma Features

Build a set of feature blocks for a product landing page in Figma in desktop, tablet and mobile widths. Main block: a white rounded card holding three equal columns, each with a blue outlined icon — a square, a circle and a triangle work as placeholders — a bold one-line title, two short grey description lines and a pill-shaped secondary button. Keep two columns on tablet and wrap the third below; stack all three full-width on mobile. Add an alternating variant: a two-column row with text on one side — overline, headline, paragraph and a pair of buttons — and an image placeholder on the other, flipping sides each row. Add a compact strip variant: four features in a single row with icon and title only, sized to sit under a hero. Build every column with auto layout so blocks resize with their content, bind colours and spacing to variables, and keep icon, title, body and button as one nested component so swapping an icon or hiding a button never breaks the grid.