Layer Hierarchy in Figma refers to the structured organization and relationship between layers, objects, groups, frames, components, and other design elements inside a Figma file. Every object placed on the canvas appears as a layer in the Layers panel, and the order and nesting of these layers determine how the design is organized and how objects overlap on the canvas.
Understanding layer hierarchy is essential for creating clean UI designs, managing complex layouts, selecting nested objects, maintaining proper parent-child relationships, and working efficiently with Frames, Groups, Components, Auto Layout, and reusable design systems.
Learn professional Figma design concepts through JustAcademy Figma Training and explore practical learning through Register for Figma Course Demo.
A layer is any design object or container that exists in a Figma file. Text, shapes, images, frames, groups, components, instances, sections, and other objects are represented as layers in the Layers panel.
For example, if you create a rectangle, add some text, and place an icon on top of it, Figma creates separate layers for each object.
Layers Panel
├── Rectangle
├── Heading
└── Icon
Each layer can have properties such as position, size, fill, stroke, opacity, effects, visibility, and other settings depending on its type.
Layer hierarchy describes how layers are arranged, nested, and related to one another. It defines which layers are parents, which layers are children, which objects are siblings, and which layers appear above or below other layers.
Page
└── Frame: Login Screen
├── Frame: Header
│ ├── Logo
│ └── Menu Icon
├── Frame: Login Form
│ ├── Text: Email
│ ├── Input Field
│ ├── Text: Password
│ └── Login Button
└── Text: Forgot Password
In this example, the Login Screen is a parent of Header, Login Form, and Forgot Password. The Login Form is itself a parent of its child layers.
A well-organized hierarchy makes a Figma file easier to understand, edit, maintain, prototype, hand off, and collaborate on.
The Layers panel is located in the left sidebar of Figma. It provides a hierarchical view of the objects present on the current page.
Every object on the canvas has a corresponding layer in the Layers panel. Containers such as Frames, Groups, and Components can contain child layers that can be expanded or collapsed.
Layers
├── Header
├── Hero Section
│ ├── Heading
│ ├── Description
│ └── CTA Button
├── Features
│ ├── Feature Card 1
│ ├── Feature Card 2
│ └── Feature Card 3
└── Footer
Figma also provides icons beside layers so designers can identify different layer types such as Frames, Groups, Components, Instances, Text, Shapes, Images, Sections, and Auto Layout structures.
The vertical order of layers in the Layers panel affects their stacking order on the canvas. Layers higher in the stacking order can appear above layers underneath them when their visual areas overlap.
Layers Panel
├── Text
├── Icon
└── Background
Visual Result
Text and Icon appear above the Background.
This is commonly called the z-order or stacking order of objects.
Suppose a card contains a background rectangle, an image, and a title. The background should normally be behind the image and text.
Product Card
├── Title
├── Product Image
└── Card Background
If the background layer is placed above the title and image, it may visually cover those objects depending on their properties.
Figma uses parent and child relationships to describe nested layers. A parent layer contains one or more child layers. Child layers are located inside their parent container.
Parent
└── Child
└── Nested Child
For example:
Frame: Login Screen
├── Frame: Login Form
│ ├── Text: Email
│ ├── Input
│ └── Button
└── Logo
Here, Login Screen is the parent of Login Form and Logo. Login Form is the parent of Email, Input, and Button.
Understanding parent-child relationships is important when working with nested layouts, Frames, Groups, Components, and Auto Layout structures.
Sibling layers are layers that share the same parent.
Frame: Card
├── Image
├── Title
├── Description
└── Button
Image, Title, Description, and Button are sibling layers because they are all children of the Card frame.
A top-level layer is a layer that is not nested inside another layer on the current canvas hierarchy.
Page
├── Frame: Home
├── Frame: About
├── Frame: Contact
└── Frame: Footer
Home, About, Contact, and Footer are top-level layers in this example.
For application and website design, top-level Frames commonly represent screens, pages, or major design areas.
A nested layer is an object placed inside another layer or container.
Frame: Mobile App
└── Frame: Home Screen
└── Frame: Product Card
├── Image
├── Product Name
└── Price
Product Card is nested inside Home Screen, and the product elements are nested inside Product Card.
Nested hierarchy is one of the most important concepts for building complex Figma interfaces.
Frames are powerful containers used to organize other layers. They can have their own dimensions and properties and support features such as Auto Layout, constraints, layout guides, and prototyping.
Frame: Website
├── Frame: Header
│ ├── Logo
│ ├── Navigation
│ └── Profile
├── Frame: Hero
│ ├── Heading
│ ├── Description
│ └── Button
└── Frame: Footer
├── Links
└── Copyright
Frames are especially useful when building structured UI layouts because they can act as containers with their own dimensions and layout behavior.
Groups combine multiple layers so they can be treated as a single manageable layer. A group is useful when several objects need to stay together as one logical collection.
Group: Social Icons
├── Facebook Icon
├── Instagram Icon
├── LinkedIn Icon
└── YouTube Icon
Groups automatically take their bounds from their child objects. Unlike Frames, groups do not provide an independently defined container size in the same way that Frames do.
Components are reusable design elements. A component can contain multiple nested layers while maintaining a structured hierarchy.
Component: Primary Button
├── Button Background
├── Button Label
└── Button Icon
An instance of the component can expose its internal layer structure in the Layers panel while maintaining its relationship with the main component.
Components are especially useful for buttons, inputs, cards, navigation elements, icons, and other reusable UI patterns.
Auto Layout creates structured relationships between layers and is commonly applied to Frames or suitable selections. It can control direction, spacing, padding, alignment, and resizing behavior.
Frame: Button
├── Icon
└── Text
Auto Layout
Direction: Horizontal
Gap: 8px
Padding: 12px 16px
When building modern UI layouts, a hierarchy based on Frames and Auto Layout can make the structure easier to maintain and adapt.
A typical login screen can have several levels of hierarchy.
Frame: Login Page
├── Frame: Header
│ ├── Logo
│ └── Help Link
├── Frame: Login Card
│ ├── Heading
│ ├── Description
│ ├── Frame: Email Field
│ │ ├── Label
│ │ └── Input
│ ├── Frame: Password Field
│ │ ├── Label
│ │ └── Input
│ ├── Frame: Login Button
│ │ ├── Button Background
│ │ └── Button Text
│ └── Forgot Password
└── Footer
This structure makes each part of the interface easier to locate and edit.
Containers such as Frames, Groups, and Components can contain child layers. An arrow next to the layer indicates that it contains nested layers.
Expanding and collapsing layers is particularly useful when working with complex files containing many nested objects.
You can select a layer directly from the Layers panel instead of clicking the object on the canvas.
This method is especially useful when objects overlap or are difficult to select visually.
When objects are nested inside Groups or Frames, clicking the visible object may select the parent container first. You can move deeper into the hierarchy by double-clicking the object or using keyboard navigation.
Frame
└── Group
└── Icon
If the Frame is selected first, you can move deeper into the nested hierarchy to reach the required child layer.
Deep selection allows designers to select nested objects directly without repeatedly entering each level of hierarchy.
On Mac, hold Command while selecting. On Windows, hold Control while selecting.
Frame
└── Card
└── Content
└── Icon
Deep Select → Icon
This is particularly helpful when a file contains many nested layers.
You can change a layer's position in the hierarchy by dragging it within the Layers panel.
Before:
Frame
├── Heading
├── Button
└── Image
After:
Frame
├── Image
├── Heading
└── Button
You can also drag a layer into another Frame or Group to make it a child of that parent.
Reparenting means changing the parent of a layer.
Before:
Frame A
└── Button
Frame B
After:
Frame A
Frame B
└── Button
Reparenting is useful when reorganizing layouts or moving an element from one section of a design to another.
Layer visibility determines whether an object is displayed on the canvas. Visibility can be controlled from the Layers panel.
Frame: Dashboard
├── Sidebar Visible
├── Main Content Visible
└── Old Banner Hidden
Keeping unused or optional layers organized and clearly named makes large files easier to manage.
Layers can be locked to prevent accidental editing or movement.
Locking is useful for elements such as:
A well-organized hierarchy combined with appropriate layer locking can reduce accidental modifications.
Layer names are an important part of hierarchy management. Default names such as Rectangle 123, Frame 45, or Group 12 can make large files difficult to understand.
Frame 12
Rectangle 45
Text 33
Group 8
Login Screen
Email Input
Password Input
Primary Button
Meaningful names allow designers and developers to understand the purpose of each layer without opening it.
For large projects, names can follow a consistent structure.
Page / Section / Element
Example:
Dashboard / Header / Logo
Dashboard / Sidebar / Profile
Dashboard / Content / Sales Card
Dashboard / Content / Revenue Card
The exact naming convention can vary between teams, but consistency is more important than using a single universal naming style.
A website design can use a multi-level hierarchy.
Frame: Website
├── Frame: Header
│ ├── Logo
│ ├── Navigation
│ └── CTA
├── Frame: Hero Section
│ ├── Heading
│ ├── Description
│ └── Button
├── Frame: Features
│ ├── Feature Card
│ ├── Feature Card
│ └── Feature Card
├── Frame: Testimonials
└── Frame: Footer
This makes each website section independent and easier to maintain.
Frame: Mobile App
├── Frame: Status Bar
├── Frame: App Header
│ ├── Back Button
│ ├── Title
│ └── Action Icon
├── Frame: Content
│ ├── Image
│ ├── Heading
│ ├── Description
│ └── CTA
└── Frame: Bottom Navigation
├── Home
├── Search
├── Cart
└── Profile
This type of hierarchy helps separate different functional areas of the application.
Frame: Dashboard
├── Frame: Sidebar
│ ├── Logo
│ ├── Dashboard Link
│ ├── Users Link
│ ├── Orders Link
│ └── Settings Link
├── Frame: Top Bar
│ ├── Search
│ ├── Notification
│ └── Profile
└── Frame: Main Content
├── Page Heading
├── Frame: Statistics
│ ├── Revenue Card
│ ├── Orders Card
│ └── Users Card
└── Frame: Charts
Components can contain their own internal hierarchy. A button component, for example, may include a background, label, icon, and additional nested elements.
Component: Button
├── Icon
├── Label
└── State Indicator
When building a design system, clear hierarchy helps designers understand which elements belong to the component and which elements belong to the surrounding layout.
An instance is a reusable copy of a component. Instances can contain nested layers that correspond to the structure of the main component.
Frame: Checkout
└── Button Instance
├── Icon
└── Label
Maintaining a clear component hierarchy helps keep reusable UI elements consistent throughout a project.
Sections are useful for organizing regions of the canvas and grouping related design work conceptually. They are different from Frames and Groups because their primary purpose is canvas organization rather than functioning as the same type of UI container.
Section: Authentication
├── Login Screen
├── Signup Screen
└── Forgot Password Screen
Section: Dashboard
├── Desktop Dashboard
└── Mobile Dashboard
Visual proximity does not necessarily mean that objects belong to the same hierarchy. Two objects may appear close together on the canvas while remaining separate layers.
Canvas:
[Logo] [Navigation]
Layers:
├── Logo
└── Navigation
If both elements belong to a Header Frame, the hierarchy becomes:
Header
├── Logo
└── Navigation
The second structure communicates a stronger organizational relationship.
| Feature | Group | Frame |
|---|---|---|
| Combines layers | Yes | Yes |
| Can contain children | Yes | Yes |
| Explicit independent dimensions | No, bounds follow children | Yes |
| Auto Layout | Not as a group property | Yes |
| Constraints | Limited by parent frame behavior | Yes |
| Layout guides | No | Yes |
| Common use | Simple object collections | Structured UI layouts |
Groups are generally useful for simple collections of objects, while Frames provide additional container and layout capabilities that are useful for structured UI design.
For responsive interfaces, a useful hierarchy can combine Frames and Auto Layout.
Frame: Pricing Card
└── Auto Layout: Vertical
├── Text: Plan Name
├── Text: Price
├── Frame: Feature List
│ ├── Feature 1
│ ├── Feature 2
│ └── Feature 3
└── Button
This structure makes the relationship between content and layout easier to understand.
Frames can be nested inside other Frames. This allows designers to create multiple levels of hierarchy for complex interfaces.
Frame: App
└── Frame: Home Screen
├── Frame: Header
├── Frame: Content
│ └── Frame: Card
│ └── Frame: Card Content
└── Frame: Bottom Navigation
A nested Frame can itself act as both a child of its parent and a parent of its own children.
Groups can also be nested inside other groups.
Group: Illustration
├── Group: Character
│ ├── Head
│ └── Body
└── Group: Accessories
├── Hat
└── Bag
Nested groups can be useful for illustrations and simple collections, but excessive nesting can make a file difficult to navigate.
Deeply nested files can make object selection difficult. For example:
Frame
└── Frame
└── Group
└── Group
└── Icon
Clicking the icon may initially select a parent container. Use the Layers panel, double-click, Enter, or deep selection to reach the required nested layer.
When copying a parent layer with children, the hierarchy inside that parent can be preserved. This is useful for duplicating structured UI sections.
Original:
Card
├── Image
├── Title
└── Button
Duplicate:
Card Copy
├── Image
├── Title
└── Button
Using well-structured parent containers makes duplication easier and reduces manual reorganization.
A product card can be organized into multiple levels.
Frame: Product Card
├── Image
├── Frame: Product Information
│ ├── Product Name
│ ├── Rating
│ └── Price
└── Frame: Actions
├── Wishlist
└── Add to Cart
This structure makes the card easier to modify and convert into a reusable component.
Frame: Navigation Bar
├── Frame: Logo Area
│ └── Logo
├── Frame: Navigation Links
│ ├── Home
│ ├── Products
│ ├── Services
│ └── Contact
└── Frame: Actions
├── Search
└── Profile
Breaking a navigation bar into meaningful containers creates a clear hierarchy and simplifies future changes.
Frame: Registration Form
├── Heading
├── Frame: Name Field
│ ├── Label
│ └── Input
├── Frame: Email Field
│ ├── Label
│ └── Input
├── Frame: Password Field
│ ├── Label
│ └── Input
└── Frame: Submit Button
├── Icon
└── Text
This structure is particularly useful when Auto Layout is used to control spacing between form fields.
Consider a poorly organized file:
Frame 23
├── Rectangle 18
├── Text 44
├── Group 12
├── Frame 33
└── Rectangle 90
A cleaner hierarchy might be:
Login Screen
├── Header
│ └── Logo
├── Login Form
│ ├── Email Input
│ ├── Password Input
│ └── Login Button
└── Footer
The second hierarchy communicates the purpose and relationship of the elements much more clearly.
Suppose you are designing a SaaS landing page.
Landing Page
├── Header
│ ├── Logo
│ ├── Navigation
│ └── Get Started Button
├── Hero Section
│ ├── Heading
│ ├── Description
│ ├── CTA
│ └── Hero Image
├── Features Section
│ ├── Feature Card 1
│ ├── Feature Card 2
│ └── Feature Card 3
├── Testimonials Section
│ ├── Testimonial 1
│ └── Testimonial 2
└── Footer
├── Links
└── Copyright
This hierarchy makes each major section easy to identify and edit.
Product Page
├── Header
├── Breadcrumb
├── Product Section
│ ├── Product Gallery
│ │ ├── Main Image
│ │ ├── Thumbnail 1
│ │ ├── Thumbnail 2
│ │ └── Thumbnail 3
│ └── Product Details
│ ├── Product Name
│ ├── Rating
│ ├── Price
│ ├── Description
│ ├── Size Selector
│ └── Add to Cart
├── Related Products
│ ├── Product Card
│ ├── Product Card
│ └── Product Card
└── Footer
Component: Primary Button
├── Icon
└── Label
If Auto Layout is applied:
Primary Button
├── Auto Layout: Horizontal
│ ├── Icon
│ └── Label
├── Gap: 8px
├── Padding: 12px 16px
└── Alignment: Center
This provides a clear relationship between the button container and its contents.
PAGE
│
├── WEBSITE FRAME
│ │
│ ├── HEADER
│ │ ├── LOGO
│ │ ├── NAVIGATION
│ │ └── CTA
│ │
│ ├── HERO
│ │ ├── HEADING
│ │ ├── DESCRIPTION
│ │ └── BUTTON COMPONENT
│ │
│ ├── FEATURES
│ │ ├── FEATURE CARD
│ │ │ ├── ICON
│ │ │ ├── TITLE
│ │ │ └── DESCRIPTION
│ │ └── FEATURE CARD
│ │
│ └── FOOTER
│ ├── LINKS
│ └── COPYRIGHT
│
└── OTHER TOP-LEVEL FRAME
| Concept | Meaning |
|---|---|
| Layer Hierarchy | Describes parent-child and nesting relationships. |
| Layer Order | Describes the stacking order of layers. |
| Parent | A layer that contains other layers. |
| Child | A layer located inside a parent. |
| Sibling | Layers that share the same parent. |
| Top-Level Layer | A layer that is not nested inside another layer. |
Grouping creates a parent-child relationship between selected objects. However, layer hierarchy is a broader concept that includes Frames, Groups, Components, Instances, nested objects, and other container relationships.
Hierarchy
├── Frame
│ ├── Group
│ │ ├── Shape
│ │ └── Shape
│ ├── Component
│ │ └── Text
│ └── Image
Therefore, grouping is one way of creating hierarchy, but layer hierarchy includes many more relationships.
A clean hierarchy can make developer handoff easier because developers can understand which elements belong together and how the UI is structured.
Checkout Screen
├── Header
├── Cart Summary
│ ├── Product List
│ └── Total
├── Shipping Form
│ ├── Name
│ ├── Address
│ └── Phone
└── Payment Section
Meaningful names and logical containers make it easier to inspect individual elements and understand the intended structure.
In collaborative projects, multiple designers may work on the same file. A consistent hierarchy helps team members understand the file without needing to ask where every element is located.
| Layer Type | Primary Purpose | Can Contain Layers? |
|---|---|---|
| Shape | Create visual geometry | Usually no |
| Text | Create text content | No |
| Image | Display images | No |
| Group | Combine objects | Yes |
| Frame | Create structured containers | Yes |
| Component | Create reusable elements | Yes |
| Instance | Use reusable components | Yes, with component-defined structure |
| Section | Organize canvas regions | Can organize related design work |
Layer Hierarchy is the organization and nesting relationship between layers in a Figma file, including parent-child, sibling, and stacking relationships.
A parent layer is a container that contains one or more child layers.
A child layer is an object or container nested inside another parent layer.
Sibling layers are layers that share the same parent.
The Layers panel is the area in Figma that displays the hierarchical structure of layers on the current page.
Layer order affects how overlapping objects are stacked and displayed on the canvas.
You can use the Layers panel, double-click the object, use keyboard navigation, or use deep selection.
A Group combines objects and derives its bounds from its children, while a Frame has its own dimensions and supports additional layout features such as Auto Layout, constraints, and layout guides.
Meaningful names make large Figma files easier to navigate, maintain, collaborate on, and hand off to developers.
Yes. Frames can be nested inside other Frames, creating multiple levels of hierarchy.
| Term | Quick Meaning |
|---|---|
| Layer | Any object or container represented in the Figma file. |
| Hierarchy | Organization and relationship between layers. |
| Parent | Container that holds child layers. |
| Child | Layer inside a parent. |
| Sibling | Layers sharing the same parent. |
| Top-Level | Layer not nested inside another layer. |
| Group | Collection of objects treated as a single layer. |
| Frame | Container with its own dimensions and layout capabilities. |
| Component | Reusable design element. |
| Instance | Reusable copy of a component. |
| Layer Order | Stacking order of objects. |
| Nested Layer | Layer located inside another layer. |
Layer Hierarchy is one of the fundamental concepts for working efficiently in Figma. Every design object appears as a layer, and the organization of these layers determines how the design is structured, selected, edited, and visually stacked.
Understanding parent-child relationships, sibling layers, nesting, layer order, Frames, Groups, Components, and Auto Layout allows designers to create cleaner and more maintainable files. A good hierarchy should communicate the structure of the design clearly without unnecessary nesting or confusing layer names.
For more structured Figma learning, visit JustAcademy Figma Training and use Register for Figma Course Demo to explore the course learning options.
