Trilha da Formação LPS · por foco · 10 etapas
Curso de Figma para landing pages: do básico ao alto padrão
Para quem quer dominar o Figma e entregar acabamento de alto padrão. UI e UX, Figma do zero ao avançado, plugins, páginas reais no Figma, banners, Photoshop, ensaio com IA e diretrizes de design.
-
1
Práticas de UI e UX
Fundamentos de uma boa landing page e as decisões visuais que guiam a leitura: cores, imagens, espaço em branco, tipografia, ícones, contraste e botões.
- Fundamentos de uma boa landing page (parte 1)
- Fundamentos de uma boa landing page (parte 2)
- Cores nas interfaces
- Imagens com propósito e impacto visual
-
2
Figma do Zero
Do primeiro acesso ao protótipo para o cliente: instalação, camadas, frames e grid para landing page, banners em 2560 px e exportação de imagens.
- Introdução Figma (aula atualizada)
- Inicial (draft, time)
- Comunidade Figma
- Instalação do Figma e ferramentas principais
-
3
Figma Avançado
Style guide de tipografia e cores, autolayout, componentes, máscaras e degradês para banners, timelines, infográficos e mockups isométricos.
- Como criar um style guide: tipografia e cores
- Criação de botão com autolayout no Figma
- Como usar camadas, máscaras e degradês para criar banners no Figma
- Componentes no Figma
-
4
Plugins essenciais do Figma
Os plugins que aceleram a criação: sombras, mockups, logos, perspectiva, efeitos, WebP, ícones, texturas, contraste e halftones.
- Plugin de sombras
- Plugin de mockups
- Plugin para encontrar logos
- Plugin para geração de textos Lorem Ipsum
-
5
Criação de Landing Pages no Figma
Páginas reais criadas do zero no Figma: landing page de médica com wireframe, banners e mobile, página de captura, página de vendas de workshop e link da bio.
- Criação landing page no Figma - médica (criação wireframe)
- Criação landing page no Figma - médica (criação banners)
- Criando o mobile completo página - médica
- Por que eu não faço o mobile das páginas no Figma?
-
6
Criação de Banners
Fundamentos de um bom banner, o método CAMADA e banners reais para médica, endocrinologista, mentoria, advogado e curso.
- Fundamentos de um bom banner
- Método CAMADA
- Remover fundo de imagens - Picwish
- Como usar camadas, máscaras e degradês para criar banners no Figma
-
7
Photoshop essencial
Ferramenta generativa, máscaras, objetos inteligentes, remoção de fundo, Camera Raw, modos de mesclagem e um banner de advogado do início ao fim.
- Photoshop - como contratar com desconto
- Introdução e ferramenta generativa
- Conta gotas, ferramenta de texto e formas geométricas
- Ferramenta de pincel
-
8
Ensaio com IA
Base visual, preparação de imagens, consistência, prompts, Freepik e agentes de IA para criar ensaios que parecem fotografia profissional.
- Base visual
- Preparação imagens
- Estilo e detalhes
- Consistência
-
9
Diretrizes de Design
O raciocínio por trás das decisões de design, análises gravadas de páginas e revisões de páginas de alunos.
- Por que eu não faço o mobile das páginas no Figma?
- Extensões para o Chrome que todo webdesigner deveria utilizar
- Botões
- Gravação análise de páginas
-
10
Ferramenta LPS
Instalação e uso da ferramenta LPS, o plugin do Figma que nomeia e organiza camadas, com modelos para usar de base.
- Acesse e instale (somente depois de 7 dias será liberado o acesso a ferramenta)
- Como instalar ferramenta
- Plugin Figma nomear camadas
- Configure o token do Figma