The Layers and Assets panels are two essential areas of the Figma workspace used to organize designs, manage objects, work with components, and build consistent user interfaces. The Layers panel helps designers understand and control the structure of objects on the canvas, while the Assets panel provides access to reusable components from the current file, kits, and enabled libraries.
For professional UI/UX design, understanding these panels is important because a well-organized Figma file makes designing, editing, prototyping, collaboration, and developer handoff much easier.
JustAcademy Figma Training | Register for Figma Course Demo
The Layers panel displays the objects and elements that exist on the current Figma canvas. Every object added to a design, such as text, shapes, images, frames, groups, components, and instances, is represented as a layer.
The panel provides a hierarchical view of the design and allows designers to select, rename, reorder, hide, lock, and organize layers.
Website Home Page
│
├── Header
│ ├── Logo
│ ├── Navigation
│ └── Login Button
├── Hero Section
│ ├── Heading
│ ├── Description
│ └── CTA Button
└── Footer
├── Footer Links
└── Copyright Text
The Assets panel provides access to reusable design components. It can contain local components from the current file and components available through enabled libraries or UI kits.
Designers can search for components and drag them onto the canvas to create reusable instances.
| Feature | Layers Panel | Assets Panel |
|---|---|---|
| Main Purpose | Organize objects in the current design | Find and reuse components |
| Contains | Frames, groups, text, shapes, images, components and instances | Components from files, kits and libraries |
| Primary Use | Structure and editing | Reuse and consistency |
| Hierarchy | Shows parent-child relationships | Organizes reusable components |
| Typical Action | Select, rename, reorder, hide or lock | Search, preview and insert |
In the current Figma Design interface, the navigation bar is positioned along the left side of the file. The File area provides access to pages and layers, while the Assets area provides access to reusable components.
Figma Design File
│
├── Navigation Bar
│ ├── File
│ ├── Assets
│ ├── Tools
│ └── Other Workflows
│
├── Left Panel
│ ├── Pages
│ └── Layers / Assets
│
├── Canvas
│
└── Right Panel
└── Properties
A layer represents an individual design object or container in Figma. Layers can be independent or nested inside other layers.
For example, a login card may contain a background rectangle, heading, email field, password field, and button. Each element can appear as a separate layer.
| Layer Type | Purpose | Example |
|---|---|---|
| Frame | Container for design elements | Mobile Screen |
| Group | Combines multiple objects | Icon Group |
| Text | Displays text content | Heading |
| Shape | Creates geometric elements | Rectangle |
| Image | Displays images | Product Photo |
| Component | Reusable master design element | Primary Button |
| Instance | Reusable copy of a component | Button Instance |
| Section | Organizes areas of a canvas | Dashboard Screens |
Layers can have parent-child relationships. A parent layer can contain multiple child layers.
Frame: Login Screen
│
├── Frame: Login Card
│ ├── Text: Welcome
│ ├── Frame: Email Field
│ │ ├── Text: Email
│ │ └── Icon
│ ├── Frame: Password Field
│ │ ├── Text: Password
│ │ └── Icon
│ └── Button: Login
This hierarchy makes complex designs easier to understand and maintain.
A layer containing another layer is called the parent. The nested layer is called the child.
Parent Frame
│
├── Child Text
├── Child Icon
└── Child Button
Parent-child relationships are especially important when working with frames, components, auto layout, and responsive designs.
Frames, groups, components, and other containers can contain nested layers. The arrow beside a parent layer can be used to expand or collapse its children.
Collapsing large sections helps designers keep the Layers panel clean when working on complex files.
Layers can be selected directly from the canvas or from the Layers panel. Selecting a layer allows the designer to modify its properties in the right sidebar.
| Action | Mac | Windows |
|---|---|---|
| Select All | Command + A | Ctrl + A |
| Select Child | Enter | Enter |
| Select Parent | Shift + Enter | Shift + Enter |
| Next Sibling | Tab | Tab |
| Previous Sibling | Shift + Tab | Shift + Tab |
Renaming layers is one of the most important file-organization practices in Figma. Meaningful names make it easier for designers and developers to understand the structure of a design.
Rectangle 1
Rectangle 2
Frame 5
Group 12
Text 18
Header
Hero Section
Primary Button
Product Card
Search Input
Footer Navigation
A professional naming system should be consistent throughout the file.
| Element | Recommended Name |
|---|---|
| Button | Button / Primary |
| Input | Input / Email |
| Card | Card / Product |
| Navigation | Navigation / Header |
| Icon | Icon / Search |
| Section | Section / Features |
The order of layers affects their stacking order on the canvas. Layers higher in the Layers panel generally appear above layers lower in the hierarchy when they overlap.
Layers Panel
│
├── Text
├── Button
├── Card Content
└── Background
Here the background is placed below the content so that the other elements can appear above it.
Designers can hide layers when they temporarily do not want to see an object on the canvas. Hidden layers remain part of the file and can be shown again when needed.
Locking a layer prevents accidental movement or editing of important elements.
Groups allow multiple objects to be managed together. A group can contain multiple shapes, icons, text layers, or other objects.
Group: Social Icons
├── Facebook
├── Instagram
├── LinkedIn
└── YouTube
Groups are useful for simple organization, while frames are generally more suitable for structured UI layouts.
Frames are containers used extensively in Figma UI design. They can contain other objects and support features such as auto layout, constraints, scrolling, clipping, and prototyping.
Frame: Mobile App
├── Header
├── Content
├── Product Card
└── Bottom Navigation
Sections help organize larger areas of a canvas. They are useful when a Figma file contains many screens, flows, experiments, or project areas.
Section: Authentication
├── Login
├── Register
└── Forgot Password
Section: Dashboard
├── Overview
├── Analytics
└── Settings
Large Figma files may contain hundreds or thousands of layers. Search and file navigation features help designers quickly locate objects, frames, components, and other content.
Components are reusable design elements. A component can be a simple button or icon, or a complex element such as a navigation bar, card, modal, or complete interface section.
Components help designers avoid recreating the same UI element repeatedly and make design systems easier to maintain.
A main component defines the reusable design element. An instance is a reusable copy of that component placed elsewhere in the design.
Main Component
│
├── Instance 1
├── Instance 2
├── Instance 3
└── Instance 4
When a component is used repeatedly, instances provide consistency across screens.
A designer can select one or more layers and convert them into a component.
Select Layers
↓
Create Component
↓
Main Component
↓
Available in Assets
↓
Create Instances
↓
Reuse Across Screens
Local components are components created within the current Figma file. They can be reused throughout the file and appear in the Assets panel.
Current File
│
├── Components
│ ├── Button
│ ├── Input
│ ├── Card
│ └── Modal
│
└── Screens
├── Login
├── Home
└── Profile
Library components are reusable assets provided through shared libraries. Teams can use published components, styles, and variables to maintain consistency across multiple files.
Design System Library
│
├── Buttons
├── Inputs
├── Icons
├── Cards
├── Navigation
└── Modals
UI kits can provide pre-built components and design resources for creating interfaces faster. They can be especially useful for learning, prototyping, and establishing a consistent visual language.
The Assets tab can be selected from the Figma navigation interface. Figma also provides a keyboard shortcut for quickly accessing it.
| Platform | Assets Shortcut |
|---|---|
| Mac | Option + 2 |
| Windows | Alt + 2 |
The Assets panel provides search functionality for locating reusable components. Search results can include components from the current file and libraries available to the file.
Open Assets
↓
Search "Primary Button"
↓
Review Results
↓
Select Component
↓
Drag to Canvas
↓
Instance Created
A component from the Assets panel can be dragged onto the canvas to create an instance.
Assets Panel
│
│ Drag Component
↓
Canvas
│
↓
Component Instance
This workflow is one of the most common ways to use a design system in Figma.
Good organization makes components easier to discover. Figma can organize components using the file, page, and frame structure.
Library File
│
├── Page: Buttons
│ └── Frame: Primary
│ ├── Button/Primary
│ ├── Button/Secondary
│ └── Button/Disabled
│
└── Page: Icons
└── Frame: Navigation
├── Icon/Home
├── Icon/Search
└── Icon/Profile
Slash-separated naming is a useful convention for organizing related components.
Button/Primary
Button/Secondary
Button/Danger
Button/Disabled
Icon/Home
Icon/Search
Icon/Profile
Input/Text
Input/Password
Input/Search
This approach makes related components easier to locate and organize in the Assets panel.
Component organization can also follow the file structure. A useful structure is:
File
↓
Page
↓
Frame
↓
Component
For example:
Design System
│
├── Page: Components
│ ├── Frame: Buttons
│ ├── Frame: Inputs
│ ├── Frame: Cards
│ └── Frame: Navigation
│
└── Page: Icons
├── Frame: Navigation
└── Frame: Actions
The Assets panel can provide different ways to browse components. Grid view is useful when visual previews are important, while list view can make names and organization easier to scan.
| View | Useful For |
|---|---|
| Grid | Visual component browsing |
| List | Scanning names and organization |
Libraries allow teams to share reusable components and other design resources across files. A design system library may contain buttons, forms, icons, colors, typography, variables, and other reusable resources.
Design System Library
│
├── Components
├── Styles
├── Variables
└── Documentation
When a required library is available but not enabled for the current file, the Libraries workflow can be used to make its assets available.
Open File
↓
Open Assets / Libraries
↓
Find Library
↓
Enable Library
↓
Library Components Available
↓
Insert Instances
When a library component is updated, files using instances of that component may receive available library updates. Designers should review changes before applying them to production designs.
Library Component Updated
↓
Update Available
↓
Review Changes
↓
Accept Update
↓
Instances Updated
Components themselves contain layers. This means the Layers panel helps designers understand how a component is constructed.
Component: Primary Button
│
├── Background
├── Label
└── Icon
When designing a component, meaningful internal layer names make the component easier to maintain.
An instance is based on a main component but can have allowed customizations. Designers can use component properties, variants, and supported overrides to adapt instances for different situations.
Main Component
↓
Instance
↓
Change Supported Properties
↓
Reuse in Multiple Screens
Figma allows component instances to be swapped with other components. This is useful when a designer needs to change a button, icon, card, or other reusable element without rebuilding the entire design.
Current Instance
↓
Open Instance Menu
↓
Search Component
↓
Select Replacement
↓
Updated Instance
Auto layout uses the structure of nested layers to create responsive layouts. Proper parent-child organization is therefore important when working with auto layout.
Frame: Card
│
├── Image
├── Content
│ ├── Title
│ └── Description
└── Button
The parent frame can use auto layout to control spacing, direction, padding, and sizing behavior.
Constraints define how layers respond when their parent frame changes size. They are useful for responsive interface design and maintaining predictable positioning.
Mobile applications often contain many screens and reusable UI structures. A well-organized Layers panel helps designers navigate these screens efficiently.
Mobile App
│
├── Splash Screen
├── Login
├── Home
│ ├── Header
│ ├── Categories
│ ├── Products
│ └── Bottom Navigation
├── Cart
├── Checkout
└── Profile
Website designs can use pages, sections, frames, components, and nested elements.
Website
│
├── Header
├── Hero
├── Features
├── Products
├── Testimonials
├── Pricing
└── Footer
The Assets panel is particularly important when working with design systems because it provides a central place to find reusable UI components.
Design System
│
├── Buttons
├── Inputs
├── Dropdowns
├── Cards
├── Navigation
├── Modals
├── Alerts
└── Icons
Using shared components reduces unnecessary duplication and helps teams maintain consistent UI patterns.
Designer creates Button 1
Designer creates Button 2
Designer creates Button 3
Designer creates Button 4
→ Different spacing
→ Different colors
→ Different typography
Create Button Component
↓
Reuse Component
↓
Consistent UI
↓
Centralized Updates
Design System
↓
Create Components
↓
Organize Components
↓
Publish / Share Library
↓
Enable Library in Product File
↓
Find Components in Assets
↓
Insert Instances
↓
Build Screens
↓
Review Updates
| Feature | Local Assets | Library Assets |
|---|---|---|
| Source | Current file | Shared library |
| Scope | Usually current file | Can be reused across files |
| Management | File-level | Library-level |
| Typical Use | Project-specific components | Design-system components |
Well-organized components make developer handoff easier because developers can understand which elements are reusable and which are specific to a screen.
Screen
├── Header
│ └── Component Instance
├── Content
│ ├── Card Instance
│ └── Button Instance
└── Footer
└── Navigation Instance
Suppose you are creating a login page for a web application.
Login Page
│
├── Logo
├── Heading
├── Email Input
├── Password Input
├── Remember Me
├── Login Button
├── Forgot Password
└── Social Login Buttons
Reusable buttons and inputs can be created as components and inserted through the Assets panel.
Food Delivery App
│
├── Home
│ ├── Search
│ ├── Category Card
│ ├── Restaurant Card
│ └── Food Card
├── Restaurant Details
├── Cart
├── Checkout
└── Profile
Reusable restaurant cards, food cards, buttons, icons, and navigation elements can be managed as components.
Banking Dashboard
│
├── Sidebar
├── Header
├── Account Summary
├── Balance Card
├── Transaction Table
├── Analytics Chart
└── Recent Transactions
Cards, buttons, navigation items, status badges, and table components can be reused throughout the dashboard.
E-Commerce Website
│
├── Header
├── Search
├── Category Navigation
├── Product Grid
│ ├── Product Card
│ ├── Product Card
│ └── Product Card
├── Product Details
├── Cart
└── Footer
Create Design
↓
Create Frames
↓
Add UI Elements
↓
Group Related Elements
↓
Rename Layers
↓
Organize Parent-Child Structure
↓
Apply Auto Layout / Constraints
↓
Review Layers
↓
Prepare for Handoff
Create Component
↓
Name Component
↓
Organize Component
↓
Add Variants / Properties
↓
Document Component
↓
Publish / Share Library
↓
Enable Library
↓
Search Assets
↓
Insert Instance
↓
Reuse Across Screens
Design System
↓
Create Components
↓
Organize Assets
↓
Open Product File
↓
Find Component in Assets
↓
Insert Instance
↓
Instance Appears in Layers
↓
Organize Nested Layers
↓
Build Complete Screen
↓
Prototype
↓
Developer Handoff
| Action | Mac | Windows |
|---|---|---|
| Layers/File panel | Option + 1 | Ctrl + 1 |
| Assets | Option + 2 | Alt + 2 |
| Libraries | Option + 3 | Alt + 3 |
| Frame | F | F |
| Group | Command + G | Ctrl + G |
| Text | T | T |
| Rectangle | R | R |
| Auto Layout | Shift + A | Shift + A |
| Section | Shift + S | Shift + S |
| Create Component | Option + Command + K | Ctrl + Alt + K |
| Feature | Layer | Group | Frame |
|---|---|---|---|
| Basic Purpose | Individual object | Simple object collection | Structured container |
| Can contain objects | Depending on type | Yes | Yes |
| Auto Layout | Depends on type | Limited | Yes |
| Responsive UI | Limited | Limited | Excellent |
| Common Use | Text, shape, image | Simple grouping | Screen and component structure |
| Aspect | Local Component | Library Component |
|---|---|---|
| Created In | Current file | Shared library file |
| Reuse | Primarily within file | Across files where library is available |
| Maintenance | Project-level | Centralized library-level |
| Best For | Project-specific UI | Company design systems |
The Layers panel displays the objects and hierarchical structure of the current design. It allows designers to select, rename, reorder, hide, lock, and organize layers.
The Assets panel provides access to reusable components from the current file and available libraries or kits.
A component is the reusable source design, while an instance is a reusable copy of that component placed in a design.
Meaningful layer names improve navigation, collaboration, maintenance, and developer handoff.
A component library is a shared collection of reusable design resources such as components, styles, and variables.
Open the Assets panel, find the desired component, and drag it onto the canvas or use the component insertion workflow.
Slash naming organizes related components using names such as Button/Primary, Button/Secondary, and Button/Danger.
Components reduce duplication, improve consistency, and make reusable UI patterns easier to maintain.
An asset inserted into a design becomes an instance that appears as a layer in the Layers hierarchy.
Good organization makes large files easier to navigate, collaborate on, update, prototype, and hand off to developers.
Start Figma Project
↓
Create Pages
↓
Create Frames
↓
Create Layers
↓
Organize Parent-Child Structure
↓
Rename Layers
↓
Create Reusable Components
↓
Organize Components
↓
Open Assets Panel
↓
Search / Browse Components
↓
Insert Component Instances
↓
Build Screens
↓
Apply Auto Layout
↓
Apply Design System
↓
Review Layers
↓
Prototype
↓
Developer Handoff
Project
│
├── Cover
│
├── Design System
│ ├── Colors
│ ├── Typography
│ ├── Icons
│ └── Components
│
├── User Flow
│
├── Wireframes
│
├── Final UI
│ ├── Authentication
│ ├── Home
│ ├── Product
│ ├── Cart
│ └── Checkout
│
└── Prototype
This type of organization makes the project easier for designers, product managers, developers, and other collaborators to understand.
Consider a company creating a large e-commerce platform. The design team can create a shared design system containing buttons, inputs, dropdowns, cards, navigation elements, icons, badges, modals, and other reusable components.
E-Commerce Design System
│
├── Button
│ ├── Primary
│ ├── Secondary
│ ├── Danger
│ └── Disabled
│
├── Input
│ ├── Text
│ ├── Search
│ └── Password
│
├── Card
│ ├── Product
│ ├── Category
│ └── Promotion
│
├── Navigation
│ ├── Header
│ ├── Sidebar
│ └── Bottom Navigation
│
└── Feedback
├── Alert
├── Toast
└── Modal
Designers can then find these components through the Assets panel and insert instances into individual screens. The resulting instances appear in the Layers panel as part of the screen hierarchy.
The Layers and Assets panels are fundamental parts of professional Figma workflows. The Layers panel provides a structured view of everything placed on the canvas, while the Assets panel helps designers discover and reuse components efficiently.
When these two panels are used together with meaningful naming, proper hierarchy, components, variants, auto layout, libraries, and design-system practices, Figma files become easier to design, maintain, collaborate on, and hand off to developers.
For structured learning and practical Figma training, visit JustAcademy Figma Training and explore the Figma Course Demo.
