Components in Figma for Beginners: Buttons, Inputs, Icons, and Variants

Components: reusable building blocks

A component is a reusable UI building block you create once and use many times. In Figma, the original is the Main component (the source of truth). Every time you place it into a design, you create an Instance (a copy that stays linked to the main).

• Main component: you edit it to change the design everywhere.
• Instance: you can override certain properties (like text), but structure and styling stay linked unless you detach.

Why instances matter

• Update once, propagate everywhere (button padding change, corner radius, icon size, etc.).
• Fewer inconsistencies (no “almost the same” buttons).
• Faster prototyping (swap variants for states/sizes instead of duplicating frames).

Instance overrides vs detaching

Instances allow safe overrides (like changing a label) while keeping the component linked. Avoid detaching instances unless you truly need a one-off custom element. Detaching breaks the link, so future updates to the main component won’t apply.

Plan a mini UI kit: what we’ll build

You’ll create foundational components that can cover most beginner login flows:

• Button (with variants for state and size, plus optional icon)
• Text input (with variants for state and size, plus optional leading icon)
• Top bar (title + optional back icon)
• Icon button (icon-only control with state/size variants)

Then you’ll convert your login screen elements into components, replace duplicates with instances, and organize everything on a dedicated UI Kit page.

Set up a dedicated UI Kit page

1. Create a new page named UI Kit.
2. Add a frame named Components (this is just a container to keep things tidy).
3. Inside, create sections (frames or simple headings) like: Buttons, Inputs, Navigation, Icon Buttons.

Keeping components on a UI Kit page makes them easy to find, audit, and update.

Continue in our app.

• Listen to the audio with the screen off.
• Earn a certificate upon completion.
• Over 5000 courses for you to explore!

Or continue reading below...

Download the app

Component naming and structure (beginner-friendly rules)

Naming convention

Use a consistent, readable pattern. A common approach:

• Button / Primary
• Input / Text
• Top Bar / Basic
• Icon Button / Standard

For variants, you’ll define properties like State and Size so you don’t need separate names for every combination.

Variant property recommendations

Keep property names short and consistent across components (e.g., always use State, not Status in one place and State in another).

Build 1: Button component (with variants and property controls)

Step-by-step: create the base button

1. In the UI Kit page under Buttons, draw a button container (a frame).
2. Place a text layer inside for the label (e.g., “Sign in”).
3. Ensure the button frame uses auto layout (horizontal) so padding and spacing behave consistently.
4. Add optional icon layer (e.g., a left icon) inside the same auto layout row.
5. Name layers clearly: Icon and Label.

Convert to component

1. Select the button frame.
2. Convert to component (this becomes the main component).
3. Name it Button / Primary.

Create variants for size (S/M/L)

1. With the main component selected, create variants.
2. Set a property named Size with values: S, M, L.
3. Adjust padding and text size per size variant (keep icon size consistent or scale slightly—choose one rule and stick to it).

Create variants for state (Default/Hover/Pressed/Disabled)

1. Add a property named State with values: Default, Hover, Pressed, Disabled.
2. For each state, adjust visuals (examples):
   • Hover: slightly darker background or stronger shadow.
   • Pressed: darker background and/or reduced shadow.
   • Disabled: lower opacity and ensure label contrast remains readable.

Add an icon toggle (Icon On/Off)

Beginner-friendly approach: create a variant property that controls whether the icon exists.

1. Add a property named Icon with values On and Off.
2. In Icon=Off variants, remove the icon layer (or hide it and ensure spacing collapses correctly).
3. In Icon=On variants, keep the icon visible.

Tip: If spacing doesn’t collapse when the icon is hidden, it usually means the icon is still taking space in auto layout. The simplest fix is to remove the icon layer entirely in the Off variant.

Expose the label as a text property

Instances should let you change “Sign in” to “Create account” without detaching.

1. Select the component.
2. In the right panel, create a text property for the Label layer (Figma will expose it so instances can edit it).
3. Test: place an instance and change the label text from the instance panel.

Build 2: Text input component (with state/size and optional leading icon)

Step-by-step: create the base input

1. Under Inputs, create a frame for the input field.
2. Inside, add:
   • A placeholder text layer (name it Value or Placeholder).
   • An optional leading icon layer (name it Leading icon).
3. Use auto layout horizontally so padding and spacing are consistent.
4. If your design includes helper/error text below the field, consider making it a separate component or a second component type (to keep the base input simple).

Convert to component and create variants

1. Convert the input frame to a component named Input / Text.
2. Create variants with properties:
   • Size: S, M, L
   • State: Default, Focus, Error, Disabled
   • Leading icon: On, Off

State styling guidance

• Default: neutral border.
• Focus: stronger border or focus ring.
• Error: error-colored border (and optional error message component below).
• Disabled: reduced contrast and ensure text remains legible.

Expose text properties for placeholder/value

1. Create a text property for the placeholder/value layer so instances can change “Email” to “Password”.
2. If you use a label above the field, expose that as a text property too (or keep labels outside as separate text layers if your layout varies).

Build 3: Top bar component (title + optional back button)

Step-by-step

1. Under Navigation, create a horizontal frame for the top bar.
2. Add a title text layer (name it Title).
3. Add a back icon on the left (name it Back icon).
4. Use auto layout to control spacing and alignment.

Convert to component and add a Back toggle

1. Convert to component named Top Bar / Basic.
2. Create variants with a property Back: On, Off.
3. Expose the title as a text property so instances can switch “Login” to “Create account”.

Build 4: Icon button component (for small actions)

Step-by-step

1. Under Icon Buttons, create a square frame with an icon centered inside.
2. Name the icon layer Icon.
3. Convert to component named Icon Button / Standard.

Create variants for size and state

1. Add Size: S, M, L (adjust frame size and icon size).
2. Add State: Default, Hover, Pressed, Disabled (adjust background/opacity).

Allow icon swapping

For beginner workflows, the easiest method is to swap the icon layer in an instance by replacing it with another icon component (if your icons are components) or by using “Swap instance” if the icon is an instance. Keep icon layers consistently named (Icon) to make swapping predictable.

Structured build: convert your login screen into components

Now apply what you built to your existing login screen without rebuilding the entire layout.

Step 1: Identify duplicates on the login screen

• Primary action button (e.g., “Sign in”)
• Secondary actions (e.g., “Forgot password?” might be a text link, not covered here)
• Email and password inputs
• Top bar title/back
• Any icon buttons (e.g., show/hide password, close)

Step 2: Replace duplicates with instances

1. Go to the login screen.
2. Select the existing button you designed earlier on the screen.
3. In the Assets panel, locate Button / Primary and drag an instance onto the screen.
4. Match its size and constraints by positioning it where the old button was.
5. Delete the old button group/frame (the non-component version).
6. Repeat for inputs, top bar, and icon buttons.

If you have multiple screens (Login, Forgot Password, Sign Up), replace each duplicate element with instances so changes stay consistent across screens.

Step 3: Use variant properties instead of duplicating layers

Instead of creating separate “disabled button” copies, select the button instance and switch:

• State to Disabled for loading/blocked states
• Size to S/M/L depending on layout
• Icon to On/Off if needed

Do the same for inputs (e.g., State=Error to show validation issues).

Organize components on the UI Kit page

Recommended layout

• Keep each component set (variant group) together in a grid.
• Label sections with simple text headings (e.g., “Buttons”).
• Place the most common variant first (e.g., Size=M, State=Default).

Keep the component set clean

• Don’t create separate component sets for every tiny change; prefer properties (State, Size, toggles).
• Keep layer names consistent across variants (e.g., always Label, always Icon).
• Use the same property values everywhere (Default not Normal).

Common pitfalls (and how to avoid them)

Detaching instances to “quickly edit”

If you detach to change a label, you lose the link. Instead, expose text properties (Label/Title/Placeholder) so instances can change text safely.

Inconsistent layer names across variants

Variant property controls and swapping work best when layers are named consistently. If one variant uses Text and another uses Label, you’ll get confusing overrides and harder maintenance.

Too many component sets

Beginners often create separate components like “Button/Primary Hover”, “Button/Primary Disabled”, etc. Prefer a single component set with a State property so you can switch states from the instance panel.

Breaking auto layout when toggling icons

If your icon toggle leaves awkward spacing, ensure the icon is truly removed in the Off variant or that the layout collapses correctly. Test by switching Icon on/off on an instance.

Editing instances instead of the main component

If you find yourself fixing the same padding or corner radius in multiple places, you’re likely editing instances. Make the change on the main component so all instances update.