Figma credit card mockups

Nobody reads the digits. In a billing screen with two saved cards, people find the right one by color and by the little Visa or Mastercard mark in the corner, then confirm with the last four digits afterwards. That is the actual job of a card mockup in a product: recognition first, verification second.

It shows up in payment method lists inside settings, in checkout summaries, in the add-a-card modal, and across fintech marketing pages where the card is doing the same work a product photo does elsewhere.

What is actually on the card

The component is 316x190px and its layers are named for what they hold: a company name at the top left, a contactless PayPass symbol at the top right, then cardholder name and expiry sitting above the card number along the bottom left, with the payment method icon anchored bottom right.

That last one is an instance rather than a drawing, so switching a card from Visa to Amex is an instance swap using the same payment icon set the rest of the kit uses in checkout rows and pricing tables. Every text layer is a real text layer, which sounds obvious until you have used a card mockup that baked the number into a vector.

Thirteen themes, and what each one is for

The Theme property runs through transparent, transparent gradient, and transparent strip, gray light, gray dark, and gray strip, brand light, brand dark, gradient strip, salmon strip, and vertical versions of the gray, gradient, and salmon strips. The transparent treatments are the ones designed to sit on top of something, a photograph or a colored section, where the card picks up what is behind it.

The gray and brand versions are the safe choices inside a product, where a card in your brand color reads as your card rather than the bank's. The strip variants lay a band across the face, horizontally or vertically, and the vertical ones are the ones to try if your product should feel current rather than institutional. There is also a Lines property for surface detailing on the card face.

What to put on the card in a real screen

Mask the number. A saved payment method should show the brand and the last four digits, not sixteen, and a mockup that shows a full number teaches your team to build a screen that leaks one.

Format the expiry as MM/YY, matching how it is printed on the physical card. Baymard's testing found 72% of sites format that field differently from the card, which forces people to translate between what they are holding and what is on screen. The same applies to the entry form beside the mockup: label the fields so browsers can fill them, using the cc-number, cc-name, and cc-exp autocomplete values, which is both a conversion win and an accessibility requirement.

One small habit: use an obvious test number like 4242 4242 4242 4242 in your design files rather than a real one from somebody's wallet.

Using it in a layout

Scale the card rather than stretching it, since the text and the payment icon are positioned against the 316x190px face and a squashed card is spotted immediately. In a payment method list, one card at full size with the rest as rows is usually better than a wall of card art competing for attention, and the card mockup earns its space at the top of a billing page or in a marketing hero.

For a fintech landing page, two or three cards at an angle with different themes will carry a section on their own.

The same cards exist in code. Untitled UI React credit cards are open source, built with Tailwind CSS and React Aria, with the same 13 visual types and props for the company, number, cardholder, and expiry, and a width prop that keeps the proportions correct as the card resizes.