Masterclass de movimento no Figma: crie animações profissionais de IU
Skillademia Academy, Creative Skills for the Future
Assista a este curso e milhares de outros
Assista a este curso e milhares de outros
Aulas neste curso
-
-
1.
Boas-vindas ao curso e ao que você vai construir.
1:51
-
2.
O que é o movimento do Figma?
3:33
-
3.
Como o movimento se encaixa no fluxo de trabalho do design.
5:23
-
4.
Como navegar pela interface e configurar o arquivo do projeto.
8:14
-
5.
Como fazer o design dos componentes da interface.
8:27
-
6.
Organização de camadas para animação
3:28
-
7.
Como criar sua primeira animação
3:41
-
8.
Posição, escala e opacidade como animar
5:10
-
9.
tempo, duração e suavização
9:46
-
10.
Sequenciando vários elementos
9:06
-
11.
Organização da linha do tempo
8:38
-
12.
Animações em loop
8:39
-
13.
Usando quadros-chave
8:19
-
14.
Erros comuns de design de movimento
8:01
-
15.
Exportando como GIF, MP4, WebM e SVG
9:09
-
16.
Animando um círculo de carregamento
11:34
-
17.
Avançado: animando uma janela de progresso
23:39
-
18.
Projeto do curso: crie sua própria UI animada!
1:29
-
19.
Parabéns! E depois?
1:19
-
-
- --
- Nível iniciante
- Nível intermediário
- Nível avançado
- Todos os níveis
Gerado pela comunidade
O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.
--
--
Sobre este curso
Um ótimo design de interface não trata apenas do visual de um produto, mas também do movimento.
Movimento cuidadoso pode orientar a atenção, comunicar mudanças, fornecer feedback e fazer os produtos digitais parecerem mais refinados e intuitivos. Neste curso, você vai aprender a dar vida a designs de interfaces estáticas usando o Figma Motion e criar habilidades práticas de animação especificamente para design de UI e UX.
Vamos começar explorando o que é o movimento do Figma e onde o movimento se encaixa em um fluxo de trabalho de design profissional. Você vai aprender como navegar na interface, configurar seu projeto corretamente e preparar componentes e camadas de UI antes de começar a animar.
A partir daí, você criará sua primeira animação e aprenderá os princípios fundamentais por trás do movimento da interface. Vamos trabalhar com posição, escala e opacidade antes de nos aprofundar no tempo, duração e atenuação — os detalhes que podem fazer a diferença entre uma animação que pareça mecânica e outra que pareça suave e intencional.
À medida que suas habilidades se desenvolvem, você vai aprender como sequenciar vários elementos, organizar animações mais complexas na linha do tempo, criar loops e trabalhar com quadros-chave para maior controle sobre seu movimento. Também vamos analisar os erros comuns de design de movimento e discutir como evitar animações que causam distração, inconsistentes ou desnecessariamente complicadas.
Você vai aprender a exportar suas animações em formatos práticos, incluindo GIF, MP4, WebM e SVG, permitindo que você use seu trabalho em protótipos, portfólios, apresentações, sites e outros projetos.
Por fim, vamos abordar exemplos mais avançados, incluindo um círculo de carregamento animado e uma janela de progresso, antes de aplicar tudo o que aprendeu ao seu próprio projeto de UI animada.
Ao final deste curso, você vai entender tanto o fluxo de trabalho técnico quanto os princípios de design por trás do movimento eficaz da UI, dando a você as habilidades de transformar interfaces estáticas em experiências envolventes e refinadas.
O que você aprenderá
- Como entender o movimento do Figma e seu papel no design de UI/UX
- Como incorporar movimento em um fluxo de trabalho de design profissional.
- Como configurar os arquivos do projeto do Figma Motion corretamente
- Como preparar os componentes da interface para animação
- Organização de camadas para uma animação eficiente
- Como criar sua primeira animação de UI
- Como animar posição, escala e opacidade
- Controlando o tempo e a duração da animação.
- usando a atenuação para criar movimento mais natural.
- Sequenciando vários elementos animados.
- Organizando animações complexas na linha do tempo
- Como criar animações em loop
- Trabalhando com quadros-chave
- Como identificar e evitar erros comuns de design de movimento
- Exportar animações como GIF, MP4, WebM e SVG.
- criando indicadores de carregamento animados
- Criando animações de progresso mais avançadas.
- Como criar e animar sua própria experiência com a UI
Requisitos
- Familiaridade básica com Figma
- Uma conta Figma
- Acesso às ferramentas usadas para o Movimento do Figma no curso
- Um computador com conexão à Internet
- Não é necessária nenhuma experiência anterior em design de movimento ou animação.
Para quem é este curso
- Designers de UI e UX que querem adicionar movimento ao seu conjunto de habilidades.
- Os usuários do Figma prontos para ir além do design de interface estática
- Designers de produtos interessados em experiências interativas.
- Designers de web e aplicativos
- Designers de movimento iniciantes interessados em animação de UI.
- Designers freelancers que querem expandir seus serviços.
- Designers que queiram criar projetos de portfólio mais envolventes.
Conheça seu professor
NEW CLASS: Figma Motion Masterclass: Create Professional UI Animations
A great interface shouldn't just look good. It should feel good to use.
Our new Figma Motion class is all about taking your static UI designs and bringing them to life with purposeful, professional animation.
You'll learn how to animate position, scale, and opacity, work with timing and easing, sequence multiple elements, use keyframes, build loops, and organize your animation timeline.
We'll also create practical UI animations like loading indicators and progress states before you design and animate an interface of your own.
If you already use Figma and want to add motion design to your UI/UX skill set, this class gives y... Visualizar o perfil completo
Projeto prático de curso
Crie sua própria interface de usuário animada usando as técnicas de movimento abordadas ao longo do curso.
Você pode criar uma tela de aplicativo móvel, seção do site, componente de painel, experiência de integração, estado de carregamento ou outra interface de sua escolha.
Você vai:
- design ou selecione a interface que você deseja animar!
- Prepare e organize suas camadas
- Animar propriedades como posição, escala e opacidade
- Use tempo e atenuação adequados
- Use quadros-chave para controlar sua animação.
- Sequencie vários elementos quando apropriado.
- Refine o movimento para que pareça suave e intencional.
- Exporte sua animação completa
O objetivo não é criar a animação mais complicada possível. Concentre-se em usar o movimento com propósito e criar uma experiência que seja natural e suporte a interface.
Envie sua animação finalizada para a Galeria de projetos como um vídeo, GIF ou apresentação do seu resultado final. Você também pode incluir uma breve explicação do seu desenho e das decisões de movimento que você tomou.
Nota do curso
Por que fazer parte da Skillshare?
Faça cursos premiados Skillshare Original
Cada curso possui aulas curtas e projetos práticos
Sua assinatura apoia os professores da Skillshare
Aprenda em qualquer lugar
Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.
