Design de Interfaces com Adobe XD e Figma - UI/UX

Name: Design de Interfaces com Adobe XD e Figma - UI/UX
Rating: 4.7 (374 reviews)

Aprenda o Adobe XD e o Figma de forma simples e rápida com este curso, abordando também os conceitos básicos de UI / UX

Created byPaulo Andrade, PhD • +540.000 Alunos, Caroll Bulcão

Last updated 3/2026

Portuguese

What you'll learn

Este curso foi pensado para atender pessoas que nunca usaram o Adobe XD ou outro software de prototipagem.
Você aprenderá conceitos básicos da criação de protótipos usando o Adobe XD e o Figma.
Você aprenderá os fundamentos da interface do Adobe XD e do Figma.
Você aprenderá a transformar seus projetos Adobe XD em Figma.
Você criará um projeto completo usando o Figma.

Course content

7 sections • 99 lectures • 11h 49m total length

Introdução ao Curso Adobe XD e Figma0:55
Conheça o curso e sua proposta nesta aula.
Sua Professora - Caroll Bulcão1:07
Conheça sua professora.
Como assistir o curso1:00
Dicas sobre como assistir o curso.

Introdução ao projeto da seção0:39
Esta aula apresenta a seção sobre o Adobe XD.
Apresentação do projeto Veganature1:23
Nesta aula você conhecerá o projeto que será desenvolvido durante o curso.
Como trocar o idioma do Adobe XD2:11
Nesta aula você aprenderá a trocar o idioma do software para inglês.
Como trabalhar na interface do Adobe XD6:46
Nesta aula você conhecerá a interface do Adobe XD.
Como habilitar a Grid3:27
Nesta aula você aprenderá como habilitar e configurar o grid.
Como iniciar o projeto15:46
Nesta aula iniciaremos o projeto que será desenvolvido ao longo do curso.
Como criar o Guia de Estilos (Style Guide)22:52
Nesta aula você aprenderá a montar o guia de estilos do projeto.
Como trabalhar a acessibilidade das cores3:07
Nesta aula você aprenderá a trabalhar as cores para garantir acessibilidade.
Como trabalhar com a Pen Tool5:14
Nesta aula você aprenderá a utilizar a ferramenta Pen tool.
Como criar os ícones utilizando o Plugin Auto Icon.8:51
Nesta aula você aprenderá a criar os ícones que serão utilizados no projeto utilizando o Plugin Auto Icon.
Como criar o menu e cabeçalho do aplicativo.13:36
Nesta aula você aprenderá a criar o menu e o cabeçalho do aplicativo.
Como criar a tela de produto11:52
Nesta aula você aprenderá a criar a tela de produtos do aplicativo.
Como trabalhar com o menu de prototipagem do APP - parte 1.3:27
Nesta aula você aprenderá a trabalhar com o menu de prototipagem do Adobe XD.
Como trabalhar com o menu de prototipagem do APP - parte 2.4:03
Nesta aula você aprenderá a trabalhar com o menu de prototipagem do Adobe XD.
Como criar a tela inicial do APP (Splash Screen).4:56
Nesta aula você aprenderá a criar a tela inicial do APP, conhecida como Splash Screen.
Como criar as interações da tela de Splash Screen.3:06
Nesta aula você aprenderá a criar as interações da tela de Splash Screen.
Como compartilhar o projeto com seu cliente através de um vídeo.4:54
Nesta aula você aprenderá como compartilhar seu projeto através de um vídeo.
Como compartilhar o projeto com seu cliente através do menu compartilhar (Share)1:56
Nesta aula você aprenderá como compartilhar o projeto através do menu compartilhar (Share).

Introdução à criação do seu primeiro projeto1:01
Esta aula apresenta seu primeiro projeto Figma.
Qual versão do Figma escolher3:01
Nesta aula você aprenderá a escolher qual versão do Figma é melhor para você.
Como aplicar para licença educacional, estudante ou professor4:21
Nesta aula você aprenderá a aplicar para licença educacional.
Primeiro contato com o Figma5:37
Nesta aula você terá seu primeiro contato com o Figma.
Como visualizar os filtros do Figma5:20
Nesta aula você aprenderá a visualizar os filtros do Figma.
Como conferir o sistema de cor do Figma instalado na máquina2:21
Nesta aula você aprenderá a conferir o sistema de cores no Figma.
Como alterar a cor da interface do Figma1:28
Nesta aula você aprenderá a mudar a cor da interface.
Como utilizar a área de trabalho6:57
Nesta aula você aprenderá a utilizar a área de trabalho do Figma.
Como criar pranchetas de trabalho5:35
Nesta aula você aprenderá a criar pranchetas de trabalho.
Como trocar as cores das pranchetas de trabalho no Figma4:51
Nesta aula você aprenderá a mudar as cores das branchetas.
Como são as formas básicas do Figma13:40
Nesta aula você aprenderá a criar formas básicas no Figma.
Como adicionar imagens6:49
Nesta aula você aprenderá a adicionar imagens no Figma.
Como baixar Plugins5:35
Nesta aula você aprenderá a baixar plugins.
Como adicionar imagens através de Plugins no Figma6:05
Nesta aula você aprenderá a adicionar imagens com plugins no Figma.
Como alinhar formas4:47
Nesta aula você aprenderá alinhamento no Figma.
Como trabalhar os constraints5:49
Nesta aula você aprenderá a trabalhar com os constraints.
Como trabalhar os constraints em uma interface básica17:09
Nesta aula você aprenderá a trabalhar com os constraints em uma interface básica.
Qual a diferença de Frame para Group7:58
Nesta aula você aprenderá a diferença de frames para grupos.
Como criar os Frames13:55
Nesta aula você aprenderá a criar frames.
Atalhos essenciais para lembrar8:06
Nesta aula você aprenderá atalhos essenciais.
O que são Grids8:21
Nesta aula você aprenderá sobre Grids.
Como criar componentes10:23
Nesta aula você aprenderá sobre componentes.

Seu Primeiro Projeto - Veganature0:56
Apresentação do Projeto4:16
Esta aula apresenta o projeto Veganature.
Conceito do Projeto5:43
Esta aula aborda o conceito do projeto e sua estruturação.
Como criar o Moodboard - Painel Semântico14:20
Esta aula aborda a criação do Moodboard e a busca por referências para a construção do projeto.
Como iniciar o projeto criando as páginas2:08
Esta aula introduz a criação das páginas do projeto Veganature.
Guia de Estilos das Cores10:46
Esta aula ensina a elaboração da Guia de Estilos das Cores.
Como configurar a Guia de Estilos das Cores7:02
Esta aula ensina a configurar a Guia de Estilos das Cores na paleta de cores do Figma.
Como configurar o Guia de Estilos Tipográfico7:10
Esta aula ensina a elaboração do Guia de Estilos Tipográfico.
Como configurar o Guia de Estilos Tipográfico no Painel do Figma5:51
Esta aula ensina a configurar a Guia de Estilos Tipográfico no painel do Figma.
Como configurar o Guia de Estilos de Botões10:41
Esta aula ensina a elaboração do Guia de Estilos de Botões.
Como configurar o Botões e Variantes11:31
Esta aula ensina a como configurar os botões e suas variantes.
Como criar componentes com banco de Ícones Basil9:23
Esta aula ensina a criação de componentes com a biblioteca de ícones basil.
Como criar o Wireframe - Parte 0117:03
Esta aula ensina a criação do Wireframe principal do projeto.
Como criar o Wireframe - Parte 029:36
Esta aula da continuidade a criação do Wireframe principal do projeto.
Como criar o Splash Screen5:57
Esta aula ensina a criação da tela de Splash Screen.
Como criar as Marcas do App9:33
Esta aula ensina a criação da secção de marcas dentro do app.
Como prototipar os produtos23:20
Esta aula ensina a elaboração dos produtos e sua prototipação.
Como criar a tela de Produtos e Favoritos22:04
Esta aula aborda a criação da tela de produtos e favoritos e suas prototipações.
Como criar o Botão Toggle5:28
Esta aula aborda a criação do botão toggle e suas animações.
Como criar a tela de configurações13:33
Esta aula ensina a criação da tela de configurações com o botão toggle.
Como criar a tela de produto com Zoom Pinch8:13
Esta aula aborda a criação da tela de produto com o efeito de Zoom Pinch na imagem.
Como ajustar o menu13:06
Esta aula aborda os ajustes na usabilidade do menu do projeto.
Visualizando o Projeto no App Figma2:19
Esta aula aborda a visualização do projeto no app do Figma para celular.
Como criar a tela do carrinho10:29
Esta aula ensina a criação da tela de carrinho junto com a secção de outros produtos.
Como criar a tela de pagamento10:20
Esta aula ensina a criação da tela de pagamento junto com o radio button.
Como criar a tela de cartão e os componentes do formulário20:50
Esta aula ensina a criação da tela de pagamento com cartão de crédito e o formulário para o preenchimento de dados.
Como criar o componente nome do titular4:33
Esta aula ensina a criação do componente nome do titular do cartão como uma entrada de dados no formulário.
Como criar o Componente da Validade e do CVV14:37
Esta aula ensina a criação do componente de validade do cartão e do código de autorização (CVV) no formulário de pagamento.
Como criar o Cartão de Crédito Girando 360°12:04
Esta aula ensina a criação do cartão de crédito com giro frente e verso.
Como criar a tela de Sucesso7:31
Esta aula ensina a criação da tela de pagamento realizado com sucesso.
Como criar a apresentação do Projeto4:28
Nesta aula você aprenderá a criar a apresentação do projeto.
O que são mockups e onde baixar estes arquivos no Figma4:47
Nesta aula você aprenderá sobre mockups.
Como criar a apresentação para seu portfólio - Parte 112:04
Como criar a apresentação para seu portfólio - Parte 26:21
Nesta aula você aprenderá a criar a apresentação do projeto.
Como criar a apresentação para seu portfólio - Parte 36:37
Nesta aula você aprenderá a criar a apresentação do projeto.
Como publicar seu projeto no Behance13:02
Nesta aula você aprenderá como publicar o projeto no portfólio Behance.

Introdução ao Behance0:23
Nesta seção você aprenderá o essencial do Behance.
Quais são as vantagens do Behance2:37
Nesta aula abordo sobre as vantagens de ter um Behance.
Como criar sua conta no Behance5:28
Esta aula explica como criar sua conta no Adobe Behance.
Como customizar sua conta no Behance4:09
Esta aula explica a customização básica da sua conta no Behance.
Novidades no Behance 2023: Busca por Produtos Digitais Gratuitos e Pagos5:00
Esta aula apresenta as novidades do Behance 2023.
A página principal do Behance 20238:02
Esta aula apresenta a página principal do Adobe Behance.
Projetos Behance3:31
Esta aula introduz o conceito de projetos no Behance, explicando a sua estrutura principal e seu funcionamento.
Imagens no Behance2:33
Esta aula explica o funcionamento das imagens no Behance.
Protótipos do Behance3:13
Esta aula introduz o conceito de protótipos no Behance.
Pessoas no Behance3:15
Esta aula explica o funcionamento dos perfis no Behance.
Painéis semânticos - Moodboards3:28
Esta aula apresenta os painéis semânticos no Behance, bem como suas funcionalidades e composições.
A ferramenta de busca do Behance e suas opções7:32
Esta aula explica o funcionamento do mecanismo de busca no Behance e sua grande capacidade de filtragem de conteúdo.
O que são as medalhas do Behance3:30
Nesta aula abordo sobre as conquistas (medalhas Behance) e quais são as vantagens.

Requirements

Computador para praticar e acesso à Internet.
Acesso ao Adobe XD e o Figma.

Description

Este curso contém uso de inteligência artificial.

Se você deseja dar os primeiros passos na criação de protótipos de aplicativos para celular e dispositivos móveis, este curso é para você!

Aprenda os fundamentos do ADOBE XD e FIGMA do jeito certo!

IMPORTANTE: Este curso Abordará o mesmo Projeto em Adobe XD e em Figma, entretanto, a versão Completa no projeto será finalizada no Figma.

O objetivo deste curso é ajudar você aprender do zero o Adobe XD e o Figma, e a transitar facilmente por estas duas ferramentas de prototipagem da Adobe. Adobe? Sim, o Figma foi adquirido pela Adobe em outubro de 2022 por aproximadamente 20 bilhões de dólares.

IMPORTANTE 2: O curso usa o Adobe XD e Figma em Inglês!

Este curso foi cuidadosamente pensado para ajudar iniciantes a dar os primeiros passos no software.

Neste curso você aprenderá:

Fundamentos da interface do Adobe XD e Figma;
Criar seu primeiro protótipo de alta fidelidade de um aplicativo para celular chamado Veganature;
Criar interações animadas entre as telas;
Como gerar um vídeo para seu cliente visualizar o projeto;
Como gerar o link de visualização do projeto e compartilhar com clientes.

Ao invés de ir a fundo em cada técnica, o curso busca dar uma visão geral, apresentando os fundamentos do Adobe XD e Figma e sua interface.

Ao final do curso, você se sentirá perfeitamente confortável com o Adobe XD e com o Figma e estará pronto para explorar os recursos mais avançados das ferramentas.

Abraços e bom curso!

Paulo Andrade e Caroll Bulcão

Este curso contém materiais promocionais na aula bônus.

Who this course is for:

Este curso foi pensado para pessoas que nunca usaram o Adobe XD ou Figma.
Qualquer pessoa que dar os primeiros passos na prototipagem de aplicativos.

Design de Interfaces com Adobe XD e Figma - UI/UX

What you'll learn

Explore related topics

Course content

Introdução ao Curso3 lectures • 3min

Introdução ao Adobe XD18 lectures • 1hr 58min

Introdução ao Figma22 lectures • 2hr 29min

Figma - Projeto Veganature36 lectures • 5hr 48min

Curso Extra : Introdução ao Behance13 lectures • 53min

Curso Extra - Introdução ao Adobe Firefly: Criação de Imagens usando AI6 lectures • 33min

Aula Bônus e Onde Está o Seu Certificado1 lecture • 6min

Requirements

Description

Who this course is for: