Udemy

Platform

Português

Language

Design Tools

Category

Figma: Design colaborativo do básico ao protótipo responsivo

Aprenda a criar interface (UI) e protótipo de sites responsivos e apps com Figma do ABSOLUTO ZERO + Netflix e Instagram

4.64 (1707 reviews)

Students

6.5 hours

Content

Jan 2021

Last Update
Regular Price


What you will learn

Utilizar uma das mais modernas ferramentas de UI de 2018 para desenhar e prototipar interfaces de sites e aplicativos

Criar interfaces responsivas que se adaptam a qualquer dispositivo (mobile ou desktop)

Criar UI de aplicativos e sites reais como Netflix, Instagram e Booking

Criar protótipos testar suas escolhas de design e coletar feedbacks.

Criar protótipos com rolagem horizontal e vertical deixando a experiência mais real e interativa.

Interagir com desenvolvedores passando as informações de design (alinhamento, espaçamento, tamanho, arquivos de imagens, etc)

Organizar seu trabalho profissionalmente


Description

** Criado pelo autor do curso mais vendido de UX da Udemy em português, no ano de 2018 (com mais de 15 mil alunos). **

Quer iniciar sua carreira como Designer de Interfaces? De repente migrar do Design Gráfico para o UX/UI Digital?

Esse é o curso de FIGMA mais fácil de aprender que você vai encontrar na Udemy em português. Você vai aprender como usar o FIGMA para sair do absoluto ZERO ao nível PROFISSIONAL organizando seu trabalho, seu guia de estilos e trabalhando em equipe com outros desenvolvedores.

Durante o treinamento, criaremos projetos reais para você aplicar nos seu dia a dia. 

Assista nossa aula de apresentação e conheça tudo que você vai aprender.

O que torna esse curso diferente? Qual é a mágica?

Nesse curso nada que você aprender será teoria por teoria.

Cada desenho de retângulo é para criar um elemento na tela, cada uso de ferramenta de alinhamento é para posicionar um componente de um aplicativo real.

Tudo é ensinado na prática para não ficar chato e você saber exatamente quando utilizar cada recurso no seu dia-a-dia.

***

Este curso de FIGMA vai te ensinar na prática a criar interfaces para aplicativos e sites responsivos com uma das melhores e mais modernas ferramentas de UI de 2018.

Você aprenderá:

  • Criar protótipos em papel,

  • desenhar telas de apps e sites,

  • criar interfaces responsivas que se adaptam a qualquer dispositivo,

  • organizar seu projeto em guias de estilos,

  • prototipar interatividade e transições,

  • exportar protótipos para testes reais e troca de informações com desenvolvedores (handoff).

  • EXEMPLO NETFLIX


  • Transformar seus protótipos em papel em protótipos de alta fidelidade,

  • Criar protótipos interativos para seus usuários testarem ou mostrar para seus stakeholders,

  • Utilizar grids para organizar os elementos na tela criando interfaces responsivas,

  • Utilizar as constraints de alinhamento para que seu protótipo se adapte a outros dispositivos sem "quebrar",

  • Organizar seu trabalho de forma profissional como um verdadeiro cartão de visitas,

  • EXEMPLO INSTAGRAM

  • Scroll Horizontal no protótipo

  • Scroll Vertical no protótipo

  • EXEMPLO BOOKING

  • Criar guias de estilos com elementos reaproveitáveis para acelerar seu processo de construção,

E receberá de bônus:

  • Minicurso de rabiscoframes para criar protótipos em papel,

  • Minicurso de Usabilidade

  • Checklist de UX para verificar se seu design tem potencial para gerar boas experiências


***

Depoimentos dos alunos do curso de UX (4.6 de 5 estrelas)

Todos depoimentos estão disponíveis na página do curso de UX.

"Curso sensacional. Dinâmico, bem feito, instrutor dominando completamente o conteúdo. Tudo é de uma qualidade excelente. Um dos melhores cursos (senão o melhor) que já adquiri. Parabéns!!!" - Rafael Patrício

"Empresas vieram falar  comigo no linkedin me requisitando para entrevistas para trabalhar exclusivamente com UX. Sem experiência de mercado, e as empresas me buscam pelo que aprendi no curso" - Nayra

"O curso foi maravilhoso. Eu tentava vários estágios e não conseguia. Depois do curso, quando mostrei o que aprendi e os métodos utilizados na prática, consegui o emprego! Em menos de 1 semana após terminar o curso eu já estava estagiando!" - Alberto

"Logo nos primeiros exercícios passei a ter uma visão completamente diferente da razão das minhas dificuldades. Com o passar do curso e aplicando as técnicas, criei um produto específico para um público bem definido e passei a converter 80% mais clientes!" - André Carvalho

"Muito bom, pois além de trazer toda a base conceitual necessária, também apresenta casos reais de utilização do aprendizado e dicas de como aplicar os conhecimentos adquiridos!" - José Leonardo

"Nao criei expectativas com o curso porque não o conhecia, porém ultrapassam qualquer pré-julgamento que eu teria feito a respeito. Estou aprendendo muito!" - Beatriz Rimanski

***

Qual ferramenta escolher? Se o FIGMA não for para você, você tem outras opções que criei na Udemy!

Sketch

Para usuários MacOS que buscam criar guias de estilos para projetos escaláveis. $99/ano.

Adobe XD

Para usuários Windows e MacOS. Sua versão grátis permite criar 1 projeto. A partir daí são $119/ano.

Figma

Uma das mais promissoras ferramentas do mercado, que permite trabalhar colaborativamente em tempo real com outras pessoas. Tem uma versão grátis que permite criar até 3 projetos. A partir daí são $144/ano.

Invision Studio

A ferramenta que chegou em 2018 fazendo muito barulho no meio do design e que está em versão beta com lançamento em breve. É a primeira do gênero com avançados recursos de animações para microinterações. Você pode sair na frente e dominar a ferramenta antes mesmo dela ser lançada. Perde apenas para ferramenta mais especialistas em microinterações como o Framer X.

Esse formato permite que você escolha sua ferramenta e trabalhe com ela vendo as diferenças sempre que tiver curiosidade. Cada aula de uma ferramenta possui sua correspondente na outra para fins de comparação.

***

Dica

Caso você queira ir além, pode também adquirir o curso completo de Design de Interfaces, também de minha autoria e disponível aqui na Udemy! Nele você irá além das ferramentas (o curso das 4 ferramentas citadas acima estão inclusas) e aprenderá:

  • Aprenda a escolher, combinar Cores e dominar seus atributos (matiz, saturação, brilho, contraste, etc),

  • Saiba como definir Tipografia e os padrões tipográficos com Modular Scale,

  • Crie Botões que engajam e ajudam o usuário a entender as principais funções da interface,

  • Entenda como projetar Formulários fáceis de preencher,

  • Estabelecer uma Hierarquia Visual na página que ajude seu usuário a fazer o que precisa - usando Balanceamento, Ritmo, Harmonia, Dominância, Alinhamento e Proximidade,

  • Organizar os elementos em Grids,

  • Trabalhar Responsividade e projetar interfaces Mobile first,

  • Criar Guias de Estilos para projetos escaláveis e com componentes reaproveitáveis (building blocks e atomic design)

  • E muito mais!

ATENÇÃO: OS CONTEÚDOS ACIMA ESTÃO DISPONÍVEIS SOMENTE NO CURSO COMPLETO DE DESIGN DE INTERFACES. ESSE CURSO QUE VOCÊ ESTÁ VISUALIZANDO É SOMENTE SOBRE A FERRAMENTA FIGMA!

***

Satisfação garantida ou seu dinheiro de volta

"E se eu não gostar do curso?” Nós devolvemos seu dinheiro! Essa é mais uma garantia de qualidade e um incentivo a mais para você começar já! Após a compra você terá 30 dias para testar o produto, e se não gostar, basta solicitar o reembolso.

Estou certo que será um dos melhores investimentos que você fará em 2018 com grandes chances de trazer muito mais conteúdo e por um valor muito menor que qualquer curso online, presencial ou acadêmico que você já tenha feito na vida no Brasil ou Exterior.

Junte-se a mais de 15 mil alunos que já fizeram e aprovaram meu outro curso!

E aí, o que está esperando? Vamos nessa?


Screenshots

Figma: Design colaborativo do básico ao protótipo responsivo
Figma: Design colaborativo do básico ao protótipo responsivo
Figma: Design colaborativo do básico ao protótipo responsivo
Figma: Design colaborativo do básico ao protótipo responsivo

Content

Como aproveitar o máximo desse curso

Seja bem-vindo

(novo nov/19) Chance de fazer um curso presencial!

O que você vai aprender

Muito mais conteúdo além desse curso...

Downloads

Aquecimento com Netflix

Primeiro exercício

Começando pelo papel

Preparando teste com usuário

Primeiro contato com o Figma

Overview da ferramenta

Interface do Figma

Canvas, Artboards e Dispositivos

Barra de Ferramentas

Grid em Colunas

Box Model e Grid de 8 pontos

Alinhamento com Option/Alt

Manipulando elementos

Alinhamento

Largura, Altura, Rotação

Responsividade

Cor de preenchimento

Bordas, Transparência, Sombras e Blur

Tipografia Typeface, Peso, Tamanho e Cor

Alinhamento, Espaçamento e outras opções

(New out/18) Reorganização fácil na ordem de elementos

Bônus - Recursos extras

UI Kits e Recursos grátis

Leis da Psicologia do UX Design

Organização do trabalho

Organização do trabalho

Operações entre elementos e máscaras

Ajustes de Responsividade

Prototipação Netflix

Prototipação de interações

Compartilhando e testando o protótipo

Prototipação Instagram

Instagram Scroll Horizontal e Vertical

Styleguides

Introdução aos Guias de Estilo

Introdução ao exemplo para Guia de Estilos

Escolhendo as cores

Variações de cores primárias e secundárias

Cores do Documento

Estilos locais (equivalente a layer styles)

Estilos locais de cores, sombras e bordas

Componentes (equivalente dos símbolos)

Escolhendo e instalando a font

Criando cabeçalhos e parágrafos principais

Variações de texto dark, light, action

Estilos de Textos

Checando o contraste

Variações de formatação

Criando o primeiro botão

Heranças de propriedades (override)

Organizando a biblioteca em hierarquia

Mobile botões primários, secundários, mobile e desktop

Desktop botões primários, secundários, mobile e desktop

Landing page - Booking.com

Mobile First (importando dependências)

Ajustando Grids

Mobile - Textos e Botões

Desktop - Textos e Botões

Contraste Texto vs Imagem

Alterando o Botão master para replicar em todos elementos

Rabiscoframes (Bônus UX&DT)

UX&DT - Rabiscos - Impressão para desenhar

UX&DT - Rabiscos Texto e conteúdo

UX&DT - Rabiscos - Elementos de tela

UX&DT - Rabiscos - Outros componentes

UX&DT - Rabiscos - Fluxo de Usuário

UX&DT - Rabiscos - Anotações

UX&DT - Rabiscos - Ícones

Grids (Bônus DI Completo)

Introdução

Grid Bootstrap

Grid 8 pontos

Grids no Frontend

Usabilidade (Bônus UX&DT)

Noção geral

Informações em pouca quantidade

Hierarquia funcional

Simplificação de Formulários

Adivinhar intenções, Estados, Prevenção de Erros

O tempo do usuário

Microinterações

Personalidade, Microtextos e Linguagem

Checklist de UX (Bônus UX&DT)

Introdução

Simplicidade

Acionabilidade

Inteligência

Agradabilidade

Relevância

Conclusão

Conclusão

Mais dicas e até breve!


Reviews

B
Bernardo5 October 2020

No geral o curso abordou muito bem alguns conceitos de usabilidade, como também o uso do Figma. Só acredito que deveria ter tido mais aulas relativas a prototipação e possibilidades de animações que são possíveis, mas fora isto, senti que foi um ótimo investimento.

J
Jorge28 September 2020

Excelente curso, apesar de ser focado em Figma, ele ensina conceitos muito bons sobre UI Design no geral. Nota 1000, sou fã do Leandro, tudo que é curso da Udemy eu faço! ahaha

B
Bruno22 September 2020

O conteúdo é bem elaborado, dividido e detalhado. No entanto, acho que atrapalha um pouco no andamento do curso, uma vez que tenho bastante conhecimento nas ferramentas da Adobe e algumas coisas e conceitos são parecidos.

K
Karoline19 August 2020

Como iniciante da área de UX, o curso me ajudou muito a dar os primeiros passos no Figma. Recomendo! O Leandro é um professor com uma linguagem facilitada e que orienta e distribui o conteúdo entre as aulas de maneira positiva para o aprendizado. Valeu!

V
Vinicius17 August 2020

Quanto aprendizado incrível nesse curso! Superou demais as minhas expectativas. O Leandro é excelente, com uma didática natural.

C
Caique26 February 2020

Precisava aprender com urgência usar o figma por questões de trabalho e por já conhecer e ter feito alguns cursos com o Leandro vim correndo aqui. Ótimo curso pra quem está precisando aprender sobre a ferramenta e de bônus algumas aulas sobre usabilidade entre outros, o Figma tem funções novas que não tem no curso por causas obvias de ter sido lançado depois do curso porem o Leandro sempre nos atualiza em seu canal no youtube ou Instagram, ótimo curso excelente professor.

G
Gabriel6 February 2020

O Leandro é um ótimo professor. Explica a maioria das coisas da maneira mais objetiva e fácil. Muito bom.

B
Bruna5 February 2020

Curso excelente. Aborda de modo pratico e didático todas as funcionalidades da ferramenta. O material bônus, vem como um complemento importantíssimo para construção de wireframes de baixa fidelidade, sobre usabilidade e checklist para deixar a interface a prova de balas. Só acho que o conteúdo merece uma revisão em questão de organização.

R
Raquel2 February 2020

Sim o curso esta sendo muito positivo quanto ao conteúdo, mas ainda quero desbravar mais sore o conteúdo das proximas aulas

Y
Yuri28 January 2020

Assim como o primeiro curso que assinei, sendo o Leandro o professor, este curso está sendo sensacional!

P
Paulo21 January 2020

Eu gostei muito do curso, agora posso criar prototipos das minhas idéias e mostrar para amigos e conhecidos e saber se são uteis. Achei completo para o que ele se propõe, ainda mais com os bonus que não esperava que tivesse, pois fazem parte de outro curso do Leandro que eu tambem ja fiz. Enfim, recomendo

S
Sidcley16 January 2020

Muito bom, prático, objetivo bem didático é só acompanhar as aulas fazer os exercícios e seguir praticando.

F
Felipe5 January 2020

Muito bom o curso, trouxe luz para minha carreira de designer e bateu na tecla algo importante que eu negligenciava que é a metodologia dos styleguides. Vale muito a pena.

T
Talles18 December 2019

O curso é muito bom e está me ajudando a entender melhor como funcionam as ferramenstas do Figma e onde posso usá-las.

L
LUIS11 December 2019

Na primeira aula fui surpreendido com a possibilidade de começar a dar vida as minhas ideias. Genial o uso aplicativo Marvel.


1902954

Udemy ID

9/9/2018

Course created date

11/6/2019

Course Indexed date
Bot
Course Submitted by