Figma Cards

Preview

Figma Cards

Figma Cards Component

Cards are designed to visually resemble playing cards, combining headers, content, and controls to simplify complex information about various topics and content into compact UI.

The Cards component provides a versatile set of variants, including horizontal and vertical cards, bank cards, user profile cards, and progress cards.

Cards UI Best Practices

Maintain uniform structure across cards for easy scanning and comparison.
Always include a prominent, clickable area or a distinct Button for primary action.
Adjust size, layout direction, and content using pre-designed variants for optimal display across interfaces.

Cards Anatomy

Set	Variants	Properties
CardCredit	12	Type Front, BackSize Small, Medium, LargeInverted False, True
CardCol	8	Type Top, BottomSize XS, Small, Medium, Large
CardWidget	6	Type Default, ProgressSize Large, Medium, Small
CardEcommerce	6	Type Default, Secondary, TertiarySize Medium, Large
CardRow	6	Type Left, RightSize Small, Medium, Large
CardUser	3	Size Small, Medium, Large

The cards family is eight sets: CardActions footers in six types, CardHeader in four, CardCredit front and back at 200 to 278px, CardCol vertical cards from 332px XS to 564px Large, CardRow horizontal cards, CardWidget with a Progress variant, CardEcommerce in three styles and CardUser profile cards.

Cards AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a card system in Figma as eight component sets that share headers and footers. CardHeader: Avatar, Avatars, Badge and Text types in three sizes. CardActions: a footer row with Buttons, Links, Avatars and icons, Counter, Rating or Text, in Small 44, Medium 48 and Large 52px. CardCol: a vertical card with an image on Top or Bottom, headline, body and footer in XS 332, Small 398, Medium 478 and Large 564px widths. CardRow: a horizontal card with the image on the Left or Right at 196, 230 and 272px heights. CardCredit: a bank card Front with chip, number, name and expiry and Back with a magnetic strip and CVV, in three sizes with an Inverted dark option. CardWidget: a stat card in Default and Progress types with a progress bar. CardEcommerce: a product card in Default, Secondary and Tertiary styles with image, title, price and an add-to-cart action. CardUser: a profile card with avatar, name, role and follow button. Compose every card from the shared header and footer instances so one edit propagates.

Source