Curso de Figma completo que vai te mostrar passo a passo desde os princípios básicos até o primeiro desenho de uma interface de um app.
Fiz uma série preparada com muito carinho para quem quer aprender sobre essa excelente ferramenta que é o Figma.
Se você ainda não conhece o Figma, recomendo ler um artigo que publiquei aqui no blog com 10 razões para conhecer o Figma.
11 vídeos para você ir do zero ao primeiro app
Confira todas as aulas abordadas e comece agora mesmo!
- Por que utilizar o Figma
- Apresentando o desafio Netflix
- Se familiarizando com as funcionalidades do Figma
- Criando o primeiro wireframe
- Trabalhando com grid de colunas
- Como utilizar grid de 8 pontos
- Ajustando espaçamento com o teclado
- Altura, largura e posição dos componentes
- Responsividade
- Cor e preenchimento (em breve)
- Bordas, contorno e efeitos (em breve)
- Finalizando o protótipo (em breve)
1. Por que utilizar o Figma
Nesse primeiro vídeo mostro as grandes vantagens da ferramenta e por que ela se tornou tão popular.
Já adiando que um dos principais benefícios é a facilidade de ser um aplicativo web e que funciona em qualquer computador e pode acessar de qualquer lugar.
Não tem restrição de equipamento e funciona sem travar. É lindo!
2. Apresentando o desafio do nosso curso de Figma
Vídeo super rápido em que apresento como ficará nosso app depois de você passar por todas as etapas do nosso curso de Figma.
Mostro nosso objetivo para você ficar animado em conseguir reproduzir também.
3. Se familiarizando com as funcionalidades do Figma
Agora que você já conheceu nossa desafio chegou o momento de se familiarizar com a interface do Figma, onde ficam os funções, aba de layers, ferramentas de desenho e configurações.
4. Criando o primeiro wireframe
Quando vamos desenhar uma interface, não começamos fazendo em alta fidelidade, começamos rascunhando, fazendo o fluxo de navegação e os principais componentes de forma bem macro sem muitos detalhes.
Isso é o que chamamos de wireframe.
Portanto, vamos começar a desenhar o wireframe do nosso aplicativo.
5. Grid de colunas
O princípio básico de uma boa interface bem resolvida é ter um grid bem feito e os componentes alinhados.
É o que vamos aprender nesse vídeo.
6. Grid de 8 pontos
Falamos do grid de colunas, porém ele é mais utilizado para um alinhamento mais macro que envolve a interface inteira do seu app.
Agora para um alinhamento mais refinado e detalhista entre componentes é necessário utilizar o grid de 8 pontos que é o que mostro nessa aula.
7. Espaçamento com o teclado
Um modo mais fácil e prático de alinhamos os componentes e até para verificarmos se está tudo correto com os espaçamentos o melhor a se fazer é utilizar o ajuste pelo teclado.
Veja como é simples
8. Altura, Largura e Posição dos componentes
Vamos falar sobre as propriedades das camadas. Agora vamos desmistificar o menu com as propriedades.
9. Responsividade
Ao desenhar qualquer interface é importante nos atentarmos e prever a questão de responsividade da tela.
Supondo que inicialmente você está fazendo um app para celular e depois te pedem para visualizar como ficaria a disposição no tablet.
