Curso do FIGMA ao código. O design da interface web completo
- Descrição
- Currículo
- FAQ
- Revisões
Figma, HTML e CSS: Tríade necessária para se tornar mestre do Design de interface Web
– FIGMA
O Figma não é só uma ferramenta de design para web, na verdade, é muito mais do que isso.
O Figma é uma ferramenta de desenvolvimento de UI (User interfaces) baseado em três pilares:
– Desenvolvimento colaborativo para trabalhos em equipe.
– Prototipação para teste e validação das ideias antes do projeto ser desenvolvido
– Hand off, ou seja, facilita a comunicação e a entrega dos assets para as pessoas que vão de fato construir o código do produto web.
Ou seja, o Figma é uma ferramenta completa (web design, prototipação e testes de interfaces web, suporta trabalho em equipes e entrega para o desenvolvedor) que permite projetar UI de produtos digitais).
Nesse curso nós vamos abordar o Figma de maneira aprofundada, partindo do absoluto zero. Nós vamos criar nossos componentes responsivos, usar e abusar de auto-layout, vamos trabalhar com style guides criados por nós e finalizar com a prototipação, simulando projetos do mundo real.
– HTML & CSS
Agora que você domina o Figma para criar interfaces elegantes e funcionais, está na hora de transformar tudo em código HTML e CSS, pois assim o que foi projetado e prototipado está pronto para ser desenvolvido.
Nessa parte do curso você vai conhecer a fundo o HTML e o CSS e transformar seus projetos feitos no Figma em códigos pronto para publicação on-line.
Portanto a ideia desse curso é te mostrar os princípios do web design e do design de interface de usuário(UI). Vamos partir do básico e ir avançando aos poucos até conseguirmos desenvolver nossas páginas web construídas de forma profissional, de alto impacto visual e com muito estilo.
Domine o Design da Web e construa design interfaces de usuários incríveis com o Figma, HTML & CSS.
-
4IntroduçãoVídeo Aula
-
5O que é o Figma?Vídeo Aula
-
6Sobre os timesVídeo Aula
-
7Conhecendo a interfaceVídeo Aula
-
8como abrir um arquivo e figma communityVídeo Aula
-
9Dicas e atalhos importantesVídeo Aula
-
10frames e gruposVídeo Aula
-
11desenhar framesVídeo Aula
-
12constrainsVídeo Aula
-
13criar páginasVídeo Aula
-
14Sobre posicionamento de frames e gruposVídeo Aula
-
15IntroduçãoVídeo Aula
-
16entendendo edição de shapes e suas propriedades - parte 1Vídeo Aula
-
17entendendo edição de shapes e suas propriedades - parte 2Vídeo Aula
-
18configurações de stroke - parte 1Vídeo Aula
-
19configurações de stroke - parte 2Vídeo Aula
-
20outras formas: linhas, polígonos e estrelasVídeo Aula
-
21pen e pencilVídeo Aula
-
22flattenVídeo Aula
-
23mesclar vetoresVídeo Aula
-
24desenhar emojiVídeo Aula
-
25imagens no figmaVídeo Aula
-
26máscarasVídeo Aula
-
27efeitosVídeo Aula
-
28blend modes layersVídeo Aula
-
29formatação de textoVídeo Aula
-
30pluginsVídeo Aula
-
31gridsVídeo Aula
-
32auto layoutVídeo Aula
-
33componentesVídeo Aula
-
34propriedades de componentesVídeo Aula
-
35variantes de componentesVídeo Aula
-
36variantes - parte 2Vídeo Aula
-
37Apresentar projetoVídeo Aula
-
38WireframeVídeo Aula
-
39ajuste no wireframeVídeo Aula
-
40buscar imagensVídeo Aula
-
41criar componente logotipoVídeo Aula
-
42gridsVídeo Aula
-
43conteúdo da página de loginVídeo Aula
-
44criar componentes dos inputsVídeo Aula
-
45criar variantes dos componentes inputsVídeo Aula
-
46criar variantes do componente buttonVídeo Aula
-
47telas de cadastro e versões desktopVídeo Aula
-
63IntroduçãoVídeo Aula
-
64como criar stylesVídeo Aula
-
65exemplos de styles guidesVídeo Aula
-
66gridVídeo Aula
-
67quando precisamos de guia de estilos?Vídeo Aula
-
68vantagens de ter um style guideVídeo Aula
-
69o que deve conter num style guide?Vídeo Aula
-
70padrões de imagensVídeo Aula
-
71design system não é style guideVídeo Aula
-
72como alterar um estilo?Vídeo Aula
-
73IntroduçãoVídeo Aula
-
74paleta de coresVídeo Aula
-
75criar os estilos das coresVídeo Aula
-
76tipografiaVídeo Aula
-
77criar estilos para tipografiaVídeo Aula
-
78header e navVídeo Aula
-
79hero bannerVídeo Aula
-
80seção Principais cursos e componente cardVídeo Aula
-
81Refatoração Card ComponentVídeo Aula
-
82seção Nossa escolaVídeo Aula
-
83seção contatos e rodapéVídeo Aula
-
84prototypeVídeo Aula
-
85desafioVídeo Aula
