JustAcademy Figma Training provides practical learning of Figma and UI/UX design concepts, including Components, Auto Layout, Variants, Component Properties, Design Systems, Prototyping, and real-world interface design. You can also Register for Figma Course Demo to explore the training program.
Components are reusable design elements in Figma that help designers create consistent, scalable, and maintainable user interfaces. Instead of creating the same button, card, input field, icon, navigation item, or other UI element repeatedly, a designer can create it once as a component and reuse it throughout the design.
A component acts as a reusable source of truth for a particular design element. When the main component is updated, its connected instances can receive applicable changes, helping designers maintain consistency across screens and projects.
A Figma Component is a reusable UI element that can be created once and reused multiple times through connected instances.
Main Component
|
+---- Instance 1
|
+---- Instance 2
|
+---- Instance 3
|
+---- Instance 4
Components are one of the most important concepts in professional Figma workflows because modern digital products contain many repeated UI elements.
There are two fundamental concepts in Figma Components: the Main Component and the Instance.
| Concept | Meaning |
|---|---|
| Main Component | The source component that defines the original design, structure, and default behavior. |
| Instance | A reusable copy connected to the main component. |
Changes made to the main component can be reflected in connected instances, while instances can be customized through supported properties and overrides.
The Main Component is the original component from which instances are created. It contains the structure, styling, layout, and behavior that define the reusable element.
Main Component
Name: Button/Primary
Properties:
- Background
- Text
- Padding
- Border Radius
- Icon
- Auto Layout
The main component acts as the source for reusable instances.
An instance is a reusable copy of a main component. It remains connected to the main component unless the connection is intentionally broken.
Main Button
|
+---- Button Instance
+---- Button Instance
+---- Button Instance
Instances allow the same component to be used across multiple screens while retaining a relationship with the source component.
| Feature | Regular Frame | Component |
|---|---|---|
| Reusable | Manual duplication | Yes |
| Connected instances | No | Yes |
| Centralized updates | No | Yes |
| Design system usage | Limited | Excellent |
| Variants | No component variants | Supported |
| Component properties | Not applicable | Supported |
Almost any repeated UI element can become a component when reuse and consistency provide value.
A button is one of the easiest components to understand. Instead of designing every button separately, create one reusable component and provide controlled variations.
Button Component
+----------------------+
| Submit |
+----------------------+
The same component can support labels such as Save, Submit, Continue, Cancel, Delete, and Download.
Input Component
+-----------------------------+
| Enter your email |
+-----------------------------+
The same input component can be reused for email, username, password, search, address, and other form fields.
Card Component
+-------------------------+
| Image |
| |
| Product Name |
| Description |
| ₹999 |
| [ Add to Cart ] |
+-------------------------+
A product card component can be reused throughout an e-commerce application.
Figma allows designers to create components from selected layers or objects.
Figma uses component indicators to distinguish components from regular layers. Components can also be identified from the Layers panel and Assets area.
Layers Panel
Main Component
├── Icon
├── Text
└── Background
The exact visual appearance of component indicators may change as Figma updates its interface, but the component concept remains the same.
Good naming is essential for scalable component libraries.
Good:
Button/Primary
Button/Secondary
Input/Text
Input/Password
Card/Product
Navigation/Item
Avoid:
Frame 123
Rectangle 45
Copy of Button
New Button
A structured naming convention makes components easier to find and understand.
Button/Primary
Button/Secondary
Button/Danger
Button/Icon
Card/Product
Card/Profile
Card/Article
Input/Text
Input/Search
Input/Password
Using categories makes large component libraries easier to navigate.
Auto Layout and Components work extremely well together. Auto Layout controls how the component responds to content and spacing, while the Component system makes the element reusable.
Button Component
|
+-- Auto Layout
| |
| +-- Icon
| +-- Text
|
+-- Component
|
+-- Instances
Fixed dimensions can be used inside components when an element needs a predictable size.
Icon Button
Width = 40px
Height = 40px
Icon
Width = 24px
Height = 24px
Use Fixed sizing where consistency is required, while using Hug or Fill where flexibility is needed.
Hug Contents is useful for content-driven components such as buttons, tags, badges, and chips.
Button
Width = Hug Contents
Height = Hug Contents
Text = "Save Changes"
If the label changes, the Auto Layout component can adapt according to its content and spacing configuration.
Fill Container is useful when a component or child element needs to occupy available space inside an Auto Layout parent.
Form
|
+-- Input
| Width = Fill Container
|
+-- Button
Width = Fill Container
Professional components should be designed with responsive behavior in mind.
Responsive Component
|
+-- Fixed Icon
+-- Flexible Content
+-- Hug Action
+-- Auto Layout Parent
This allows the same component to work across different screens and content conditions.
An instance is a reusable copy of a main component. When inserted into another design, the instance remains connected to its source component.
Main Component
|
+--------+
| |
Instance Instance
| |
Screen 1 Screen 2
Instances can also be created by duplicating or copying an existing instance.
| Property | Main Component | Instance |
|---|---|---|
| Purpose | Defines source design | Reuses source design |
| Connection | Source | Connected to source |
| Updates | Defines changes | Can receive applicable changes |
| Customization | Defines defaults | Uses supported overrides/properties |
| Reuse | Creates reusable assets | Used throughout designs |
When the main component is updated, connected instances can reflect applicable changes.
Before:
Button = Blue
Update Main Component:
Button = Green
Instances:
Instance 1 → Green
Instance 2 → Green
Instance 3 → Green
This centralized update behavior is one of the biggest advantages of components.
Instances can be customized for their specific context using supported overrides and component properties.
Main Component
Button Text = "Button"
Instance
Button Text = "Save"
The instance can display different content while maintaining its relationship with the main component.
Overrides are instance-level customizations that allow designers to change supported aspects of an instance without creating a completely separate component.
Depending on the component structure, designers can customize supported values such as text, fills, strokes, visibility, sizing, and other properties.
If an instance contains changes that are no longer required, supported overrides can be reset so the instance returns toward the main component's default configuration.
Main Component
Text = "Submit"
Instance Override
Text = "Save"
Reset
Text = "Submit"
Detaching an instance breaks its connection to the main component.
Before:
Main Component
|
Instance
|
Connected
After Detach:
Independent Object
|
No Component Connection
Detaching can be useful when an element must become completely independent, but it should be used carefully because the detached object will no longer receive updates from the original component.
Variants allow similar versions of a component to be organized together as a component set. They are useful when a component has predictable differences such as state, size, type, or theme.
Button Component Set
|
+-- Type = Primary
| +-- State = Default
| +-- State = Hover
| +-- State = Disabled
|
+-- Type = Secondary
+-- State = Default
+-- State = Hover
+-- State = Disabled
A variant is a specific version of a component that differs from other versions in predictable ways.
For example, a button may have variants for Primary, Secondary, Disabled, Hover, Small, Medium, and Large states.
When related variants are grouped together, Figma organizes them into a component set. This makes related component variations easier to manage and use.
Component Set
|
+-- Button
|
+-- Primary / Small
+-- Primary / Large
+-- Secondary / Small
+-- Secondary / Large
Component properties allow designers to expose controlled aspects of a component for customization. Common property types include Boolean, Instance Swap, Text, Variant, and Slot properties.
A Boolean property uses a true/false value to control whether a specific layer or feature is visible.
Card Component
Show Icon = True
Show Icon = False
This is useful for optional elements such as icons, badges, status indicators, or action buttons.
A Text property allows a designated text layer to be exposed as an editable component property.
Button Component
Text Property:
Label = "Submit"
Instance:
Label = "Save"
This creates a controlled editing experience for component users.
An Instance Swap property allows a nested component instance to be replaced with another suitable component.
List Item
|
+-- Icon
|
+-- Home
+-- User
+-- Settings
This is useful when the component structure remains the same but the nested asset needs to change.
Slots provide flexible content areas inside components. They are useful when designers need flexible content while retaining the component's overall structure.
Modal Component
|
+-- Header
+-- Slot
| |
| +-- Custom Content
|
+-- Footer
Slots are particularly useful for flexible layouts such as lists, forms, cards, and modals.
Variant properties define how variants within a component set differ from one another.
Button
Type:
Primary
Secondary
Size:
Small
Medium
Large
Using meaningful properties such as Type and Size generally makes component sets easier to understand and use.
A component can contain instances of other components. This is called nesting components or using nested instances.
Card Component
|
+-- Avatar Instance
+-- Badge Instance
+-- Button Instance
Nested components allow complex interfaces to be constructed from smaller reusable building blocks.
Design System
|
+-- Forms
| |
| +-- Input
| +-- Label
| +-- Button
|
+-- Navigation
| |
| +-- Navigation Item
| +-- Icon
|
+-- Cards
|
+-- Image
+-- Badge
+-- Button
Component composition means building larger components by combining smaller reusable components.
Product Card
|
+-- Image Component
+-- Badge Component
+-- Rating Component
+-- Price Component
+-- Button Component
This approach creates modular and maintainable design systems.
Components are fundamental building blocks of scalable design systems. A design system can contain reusable components, variants, properties, styles, variables, documentation, and usage guidelines.
Design System
|
+-- Colors
+-- Typography
+-- Spacing
+-- Icons
+-- Components
| |
| +-- Buttons
| +-- Inputs
| +-- Cards
| +-- Navigation
| +-- Modals
|
+-- Patterns
+-- Documentation
Figma supports shared libraries so teams can reuse approved components and other design assets across files, subject to workspace permissions and library settings.
Shared Library
|
+-- Buttons
+-- Inputs
+-- Cards
+-- Navigation
+-- Icons
|
+------------------+
|
v
Multiple Design Files
In team workflows, components can be published as library assets so other designers can use them in their files, depending on workspace permissions and library configuration.
Designer A
|
v
Component Library
|
+---- Designer B
+---- Designer C
+---- Designer D
When a shared component library is updated, designers may receive library updates that they can review and apply according to the project's library workflow.
Library
Version 1
|
v
Component Updated
|
v
Version 2
|
v
Designers review updates
Good component libraries should provide documentation explaining what a component is, when to use it, what properties are available, and what variations exist.
Button
|
+-- Purpose
+-- Usage
+-- Variants
+-- Properties
+-- States
+-- Accessibility
+-- Do / Don't
+-- Developer Notes
Organize components logically so designers can quickly find the required asset.
Components
|
+-- Actions
| +-- Button
| +-- Icon Button
|
+-- Forms
| +-- Input
| +-- Checkbox
| +-- Select
|
+-- Navigation
| +-- Tabs
| +-- Menu
|
+-- Feedback
+-- Alert
+-- Toast
Reusable components provide an excellent opportunity to build accessibility considerations into the design system from the beginning.
A professional button component often needs multiple states.
Button
|
+-- Default
+-- Hover
+-- Pressed
+-- Focus
+-- Disabled
+-- Loading
These states can be managed using variants and component properties.
Input
|
+-- Default
+-- Focus
+-- Filled
+-- Error
+-- Disabled
+-- Success
Creating these states as part of the component system makes form design faster and more consistent.
Card
|
+-- Default
+-- Featured
+-- Selected
+-- Disabled
+-- Compact
+-- Expanded
Use variants when these differences are predictable and belong to the same component family.
| Feature | Best Use |
|---|---|
| Boolean | Show or hide optional layers |
| Text | Change controlled text content |
| Instance Swap | Replace nested components |
| Variant | Manage defined component variations |
| Slot | Provide flexible content areas |
If multiple components serve the same purpose but differ in predictable ways, variants can help organize them into one component set rather than creating a large collection of disconnected components.
Instead of:
Button Primary
Button Secondary
Button Small
Button Large
Button Disabled
Use:
Button Component Set
|
+-- Type
+-- Size
+-- State
Creating too many combinations can make a component set difficult to maintain.
Better approach:
Type = Primary / Secondary
Size = Small / Medium / Large
State = Default / Hover / Disabled
Separate, meaningful properties provide better flexibility and organization than creating an unnecessary number of disconnected combinations.
Component properties can prevent the need to create separate components for every possible combination of optional elements or content.
Card
|
+-- Show Icon = True / False
+-- Show Button = True / False
+-- Title = Editable
+-- Icon = Swappable
Components can work alongside variables and design tokens to create systematic design systems.
Component
|
+-- Color Variable
+-- Spacing Variable
+-- Typography
+-- Radius Variable
+-- Component Properties
This allows designers to separate reusable structure from reusable design values.
Components can be designed to work with different themes or visual modes.
Button
|
+-- Light Theme
+-- Dark Theme
+-- Brand Theme
Variables, styles, variants, and component properties can be combined to support scalable theming strategies.
Components can also be used with interactive behaviors to create reusable interactive UI patterns.
Button
Default
|
| Click
v
Pressed
|
| Release
v
Default
This allows designers to prototype realistic interactions without rebuilding every state manually.
Interactive components allow component variants to participate in prototype interactions. Common examples include buttons, toggles, checkboxes, tabs, menus, and navigation controls.
Checkbox
|
+-- Unchecked
| |
| | Click
| v
+-- Checked
Mobile applications benefit significantly from reusable components.
Mobile Design System
|
+-- Mobile Header
+-- Bottom Navigation
+-- Mobile Button
+-- Input
+-- Card
+-- List Item
+-- Modal
+-- Bottom Sheet
Web Design System
|
+-- Header
+-- Sidebar
+-- Navigation
+-- Button
+-- Input
+-- Table
+-- Card
+-- Modal
+-- Pagination
E-Commerce Components
|
+-- Product Card
+-- Product Image
+-- Rating
+-- Price
+-- Add to Cart
+-- Quantity Selector
+-- Cart Item
+-- Checkout Form
Dashboard Components
|
+-- Sidebar
+-- Header
+-- Statistic Card
+-- Chart Container
+-- Table
+-- Filter
+-- Search
+-- Notification
+-- User Profile
A professional design system can organize components according to their role.
Design System
|
+-- Foundations
| +-- Color
| +-- Typography
| +-- Spacing
|
+-- Components
| +-- Button
| +-- Input
| +-- Card
|
+-- Patterns
+-- Login
+-- Checkout
+-- Navigation
Manually duplicating the same design without creating a component makes maintenance difficult.
Bad:
Button 1
Button 2
Button 3
Button 4
All designed separately
Better:
Main Button Component
|
+-- Instance 1
+-- Instance 2
+-- Instance 3
+-- Instance 4
Names such as Frame 123 or Copy of Button make component libraries difficult to understand.
Bad:
Frame 123
Frame 456
Copy 2
Better:
Button/Primary
Button/Secondary
Input/Search
Not every unique visual element needs to become a component. Components should be created when reuse, consistency, customization, or systemization provides a real benefit.
Frequent detaching breaks the connection to the component system and can create inconsistent one-off designs.
Before detaching, check whether an override, variant, component property, instance swap, or slot can solve the requirement.
Variants are excellent for predictable component differences, but they should not become a solution for every possible content combination. Use component properties or slots when they are better suited to the requirement.
A component without proper Auto Layout may become difficult to reuse when text, icons, or content changes.
Weak Component
Fixed Position
Fixed Text Area
Manual Spacing
Better Component
Auto Layout
Hug / Fill
Consistent Padding
Reusable Properties
Always test components with short and long content.
Short:
Save
Long:
Save Changes and Continue
Component should adapt
without breaking the layout.
A component that looks perfect on a desktop screen may fail on mobile. Test components at multiple widths and with realistic content.
| Situation | Create Component? |
|---|---|
| Repeated button | Yes |
| Repeated input | Yes |
| Repeated card | Yes |
| Repeated navigation item | Yes |
| One-time decorative shape | Usually no |
| Reusable icon | Yes |
| Unique illustration | Depends on reuse |
Button/Primary
|
+-- Auto Layout
| |
| +-- Text
|
+-- Hug Width
+-- Fixed/Hug Height
+-- Padding
+-- Radius
Button Component Set
|
+-- Type = Primary
| +-- State = Default
| +-- State = Hover
| +-- State = Disabled
|
+-- Type = Secondary
+-- State = Default
+-- State = Hover
+-- State = Disabled
This creates a scalable button system.
Navigation Item
|
+-- Icon Component
+-- Label
+-- Badge Component
|
+-- State Variant
+-- Default
+-- Hover
+-- Active
+-- Disabled
Input
|
+-- Label
+-- Input Container
| |
| +-- Placeholder
| +-- Leading Icon
| +-- Trailing Icon
|
+-- Helper Text
|
Variants:
Default
Focus
Error
Success
Disabled
Profile
|
+-- Avatar Component
+-- Name
+-- Email
+-- Status Badge
+-- Action Button
This demonstrates component composition and nested reusable elements.
A list item is a good intermediate component project because it can combine Auto Layout, nested components, variants, and component properties.
List Item
|
+-- Avatar
+-- Label
+-- Metadata
+-- Trailing Action
When a component behaves unexpectedly, inspect the structure from the outside inward.
Component Problem
|
v
Main Component or Instance?
|
v
Check Auto Layout
|
v
Check Fixed / Hug / Fill
|
v
Check Variants
|
v
Check Properties
|
v
Check Nested Components
|
v
Check Overrides
|
v
Test Again
Well-structured components make developer handoff easier because developers can understand reusable UI patterns, states, dimensions, content rules, and variations.
Button
|
+-- Type
+-- Size
+-- State
+-- Icon
+-- Label
+-- Spacing
+-- Interaction
Component documentation can also help communicate intended usage and design rules.
Components have a strong conceptual relationship with reusable UI components in frontend frameworks.
Figma
Button Component
|
v
Development
Button Component
|
+-- Primary
+-- Secondary
+-- Disabled
A Figma button component may correspond conceptually to a reusable React, Vue, Angular, or other frontend component.
A Figma component can represent a reusable UI pattern that is later implemented through HTML and CSS.
.button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-radius: 8px;
}
The exact implementation depends on the development framework and design requirements.
Component Architecture
|
+-- Foundation
| +-- Colors
| +-- Typography
| +-- Spacing
|
+-- Components
| +-- Button
| +-- Input
| +-- Card
|
+-- Component Sets
| +-- Button States
| +-- Input States
|
+-- Patterns
+-- Login
+-- Checkout
+-- Dashboard
| Concept | Purpose |
|---|---|
| Main Component | Defines the reusable source. |
| Instance | Reusable copy connected to the main component. |
| Variant | Defines a predictable version of a component. |
| Boolean Property | Shows or hides optional content. |
| Text Property | Allows controlled text editing. |
| Instance Swap | Allows nested component replacement. |
| Slot | Provides flexible content areas. |
| Library | Shares reusable assets across files. |
A Component is a reusable design element that can be used to create consistent UI elements across designs.
The Main Component is the source definition, while an Instance is a reusable copy connected to that source.
They improve consistency, reduce repetitive work, simplify maintenance, and support scalable design systems.
Select the desired layers and use the Create Component command from the appropriate Figma interface control or keyboard shortcut.
Connected instances can receive applicable updates from the main component.
An instance is a reusable copy of a main component that maintains a connection to its source.
Variants are different versions of the same component organized into a component set.
Component properties expose controlled aspects of a component that users can customize, such as Boolean visibility, text, instance swaps, slots, and variant values.
A Boolean property uses true/false values to control layer visibility.
A Text property allows users to edit designated text content through component controls.
It allows a nested component instance to be replaced with another suitable instance.
A Slot is a flexible area inside a component where content can be inserted while retaining the component's overall structure.
Auto Layout makes components adapt to content, spacing, alignment, and available space more reliably.
Use variants when a component has predictable variations such as type, size, state, or theme.
Detachment breaks an instance's connection to its main component and turns it into an independent design object.
Because detached elements no longer receive updates from their original component.
Nested components are reusable component instances placed inside another component.
They provide reusable, standardized building blocks that can be maintained and shared across products and teams.
Figma Components
|
+-- Main Component
| |
| +-- Defines Source
|
+-- Instances
| |
| +-- Reusable Copies
|
+-- Variants
| |
| +-- Component Variations
|
+-- Properties
| |
| +-- Boolean
| +-- Text
| +-- Instance Swap
| +-- Slot
| +-- Variant
|
+-- Nested Components
| |
| +-- Components inside Components
|
+-- Libraries
|
+-- Shared Assets
Components are one of the most powerful features in Figma for creating scalable, consistent, and maintainable UI designs. Instead of manually recreating the same interface elements, designers can create reusable main components and place connected instances throughout their designs.
Professional component workflows become even more powerful when Components are combined with Auto Layout, Fixed Dimensions, Hug Contents, Fill Container, Variants, Component Properties, Nested Components, Slots, and Libraries. These features allow designers to build flexible design systems instead of collections of disconnected screens.
The key principle is simple: design reusable elements once, structure them properly, and reuse them consistently.
For structured Figma and UI/UX learning, visit JustAcademy Figma Training or Register for Figma Course Demo.
