Character Cards

How I created these character cards inspired by a Twitter (or X) post I saw.

01

March 13, 2023.

A random Thursday night scroll of Twitter resulted in me stumbling across this post. Instantly, I fell in love. The subtleness of the color, the exploration of gradients and the overall unique styling of these cards pulled my attention. I wanted to replicate them, to use

02

The Thought Process

Despite my first few visual experiments being done in Illustrator, this felt like something that would be fun to do in Figma. I knew I wanted to make 4 cards, but I could only use 2 of the designs for inspiration as the rest were hidden.

I thought I would start with the easier one, and once I had figured out how to replicate that cool effect that I couldn't quite put into words, I would move on and design the rest.

Click me!

Reflection glass effect

Soft pastel gradient

3 distinct layers

Isometric base layer

03

Sketching it

Once I had figured out how Anagram was designing their cards, it was time for me to jump into Figma and start playing around. To save time, I decided to replicate their cards as close to exact as possible, and use these simply for the sake of experimentation.

Step I

The first step was to draw an ellipse that roughly matched the size and position of the one in the example card. I gave it a solid fill of #D58984 to begin, but this would change as I continued to design.

Step I

The first step was to draw an ellipse that roughly matched the size and position of the one in the example card. I gave it a solid fill of #D58984 to begin, but this would change as I continued to design.