InícioSuporte
InícioSuporteLinks
Entrar
  1. Formação em Vibe Coding
  3. Figma
Style Guide Loja

Style Guide - Loja - Card Lista Produto - Desktop

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

Figma
Progresso do Módulo
0 de 140 aulas concluídas
O que é o Figma?
Por que utilizar o Figma?
Acessando e cadastrando-se no Figma
Usando a licença educacional
Baixando o Figma
Primeiro contato com Figma
Canva - Mover
Canva - Escala
Canva - Frame
Canva - Section
Canva - Slice
Canva - Retângulo
Canva - Line
Canva - Arrow
Canva - Elipse
Canva - Polygon
Canva - Star
Canva - Place image
Canva - Pen
Canva - Pencil
Canva - Text
Canva - Resources
Canva - Hand Tool
Canva - Add Comment
Layers
Assets
Pages
Edit Object
Masks
Union select
Criando Grids
Auto Layout - primeiros passos
Auto Layout - ajustes para responsividade
Auto Layout - aplicação em diferentes larguras
Componentes e variantes
Constraints
Constraints - exemplo NavBar
Principais atalhos do Figma
Share
Lorem Ipsum - gerar textos aleatórios
Pexels - banco de imagens
Unsplash - banco de imagens
Brandfetch - identidade visual de marcas
Content Real - gerar conteúdo fictício
Font Awesome Icons - biblioteca de ícones
Material Design Icons - biblioteca de ícones
Glassmorphism - efeito vidro
Image Palette - paleta de cores da imagem
Google Map - gerar mapas
Vectary 3D Elements - mockups 3D
Foundation Color Generator - gerar paletas de cor
Style Guide - Landing page - Grid
Style Guide - Landing page - Tipografia (PARTE 1)
Style Guide - Landing page - Tipografia (PARTE 2)
Style Guide - Landing page - Paleta de cores
Style Guide - Landing page - Botões
Style Guide - Landing page - NavBar
Style Guide - Landing page - Card Informações
Style Guide - Landing page - Cards Depoimento
Style Guide - Landing page - Rodapé - 1ª Dobra
Style Guide - Landing page - Rodapé - ícones
Style Guide - Landing page - Rodapé - 2ª Dobra
Style Guide - Landing page - Organizando Assets
Criando a Landing page - NavBar
Criando a Landing page - Cabeçalho - Fundo e Mockup
Criando a Landing page - Cabeçalho - Texto e Botão
Criando a Landing page - Card Informações
Criando a Landing page - Corpo - 1ª Dobra
Criando a Landing page - Corpo - 2ª Dobra
Criando a Landing page - Corpo - 3ª Dobra
Criando a Landing page - Corpo - 4ª Dobra
Criando a Landing page - Corpo - 5ª Dobra
Criando a Landing page - Rodapé
Navbar Variant para a Landing Page do Tablet
Criando a Landing page Tablete - Cabeçalho
Criando a Landing page Tablete - Card Informações
Criando a Landing page Tablete - Corpo - 1ª Dobra
Criando a Landing page Tablete - Corpo - 2ª Dobra
Criando a Landing page Tablete - Corpo - 3ª Dobra
Criando a Landing page Tablete - Corpo - 4ª Dobra
Criando a Landing page Tablete - Corpo - 5ª Dobra
Criando a Landing page Tablete - Rodapé
Criando a Landing page Mobile - NavBar
Criando a Landing page Mobile - Cabeçalho
Criando a Landing page Mobile - Card Informações
Criando a Landing page Mobile - Corpo - 1ª Dobra
Criando a Landing page Mobile - Corpo - 2ª Dobra
Criando a Landing page Mobile - Corpo - 3ª Dobra
Criando a Landing page Mobile - Corpo - 4ª Dobra
Criando a Landing page Mobile - Corpo - 5ª Dobra
Criando a Landing page Mobile - Rodapé
Visualizando resultado final
Landing page - Conclusão e ajustes finais
Style Guide - Loja - Grid
Style Guide - Loja - Criando Página da Loja
Style Guide - Loja - Tipografia
Style Guide - Loja - Paleta de cores
Style Guide - Loja - Botões
Style Guide - Loja - NavBar
Style Guide - Loja - Card Categoria
Style Guide - Loja - Card Lista Produto - Desktop
Style Guide - Loja - Card Lista Produto - Mobile
Style Guide - Loja - Card Grid Produto - Mobile
Style Guide - Loja - Card Meus Pedidos
Style Guide - Loja - Tabbar
Criando a Loja - Cabeçalho
Criando a Loja - Categoria
Criando a Loja - Produtos
Criando a Loja - Menu Pedidos Itens
Criando a Loja - Menu Pedidos Informações de contato
Criando a Loja - Menu Pedidos Resumo
Criando a Loja Mobile - Cabeçalho
Criando a Loja Mobile - Categoria
Criando a Loja Mobile - Produtos Card List
Criando a Loja Mobile - Produtos Card Grid
Criando a Loja Mobile - Menu Tabbar
Criando a Loja Mobile - Visualizando resultado final
Style Guide - Dashboard - Grid
Style Guide - Dashboard - Tipografia
Style Guide - Dashboard - Paleta de cores
Style Guide - Dashboard - Ícones
Style Guide - Dashboard - Sidebar
Style Guide - Dashboard - Sidebar Estilizando
Style Guide - Dashboard - Navbar
Style Guide - Dashboard - Card Grid
Style Guide - Dashboard - Card Lista
Dashboard - Login
Dashboard - Login Estilizando
Dashboard - Login Mobile
Dashboard - Cadastrar
Dashboard - Cadastrar - Mobile
Criando o Dashboard - Navbar
Criando o Dashboard - Sidebar
Criando o Dashboard - Cards Grids
Criando o Dashboard - Cards Listas
Dashboard Conclusão e exportando arquivo
Kits
Templates
Conclusão
Avaliação do Módulo