Entenda a estrutura do curso
Overview da Ferramenta
-
Interface (8:52)
-
[Sketch] Nova versão do Sketch 52
-
[Sketch] Versão 52 na prática (6:59)
-
Canvas, Artboards e Dispositivos (17:40)
-
Barra de Ferramentas (download) (34:21)
-
Crie o wireframe de baixa fidelidade
-
Grid em Colunas (40:29)
-
Box Model e Grid de 8 pontos (40:04)
-
Alinhamento com Option/Alt (20:42)
-
Bônus Freebies
Manipulando elementos
-
Alinhamento / Repeat Grid (XD) (18:37)
-
Alinhando os elementos no grid
-
Largura, Altura, Rotação (24:32)
-
Responsividade (exceto XD) (31:30)
-
Cor de preenchimento (71:06)
-
Bordas, Transparência, Sombras e Blur (64:46)
-
Tipografia Typeface, Peso, Tamanho e Cor (29:05)
-
Alinhamento, Espaçamento e outras opções (37:34)
-
(New out/18) Reorganização fácil na ordem de elementos (só Figma) (1:03)
-
Acabamento do aplicativo
Organização do Trabalho
Prototipação Netflix
Prototipação Instagram (somente Figma)
Animações (somente Invision Studio)
As maiores diferenças
[Figma] Styleguides
-
Introdução aos Guias de Estilo (2:10)
-
Introdução ao exemplo para Guia de Estilos (6:09)
-
Escolhendo as cores (4:03)
-
Variações de cores primárias e secundárias (4:11)
-
Cores do Documento (1:06)
-
Estilos locais (equivalente a layer styles) (2:58)
-
Estilos locais de cores, sombras e bordas (5:03)
-
Componentes (equivalente dos símbolos) (4:07)
-
Figma >> Guia de Cores para o Styleguide
-
Escolhendo e instalando a font (2:39)
-
Criando cabeçalhos e parágrafos principais (7:55)
-
Variações de texto dark, light, action (4:33)
-
Estilos de Textos (3:30)
-
Checando o contraste (2:25)
-
Figma >> Guia tipográfico para o Styleguide
-
Criando o primeiro botão (5:10)
-
Heranças de propriedades (override) (3:50)
-
Organizando a biblioteca em hierarquia (3:02)
-
Mobile botões primários, secundários, mobile e desktop (6:45)
-
Desktop botões primários, secundários, mobile e desktop (4:03)
-
Figma >> Guia de botões para o styleguide
[Adobe XD] Styleguides
-
Introdução aos Guias de Estilo (2:07)
-
Introdução ao exemplo para Guia de Estilos (5:39)
-
Escolhendo as cores (3:43)
-
Variações de cores primárias e secundárias (2:27)
-
Cores do Documento (1:07)
-
Assets e Estilo de Cores (3:09)
-
Cores dos Assets do XD não herdam sombras e bordas (1:18)
-
Símbolos (1:14)
-
Adobe XD >> Guia de Cores para o Styleguide
-
Escolhendo e instalando a font (1:37)
-
Criando cabeçalhos e parágrafos principais (6:56)
-
Variações de texto dark, light, action (3:10)
-
Checando o contraste (2:27)
-
Estilos de Textos (4:54)
-
Variações de formatação (0:26)
-
Adobe XD >> Guia tipográfico para o Styleguide
-
Criando o primeiro botão (4:23)
-
Heranças de propriedades (override) (1:35)
-
Símbolos para textos em botões (override) (0:56)
-
Customizando botões primários, secundários, mobile e desktop (0:45)
-
Documentando o Guia de Estilos para Botões (4:56)
-
Adobe XD >> Guia de botões para o styleguide
[Sketch] Styleguides
-
Introdução aos Guias de Estilo (1:51)
-
Introdução ao exemplo para Guia de Estilos (3:10)
-
Escolhendo as cores (4:05)
-
Variações de cores primárias e secundárias (1:13)
-
Cores do Documento (1:14)
-
Estilo de camada (5:08)
-
Estilo de camada não é só para cores (2:33)
-
Símbolos (3:41)
-
Sketch >> Guia de Cores para o Styleguide
-
Escolhendo e instalando a font (3:07)
-
Criando cabeçalhos e parágrafos principais (7:08)
-
Variações de texto dark, light, action (1:15)
-
Checando o contraste (2:39)
-
Estilos de Textos (4:21)
-
Variações de formatação (2:15)
-
Sketch >> Guia tipográfico para o Styleguide
-
Criando o primeiro botão (3:49)
-
Heranças de propriedades (override) (3:00)
-
Símbolos para textos em botões (override) (2:48)
-
Recriando um único botão totalmente customizavel (1:51)
-
Documentando o Guia de Estilos para Botões (4:24)
-
Sketch >> Guia de botões para o styleguide
[Invision] Styleguides
-
Introdução aos Guias de Estilo (3:41)
-
Introdução ao exemplo para Guia de Estilos (8:01)
-
Escolhendo as cores (4:33)
-
Variações de cores primárias e secundárias (6:40)
-
Cores do Documento (1:38)
-
Cores em Símbolos (3:54)
-
Invision >> Guia de Cores para o Styleguide
-
Escolhendo e instalando a font (2:05)
-
Criando cabeçalhos e parágrafos principais (10:42)
-
Variações de texto dark, light, action (2:23)
-
Checando o contraste (2:17)
-
Estilos de Textos (1:18)
-
Invision >> Guia tipográfico para o Styleguide
-
Criando o primeiro botão (5:01)
-
Heranças de propriedades (override) (8:11)
-
Customizando botões primários, secundários, mobile (11:56)
-
Customizando botões primários, secundários, desktop (6:13)
-
Comparação de simbolos e componentes entre ferramentas (1:32)
-
Invision >> Guia de botões para o styleguide
[Invision e Figma] Landing page Booking.com
[Sketch] Landing Page Booking.com
-
Mobile First (ajustando mockup) (2:37)
-
Desktop - Importanto logo, imagens e ajustando grids (5:00)
-
Desktop - Incluindo textos e botões (4:05)
-
Desktop - Contraste Texto vs Imagem (2:18)
-
Mobile - Incluindo textos e botões (2:06)
-
Mobile - Criando um botão otimizando mobile (4:43)
-
Mobile - Incluindo as imagens e ajustando contraste (2:35)
-
Organizando o documento (0:45)
-
Alterando o styleguide (3:53)
-
Sketch >> Mobile First - Landing page móvel e desktop
[Adobe XD] Landing Page Booking.com
-
Mobile First (importando dependências) (0:49)
-
Ajustando Máscaras e Grids (2:36)
-
Incluindo textos e botões (6:18)
-
Organizando o documento (1:11)
-
Desktop - Contraste Texto vs Imagem (7:30)
-
Alterando o Styleguide (1:41)
-
Criando novos componentes (atomic design like) (1:31)
-
Adobe XD >> Mobile First - Landing page móvel e desktop
-
Encerramento (0:29)
