Forms

Style forms

Style every form field in the Frames For Figma UI kit at once with the ACSS plugin for Figma, and pick Light or Dark styles for forms on light and dark backgrounds.

Every form component in the kit, from labels to file uploads, takes its sizes, spacing, borders and colors from the Forms screen of the ACSS plugin for Figma. So you style forms once in the plugin, click Save, and every form field in the file follows.

Style all form fields

Open the ACSS plugin for Figma and click Forms.
On the Default tab, set the label, input and help text sizes, padding, corner radius and border widths.
On the Light Styles tab, pick the colors for forms on light backgrounds.
On the Dark Styles tab, pick the colors for forms on dark backgrounds.
Click Save.

Every setting is explained on the plugin’s Forms page.

What each setting changes in the kit

Plugin setting	What changes in the form components
Label Font Size, Font Weight, Line Height, Text Transform	The `Forms/D Form Label` text style, used by every Label
Label Vertical Padding, Horizontal Padding, Bottom Margin	The space around labels and between a label and its field
Input Font Size	The `Forms/D Form Input` text style, used by the text in every field
Input Vertical Padding, Horizontal Padding	The space inside text inputs, text areas and dropdowns
Input Border Radius, Border Width Vertical, Border Width Horizontal	The corners and borders of every field
Help Text settings	The `Forms/D Form Help Text` text style and the space above every Hint Text
Light Styles colors	Every component with Style set to Light (or Light Flat, Light Boxed)
Dark Styles colors	Every component with Style set to Dark (or Dark Flat, Dark Boxed)

The Mobile variants use the Mobile versions of the same variables and text styles.

Light and Dark styles

Use Style: Light for forms on light backgrounds and Style: Dark on dark backgrounds, for example a newsletter sign-up in a dark footer. Switch the Style property on each form component.

States and their colors

A few colors aren’t on the Forms screen. They come straight from your palette:

What	Variable	Change it on
Checked checkboxes, radios and toggles	`Main Colors/Primary/Main`	Color Palette (Primary)
The border and ring of a focused field	`Main Colors/Primary/Main`	Color Palette (Primary)
The border and hint text of a field with an error	`Semantic Colors/Danger/Main`	Color Palette (Danger)
The border of an unchecked checkbox or radio	`Border Color Light`	Borders

To use a different color for one of these states, for example a green focus ring, edit the matching variant in the form component’s main component set on its page, and link the color to another variable.

Good to know

In WordPress, ACSS uses one set of form colors and adapts it to the color scheme, so only the Light styles are exported.
Ready to put a form together? Follow Build a form.