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

Style Guide - Loja - Card Lista Produto - Desktop

Crie um card de lista de produtos no desktop utilizando Figma, aplicando auto layout e personalizando texto e cores para um design atrativo e funcional.

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?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
Layers4 min
Assets2 min
Pages2 min
Edit Object1 min
Masks3 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
Share4 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
Kits10 min
Templates10 min
Conclusão3 min
Avaliação do Módulo