Summary

Keywords

curso grátis auto layout Design de Interface Desenvolvimento de UI Prototipagem Ferramentas de Design UX/UI Design Gráfico Curso de Figma Desenvolvimento Web Front-end Interface de Usuário

Full Transcript

Precisa de ajuda? Solicite uma ajuda particular: https://forms.gle/Pu1aT2LsbU1nuTTDA Bons protótipos precisam ser simples e fáceis de dar manutenção. O Figma possui ferramentas e conceitos incríveis para facilitar a vida de quem precisa construir bons protótipos em pouco tempo. O recursos de componentização é uma mão na roda nesse quesito. Nessa aula vamos entender o são componentes dentro do Figma, como criá-los e como eles podem fazer você economizar um bom tempo durante o desenvolvimento e manutenção do seu protótipo. Links mencionados no vídeo: 🅵 Figma - https://figma.com 🗨️ Discord - https://discord.gg/ZC7JrPZn7P Outros cursos no canal: 🎩 Figma para DEVs - https://youtu.be/4rSPV1NbM10 ☪️ Curso de estilização no React - https://youtu.be/oUbPkR799fc ⭐️ Curso de React com typescript - https://youtu.be/1bEbBkWc4-I 👑 React, Material UI 5 e Typescript - https://youtu.be/wLH1Vv86I44 🏆 Curso de API Rest, Node e Typescript - https://youtu.be/SVepTuBK4V0 Livros recomendados: 📘 Código limpo - https://amzn.to/43Xiick 📘 Arquitetura limpa - https://amzn.to/3ZMCStr 📘 Migrando sistemas monolíticos - https://amzn.to/45ByPDZ 📘 The Micro SaaS Handbook - https://amzn.to/4jCan93 Conteúdo: 0:00 | Introdução 0:40 | Entendendo o autolayout no Figma 1:40 | Autolayout na prática 3:40 | Aplicando o autolayout 5:00 | Entendendo o alinhamento 5:45 | Entendendo os espaçamento entre elementos 6:20 | Entendendo o posicionamento de elementos 7:55 | Entendendo o padding nos elementos 9:10 | Entendendo o alinhamento horizontal, vertical e wrap 11:20 | Telas responsivas 13:00 | Figma community 14:49 | Criando o primeiro componente 19:35 | Criando o componente reutilizável 21:20 | Utilizando o componente 24:30 | Finalização e agradecimentos CODARSE - Componentização e mais telas #DesenvolvimentoWeb #UXDesign #CursoFigma #Prototipagem #FrontEnd #DesignResponsivo #UIUXDev #FerramentasDeDesign #WebDev #AnimaçõesEmFigma #DesignColaborativo #Wireframes #DesenvolvimentoÁgil #MelhoresPráticasDesign #InteracaoUsuario #ComponentesFigma #LayoutPágina #ExperienciaUsuarioWeb