Figma team page examples

A team page is read by two people: a candidate deciding whether they would fit here, and a prospect checking whether the company is real. Every example in this set pairs the member grid with a careers section, which tells you what the page is mostly used for. It is a hiring page with faces on it, and treating it that way produces better decisions than treating it as a directory.

The grid that has to survive a growing team

On desktop the member grid runs four across: 280px cards with 32px gutters inside a 1,216px content area, two rows visible before the section ends. On mobile the same content becomes a single 343px column of 144px rows, so a portrait heavy layout turns into a horizontal card with the photo on the left.

That difference is where team pages usually break. A grid that looks generous at eight people becomes ten rows and several thousand pixels at forty, and nobody reads to the bottom of it. Decide early whether the page shows everyone or shows leadership, because retrofitting that choice means redesigning the section.

One layout in the set answers this the honest way, stacking three separate team sections on one page so leadership, the wider team and a third group each get their own heading. That scales further than one long grid, and it lets you show a founder at 280px and everyone else in a denser row without the page looking inconsistent. If you cannot bring yourself to cut anyone, at least group them.

The photos carry the page

Nothing else on a team page does as much work as the portraits, and nothing else fails as badly when it is faked.

Nielsen Norman Group's research on photos found that users study genuine photos of real people and ignore generic stock images entirely, treating them as decoration. Consistency matters nearly as much as authenticity: mismatched crops, half the team on a white background and half in a kitchen, reads as a company that does not finish things.

While you wait for the real shoot, the free placeholder avatars keep the layout honest about how it will look with actual faces in it.

The sections that go with it

Beyond the grid and the roles, these pages draw on the same marketing sections as the rest of the kit: metrics for the numbers worth stating, testimonials from the team or from customers, a features section for values, and a newsletter block above the footer. Because every one is an instance, adding a new hire is a duplicated card and adding a whole values band is a swapped section.

Figma's guide to swapping a component instance covers the shortcut, and text overrides survive the swap, which is the part that saves the afternoon.

Both breakpoints, both themes

Every layout exists as a 1,440px desktop page and a 375px mobile version, and the whole set is drawn again in dark mode. Auto Layout means an added row reflows the sections below it rather than overlapping them, so the page you present is still the page after the eleventh hire lands.

When it goes to build, Untitled UI React team pages are open source, built with Tailwind CSS, with the same responsive grid behaviour so the four across layout collapses the way you designed it.