Início

Criando a Loja Mobile - Produtos Card Grid | Formação em Vibe Coding | ibe.IA

Formação em Vibe Coding
Figma

Loja Mobile

Criando a Loja Mobile - Produtos Card Grid

Crie cards atrativos para sua loja mobile utilizando o estilo grid, aprendendo a duplicar e personalizar elementos no Figma de maneira prática e eficiente.

Acesso Restrito

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

Fazer login Voltar para o curso

Anterior Próxima

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

Figma

Progresso do Módulo

0 de 140 aulas concluídas

O que é o Figma?1 min

Por que utilizar o Figma?8 min

Acessando e cadastrando-se no Figma6 min

Usando a licença educacional5 min

Baixando o Figma2 min

Primeiro contato com Figma9 min

Canva - Mover4 min

Canva - Escala4 min

Canva - Frame7 min

Canva - Section2 min

Canva - Slice5 min

Canva - Retângulo7 min

Canva - Line4 min

Canva - Arrow1 min

Canva - Elipse3 min

Canva - Polygon2 min

Canva - Star2 min

Canva - Place image2 min

Canva - Pen3 min

Canva - Pencil2 min

Canva - Text9 min

Canva - Resources2 min

Canva - Hand Tool2 min

Canva - Add Comment2 min

Edit Object1 min

Union select2 min

Criando Grids3 min

Auto Layout - primeiros passos9 min

Auto Layout - ajustes para responsividade11 min

Auto Layout - aplicação em diferentes larguras15 min

Componentes e variantes12 min

Constraints10 min

Constraints - exemplo NavBar7 min

Principais atalhos do Figma5 min

Lorem Ipsum - gerar textos aleatórios4 min

Pexels - banco de imagens4 min

Unsplash - banco de imagens2 min

Brandfetch - identidade visual de marcas2 min

Content Real - gerar conteúdo fictício2 min

Font Awesome Icons - biblioteca de ícones2 min

Material Design Icons - biblioteca de ícones1 min

Glassmorphism - efeito vidro1 min

Image Palette - paleta de cores da imagem1 min

Google Map - gerar mapas1 min

Vectary 3D Elements - mockups 3D1 min

Foundation Color Generator - gerar paletas de cor2 min

Style Guide - Landing page - Grid9 min

Style Guide - Landing page - Tipografia (PARTE 1)9 min

Style Guide - Landing page - Tipografia (PARTE 2)12 min

Style Guide - Landing page - Paleta de cores8 min

Style Guide - Landing page - Botões9 min

Style Guide - Landing page - NavBar11 min

Style Guide - Landing page - Card Informações10 min

Style Guide - Landing page - Cards Depoimento7 min

Style Guide - Landing page - Rodapé - 1ª Dobra9 min

Style Guide - Landing page - Rodapé - ícones5 min

Style Guide - Landing page - Rodapé - 2ª Dobra7 min

Style Guide - Landing page - Organizando Assets3 min

Criando a Landing page - NavBar3 min

Criando a Landing page - Cabeçalho - Fundo e Mockup4 min

Criando a Landing page - Cabeçalho - Texto e Botão7 min

Criando a Landing page - Card Informações1 min

Criando a Landing page - Corpo - 1ª Dobra8 min

Criando a Landing page - Corpo - 2ª Dobra5 min

Criando a Landing page - Corpo - 3ª Dobra4 min

Criando a Landing page - Corpo - 4ª Dobra6 min

Criando a Landing page - Corpo - 5ª Dobra4 min

Criando a Landing page - Rodapé4 min

Navbar Variant para a Landing Page do Tablet4 min

Criando a Landing page Tablete - Cabeçalho5 min

Criando a Landing page Tablete - Card Informações3 min

Criando a Landing page Tablete - Corpo - 1ª Dobra6 min

Criando a Landing page Tablete - Corpo - 2ª Dobra3 min

Criando a Landing page Tablete - Corpo - 3ª Dobra3 min

Criando a Landing page Tablete - Corpo - 4ª Dobra6 min

Criando a Landing page Tablete - Corpo - 5ª Dobra3 min

Criando a Landing page Tablete - Rodapé3 min

Criando a Landing page Mobile - NavBar5 min

Criando a Landing page Mobile - Cabeçalho7 min

Criando a Landing page Mobile - Card Informações3 min

Criando a Landing page Mobile - Corpo - 1ª Dobra6 min

Criando a Landing page Mobile - Corpo - 2ª Dobra5 min

Criando a Landing page Mobile - Corpo - 3ª Dobra4 min

Criando a Landing page Mobile - Corpo - 4ª Dobra7 min

Criando a Landing page Mobile - Corpo - 5ª Dobra2 min

Criando a Landing page Mobile - Rodapé4 min

Visualizando resultado final3 min

Landing page - Conclusão e ajustes finais2 min

Style Guide - Loja - Grid6 min

Style Guide - Loja - Criando Página da Loja3 min

Style Guide - Loja - Tipografia5 min

Style Guide - Loja - Paleta de cores5 min

Style Guide - Loja - Botões9 min

Style Guide - Loja - NavBar9 min

Style Guide - Loja - Card Categoria8 min

Style Guide - Loja - Card Lista Produto - Desktop9 min

Style Guide - Loja - Card Lista Produto - Mobile7 min

Style Guide - Loja - Card Grid Produto - Mobile7 min

Style Guide - Loja - Card Meus Pedidos8 min

Style Guide - Loja - Tabbar10 min

Criando a Loja - Cabeçalho5 min

Criando a Loja - Categoria7 min

Criando a Loja - Produtos5 min

Criando a Loja - Menu Pedidos Itens5 min

Criando a Loja - Menu Pedidos Informações de contato9 min

Criando a Loja - Menu Pedidos Resumo7 min

Criando a Loja Mobile - Cabeçalho7 min

Criando a Loja Mobile - Categoria2 min

Criando a Loja Mobile - Produtos Card List4 min

Criando a Loja Mobile - Produtos Card Grid2 min

Criando a Loja Mobile - Menu Tabbar3 min

Criando a Loja Mobile - Visualizando resultado final2 min

Style Guide - Dashboard - Grid4 min

Style Guide - Dashboard - Tipografia2 min

Style Guide - Dashboard - Paleta de cores2 min

Style Guide - Dashboard - Ícones2 min

Style Guide - Dashboard - Sidebar9 min

Style Guide - Dashboard - Sidebar Estilizando6 min

Style Guide - Dashboard - Navbar5 min

Style Guide - Dashboard - Card Grid9 min

Style Guide - Dashboard - Card Lista7 min

Dashboard - Login10 min

Dashboard - Login Estilizando3 min

Dashboard - Login Mobile6 min

Dashboard - Cadastrar3 min

Dashboard - Cadastrar - Mobile3 min

Criando o Dashboard - Navbar1 min

Criando o Dashboard - Sidebar1 min

Criando o Dashboard - Cards Grids4 min

Criando o Dashboard - Cards Listas9 min

Dashboard Conclusão e exportando arquivo4 min

Templates10 min

Conclusão3 min

Avaliação do Módulo