Animating a Real UI in Rive, Step-by-Step I just released a new tutorial where I take a static UI...Animating a Real UI in Rive, Step-by-Step I just released a new tutorial where I take a static UI...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
I just released a new tutorial where I take a static UI design and redesign + animate it in Rive while explaining my process live.
UI design and illustration by Frieda Odagboyi (full credit).
This walkthrough focuses on:
Design analysis before animation
Component-based structure in Rive
Clean state machines and interactions
Beginner-friendly explanations
What if sending money felt a little more like giving a gift?
For Nova, I explored a banking app that brings payments, cards, and a bit of personality together. You can check your balance, browse recent transactions, send or request money, top up, and pay bills.
My favorite part is the digital postcard feature. Before sending a transfer, you can add a little illustrated card—a heart, a birthday greeting, or a playful character. A simple way to make birthday money or a thank-you feel more personal.
I carried that same 3D character into onboarding, pairing it with bold red gradients and large, clear payment details. There’s room for play, while the recipient and amount stay easy to check.
Would you add a postcard to a transfer? I’d love to know what occasion you’d use it for.
Login page idea design
A playful visual concept where the character literally “arms” himself depending on the strength of the password.
As the user creates a stronger password, the character progressively equips himself with more powerful protection and armor. The stronger the password, the better prepared and more protected he becomes.
The idea turns password security into a simple and engaging visual metaphor , instead of showing abstract security levels, the user can immediately see how their password makes the character stronger and safer.