Como configurar uma grid de layout para uma landing page no Figma?

Crie um frame para desktop e adicione uma Layout Grid com colunas, margens e espaçamentos consistentes.

Como usar Auto Layout no Figma em uma landing page?

Use o Auto Layout para organizar botões, menus e blocos de conteúdo com espaçamento adaptável.

Qual plugin do Figma pode ajudar a gerar paletas de cores?

O plugin Color Palettes pode ser usado para criar e explorar combinações de cores para o layout.

Imagem do Curso gratuito Desenhando uma landing page no Figma

Curso online gratuito Desenhando uma landing page no Figma

Name: Desenhando uma landing page no Figma
Availability: InStock

Duração do curso online: 3 horas e 15 minutos

Novo

Domine Figma e crie uma landing page profissional do zero. Curso online gratuito com prática em grid, cores, tipografia e Auto Layout para seu portfólio.

Neste curso gratuito, aprenda sobre

Navegação e ferramentas básicas do Figma para criar uma landing page
Configuração de frame e grid de layout para consistência e alinhamento
Uso de unidades e medidas no Figma (ex.: rem) e padronização de espaçamentos
Fundamentos de cor e criação de paleta considerando sistemas de cores
Uso de plugins para gerar e testar paletas de cores no Figma
Princípios de tipografia e tamanho recomendado para texto de corpo no desktop
Criação e aplicação de estilos (cores, texto, efeitos) para reutilização
Auto Layout para componentes responsivos e organização de seções
Construção do layout: header e seção de destaque (hero) da landing page
Montagem de seções de recursos com ilustrações e variações de layout
Estruturação de seção de vídeo dentro da landing page
Design de tabela de preços e hierarquia visual de planos
Criação de seções de clientes e newsletter para conversão
Finalização do projeto: revisão, ajustes e entrega do layout no Figma

Sobre o curso online gratuito

Aprenda a transformar uma ideia em uma landing page completa, bem estruturada e pronta para apresentar a clientes ou fortalecer seu portfólio. Neste curso online gratuito, você vai desenhar uma landing page no Figma com um processo guiado, entendendo não só onde clicar, mas por que determinadas escolhas de layout e design melhoram a experiência de quem acessa a página.

Ao longo das aulas, você ganha confiança no uso da interface do Figma e constrói uma base sólida para criar telas com consistência. Você começa com o essencial para organizar seu arquivo e seu fluxo de trabalho, depois evolui para decisões visuais e estruturais que impactam diretamente a conversão: configuração de grid para manter alinhamentos profissionais, definição de cores com lógica e coerência, e uso de tipografia para criar hierarquia clara e leitura confortável.

O curso também mostra como acelerar a criação de componentes e seções reaproveitáveis usando estilos e Auto Layout, um passo importante para quem quer produzir com velocidade sem perder qualidade. Conforme o projeto avança, a landing page vai ganhando forma em seções típicas de produtos e serviços, com destaque para boas práticas de espaçamento, equilíbrio visual e organização do conteúdo. Você aprende a construir áreas como cabeçalho e destaque, blocos de recursos com suporte visual, trechos para mídia e provas sociais, além de partes estratégicas que ajudam a estruturar ofertas e chamadas para ação.

Além da prática de design, os exercícios ajudam a fixar conceitos e testar seu entendimento sobre grid, cores, tipografia e elementos do Figma. Você também aprende a aproveitar recursos como plugins para otimizar etapas do processo e manter consistência no visual. No final, você terá um projeto finalizado no Figma e mais clareza para criar novas páginas, adaptar layouts para diferentes necessidades e colaborar melhor em projetos de UX/UI.

Se você quer iniciar em UX/UI, melhorar sua organização visual, aprender Figma de forma aplicada ou criar uma landing page que pareça realmente profissional, este curso é um caminho direto, prático e focado em resultado.

Conteúdo do curso

Aula em vídeo: Como usar o Figma - Criando uma Landing Page no Figma | 1ª Aula (Apresentação do Figma) 05m
Exercício: Qual é o software destacado para criar a Landing Page na aula?
Aula em vídeo: Como usar o Figma - Criando uma Landing Page no Figma | 2ª Aula (Configurando a Grid de Layout) 12m
Exercício: _Qual é a importância da Grid de layout na criação de uma landing page no Figma?
Aula em vídeo: Criando uma Landing Page no Figma | 2ª Aula - #ERRATA 02m
Exercício: _Qual é o significado da unidade de medida "ren" no Figma?

Aula em vídeo: Como usar o Figma - Criando uma Landing Page no Figma | 3ª Aula (Um pouco sobre cores) 19m
Exercício: _Qual é a importância de entender o sistema de cores ao criar uma paleta de cores para um projeto no Figma?
Aula em vídeo: Criando uma Landing Page no Figma | 3ª Aula - #ERRATA 01m
Exercício: Qual erro foi corrigido na transcrição do vídeo da aula 3?

Aula em vídeo: Como usar o Figma - Criando uma Landing Page no Figma | 4ª Aula (Tipografia) 12m
Exercício: Qual é o tamanho padrão recomendado para a fonte do corpo em layouts de desktop?
Aula em vídeo: Como usar o Figma - Criando uma Landing Page no Figma | 5ª Aula (Estilos e Auto Layout) 23m
Exercício: Qual é uma das funcionalidades essenciais a se aprender para usar o Figma mencionada no vídeo?

Aula em vídeo: Como usar o FIgma - Criando uma Landing Page no Figma | 6ª Aula (Layout - Header e destaque) 35m
Exercício: _Qual é a sessão que será construída primeiro na landing page?
Aula em vídeo: Como usar o Figma - Criando uma Landing Page no Figma | 7ª Aula (Layout - Recursos e Ilustração) 21m
Exercício: Qual tópico é abordado na sétima aula da série sobre desenvolvimento de Landing Page?
Aula em vídeo: Como usar o Figma - Criando uma Landing Page no Figma | 8ª Aula (Layout - Recursos PT.2) 09m
Exercício: Qual é a estrutura mencionada para criar uma seção de vídeo na landing page?

Aula em vídeo: Como usar o Figma - Criando uma Landing Page no Figma | 9ª Aula (Tabela de preços) 10m
Exercício: _Qual é o plugin utilizado para gerar paletas de cores no Figma?
Aula em vídeo: Como usar o Figma - Criando uma Landing Page no Figma | 10ª Aula (Clientes / newsletter) 14m
Exercício: _Qual é a próxima sessão que será construída na landing page no Figma?
Aula em vídeo: Como usar o Figma - Criando uma Landing Page no Figma | 11ª Aula (Finalizando o Projeto) 27m
Exercício: Qual foi o principal foco da última aula da série de criação de Landing Page mencionada na transcrição?

Aprenda sobreFigma

Encontre os melhores cursos online gratuitos de Figma e aprenda a criar interfaces, protótipos e projetos de UI/UX do básico ao avançado. Estude no seu ritmo, desenvolva habilidades valorizadas no mercado e obtenha certificado. Comece agora um curso grátis de Figma com certificado e destaque seu portfólio profissional.