By Howard Pinsky
Hey everyone, I'm Howard Pinsky. In this Adobe XD video, we're going to take a look at using 3D Transforms to add some fun interactions to your payment screens. Let's get to it.
All right, here we are back in Adobe XD with a payment screen that I've been working on. And I'm thinking in this area here, where a user might want to add a credit card, we might want to add a fun interaction that flips this card over so users can enter their information. So I already have this placeholder card in place. What we want to do now is dive into this group and start creating what it's going to look like when it flips over. And to help get us started, I'm going to simply duplicate this placeholder card, dive into the group and delete the Add button. Now in terms of styling of this new card, I'm going to hop over to Finder and simply grab this gradient and drag it directly onto the shape. Of course, you can create gradients of your own or add any background that you choose. I will give it a little bit of a border. I'm going to set the colour to white and drop the opacity quite a bit.
Now we can start adding some information on the inside of this card. So I'm going to grab the Text tool, shortcut key T and type out: Credit card number. Now for this header, the text is a little bit too large. So I'm going to go ahead and drop it quite a bit. Let's try about 12. And then drop the weight just a little bit, to about 700 in this case. Next, right below this header, we're going to want a rectangle. So I'll go ahead and draw one out with the Rectangle tool. I'm going to round out the corners ever-so-slightly... somewhere around 4. And on the inside we might want some placeholder text, which I do have copied to my clipboard. So I'm simply going to paste it, change the colour to a nice dark colour and pop it in the middle of this rectangle. Great.
Now in the Layers panel, I'm going to make sure to select all this information, pop it into a group and call this: Card Number. Next, right below, we might want to add fields for the expiration and the CVV. So, duplicating this by pulling downwards, holding down Alt or Option, I'm going to switch this over to Expiration, dive into this text layer and type out some placeholder: 12/2024. And this one will not require as much space. So I'm going to go ahead and bring this on back. And we can now use this group to duplicate over onto the right and we can add the CVV in here.
All right. Very quickly, I'm going to hop into the Layers panel, update the names of this group to: CCV and Expiration. And we now have all the information we're going to need for our new card. Now, one more thing I may want when the card does flip over is a shadow. And I want to be able to control that shadow a little bit more. So I'm actually going to select this card, duplicate it, I'll turn off the border and then set the colour to a pure black. And then turn on an Object Blur and then blur it quite a bit. This will allow me to have more control over that shadow, which I'm going to move behind the card and name this Shadow and then drop the opacity to 0. Perfect. So we now have everything in place. I'm going to go ahead and name this: New Card. And now we can get these groups ready for 3D Transforms.
Now, this New Card needs to start off in the flipped position. So within the Properties Inspector, I'm going to turn on 3D Transforms. And then I want to rotate this card 180 degrees. Next up, I want to go ahead and select the Placeholder Card and then set the Z depth at 1, so it's in the front initially. And then once that's done, we'll want to go ahead and select the Placeholder Card and also the New Card group, place them into a larger group Command or Control G and call this Card. All right. So we have all of that ready to go and now we want to do is duplicate this artboard over to the right. I'm going to select the artboard, Command or Control+D and now we can dive in and set up our new view. So with the entire Card group selected, which contains the front and the back, I'm going to go ahead and turn on 3D Transforms one more time and then rotate this 180 degrees. And it's not going to look like anything happened at the moment. So I'm going to dive into this group, select the New Card, which is the back, set the Z depth at 1. And then the Placeholder Card, we're going to set it back at 0. Once that's been set, we can select the overall Card one more time, select this handle in the middle which controls our Z depth and bring it on forward.
And now what I'm going to do, because we have all this information down here that we really don't want to focus on... I'm going to select all that information inside of the Layers panel and simply drop the opacity somewhere around 20%. And as you're building out your experience, you can definitely add a lot more information than I did, including a field for Name, a Close button, a Save button, so on and so forth. And before moving on to wire up this, I'm going to hop into the new Card group, select the Shadow, bump the opacity back up and move it on down a little bit. Alright.
So we're now ready to wire this thing up. I'm going to hop into Prototype mode right here at the top. I'm going to select the Placeholder group. I'm going to drag the blue handle over to our second artboard. And then within the Properties Inspector, I want to make sure that Auto-Animate is the Type. And then for the Easing, we're going to go for Ease In-Out with a Duration of around 0.6 seconds. And then from the second artboard, I can select this card one more time, drag it back over to the first and of course if you did have a Close button, you would probably select that. And we're going to keep all the other properties the same. And with that all ready to go, we're going to select the first artboard, press Play at the top, click and click to close.
And that's how you can add fun interactions to your payment screens using 3D Transforms. In the next video, we're going to take a look at using padding to create marketing banners that automatically resize as you add or rearrange content. I'll see you all soon.
Use 3D Transforms to add engaging interactions to your payment screens. In this tutorial, you’ll add headers and text fields so that users can enter their credit card information for online transactions. Then you’ll create and style a card, using the Properties Inspector to update the opacity settings, add a drop shadow and more. You’ll see how to group elements together to organise your design in the Layers panel. Then wire up the interactions and enable 3D Transforms to turn the card over 180 degrees and display an animated card flip effect.
Up next, Design marketing banners using padding.
