{"id":659,"date":"2024-02-24T14:42:55","date_gmt":"2024-02-24T14:42:55","guid":{"rendered":"https:\/\/amyoukey.com\/blog\/?p=659"},"modified":"2024-02-24T14:42:56","modified_gmt":"2024-02-24T14:42:56","slug":"15-minute-tutorial-build-a-credit-card-checkout-form-using-a-figma-design-system","status":"publish","type":"post","link":"https:\/\/amyoukey.com\/blog\/15-minute-tutorial-build-a-credit-card-checkout-form-using-a-figma-design-system\/","title":{"rendered":"15 Minute Tutorial \u2013 Build a Credit Card Checkout Form Using a Figma Design System"},"content":{"rendered":"\n
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 <\/a>System<\/a>, but you can use any number of Figma design systems<\/a> to build your components.<\/h5>\n\n\n\n
These tutorials assume you have basic knowledge of Figma. This step-by-step guide will walk you through building a credit card checkout form.<\/h5>\n\n\n\n

 <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 1<\/h3>\n\n\n\n

From the Assets panel, drag a form input component to your frame.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 2<\/h3>\n\n\n\n

Drag a form dropdown component to your frame.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 3<\/h3>\n\n\n\n

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.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 4<\/h3>\n\n\n\n

From the Assets panel, drag a button component to your frame and type in “Checkout” in the button.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 5<\/h3>\n\n\n\n

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).<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 6<\/h3>\n\n\n\n

The UI Prep design system has variables, so I chose the #xlarge spacing variable of (32px).<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 7<\/h3>\n\n\n\n

Ensure the items in your Auto layout frame are set to Fill container. This makes the form responsive.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Done!<\/h3>\n\n\n\n

Here I made a large screen version and a mobile version and added a gray background to the form.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Stay tuned – more tutorials are coming soon!<\/p>\n\n\n\n

 <\/p>\n

\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722<\/p>\n

Comment below to share your thoughts. \ud83d\ude42<\/p>\n

Learn more about design systems<\/a><\/p>\n

I’m a designer with 20 years of experience in web, eLearning and visual design. Follow me:<\/p>\n\n\"Anne<\/a>\n\"Anne<\/a>\n\"Anne<\/a>\n\"Anne<\/a>\n\"Anne<\/a>\n\"Anne<\/a>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":669,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,28],"tags":[],"class_list":["post-659","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-system-fundamentals","category-figma"],"_links":{"self":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/comments?post=659"}],"version-history":[{"count":1,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/659\/revisions"}],"predecessor-version":[{"id":670,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/659\/revisions\/670"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/media\/669"}],"wp:attachment":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/media?parent=659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/categories?post=659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/tags?post=659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}