Figma Cards
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 | Copy to Figma |
|---|---|---|---|
| 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 |
Figma Cards
Cards
cards design example
cards component
figma cards
Interactive component
