Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreUI Design - Design de Interface de Usuário
UI Design - Design de Interface de Usuário
Aprenda a criar wireframes, mockups e protótipos profissionais de aplicações mobile/desktop do absoluto zero com Figma.
Highest Rated
Created byArgus Academy, Jorge Sant Ana
Last updated 12/2025
Portuguese
Portuguese [Auto],
What you'll learn
- Criar interfaces digitais incríveis para qualquer dispositivo com o Figma (partindo do absoluto zero).
- Dominar os princípios do design aplicados a interfaces digitais (eixo, simetria, hierarquia e ritmo).
- Selecionar e combinar as tipografias certas para diferentes projetos.
- Aplicar a psicologia e harmonização de cores.
- Atender aos critérios de acessibilidade de cores da WCAG.
- Criar guias de estilo completas, com definição de cores, tipografias, espaçamentos, imagens, ícones e componentes.
- Entender as principais fases do processo de criação de interfaces de usuários.
- Elaborar um Briefing.
- Criar wireframes de baixa fidelidade.
- Criar mockups de alta fidelidade.
- Aplicar prototipação com interações avançadas.
- Utilizar ferramentas de colaboração do Figma.
- Utilizar recursos como plugins para ganhar produtividade no dia a dia.
- Torne-se apto(a) a atuar profissionalmente como UI Designer.
Explore related topics
Course content
13 sections • 223 lectures • 22h 31m total length
- Apostila do curso0:05
Olá, seja bem-vindo(a) ao curso.
Se desejar, utilize o link a seguir para baixar a apostila do curso.
Forte abraço e bons estudos ;)
- Canais de comunicação0:05
- O que é Design?5:01
Design não é talento, é processo!
- O que é UI Design e UX Design?5:23
Diferença entre UI Design e UX Design.
- Você escolhe a sua ferramenta de trabalho3:22
Os conceitos de UI Design são mais importantes que a ferramenta.
- Figma - Criando uma conta de usuário4:46
Criando uma conta gratuita no Figma.
- Figma - Instalação local e trabalho online6:34
Instalação local do Figma e funcionamento online.
- [Extra] - Instalação local do Figma no Windows2:10
Instalação local do Figma no sistema operacional Windows.
- Criando e removendo projetos de Design no Figma4:31
Criação e remoção de projetos (arquivos) de Design no Figma.
- Ferramentas de movimentação e formas básicas6:54
Movimentação de elementos e da área de trabalho. Criação de formas básicas como retângulos, linhas, flechas, elipses, polígonos e estrelas.
- Editando formas parte 1 - Dimensão, rotação e posicionamento8:19
Redimensionar, rotacionar e reposicionar formas.
- Editando formas parte 2 - Preenchimento e borda9:21
Preenchimento e borda (contorno) de formas
- Tamanho e resolução de telas digitais9:22
Tamanhos de telas e resoluções baseadas em pixel. Pixel como unidade de medida.
- Frames7:43
Adicionar frames de diferentes resoluções baseados em tamanhos padrões de dispositivos de mercado, como smartphones, tables, desktops, entre outros.
- Layers7:20
Movimentar as camadas dos elementos permitindo a sobreposição dos mesmos e o agrupamento em frames.
- Zoom3:07
Aplicar e retirar zoom com produtividade para posicionar elementos com precisão.
- Duplicando elementos6:37
Diferentes formas de duplicar elementos.
- Alinhamento e distribuição de elementos9:14
Alinhamento, distribuição e reposicionamento de elementos.
- Criando formas avançadas com formas básicas e a Pen Tool13:55
Criação de formas avançadas, inclusão de nós entre nós e junções de vetores.
- Preenchendo formas com o Paint Bucket2:58
Preencher com cor as áreas das formas vetoriais.
- Criando curvaturas com a Bend Tool4:48
Criando e manipulando curvaturas de formas vetorizadas.
- Criando ícones17:45
Praticar os conhecimentos aprendidos até este momento do curso por meio da criação de ícones vetoriais.
- Agrupando layers (camadas)7:39
Organizar as camadas do projetos (elementos) para facilitar a criação de interfaces digitais.
- Projeto prático turma do café16:45
Dominar o uso de formas, edição vetorial, posicionamento, layers, grupos e muito mais.
- Introdução2:34
- Eixo (Axis) - Introdução1:27
Compreender os elementos de design para atingir o princípio do Eixo.
- Eixo (Axis) - Alinhamento11:06
Utilizar o alinhamento para organização de elementos da interface.
- Eixo (Axis) - Reforço5:00
Organizar elementos para reforçar a existência de eixos reais e imaginários.
- Eixo (Axis) - Movimento3:25
Criando movimentos com eixos.
- Eixo (Axis) - Continuidade3:19
Utilizando a continuidade para apresentação de grupos de elementos.
- Projeto prático Vaga Perfeita parte 11:24
Criar o projeto prático Vaga Perfeita e o frame.
- Grid6:49
Adicionando grids com linhas e colunas.
- Projeto prático Vaga Perfeita parte 217:48
Continuidade do desenvolvimento do projeto prático com foco no princípio do Eixo.
- Projeto prático Vaga Perfeita parte 316:47
Continuidade do desenvolvimento do projeto prático com foco no princípio do Eixo.
- Simetria (Symmetry) - Introdução1:49
Compreender os elementos de design para atingir o princípio da Simetria.
- Simetria (Symmetry) - Equilíbrio5:57
A importância de equilibrar textos, cores, formas e imagens para obter a Simetria.
- Simetria (Symmetry) - Assimetria5:47
Rompendo a Simetria com propósito.
- Projeto prático Vaga Perfeita parte 413:47
Continuidade do desenvolvimento do projeto prático com foco no princípio da Simetria.
- Hierarquia (Hierarchy) - Introdução1:39
Compreender os elementos de design para atingir o princípio da Hierarquia.
- Hierarquia (Hierarchy) - Tamanho4:05
Como o tamanho dos elementos influencia a percepção de hierarquia.
- Hierarquia (Hierarchy) - Forma2:47
Entender como a formas diferentes podem direcionar o olhar dos usuários.
- Hierarquia (Hierarchy) - Posição3:54
Percepção de hierarquia em círculos e eixos.
- Projeto prático Vaga Perfeita parte 56:08
Continuidade do desenvolvimento do projeto prático com foco no princípio da Hierarquia.
- Ritmo (Rhythm) - Introdução1:15
Compreender os elementos de design para atingir o princípio da Ritmo.
- Ritmo (Rhythm) - Padrão2:20
Aplicar o padrão para formar unidades e criar familiaridade em interfaces digitais.
- Ritmo (Rhythm) - Quebra2:31
Utilizar as quebras para capturar novamente a tenção dos usuários.
- Projeto prático Vaga Perfeita parte 612:03
- Introdução4:57
Anatomia da tipografia.
- Manipulação básica de textos10:49
Manipular aspectos como tipografia e estilo, tamanho, espaçamento entre letras, espaçamento de linhas e parágrafos, além do comportamento da caixa de texto e alinhamento.
- Manipulação avançada de textos6:49
Aspectos mais avançados de manipulação de textos, tais como decoração, estilo de lista, indentação e tipo de letra.
- Famílias e fontes (estilos)12:20
Compreender os termos famílias tipográficas, estilos e fontes, bem como conhecer o Google Fonts e Adobe Fonts.
- [WINDOWS] Instalando fontes5:03
Instalar fontes no sistema operacional Windows.
- [LINUX] Instalando fontes4:39
Instalar fontes no sistema operacional Linux.
- [MACOS] Instalando fontes3:53
Instalar fontes no sistema operacional MacOS.
- Classificações tipográficas1:34
Conhecer as diferentes classificações tipográficas.
- Serifadas4:14
Identificar tipografias serifadas.
- Serifadas em interfaces digitais6:10
Conhecer exemplos de uso de fontes serifadas.
- Sem serifas1:58
Identificar tipografias sem serifas.
- Sem serifas em interfaces digitais9:40
Conhecer exemplos de uso de fontes sem serifas.
- Display / Decorativas3:01
Identificar tipografias display / decorativas.
- Display / Decorativas em interfaces digitais4:44
Conhecer exemplos de uso de fontes display / decorativas.
- Handwriting / Manuscritas / Cursivas2:04
Identificar tipografias handwriting / manuscritas / cursivas / scripts.
- Handwriting / Manuscritas / Cursivas em interfaces digitais3:44
Conhecer exemplos de uso de fontes handwriting / manuscritas / cursivas / scripts.
- Monoespaçadas3:23
Identificar tipografias monoespaçadas / monospace.
- Monoespaçadas em interfaces digitais2:55
Conhecer exemplos de uso de fontes monoespaçadas / monospace.
- Projeto prático Barbearia Barba Brava parte 12:23
Iniciar o projeto prático Barbearia Barba Brava
- Projeto prático Barbearia Barba Brava parte 29:14
Continuidade do desenvolvimento do projeto prático.
- Entendendo os termos marca (logomarca), símbolo, logotipo e slogan4:29
Conhecer a aplicação dos termos marca (logomarca), símbolo, logotipo e slogan.
- Auto layout10:16
Utilizar o auto layout para implementar listas, menus e botões.
- Projeto Prático Barbearia Barba Brava parte 37:40
Continuidade do desenvolvimento do projeto prático.
- Criando máscaras para imagens6:46
Aplicar máscaras a imagens.
- Plugins no Figma14:56
Adicionar plugins ao Figma, em especial, plugins para ícones SVG.
- Projeto Prático Barbearia Barba Brava parte 411:21
Continuidade do desenvolvimento do projeto prático.
- Projeto Prático Barbearia Barba Brava parte 55:42
Continuidade do desenvolvimento do projeto prático.
- Praticando a criação de máscaras para imagens8:47
Utilizar imagens para preencher elementos por meio do recurso de máscara.
- Projeto Prático Barbearia Barba Brava parte 69:01
Continuidade do desenvolvimento do projeto prático.
- Projeto Prático Barbearia Barba Brava parte 75:55
Continuidade do desenvolvimento do projeto prático.
- Inspiração para escolhas de fontes3:38
- Agradecimento aos autores das fotos utilizadas no projeto final dessa seção0:05
- Introdução1:40
Dominar características tipográficas como escala, peso, altura de linha, maiúsculas ou minúsculas, largura de linhas, espaçamento entre caracteres e alinhamento de textos.
- Escala - Introdução3:56
Entendendo o impacto da escala tipográfica para gerar hierarquia entre elementos e para guiar o usuários pela interface.
- Escala - O que é um sistema de escala tipográfica11:44
Conhecer um modelo de sistema de escala tipográfica e ferramentas que podem auxiliar na definição das escalas.
- Escala - Montando um sistema de escala tipográfica10:44
Montar a escala tipográfica.
- Criando estilos de textos no Figma5:44
Criar estilos de textos locais no Figma.
- Editando e desvinculando estilos de textos no Figma5:24
Alterar textos sem perder o vínculo com o estilo de texto, desvincular estilos de textos e editar estilos de textos.
- Peso4:24
Entender a espessura do traço de letras.
- Estilo itálico4:53
Entender a diferença entre o itálico pensado por um designer e o itálico forçado por um software.
- Altura de linha5:54
Fator de multiplicação de altura de linha.
- Letras minúsculas e maiúsculas8:24
Compreender as situações mais adequadas para utilização de letras em caixa alta e caixa baixa.
- Largura de linhas5:08
Calcular a largura de linha ideal.
- Espaçamento entre caracteres3:15
Utilizar espaçamentos entre letras de forma adequada.
- Alinhamento de textos4:48
Utilizar corretamente os alinhamentos a esquerda, ao centro e a direita.
- Unidades de medidas absolutas e relativas6:25
Conhecer as unidades de medidas absolutas e relativas (modernas).
- Introdução0:53
Compreender que as cores vão além dos aspecto estético.
- A percepção fisiológica das cores3:10
Como a cor é percebida pelo olho humano.
- A psicologia das cores7:18
Emoções por trás das cores.
- Guia de emoções de cores aplicados a logotipos famosos3:16
Guia de emoção de cores aplicados a logos de marcas famosas.
- As cores como informação (significado)11:33
Cores e seus significados nas interfaces de usuários.
- As cores como informação (categorização e aprendizado)2:04
Cores para categorização e aprendizado.
- Projeto Prático Página Pessoal parte 11:45
Iniciar o projeto prático da seção.
- Função das cores em interfaces5:16
Compreender a função das cores dentro de uma interface (cores primárias, secundárias e semânticas).
- Construindo uma paleta de cores para o projeto7:00
Criar o template da paleta de cores (estrutura do guia de cores).
- Adicionando páginas2:56
Adicionar páginas para separar os diferentes elementos do projeto.
- Entendendo as escalas RGB e CMYK4:24
Compreender a diferença entre as escalas RGB e CMYK.
- A escala de cores RGB e o pixel6:50
Compreender a relação entre um Pixel e seus pontos luminosos baseados na escala de cores RGB.
- Círculo cromático3:24
Entender a formação e aspectos do círculo cromático.
- HSB / HSV - Hue, Saturation e Brightness/Value8:11
Entender a aplicação técnica do círculo cromático no Figma por meio da utilização da escala HSB.
- Leis de harmonização do círculo cromático5:32
Leis de harmonização de cores análogas, tríades e complementares.
- Sistema hexadecimal para cores7:22
Entender a correlação entre a escala de corres RGB que vai de 0 a 255 para cada cor e o sistema numérico Hexadecimal.
- [Extra] - Cálculo de conversão Hexadecimal para escala de cores RGB8:22
Converter a notação hexadecimal de cor para escala RGB.
- Acessibilidade - Validar o contraste de cor e o tamanho da tipografia14:26
Validar o contraste de cor em relação a combinação de cores entre elementos e tamanhos de tipografias objetivando assegurar aspectos mínimos e otimizados de acessibilidade.
- Adicionando um plugin de validação de contraste de cor no Figma5:15
Ganhar produtividade no Figma com a validação do contraste de cor entre elementos por meio de plugins.
- Simulador de daltonismo2:43
Submeter as interfaces para um simulador de daltonismo para identificar o comportamento das cores em diferentes tipos de daltonismo.
- Projeto Prático Página Pessoal parte 23:23
Continuidade do projeto prático da seção.
- Projeto Prático Página Pessoal parte 34:25
Continuidade do projeto prático da seção.
- Projeto Prático Página Pessoal parte 47:22
Continuidade do projeto prático da seção.
- Projeto Prático Página Pessoal parte 53:32
Continuidade do projeto prático da seção.
- Projeto Prático Página Pessoal parte 68:27
Continuidade do projeto prático da seção.
- Projeto Prático Página Pessoal parte 714:02
Continuidade do projeto prático da seção.
- Projeto Prático Página Pessoal parte 83:01
Continuidade do projeto prático da seção.
- Projeto Prático Página Pessoal parte 94:48
Continuidade do projeto prático da seção.
- Selecionando uma imagem para seção de apresentação da interface6:21
Encontrar ilustrações gratuitas de excelente qualidade.
- Definindo as cores primárias6:13
Buscar inspiração para cores primárias.
- Criando estilos de cores4:53
Criar estilos de cores locais no Figma para serem reutilizadas com maior produtividade no projeto.
- Variação de tons de cores4:17
Manipular características de brilho e saturação para alcançar variações de cores mais naturais.
- Definindo as cores secundárias6:16
Selecionar cores em escala de cinza para compor as cores de base da interface.
- Definindo as cores semânticas4:37
Selecionar cores com significado.
- Projeto Prático Página Pessoal parte 102:36
Continuidade do projeto prático da seção.
- Projeto Prático Página Pessoal parte 114:17
Continuidade do projeto prático da seção.
- Removendo o background de imagens2:23
- Projeto Prático Página Pessoal parte 124:36
Continuidade do projeto prático da seção.
- Validando as cores da interface1:16
Validar a conformidade das cores de acordo com os critérios de acessibilidade da WCAG.
- Adicionando decoradores3:23
Adicionar decoradores para preencher espaços em branco e deixar a interface mais elaborada.
- Alterando e testando a combinação de cores da interface4:40
Testar combinações de cores de modo produtivo.
- Gradiente (degradê)9:50
Aplicar gradientes (degradês) para transição suave entre cores.
- Projeto Prático Página Pessoal parte 133:45
Continuidade do projeto prático da seção.
- Considerações finais da seção1:49
- O processo9:53
Compreender as fases do processo de UI Design (briefing, inspiração, wireframe, mockup, protótipo e exportação).
- Briefing parte 111:28
Preencher as principais perguntas do briefing.
- Briefing parte 211:51
Simular uma entrevista para levantar informações importantes de inspiração junto ao cliente.
- Principais tipos de sites6:57
Conhecer os principais tipos de sites para classificar o projeto de modo a compreender alguns requisitos comuns de mercado.
- Linhas de design Skeumorfismo e Flat Design5:18
Entender as linhas pensamento Skeumorfismo e Flat Design.
- Buscando inspiração11:43
Conhecer ótimas referências na internet para buscar inspiração.
- Pesquisa de mercado5:44
Pontos importantes da pesquisa de mercado.
- Realizando a pesquisa de mercado17:15
Organizar as informações, funcionalidades e estilos utilizados por concorrentes.
- Compilando as informações e funcionalidades do projeto4:23
Compilar informações e funcionalidades de modo alinhado a concorrência e ao briefing do projeto.
- O que é um wireframe?7:52
A importância do wireframe.
- Criando o wireframe do projeto parte 15:59
Continuidade do projeto prático da seção.
- Criando o wireframe do projeto parte 27:35
Continuidade do projeto prático da seção.
- Criando o wireframe do projeto parte 37:28
Continuidade do projeto prático da seção.
- Criando o wireframe do projeto parte 45:20
Continuidade do projeto prático da seção.
- Criando o wireframe do projeto parte 57:42
Continuidade do projeto prático da seção.
- Geradores de textos automáticos3:31
Produzir textos fictícios com Loren Ipsum e ChatGPT.
- Criando o wireframe do projeto parte 65:37
Continuidade do projeto prático da seção.
- Criando o wireframe do projeto parte 75:15
Continuidade do projeto prático da seção.
- O que é um Mockup?2:34
Compreender a fase de mockup do desenvolvimento de interfaces de usuários.
- Criando um logo11:28
Dicas para destravar o logotipo quando o cliente não possuir um previamente.
- Guia de estilos parte 11:40
Implementar a guia de estilo da interface.
- Guia de estilos parte 24:38
Implementar a guia de estilo da interface
- Guia de estilos parte 36:57
Implementar a guia de estilo da interface.
- Criando o mockup do projeto parte 14:52
Continuidade do projeto prático da seção.
- Comprimindo o tamanho de imagens5:25
Comprimir imagens para otimizar a performance da interface e para diminuir o consumo de banda de internet.
- Criando o mockup do projeto parte 29:26
Continuidade do projeto prático da seção.
- Criando o mockup do projeto parte 310:28
Continuidade do projeto prático da seção.
- Criando o mockup do projeto parte 43:58
Continuidade do projeto prático da seção.
- Criando o mockup do projeto parte 59:59
Continuidade do projeto prático da seção.
- Luz e sombra em interfaces de usuários6:10
Como as sombras podem gerar a sensação de elevação dos elementos da interface e como podem direcionar o foco do usuário.
- Luz e sombra no mundo real3:27
Infelizmente do ponto de luz e da matiz da cor onde a sombra é projetada.
- Tipos de efeitos de sombras8:17
Adicionar sombras aos elementos no Figma.
- Abordagem técnica das sombras pelo Material Design2:20
Escala de elevação do Material Design.
- Criando o mockup do projeto parte 64:35
Continuidade do projeto prático da seção.
- Criando o mockup do projeto parte 75:50
Continuidade do projeto prático da seção.
- Componentes9:40
Criar componentes reutilizáveis.
- Variantes11:47
Adicionar variantes em componentes.
- Criando o mockup do projeto parte 811:25
Continuidade do projeto prático da seção.
- Criando o mockup do projeto parte 911:01
Continuidade do projeto prático da seção.
- Criando o mockup do projeto parte 105:12
- Transformando o menu superior e o rodapé em componentes reutilizáveis2:50
Criar componentes reutilizáveis.
- Adicionando novas páginas (frames)6:00
Adicionar novas páginas ao projeto.
- Avaliando os parâmetros de acessibilidade de cores8:30
Validar parâmetros de acessibilidade da WCAG para contrastes entre cores e tipografias.
- A importância dos formulários1:19
- Principais campos de formulários6:27
Compreender melhor os principais tipos de campos de formulários.
- Anatomia de um formulário4:01
Entender a função dos labels, placeholders, restrições e feedback visuais em formulários.
- Formulário parte 14:54
Levantar dados dos campos junto ao cliente e a importância do UX para que os formulários cumpram os seus respectivos propósitos.
- Dicas importantes de UX para formulários8:15
Dicas de UX para criar formulários que "convertam" mais.
- Recapitulando e se preparando para criar o formulário11:05
Recapitulando o desafio e se preparando para seguir em frente.
- Formulário parte 26:46
Continuidade do projeto prático da seção.
- Formulário parte 35:20
Continuidade do projeto prático da seção.
- Formulário parte 45:55
Continuidade do projeto prático da seção.
- Formulário parte 53:43
Continuidade do projeto prático da seção.
- Formulário parte 63:29
Continuidade do projeto prático da seção.
- Formulário parte 72:22
Continuidade do projeto prático da seção.
- Formulário parte 82:54
Continuidade do projeto prático da seção.
- Formulário parte 911:28
Continuidade do projeto prático da seção.
- Formulário parte 106:30
Continuidade do projeto prático da seção.
- Formulário parte 116:25
Continuidade do projeto prático da seção.
- Formulário parte 123:17
Continuidade do projeto prático da seção.
Requirements
- Apenas um computador com acesso a internet e o desejo de aprender.
Description
Neste curso você vai aprender na prática a como criar wireframes, mockups e protótipos profissionais de interfaces de usuários para diferentes dispositivos (desktop/mobile) utilizando o Figma.
Se você está interessado em aprender UI Design, você está no curso certo!
Com mais de 20 horas de conteúdos super didáticos este curso é perfeito para iniciantes na área, programadores front-end e empreendedores em geral.
Para fazer este curso não é necessário nenhum conhecimento prévio, apenas o desejo de aprender.
Confira um pouco do que você aprenderá neste curso:
Como utilizar o Figma.
Formas básicas e avançadas.
Princípios do Design em Interfaces de Usuários.
Grids.
Tipografia.
Cores.
Componentes e variantes.
Como criar um guia de estilos completo em um projeto.
As principais fases do processo de criação de interfaces de usuários.
Onde encontrar inspiração.
Como realizar uma pesquisa de mercado.
Como elaborar um Briefing.
Qual o propósito de um Wireframe e como criá-lo.
Qual o propósito de um Mockup e como criá-lo.
Qual o propósito de um Protótipo e como criá-lo.
Aplicar interações, animações e transições.
Exportar o projeto para o cliente/desenvolvedor front-end.
Como você vai aprender tanto conteúdo assim? Simples, por meio da criação de projetos práticos. Durante o curso serão criados 5 projetos:
Turma do Café.
Vaga Perfeita.
Barba Brava.
Página Pessoal.
Sociedade do Inglês.
Embarque nessa jornada comigo e domine UI Design com Figma.
Te vejo no curso.
Who this course is for:
- Qualquer pessoas interessada em dominar a criação de interfaces de usuários.
- Estudantes de UI Design.
- Desenvolvedores front-end.
- Empreendedores que desejam criar protótipos realistas de suas ideias.