Estudo: Figma para UI/UX do Projeto¶

1. Objetivo¶

Este roteiro detalha nosso plano de estudo para o Figma. O objetivo é unificar nosso conhecimento da ferramenta para que possamos criar o design e o protótipo do nosso aplicativo de forma consistente e eficiente. O material a seguir servirá como nosso guia para as próximas etapas de design.

2. Áreas de Foco¶

O estudo está organizado em quatro áreas principais, cobrindo desde o básico até as funcionalidades de colaboração.

Módulo 1: Fundamentos do Figma¶

Foco: Dominar as ferramentas essenciais para a criação de qualquer interface.
Tópicos Chave:
- Frames: São as "telas" do nosso design, onde todo o conteúdo é organizado. Aprenderemos a configurá-los para os dispositivos alvo.
- Formas e Texto: Manipulação dos blocos de construção de qualquer interface: retângulos, círculos, ícones e texto.
- Auto Layout: Como criar elementos que se adaptam automaticamente ao conteúdo, essencial para botões, menus e listas.
- Organização: Boas práticas para nomear camadas (layers) e organizar os elementos de forma lógica.
Resultado Esperado: Ser capaz de construir uma tela de aplicativo do zero, com layout bem estruturado.

Módulo 2: Componentes e Reutilização¶

Foco: Aprender a criar elementos de design que podem ser usados várias vezes, garantindo consistência e agilizando futuras alterações.
Tópicos Chave:
- Componentes: O que são, como criá-los (componente principal) e como usá-los (instâncias).
- Variantes: Agrupar diferentes estados de um mesmo componente (ex: um botão em seu estado padrão, desabilitado e ativo).
- Biblioteca Central: Entender como os componentes formam a base de um Design System, nossa biblioteca de elementos visuais.
Resultado Esperado: Criar um conjunto básico de componentes reutilizáveis para o nosso projeto (botões, campos de texto, etc.).

Módulo 3: Prototipagem Interativa¶

Foco: Transformar as telas estáticas em um fluxo clicável que simula o uso real do aplicativo.
Tópicos Chave:
- Conexões: Ligar diferentes frames para criar a navegação entre as telas.
- Interações: Definir os gatilhos para a navegação (clique, arrastar, etc.).
- Animações: Usar transições simples para dar mais realismo e fluidez à experiência do protótipo.
Resultado Esperado: Desenvolver um protótipo navegável do fluxo principal do nosso aplicativo.

Módulo 4: Colaboração e Handoff¶

Foco: Utilizar o Figma como uma ferramenta central para o trabalho em equipe e para a entrega do design aos desenvolvedores.
Tópicos Chave:
- Compartilhamento e Permissões: Como compartilhar o projeto para visualização ou edição.
- Comentários: Usar a ferramenta de comentários para dar e receber feedback diretamente no layout.
- Modo de Inspeção (Inspect): Como os desenvolvedores podem extrair informações de um componente: cores, medidas, fontes e trechos de código.
Resultado Esperado: Saber como compartilhar o protótipo para revisão e como o design é "traduzido" para o desenvolvimento.

3. Plano de Ação¶

Para atingir esses objetivos, seguiremos os seguintes passos:

Estudo Individual Guiado: Cada membro da equipe deve realizar um tutorial para iniciantes para cobrir os fundamentos.
Exercício Prático: Recriar la interface de um aplicativo conhecido para praticar as ferramentas e o conceito de componentes.
Aplicação no Projeto: Iniciar a criação do wireframe (protótipo de baixa fidelidade) da funcionalidade principal do nosso app.
Revisão em Equipe: Apresentar o protótipo inicial para a equipe, testar o fluxo e coletar feedbacks usando a ferramenta de comentários.

4. Recursos Recomendados¶

Canal Oficial do Figma (YouTube): Ideal para tutoriais visuais e guias de funcionalidades. Link Direto
Figma Community: Excelente para explorar projetos reais, baixar exemplos e entender como outros designers estruturam seus arquivos. Link Direto