Skip to content

Estudo e Implementação: Uso do Figma no Processo de Desenvolvimento

📋 Descrição

Esta issue tem como objetivo estruturar o estudo e a aplicação prática do Figma como ferramenta central para o design de interfaces dentro do nosso fluxo de desenvolvimento de software. O foco é ir além da criação de telas estáticas, explorando funcionalidades que permitam a criação de protótipos de alta fidelidade, interativos e que sirvam como uma fonte de verdade única para desenvolvedores e stakeholders, garantindo fidelidade ao design e melhorando a colaboração entre times.

🎯 Objetivo

Capacitar a equipe (designers e desenvolvedores) a utilizar o Figma de forma avançada, criando sistemas de design robustos e protótipos fiéis que agilizem o processo de desenvolvimento, reduzam retrabalho e melhorem a qualidade final do produto.

📌 Tópicos a Serem Explorados e Aplicados

1. Fundamentos do Figma para Sistemas Escaláveis

  • Frames: Dominação do uso de frames para organizar telas de diferentes dispositivos e resoluções (Desktop, Mobile, Tablet) ou para design gráfico.

  • Layers e Grupos: Boas práticas de nomeação e organização de layers para facilitar a handoff para desenvolvimento.

  • Componentes: Criação e uso de componentes principais (master components) e instâncias para construir bibliotecas de UI consistentes e reutilizáveis (ex: botões, inputs, modais).

  • Auto Layout: Aplicação intensiva de Auto Layout para criar componentes e telas que sejam flexíveis e adaptáveis à diferentes conteúdos e tamanhos de tela, aproximando o layout do CSS real.

recurso audiovisual sobre o uso básico de frames/layers/componentes/auto layout: https://youtu.be/dXZB0bI6uis?si=FIotw8KHi3hpuce5

2. Técnicas de Prototipagem de Alta Fidelidade

  • Sistema de Design: Estabelecer e documentar um guia de estilo diretamente no Figma, incluindo:
  • Cores: Uso de estilos de cores para facilidade de manutenção e consistência.
  • Tipografia: Definição de estilos de texto (Font, Size, Weight, Line Height).
  • Espaçamento: Uso de grades (grids) e regras de espaçamento consistentes (8px grid, por exemplo).
  • Responsividade: Técnicas para prototipar e testar designs em diferentes breakpoints, utilizando constraints e auto layout para simular comportamento responsivo.

recurso audiovisual sobre o uso básico de Técnicas de Prototipagem: https://youtu.be/Al1xsdol4Pk?si=uXMZYgRtNJ4cxfy3

3. Animações e Interações no Protótipo

  • Prototipagem Interativa: Utilizar o painel "Prototype" para conectar frames e simular o fluxo real da aplicação (transições entre telas, overlays, navegação).
  • Microinterações: Explorar a criação de animações e transições de UI (ex: hover states, loading animations, toggles) usando Smart Animate e soluções criativas.
  • Comunicação com Devs: Garantir que as especificações de animação (duração, easing, tipo) sejam claramente visíveis e documentadas para os desenvolvedores implementarem com fidelidade.

recurso audiovisual sobre o uso básico de Animações e Interações no Protótipo: https://youtu.be/hHp4FGVcHjY?si=CeuFQhZ04bm3evQL

🔗 Recursos Úteis a mais (Sugestão)

  • Documentação Oficial do Figma para pesquisa mais robusta: https://help.figma.com/
  • Curso "Figmaster" (Udemy/Coursera) no YouTube.
  • Artigos sobre "Design Systems no Figma".

Documentação criada por João Gonzaga (@Karmantinedev)