figma guide
Designing cards in Figma: layouts, variants, and handoff
Build reusable card components in Figma with media slots, action areas, elevation tokens, and state variants so product and marketing cards hand off cleanly.
- Published
- Updated
- Jun 06, 2026
- Read time
- 6 min
- Level
- Intermediate
Quick answer
Cards in Figma are vertical auto-layout components with a predictable stack: optional media, header (title + meta), body, and footer actions. Publish a component set with variants for elevation (flat, raised, outlined), state (default, hover, selected, disabled), and boolean properties for media, badge, and footer. Bind fills and shadows to semantic tokens and elevation effects. Document click targets (whole card vs button only) in Dev Mode descriptions. Pair with auto layout patterns, components and variants, and the Figma guides hub.
Who this is for
- Product designers shipping dashboards, settings panels, and content feeds.
- Marketing designers building landing page feature grids and pricing blocks.
- Design system teams who need one card primitive instead of twelve slightly different rectangles per squad.
Choose the right card pattern
| Pattern | Best for | Avoid when |
|---|---|---|
| Media card | Articles, products, video thumbnails | Dense data tables—use table rows instead |
| Stat / KPI card | Dashboards, analytics | Long-form content without a number |
| Action card | Onboarding choices, plan selection | Simple list items with one line of text |
| List card | Notifications, inbox rows | Hero marketing blocks needing full-bleed imagery |
| Horizontal card | Mobile list density, search results | Desktop grids where vertical scans read faster |
Verdict: pick one base card component and extend with boolean properties—not a new frame per screen.
Card anatomy
| Region | Typical content | Layout note |
|---|---|---|
| Media | Image, icon, chart preview | Fixed aspect ratio (16:9, 1:1, 4:3) |
| Header | Title, subtitle, badge | Horizontal auto layout, space between |
| Body | Description, metadata, tags | Vertical stack, gap 4–8px |
| Footer | Primary/secondary actions, price | Horizontal row, align end |
| Container | Background, border, shadow | Corner radius from token (radius/md) |
Structure as Card / Base with nested slots (instances) for media and actions so marketing can swap content without detaching.
Component structure (recommended)
Card / Base
├── Variant: elevation=flat | raised | outlined
├── Variant: state=default | hover | selected | disabled
├── Property: hasMedia=true | false
├── Property: hasFooter=true | false
├── Layer: Media slot (instance swap)
├── Layer: Content stack (vertical auto layout, padding token)
│ ├── Header row (title + badge)
│ ├── Body text
│ └── Tag row (optional)
└── Layer: Footer actions (horizontal auto layout)- Set padding 16–24px on the content stack; use spacing tokens from layout grids.
- Min width 240–280px for grid cards; max width 400px unless full-bleed marketing.
- Use clip content on the container when media is full-bleed at the top.
Elevation and borders
| Style | Visual | Token hook |
|---|---|---|
| Flat | Fill only, no shadow | surface/raised or surface/default |
| Raised | Shadow level 1–2 | shadow/card from effects guide |
| Outlined | 1px stroke, no shadow | border/subtle |
| Selected | Ring or thicker border | border/selected + optional fill tint |
Dark mode: swap shadow for lighter border or subtle fill lift—see dark mode tokens. Do not reuse the same shadow opacity in both modes.
Media and imagery
| Media type | Aspect ratio | Handoff note |
|---|---|---|
| Photo hero | 16:9 | object-fit: cover, focal point optional |
| Avatar / icon | 1:1 | Size 40–64px; use instance swap |
| Chart thumbnail | 4:3 or 16:9 | Static export or live chart spec |
| Logo strip | Hug | Max height 32px |
Place images in a dedicated frame with fill constraints; link export settings when assets ship as PNG/WebP.
For gradients behind media overlays, document text contrast against the scrim token.
States and interaction
| State | Visual | Prototype |
|---|---|---|
| Default | Base elevation | — |
| Hover | Raised shadow or subtle fill | On click → navigate if whole card is clickable |
| Selected | Border ring or check icon | Toggle in selection grids |
| Disabled | Reduced opacity, no actions | Omit hotspots |
| Loading | Skeleton blocks | Pair with placeholder rectangles |
Use interactive components on hover for web cards; mobile cards often skip hover and use press states only.
Click target rule: document whether the entire card or only the CTA button is interactive—engineers will assume wrong without a note.
Grid and responsive layout
| Layout | Columns (desktop) | Gap |
|---|---|---|
| Marketing features | 3 | 24–32px |
| Product catalog | 4 | 16–24px |
| Dashboard KPIs | 2–4 | 16px |
| Mobile feed | 1 | 12–16px |
Parent grid: horizontal auto layout with wrap (or separate frames per breakpoint) per responsive design in Figma.
Equal height rows: set card instances to fill container height in the grid row, or align footers with auto layout space between on the content stack.
Content density variants
| Density | Padding | Title style | Use case |
|---|---|---|---|
| Comfortable | 24px | text/h3 | Marketing, onboarding |
| Default | 16px | text/body-lg | Product grids |
| Compact | 12px | text/body | Admin lists, side panels |
Expose density=comfortable | default | compact as a variant—not three unrelated components.
Comparison: card vs list row vs table row
| Need | Use |
|---|---|
| Scannable grid of entities | Card |
| Single-line inbox item | List row (horizontal card) |
| Sortable columns, bulk select | Table row |
| Primary navigation | Nav item |
Verdict: cards are for entity summaries; do not force tabular data into cards.
Handoff checklist
| Deliverable | Where |
|---|---|
| Clickable region | Card description (whole card vs button only) |
| Image aspect ratio | Media frame name + export note |
| Truncation | Title 2 lines max? Body clamp? |
| Elevation token | Component property → CSS shadow spec |
| Empty media | hasMedia=false variant screenshot |
Run Dev Mode checklist before review.
Common mistakes
| Mistake | Consequence | Fix |
|---|---|---|
| Detached card per screen | Inconsistent padding | Publish Card/* to team library |
| Shadow on every card | Visual noise | Default to flat; raise on hover only |
| CTA outside footer slot | Misaligned action rows | Footer auto layout row |
| No selected state | Broken multi-select UX | Add state=selected variant |
| Tiny touch targets on mobile | Fails HIG/Material | Min 44px height on tappable rows |
FAQ
Should the whole card be clickable?
Document it. Marketing often wants whole-card links; dashboards often want only a button. One sentence in the component description prevents rework.
How many actions in the footer?
One primary + one optional text action. More than two competes with navigation patterns—use a dropdown menu for overflow.
Cards in a carousel?
Use a dedicated carousel frame; see interactive carousels guide for prototype limits.
Do cards need dark mode variants?
Yes—bind surface, border, and shadow tokens to modes or variables on the same component set.
Bottom line
Ship one card system: vertical auto layout, boolean slots for media and footer, elevation variants, and explicit click-target rules in Dev Mode. Grids stay consistent when cards live in the team library with tokens—not detached rectangles. Next: dropdown menus, tables, and the tutorials hub.
§ Keep reading