{"id":642,"date":"2024-02-21T17:13:09","date_gmt":"2024-02-21T17:13:09","guid":{"rendered":"https:\/\/amyoukey.com\/blog\/?p=642"},"modified":"2024-02-21T17:13:49","modified_gmt":"2024-02-21T17:13:49","slug":"15-minute-tutorial-build-a-signup-form-using-a-figma-design-system","status":"publish","type":"post","link":"https:\/\/amyoukey.com\/blog\/15-minute-tutorial-build-a-signup-form-using-a-figma-design-system\/","title":{"rendered":"15 Minute Tutorial – Build a Signup 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 System<\/a>, but you can use any number of Figma design systems<\/a> to build your components.<\/h5>\n\n\n\n

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

These tutorials assume you have basic knowledge of Figma. This step-by-step guide will walk you through building a signup 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

Create a frame with the frame tool. Using the rectangle tool, draw a rectangle on the frame.<\/p>\n\n\n

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

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

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

Select the Assets tab in the left side panel and choose a form input component to drag 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

From the Assets tab choose a button component to drag to your frame.<\/p>\n\n\n

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

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

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

With the text tool, type “Subscribe to Our Newsletter” and choose a headline style in the right side panel.<\/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 text, input field 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, type in padding values or choose those variables (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 #large spacing variable of (24px) and padding variables of #base (16px).<\/p>\n\n\n

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

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

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

Now, you can add a drop shadow from the Effects panel. The design system I use has effect styles, and I used “elevation” 100.<\/p>\n\n\n

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

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

Step 8<\/h3>\n\n\n\n

Select everything in the frame containing your elements. In the width field, choose Fill container so the elements line up nicely.<\/p>\n\n\n

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

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

Done!<\/h3>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

This is just the beginning of what you can do with Figma and design systems! 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":654,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,28],"tags":[],"class_list":["post-642","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\/642","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=642"}],"version-history":[{"count":2,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/642\/revisions"}],"predecessor-version":[{"id":656,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/642\/revisions\/656"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/media\/654"}],"wp:attachment":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/media?parent=642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/categories?post=642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/tags?post=642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}