---
title: "Layers | GoodBarber's Design System"
description: "In addition to the two-dimensional distribution on the X and Y axis, our designs are also distributed on different levels, or layers, which allow a stacking of information."
canonical_url: "https://www.goodbarber.com/uxdesign/layers/"
lang: pt
---

# Layers | GoodBarber's Design System

[Design System](https://pt.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[https://pt.goodbarber.com/uxdesign/](https://pt.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[Overview](https://pt.goodbarber.com/uxdesign/)

- [Foundations](/uxdesign/foundations/)
* Layout
+ [Grid](/uxdesign/grid/)
+ [Spacing](/uxdesign/spacing/)
+ [Breakpoints](/uxdesign/breakpoints/)
+ [Layers](/uxdesign/layers/)
* Graphic elements
+ [Color](/uxdesign/color/)
+ [Typography](/uxdesign/typography/)
+ [Images Aspect Ratios](/uxdesign/images-aspect-ratios/)
+ [Icons](/uxdesign/icons/)
- [Atomic Components](/uxdesign/atomic-components/)
* [Color atom](/uxdesign/atom-color/)
* [Font atom](/uxdesign/atom-font/)
* [Image atom](/uxdesign/atom-image/)
* [Gradient atom](/uxdesign/atom-gradient/)
* [Shape atom](/uxdesign/atom-shape/)
* [Shadow atom](/uxdesign/atom-shadow/)
* [Size atom](/uxdesign/atom-size/)
* [Border atom](/uxdesign/atom-border/)
* [Blur atom](/uxdesign/atom-blur/)
* [Overlay atom](/uxdesign/atom-overlay/)
* [Immersive feedback atom](/uxdesign/atom-immersive-feedback/)
- [UI Components](/uxdesign/ui-components/)
* [Background](/uxdesign/background/)
* [Text Field](/uxdesign/textfield/)
* [Dropdown](/uxdesign/dropdown/)
* [Date & Time Picker](/uxdesign/date-time-picker/)
* [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/)
* [Button](/uxdesign/button/)
* [Thumbnail](/uxdesign/thumbnail/)
* [Form](/uxdesign/form/)

# Layers

Foundations

A multi-layered interface helps organize information and stack elements on various levels. It enhances the user experience, making interfaces more dynamic, flexible, and engaging.

[https://portal.ww-cdn.com/portal_static/images/designsystem/videos/layers.7a3cce5726e4.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/layers.7a3cce5726e4.mp4)

## Introduction

In addition to the two-dimensional distribution on the X and Y axis, our designs are also distributed on different levels, or layers, which allow a stacking of information.

When designing an app interface, using layers can help to create a more organized, flexible, and engaging user experience. Instead of just placing elements on a flat surface, layers allow for the organization of information in a clear and logical way by stacking elements on top of one another. This allows our designers to create a more dynamic and visually interesting design, by allowing elements to overlap and interact with one another, creating a sense of depth and movement in the interface.

Additionally, layers can be used to prioritize different elements of the interface. By placing more important elements on top of less important elements, this can help to guide the user's attention and create a more effective user experience.

[Foundations-Layers-video.mov](https://player.vimeo.com/video/778792434?h=9c4d1c1e8c&badge=0&autopause=0&autoplay=1&loop=1&player_id=0&app_id=58479)