Início
Início
Entrar
  1. Formação em Vibe Coding
  3. Bubble - Design e Responsividade
  5. Design e Responsividade com Bubble
Introdução ao Design em Bubble

O layout que vamos criar

Crie um layout impressionante para seu dashboard utilizando grupos no Bubble, aprendendo a estruturar menus, cards e gráficos de forma responsiva e atraente.

Acesso Restrito

Faça login para acessar o conteúdo desta aula.

Fazer loginVoltar para o curso
AnteriorPróxima

Copyright ©2026 - Todos os direitos reservados
Feito com ☕ e alguns bilhões de tokens de IA

Design e Responsividade com Bubble
Progresso do Módulo
0 de 132 aulas concluídas
5 Princípios Básicos de Design de Aplicativos8 min
Grids4 min
Wireframes2 min
Espaçamentos3 min
Tabelas de Cores5 min
Tipografia - Tipos, onde achar, melhores fontes e tamanhos10 min
Tipografia - Boas práticas e acessibilidade8 min
Mapa mental do aplicativo3 min
Ferramentas e extensões úteis para o design7 min
Buscando Inspiração4 min
O layout que vamos criar4 min
Posicionando os grupos para montar a estrutura do dashboard9 min
Ajustando larguras e alturas das grupos3 min
Configurando os Estilos - cores e fontes9 min
Menu Lateral - Cor de fundo e espaçamento4 min
Menu Lateral - Criando os botões7 min
Menu Lateral - Efeito de hover nos botões9 min
Menu Lateral - Botão Sair4 min
Navbar - Logo, Cor de fundo e espaçamento10 min
Conteúdo - Cor de fundo e espaçamento2 min
Conteúdo - Posicionamento dos grupos3 min
Conteúdo - Criando os cards superiores9 min
Conteúdo - Estilizando os cards superiores (Parte 1)12 min
Conteúdo - Estilizando os cards superiores (Parte 2)10 min
Conteúdo - Criando o Card do Gráfico11 min
Conteúdo - Criando Tabela com dados8 min
Conteúdo - Criando Tabela com dados e estilizando11 min
Conteúdo - Efeito Hover na tabela3 min
Conteúdo - Ajustando a Tabela3 min
Conteúdo - Criando Tabela 2 com dados7 min
Conteúdo - Criando Tabela 2 com dados e estilizando4 min
Conteúdo - Criando Cards de Notificação5 min
Conteúdo - Estilizando os cards Notificação10 min
Menu Retrátil - 2 opções para fazer1 min
Menu Retrátil 1 - Botões de abrir e fechar2 min
Menu Retrátil 1 - Criando o Custom States para abrir e fechar o menu1 min
Menu Retrátil 1 - Criando a lógica de encolher/expandir o menu Retrátil3 min
Menu Retrátil 1 - Ação de abrir e fechar menu2 min
Menu Retrátil 1 - Condicional para Abrir e Fechar Menu3 min
Menu Retrátil 1 - Condicional para esconder o texto2 min
Menu Retrátil 1 - Condicional para Retirar o Padding3 min
Menu Retrátil 1 - Condicional para Alinhar Ícones2 min
Menu Retrátil 1 - Efeito na Transição do menu1 min
Menu Retrátil 1 - Condicional para Retirar o Roundness3 min
Menu Retrátil 1 - Efeito Hover no Ícone abrir fechar2 min
Menu Retrátil 2 - Preparando a estrutura4 min
Menu Retrátil 2 - Ação para Abrir e Fechar Menu6 min
Menu Retrátil 2 - Recado importante1 min
Convertendo Navbar em Reutilizável4 min
Convertendo Menu Lateral Esquerdo em Reutilizável9 min
Fixando Navbar3 min
Fixando Menu Lateral Esquerdo2 min
Ajustando Ação e Condicionais do Menu Retratil10 min
Esconder menu lateral e Criar Botão6 min
Ajustando Padding do Grupo2 min
Ação Mostrar Menu Mobile6 min
Ajustando Botão Menu Reutilizável9 min
Ajuste geral Menu Mobile9 min
Ajustes de Responsividade nos Cards Superiores (PARTE 1)11 min
Ajustes de Responsividade nos Cards Superiores (PARTE 2)9 min
Ajustando alguns Elementos na Responsividade7 min
Grupo Repetidor e ajustes de Responsividade nas Tabelas7 min
Scroll Horizontal e ajustes de Responsividade nas Tabelas (parte 1)9 min
Scroll Horizontal e ajustes de Responsividade nas Tabelas (parte 2)3 min
Ajustes de Responsividade nos Cards Inferiores3 min
Criando Submenu Dropdown - Preparando a Estrutura4 min
Criando Submenu Dropdown - Criando Custom States1 min
Criando Submenu Dropdown - Abrir e fechar o Menu3 min
Criando Submenu Dropdown - Ajustes9 min
Menu Lateral Direito - Preparando a Estrutura2 min
Menu Lateral Direito - Criando Estrutura no Reutilizável7 min
Menu Lateral Direito - Criando Conteúdo do Menu10 min
Menu Lateral Direito - Estilizando Conteúdo do Menu7 min
Menu Lateral Direito - Criando Conteúdo 2 do Menu7 min
Menu Lateral Direito - Criando Conteúdo 3 do Menu7 min
Menu Lateral Direito - Função para Navegar pelo Conteúdo6 min
Menu Lateral Direito - Visualizar o Menu na Index6 min
Menu Lateral Direito - Estrutura Abrir e Fechar Menu3 min
Menu Lateral Direito - Criando Custom States - Abrir e Fechar Menu8 min
Menu Lateral Direito - Ajustes Ícones Configuração e Notificação3 min
Criando Tela de Formulários - Reutilizável2 min
Criando Tela de Formulários - Visualizar na Index3 min
Criando Tela de Formulários - Cabeçalho10 min
Criando Tela de Formulários - Grupo Usuário8 min
Criando Tela de Formulários - Grupo Projetos9 min
Criando Tela de Formulários - Grupo Rede Sociais4 min
Criando Tela de Formulários - Grupo Concluído4 min
Criando Tela de Formulários - Navegação9 min
Criando Tela de Formulários - Navegação - custom states para o multi-step10 min
Criando Tela de Formulários - Navegação - animação de transição3 min
Criando Tela de Formulários - Navegação Dashboard Páginas10 min
Criando Dropdown - Ajustando a estrutura2 min
Criando Dropdown - Criando Grupo Focus e Grupo Repetidor5 min
Criando Dropdown - Criando os Option Sets3 min
Criando Dropdown - Criando Custom States2 min
Criando Dropdown - Criando Ação Abrir e Fechar2 min
Criando Dropdown - Puxando Custom States e Dados Option Sets5 min
Criando Dropdown - Ajustando Botão abrir fechar2 min
Criando Dropdown - Estilizando10 min
Criando Tela de Formulários - Responsividade (parte 1)14 min
Criando Tela de Formulários - Responsividade (parte 2)9 min
Criando Tela de Lista (Grid) (parte 1)10 min
Criando Tela de Lista (Grid) (parte 2)4 min
Criando Tela de Lista (Grid) - Responsividade4 min
Criando Tela de Lista (Grid) - Visualizando na Index9 min
Criando Tela de Login (parte 1)10 min
Criando Tela de Login (parte 2)9 min
Criando Tela de Cadastre-se4 min
Criando Tela de Redefinir Senha3 min
Navegando entre as Telas (parte 1)10 min
Navegando entre as Telas (parte 2)2 min
Responsividade nas Telas - Login, Cadastre-se e Redefinir Senha5 min
Popup de Formulário10 min
Popup de Confirmação11 min
Importando um Ícone Personalizado do Figma3 min
Importando um Ícone de Bibliotecas4 min
Criando Tabbar (parte 1)11 min
Criando Tabbar (parte 2)6 min
Adicionando plugin Scrollbar4 min
Modo Dark - Criando o Botão5 min
Modo Dark - Criando os Options Sets6 min
Modo Dark - Criando os Atributos com as Cores5 min
Modo Dark - Criando o Custom States1 min
Modo Dark - Criando e puxando as Propriedades no Reutilizável6 min
Modo Dark - Puxando os Atributos nos componentes (parte 1)12 min
Modo Dark - Puxando os Atributos nos componentes (parte 2)10 min
Modo Dark - Puxando os Atributos nos componentes (parte 3)8 min
Modo Dark - Puxando os Atributos nos componentes (parte 4)7 min
Modo Dark - Ajustes7 min
Modo Dark - Opção 2 de fazer5 min
Finalização do Módulo1 min
Avaliação do Módulo