Zac Salas

Back

Creature Cards

A hand-illustrated card game built in Figma to explore Smart Animate, variables, and interactive components. Players can add or subtract cards from their hand, with the score automatically updating in real time, all powered by Figma’s prototyping tools.

Role: Product Designer

Tools: Figma, Figjam

Ideas and Sketches

Some of my sketches and other ideas for the card styles.

The Cards

There are six cards featured in the game. The three face cards, The Interdimensional Worm, The Queen Grub, and Blorb are characters which I frequently enjoy drawing. The rest of the cards were designed in illustrator and feature the singular eye present in the face cards.

Noodles

A screenshot showing all of the noodles and logic that went into designing this game.

Infinite Scroll

I implemented an infinite scroll effect in Figma, which required a few creative workarounds. Instead of looping directly back to the first screen, I placed duplicate cards around the perimeter and used Smart Animate to transition to an intermediate screen. This screen appears briefly, then automatically jumps back to the original frame with a seamless 0-second delay, creating the illusion of continuous, infinite scrolling.

Add a Card

Using Smart Animate and Figma variables, I designed a transition that clearly shows users what happens when a new card is added to their hand. The card count and score both update in real time, while the new card slides in smoothly from the bottom with a label indicating which card was added, creating a clear, engaging moment of feedback.

Delete a Card

For the card deletion flow, I added a swipe-down gesture to remove a card, followed by a confirmation prompt to prevent accidental deletions. The deleted card smoothly slides out while displaying a label that confirms which card was removed, maintaining the same clear, animated feedback as when adding a card.

Collapse View

Users can view all their cards at a glance, this view is hidden when only one card remains in the hand.

Max Cards

If a user tries to add a card after reaching the maximum hand size, a warning screen appears to let them know they're at capacity.

Reflection

This was a really interesting project that pushed me to explore the limits of what’s possible inside a Figma prototype. It became less about just simulating UI and more about building interactions that felt genuinely responsive and dynamic using tools like Smart Animate and variables.

One thing I would change in a future iteration is the repetition of the addition and subtraction animations. While they’re helpful the first few times, they can become distracting once users understand what’s happening.

Zac salas

Back

Zac Salas

Work

About