Figma Gallery

Preview

Figma Gallery Layouts

Figma Gallery Blocks

Gallery website blocks contain multiple layouts to place your images, videos, and create visually structured content. You can use galleries to create e-commerce, portfolios, and blog design for your website, showcasing your products, projects, or works in detail.

Gallery Anatomy

Set	Variants	Properties
Gallery	33	Layout 01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11Size Desktop, Tablet, Mobile

The file carries eleven Gallery block layouts, each at Desktop, Tablet and Mobile widths, from a single hero image with carousel arrows through two-, three- and four-column grids to captioned tiles and a masonry arrangement.

Choosing a gallery layout

The eleven layouts split into three jobs. A single hero image with arrows suits a case study or a product launch where one picture carries the message. The two-, three- and four-column grids are for portfolios and catalogues where every item has equal weight; the column count is a size trade against image detail, so photography usually stops at three columns and product thumbnails can go to four. The masonry and captioned variants are for mixed media, where tall and wide items need to coexist and each tile carries a title and a line of description.

Galleries are sections, not a single image component. For one image with a caption, a lightbox or an aspect-ratio frame, use Imagery. For a scrolling strip without a grid, use Carousel directly. The gallery blocks compose those two with Pagination and the shared section header (eyebrow, title, description and a pair of buttons), so they drop straight into a Website Builder page next to hero and feature sections with matching spacing.

Gallery AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a Gallery website block in Figma with eleven layouts, each at Desktop, Tablet and Mobile widths. Every layout opens with a section header: an eyebrow label, a title, a short description and a primary plus a secondary button. Below it the image area varies per layout: a single wide image with prev and next arrows and dot indicators, two side-by-side images, a 3x1 row, a 2x2 grid, a 3x2 grid, a 3x3 grid, a 4x2 grid, a masonry mix of one tall image beside smaller ones, a captioned grid with a title and description under each tile, and a full-bleed image with the header overlaid. Tiles are image placeholders with a small radius and even gaps. On tablet drop to two columns and on mobile to one, keeping the header above the images.

Galleries layouts feature Carousel and Pagination components as well as other UI elements to control displayed content.