A Credit Card Interface with *Shine*

I used Figma to create a simple and colorful interface for collecting credit card information.

Users “build” their credit card visually as they enter information

Creating Shine

The shine effect upon clicking “Save Card” is created with two main steps.

1. Build the Right Gradient

First you need to create the gradient to use for the shine effect. I wanted the gradient to be densest in the middle and be reflected (fade out from both sides). I also didn’t want the middle to be too dense so I created my gradient to have five stops.

The white is diffused fairly evenly using five stops

I applied the gradient to an angled rectangle and slid it off to the left of the frame.

2. Prototyping the Shine

Once the gradient is applied to a shape off of the initial frame, we need to create our end-state frame and move the gradient layer so it’s in the correct finishing position.

The shine moves from left to right across the card. So in the start-state, the shine starts on the left of the frame, and in the end-state it ends on the right of the frame.

Once the shine gradient layer is placed properly on the two frames, we can use smart animate to trigger a transition from the first frame to the second frame, which will cause the gradient layer to slide across the credit card to achieve our end result: