15 Minute Tutorial – Build a Credit Card Checkout Form Using a Figma Design System

Welcome to my quick and informative 15-minute tutorial series. This series of articles will teach you the process of building effective and visually appealing styles and components in Figma using a prebuilt design system. In no time, you’ll gain hands-on experience in leveraging Figma’s powerful features to streamline your design workflow, while expanding your knowledge of design systems. For this series, I’ll be using the UI Prep Design System, but you can use any number of Figma design systems to build your components.

These tutorials assume you have basic knowledge of Figma. This step-by-step guide will walk you through building a credit card checkout form.

Step 1

From the Assets panel, drag a form input component to your frame.

Step 2

Drag a form dropdown component to your frame.

Step 3

Drag more form input components to your frame to complete the form and type the appropriate label names and placeholder text. I used Card Type, Cardholder’s Name, Card Number, Expiry Date, and CVV. Then, using variables in the Figma design system, I applied a “text/default” color for the labels and a lighter gray for the placeholder text.

Step 4

From the Assets panel, drag a button component to your frame and type in “Checkout” in the button.

Step 5

Select the input fields and button and apply Auto layout to them. Put some space in between them by typing in the amount in the spacing field, or if the design system you’re working with has variables, select the spacing dropdown and choose Apply variable. Next, choose the variables for the amount of spacing you want (see the next screenshot below this one).