Want to design cards in Figma?

Roopa Nadgiri
2 min readAug 13, 2021

--

Figma has various views if to look at it. Some designers use them as UI tool, some use it as user testing tool while some for illustration.

Figma has various usability it walks through. Here is one example which depicts designing of Visa/ Mastercard using Figma.

Basic design for credit card

Follow the steps to create card of your choice,

  1. Step 1 : Create rectangle of size 295px x 174px with rounded corners of 16px.
Rectangle (295px X 174px) with Rounded corners (16px)

2. Step 2 : Apply gradient diagonally with colors as required.

Diagonal gradient color

3. Step 3 : Add text to the card — Visa/ Mastercard Logo, customer details.

Add logo and customer details

4. Step 4 : Use pen tool to add random shapes to the card created. Add gradient to it to enhance the card.

Add random shapes/blobs to the card

Voila! Your card is ready!!

There are many ways to enhance the your card. You can apply isometric view, rotate in various axis or can use it as stacked view. Let

Step 5 : Duplicate the card and stack them one below the other reducing the opacity and size proportionally.

There your card stack is ready!!!

--

--