15 Minute Tutorial – Build a Signup 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 signup form.

Step 1

Create a frame with the frame tool. Using the rectangle tool, draw a rectangle on the frame.

Step 2

Select the Assets tab in the left side panel and choose a form input component to drag to your frame.

Step 3

From the Assets tab choose a button component to drag to your frame.

Step 4

With the text tool, type “Subscribe to Our Newsletter” and choose a headline style in the right side panel.

Step 5

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).