Pular para conteúdo

🎨 Design de Interfaces com Figma

Domine a criação de interfaces digitais profissionais com a ferramenta mais utilizada no mercado.

🚀 Comece por aqui

📚 Visão Geral do Curso

Este curso é dividido em 5 módulos práticos, cobrindo desde a sintaxe visual básica até a entrega profissional de projetos (hand-off).

  • Fundamentos

    • Módulo 1: Teoria e Interface

  • Design Visual

    • Módulo 2: Cores e Imagens

  • Estrutura

    • Módulo 3: Layout e Grade

  • :material-box-outline: Sistemas

    • Módulo 4: Design Systems

  • Entrega

    • Módulo 5: Prototipagem

Aulas

📖 Trilha de Aprendizado

Explore os módulos do curso e mergulhe no design de interfaces.

🎓 Módulos e Aulas

1. Fundamentos e Sintaxe Visual

2. Cores e Estilos

3. Layout e Grade

4. Design Systems

5. Prototipagem e Entrega

Introdução ao Design de Interfaces e Instalação

Objetivos da Aula

  • [ ] Compreender os conceitos de Introdução ao Design de Interfaces e Instalação.
  • [ ] Praticar as ferramentas relacionadas no Figma.
  • [ ] Criar um exemplo prático.

Conteúdo Teórico

O que é Design de Interfaces?

O Design de Interfaces (UI Design) é o desenvolvimento de interfaces visuais para aplicativos e sites, focando na experiência do usuário e na estética funcional.

Conceito

UI (User Interface) é o meio pelo qual um usuário interage com um sistema. É a "ponte" entre o humano e o computador.

Alfabetismo Visual e Sintaxe

Para criar boas interfaces, precisamos entender os elementos básicos da sintaxe visual:

graph TD
    A[Sintaxe Visual] --> B[Ponto]
    A --> C[Linha]
    A --> D[Textura]
    A --> E[Perspectiva]
    B --> F[Foco e Atenção]
    C --> G[Direção e Movimento]
  • Ponto e Linha: Os elementos mais simples que guiam o olhar.
  • Textura: Sensação de superfície que adiciona profundidade.
  • Perspectiva: Criação de profundidade em planos 2D.

Gestalt: As Leis da Percepção

A Gestalt estuda como o cérebro agrupa elementos visuais:

  1. Proximidade: Elementos próximos são vistos como um grupo.
  2. Semelhança: Elementos parecidos parecem ter a mesma função.
  3. Continuidade: Seguimos caminhos e linhas fluidas.
  4. Fechamento: O cérebro completa formas incompletas.

Dica

Use a Gestalt para organizar informações sem precisar de muitas linhas divisórias ou bordas pesadas.

Instalação e Configuração

O Figma pode ser usado via navegador ou aplicativo desktop.

$ figma --version
Figma Desktop App v116.15.4
$ open https://www.figma.com/downloads/

Em Prática

Vamos explorar a interface e identificar elementos de Gestalt em sites famosos.

Atenção

Certifique-se de validar seu e-mail de conta estudantil para liberar os recursos do Figma Professional gratuitamente.

Resumo

Nesta aula aprendemos sobre: - Fundamentos da Sintaxe Visual. - Princípios da Gestalt aplicados à UI. - Instalação do ambiente de trabalho.

🎯 Próximos Passos

Explorando a Interface do Figma

Objetivos da Aula

  • [ ] Compreender os conceitos de Explorando a Interface do Figma.
  • [ ] Praticar as ferramentas relacionadas no Figma.
  • [ ] Criar um exemplo prático.

Conteúdo Teórico

Conhecendo a Interface do Figma

A interface do Figma é dividida em quatro áreas principais que facilitam o fluxo de trabalho colaborativo.

graph LR
    L[Barra Superior] --- C[Tela Central]
    L --- Layers[Painel de Camadas]
    L --- Props[Painel de Propriedades]
    Layers --> |Esquerda| C
    Props --> |Direita| C
  • Barra Superior: Ferramentas de seleção, formas, caneta e texto.
  • Painel de Camadas (Esquerdo): Organização de páginas, assets e camadas.
  • Tela Central (Canvas): Onde o design acontece.
  • Painel de Propriedades (Direito): Ajustes de dimensão, cor, efeitos e interações.

Conceito

O Figma é baseado em frames. Pense neles como as "telas" do seu aplicativo ou as "artboards" do seu design.

Atalhos Essenciais

Dominar atalhos é o que diferencia designers produtivos.

$ # Atalhos de Navegação
$ Espaço + Clique: Pan (Mover tela)
$ Ctrl + Scroll: Zoom In/Out
$ Alt + L: Recolher todas as camadas

Dica

Use o atalho Ctrl + / para abrir a barra de busca rápida e encontrar qualquer ferramenta ou plugin instantaneamente.

Em Prática

Vamos criar nosso primeiro Frame de iPhone e organizar três camadas simples: um retângulo (Fundo), um círculo (Avatar) e um Texto (Nome).

Atenção

Mantenha suas camadas nomeadas desde o primeiro dia. "Rectangle 45" não ajuda ninguém no futuro!

Resumo

Nesta aula aprendemos sobre: - Divisão da interface do Figma. - Navegação fluida no Canvas. - Atalhos de produtividade básica.

🎯 Próximos Passos

Ferramentas Básicas: Formas e Vetores

Objetivos da Aula

  • [ ] Compreender os conceitos de Ferramentas Básicas: Formas e Vetores.
  • [ ] Praticar as ferramentas relacionadas no Figma.
  • [ ] Criar um exemplo prático.

Conteúdo Teórico

O que são Vetores?

Diferente de imagens raster, vetores são baseados em cálculos matemáticos. Isso permite redimensionamento infinito sem perda de qualidade.

graph LR
    A[Ponto A] --- B[Caminho/Linha]
    B --- C[Ponto C]
    C --- A
    style A fill:#f9f,stroke:#333
    style C fill:#f9f,stroke:#333

Conceito

Um vetor é composto por Pontos de Ancoragem e Curvas de Bézier. No Figma, usamos a ferramenta Caneta (P) para manipular esses elementos.

Operações Booleanas

Podemos criar formas complexas combinando formas básicas.

$ # Comandos de Combinação
$ Union: Une as formas em uma só
$ Subtract: Remove a forma de cima da de baixo
$ Intersect: Mantém apenas onde as formas se cruzam

Dica

Ao desenhar um círculo ou quadrado perfeito, mantenha a tecla Shift pressionada durante a criação.

Opções Open Source (Código Aberto)

Além do Figma, existem excelentes alternativas gratuitas: - Inkscape: Editor de vetores de mesa robusto. - Penpot: Design e prototipagem open source via web.

Em Prática

Vamos construir um ícone de "Cloud" (Nuvem) combinando três círculos e um retângulo usando a operação de Union.

Atenção

Sempre prefira vetores para logotipos e ícones. Imagens bitmap (fotos) ficam borradas ao serem ampliadas!

Resumo

Nesta aula aprendemos sobre: - Natureza matemática dos vetores. - Manipulação de formas com a Pen Tool. - Operações de combinação (Boolean).

🎯 Próximos Passos

Manipulação de Textos e Tipografia

Objetivos da Aula

  • [ ] Compreender os conceitos de Manipulação de Textos e Tipografia.
  • [ ] Praticar as ferramentas relacionadas no Figma.
  • [ ] Criar um exemplo prático.

Conteúdo Teórico

Tipografia e Hierarquia Visual

O texto é 90% do design da interface. Uma boa tipografia garante legibilidade e guia o usuário através da informação.

graph TD
    H[Hierarquia Visual] --> T1[Título - H1]
    H --> T2[Subtítulo - H2]
    H --> B[Corpo de Texto]
    H --> Caps[Legendas]
    style T1 fontSize:24px,fontWeight:bold
    style T2 fontSize:18px,fontWeight:bold
    style B fontSize:14px
  • Famílias Tipográficas: Serif, Sans Serif, Monospaced e Display.
  • Hierarquia: Use tamanho (size), peso (weight) e cor para destacar o que é importante.
  • Legibilidade: Espaçamento entre linhas (line-height) e entre letras (letter-spacing).

Conceito

A hierarquia visual é a ordenação estratégica dos elementos para que o usuário perceba primeiro a informação mais importante.

Manipulação de Texto no Figma

Ajustes precisos de tipografia no painel lateral direito.

$ # Comandos de Atributos
$ Text Align: Esquerda, Centro, Direita ou Justificado
$ Case: Uppercase, Lowercase, Title Case
$ Decoration: Underline, Strikethrough

Dica

Ao escolher fontes, verifique se elas possuem diferentes "pesos" (Light, Regular, Bold). Isso dá muito mais flexibilidade ao seu design.

Em Prática

Vamos criar uma Escala Tipográfica para um site de notícias, definindo estilos para Título, Subtítulo e Parágrafo.

Atenção

Evite usar mais de 2 ou 3 fontes diferentes no mesmo projeto. A simplicidade gera consistência!

Resumo

Nesta aula aprendemos sobre: - Classificação de fontes. - Princípios de hierarquia visual. - Configuração de textos no Figma.

🎯 Próximos Passos

Teoria das Cores e Aplicação no Figma

Objetivos da Aula

  • [ ] Compreender os conceitos de Teoria das Cores e Aplicação no Figma.
  • [ ] Praticar as ferramentas relacionadas no Figma.
  • [ ] Criar um exemplo prático.

Conteúdo Teórico

Teoria das Cores na Prática

As cores evocam emoções e ajudam na usabilidade. Entender o círculo cromático é essencial para criar paletas harmoniosas.

graph TD
    C[Esquemas de Cores] --> Mono[Monocromático]
    C --> Ana[Análogo]
    C --> Com[Complementar]
    C --> Tri[Tríade]
    style Mono fill:#e0f7fa
    style Ana fill:#b2ebf2
    style Com fill:#4dd0e1
    style Tri fill:#00bcd4
  • Sistemas de Cores: RGB (Digital), CMYK (Impressão) e HEX (Código).
  • Psicologia das Cores: Azul (Confiança), Vermelho (Urgência/Erro), Verde (Sucesso).
  • Contraste: Garanta que o texto seja legível sobre o fundo (Padrões WCAG).

Conceito

O contraste não é apenas sobre a cor, mas sobre a diferença de luminância. Use ferramentas de inspeção para garantir a acessibilidade.

Aplicação no Figma

Trabalhando com preenchimentos (Fill) e contornos (Stroke).

$ # Comandos de Cor
$ I: Conta-gotas (Eye Dropper)
$ Alt + Ctrl + C: Copiar Cor/Estilo
$ Alt + Ctrl + V: Colar Cor/Estilo

Dica

Ao criar uma interface, use a regra 60-30-10: 60% cor primária (neutra), 30% cor secundária e 10% cor de destaque (CTA).

Em Prática

Vamos criar uma paleta de cores para um aplicativo de saúde, utilizando harmonia análoga e testando o contraste.

Atenção

Sempre teste seu design em diferentes telas. Uma cor que parece ótima no seu monitor pode ficar apagada em um celular barato!

Resumo

Nesta aula aprendemos sobre: - Círculo cromático e harmonias. - Modelos de cores digitais. - Acessibilidade e contraste.

🎯 Próximos Passos

Gerenciamento de Estilos (Styles)

Objetivos da Aula

  • [ ] Compreender os conceitos de Gerenciamento de Estilos (Styles).
  • [ ] Praticar as ferramentas relacionadas no Figma.
  • [ ] Criar um exemplo prático.

Conteúdo Teórico

Gestão de Estilos (Styles)

Para manter a consistência e agilizar o trabalho em equipe, usamos estilos globais para cores, textos e efeitos.

graph LR
    S[Estilo Global] --> C[Cor]
    S --> T[Tipografia]
    S --> E[Efeitos/Sombras]
    C --> |Atualiza| L1[Camada 1]
    C --> |Atualiza| L2[Camada 2]
  • Vantagens: Mudou o estilo em um lugar, muda em todo o projeto.
  • Tipos de Estilos: Color Styles, Text Styles e Effect Styles (Glow, Drop Shadow).
  • Organização: Use barras / para criar pastas (ex: Brand/Primary).

Conceito

Estilos são o primeiro passo para criar um Design System. Eles garantem que todos os designers usem a mesma "língua" visual.

Como Criar no Figma

O painel de estilos fica visível quando nenhum elemento está selecionado.

$ # Atalhos de Estilos
$ Ctrl + Alt + C: Copiar propriedades
$ Ctrl + Alt + V: Aplicar propriedades
$ Edit Style: Clique no ícone de quatro pontos (Grid)

Dica

Sempre nomeie seus estilos de acordo com a função, não com a cor. Use Primary Action em vez de Blue, pois a cor pode mudar no futuro!

Em Prática

Vamos converter nossa paleta da Aula 05 em Color Styles oficiais e criar nossos primeiros Text Styles para títulos e corpos.

Atenção

Camadas vinculadas a estilos não permitem mudanças de cor manuais. Você deve "desvincular" ou editar o estilo global.

Resumo

Nesta aula aprendemos sobre: - Padronização com estilos globais. - Criação de bibliotecas locais de cores e textos. - Organização profissional de assets.

🎯 Próximos Passos

Trabalhando com Imagens e Máscaras

Objetivos da Aula

  • [ ] Compreender os conceitos de Trabalhando com Imagens e Máscaras.
  • [ ] Praticar as ferramentas relacionadas no Figma.
  • [ ] Criar um exemplo prático.

Conteúdo Teórico

Imagens Raster (Bitmap)

Imagens compostas por pixels. Diferente dos vetores, elas perdem qualidade ao serem ampliadas.

graph LR
    P[Pixel Grid] --> |Zoom In| IMG[Imagem Distorcida]
    P --> |Resolução Alta| CLR[Imagem Nítida]
    style P fill:#f9f
  • Tamanho vs Resolução: A densidade (PPI) é crucial para telas Retina.
  • Máscaras: Ocultar partes de uma imagem de forma não-destrutiva.
  • Formatos: PNG (transparência), JPG (fotos), WebP (moderno/leve).

Conceito

A transparência é controlada pelo Canal Alpha. No Figma, podemos usar máscaras de qualquer forma geométrica ou vetor para "cortar" imagens.

Manipulação e Retoque

Filtros de ajuste rápidos diretamente no Figma.

$ # Ajustes de Imagem
$ Exposure: Brilho/Luz
$ Contrast: Diferença entre claros e escuros
$ Saturation: Intensidade da cor

Dica

Para retoques avançados de pele ou remoção de objetos, utilize o GIMP ou Krita (Open Source) antes de importar para o Figma.

Em Prática

Vamos importar uma foto, aplicar um ajuste de luminância e criar uma máscara de recorte hexagonal para um perfil de usuário.

Atenção

Cuidado com o tamanho dos arquivos! Imagens muito pesadas deixam o arquivo do Figma lento e o carregamento do site/app demorado.

Resumo

Nesta aula aprendemos sobre: - Diferenças técnicas entre Bitmap e Vetor. - Uso de máscaras no Figma. - Otimização e softwares Open Source.

🎯 Próximos Passos

Auto Layout: Fundamentos

Objetivos da Aula

  • [ ] Compreender os conceitos de Auto Layout: Fundamentos.
  • [ ] Praticar as ferramentas relacionadas no Figma.
  • [ ] Criar um exemplo prático.

Conteúdo Teórico

O que é?

Explicação teórica sobre o tema da aula...

Como funciona no Figma?

Passo a passo de como utilizar a ferramenta ou técnica...

  1. Passo 1...
  2. Passo 2...
  3. Passo 3...

Dica de Pro

Utilize atalhos de teclado para agilizar seu fluxo de trabalho.

Em Prática

Vamos aplicar o que aprendemos criando...

Resumo

Nesta aula aprendemos sobre: - Conceito A - Conceito B - Conceito C

🎯 Próximos Passos

Auto Layout: Avançado e Responsividade

Objetivos da Aula

  • [ ] Compreender os conceitos de Auto Layout: Avançado e Responsividade.
  • [ ] Praticar as ferramentas relacionadas no Figma.
  • [ ] Criar um exemplo prático.

Conteúdo Teórico

Layout Fluido e Responsivo

No mundo real, interfaces são visualizadas em telas de diversos tamanhos. O design responsivo adapta o layout para garantir a melhor experiência em qualquer dispositivo.

graph TD
    DS[Design Responsivo] --> HG[Hug Contents: Encolhe ao conteúdo]
    DS --> FF[Fill Container: Preenche o espaço]
    DS --> FX[Fixed: Tamanho travado]
    HG --> |Ideal para| Buttons[Botões e Tags]
    FF --> |Ideal para| Cards[Cards e Inputs]
  • Hug Contents: O frame se ajusta ao tamanho do que está dentro.
  • Fill Container: O elemento interno se estica para preencher o frame pai.
  • Fixed Width/Height: O elemento mantém o tamanho exato, independente do contexto.

Conceito

A responsividade no Figma é construída combinando Auto Layout com as configurações de redimensionamento (Resizing).

Wrap (Quebra de Linha)

Recurso moderno que permite que itens "pulem" para a linha de baixo quando não houver mais espaço.

$ # Configurações de Fluxo
$ Vertical: Itens em pé
$ Horizontal: Itens deitados
$ Wrap: Quebra automática (Estilo Grid)

Dica

Ao projetar um card com imagem e texto, use Fill Container no texto para que ele ocupe todo o espaço restante ao lado da imagem.

Em Prática

Vamos construir uma galeria de fotos que se adapta automaticamente de 3 colunas para 1 coluna conforme diminuímos a largura do frame pai.

Atenção

Sempre teste seu layout esticando e encolhendo o frame. Se os elementos "quebrarem" ou ficarem sobrepostos, ajuste o Resizing!

Resumo

Nesta aula aprendemos sobre: - Hug vs Fill vs Fixed. - Fluxo de Wrap para listas dinâmicas. - Criando componentes que funcionam em Mobile e Desktop.

🎯 Próximos Passos

Constraints e Grids

Objetivos da Aula

  • [ ] Compreender os conceitos de Constraints e Grids.
  • [ ] Praticar as ferramentas relacionadas no Figma.
  • [ ] Criar um exemplo prático.

Conteúdo Teórico

Constraints e Grids

Enquanto o Auto Layout cuida do conteúdo interno, as Constraints (Restrições) cuidam de como os elementos se fixam em relação ao Frame pai.

graph TD
    G[Layout Grids] --> C[Colunas: Estrutura vertical]
    G --> R[Linhas: Estrutura horizontal]
    G --> Gr[Grid: Papel milimetrado]
    C --> |Padrão Web| C12[12 Colunas]
  • Constraints: Fixar itens na Esquerda, Direita, Centro ou "Scale".
  • Layout Grids: Guiais visuais para alinhar elementos com precisão matemática.
  • 8pt Grid System: Recomendação de usar múltiplos de 8 para todos os espaçamentos e tamanhos.

Conceito

As Constraints dizem ao Figma: "Se esta tela crescer, mantenha este logotipo sempre fixo no canto superior direito".

Configurando o Grid

Grids são essenciais para manter a harmonia entre diferentes telas.

$ # Configurações de Grid
$ Type: Stretch (Esticar), Center ou Left/Right
$ Gutter: Espaço entre colunas (Respiro)
$ Margin: Espaço nas bordas laterais

Dica

Use um Grid de 12 colunas para Web e um de 4 colunas para Mobile. Isso é o padrão que desenvolvedores Front-end esperam receber.

Em Prática

Vamos configurar uma grade de 12 colunas em um Frame de Desktop e usar Constraints para fixar um menu de navegação no topo (Top + Scale).

Atenção

Constraints só funcionam em Frames simples. Se você adicionar Auto Layout ao frame pai, as Constraints serão substituídas pelas regras de alinhamento do Auto Layout.

Resumo

Nesta aula aprendemos sobre: - Fixação de elementos com Constraints. - Alinhamento profissional com Layout Grids. - O sistema de 8 pontos para design consistente.

🎯 Próximos Passos

Componentes Básicos e Instâncias

Objetivos da Aula

  • [ ] Compreender os conceitos de Componentes Básicos e Instâncias.
  • [ ] Praticar as ferramentas relacionadas no Figma.
  • [ ] Criar um exemplo prático.

Conteúdo Teórico

Componentes e Instâncias

Um componente é um elemento mestre que você pode reutilizar em todo o seu design. Quando você edita o Componente Principal, todas as suas Instâncias são atualizadas automaticamente.

graph TD
    M[Componente Principal - Losango] --> I1[Instância 1 - Diamante]
    M --> I2[Instância 2 - Diamante]
    M --> I3[Instância 3 - Diamante]
    M --> |Edição Visual| I1
    M --> |Edição Visual| I2
    M --> |Edição Visual| I3
  • Main Component: O original, identificado pelo ícone de 4 losangos preenchidos.
  • Instance: Uma cópia ligada ao original, identificada por 1 losango contornado.
  • Overrides: Alterações locais feitas em uma instância (como mudar o texto de um botão) que não afetam o original.

Conceito

Componentes são como classes em programação. Você define a lógica e o visual uma vez e cria objetos (instâncias) a partir dela.

Gerenciamento de Assets

O Figma facilita a busca e o uso de componentes através do painel "Assets".

$ # Atalhos de Componentes
$ Ctrl + Alt + K: Criar Componente
$ Alt + Arrastar: Criar uma Instância
$ Reset Instance: Volta às propriedades originais do mestre

Dica

Use Right Click > Main Component > Go to Main Component para encontrar rapidamente o componente mestre de qualquer instância.

Em Prática

Vamos criar um componente de "Card de Produto" e gerar 5 instâncias, mudando apenas a imagem e o preço de cada uma usando Overrides.

Atenção

Evite "desvincular" instâncias (Detach Instance). Isso quebra a conexão com o mestre e torna a manutenção do projeto muito mais difícil.

Resumo

Nesta aula aprendemos sobre: - Relação entre Mestre e Instância. - Uso de Overrides para personalização. - Organização do painel de Assets.

🎯 Próximos Passos

Variantes e Propriedades de Componentes

Objetivos da Aula

  • [ ] Compreender os conceitos de Variantes e Propriedades de Componentes.
  • [ ] Praticar as ferramentas relacionadas no Figma.
  • [ ] Criar um exemplo prático.

Conteúdo Teórico

Variantes e Propriedades

Variantes permitem organizar componentes similares em um único contêiner. Por exemplo, um botão com estados "Default", "Hover" e "Disabled".

graph LR
    B[Component Set: Botão] --> V1[Variante: Primário]
    B --> V2[Variante: Secundário]
    B --> V3[Variante: Ghost]
    V1 --> S1[Estado: Default]
    V1 --> S2[Estado: Hover]
  • Component Sets: O contêiner que agrupa as variantes.
  • Properties: Atributos que você define (Cor, Tamanho, Ícone Sim/Não).
  • Boolean Properties: Ligar ou desligar a visibilidade de uma camada com um clique.

Conceito

Variantes limpam seu painel de Assets. Em vez de ter 20 botões diferentes, você tem 1 botão com menus de configuração.

Tipos de Propriedades

Organize como você interage com seus componentes no painel direito.

$ # Configuração de Propriedades
$ Variant: Troca entre visuais diferentes
$ Boolean: Alterna visibilidade (True/False)
$ Text: Permite editar o texto diretamente no painel
$ Content: Troca instâncias de ícones

Dica

Use nomes lógicos para suas propriedades. Em vez de Property 1, use Status ou Type. Isso facilita a compreensão de outros designers.

Em Prática

Vamos criar um componente de "Input de Texto" com variantes para os estados: Vazio, Preenchido e Com Erro.

Atenção

Não exagere nas variantes! Se você tiver milhares de combinações para um único componente, talvez seja melhor dividi-lo em componentes menores.

Resumo

Nesta aula aprendemos sobre: - Organização com Component Sets. - Criação de propriedades booleanas e de texto. - Simplificação da biblioteca de design.

🎯 Próximos Passos

Bibliotecas e Design Systems

Objetivos da Aula

  • [ ] Compreender os conceitos de Bibliotecas e Design Systems.
  • [ ] Praticar as ferramentas relacionadas no Figma.
  • [ ] Criar um exemplo prático.

Conteúdo Teórico

Bibliotecas e Design Systems

Um Design System é a "fonte da verdade" de uma empresa. Ele vai além de componentes visuais, incluindo documentação, tom de voz e regras de uso.

graph TD
    DS[Design System] --> F[Fundamentos: Cores, Tipografia]
    DS --> C[Componentes: Botões, Inputs]
    DS --> P[Padrões: Layouts, UX]
    DS --> D[Documentação: Como usar]
  • Bibliotecas de Equipe: Publique seus estilos e componentes para que outros arquivos possam usá-los.
  • Tokens de Design: Valores semânticos que ligam o design ao código (ex: color-primary-main).
  • Escalabilidade: Permite que centenas de designers e desenvolvedores trabalhem no mesmo produto com consistência.

Conceito

Design System não é um projeto com fim. É um produto vivo que cresce e evolui conforme a necessidade do negócio e dos usuários.

Ecossistema de Apoio

Designers não criam tudo do zero. Usamos recursos externos para acelerar o processo.

$ # Recursos Digitais
$ Imagens: Unsplash, Pexels
$ Ícones: FontAwesome, Lucide
$ Ilustrações: Humaaans, Undraw

Dica

Ao usar bancos de imagens, procure por fotos que tenham a mesma iluminação e estilo visual para manter a unidade do seu Design System.

Em Prática

Vamos criar uma biblioteca de ícones pictográficos e organizar nosso primeiro "Mini Design System" com cores, fontes e 3 componentes básicos.

Atenção

Um Design System sem documentação é apenas um arquivo de UI Kit. Explique o PORQUÊ das decisões, não apenas o como.

Resumo

Nesta aula aprendemos sobre: - Conceito de Design System vs UI Kit. - Publicação de bibliotecas no Figma. - Integração de elementos de apoio (ícones e imagens).

🎯 Próximos Passos

Prototipagem: Navegação e Interações

Objetivos da Aula

  • [ ] Compreender os conceitos de Prototipagem: Navegação e Interações.
  • [ ] Praticar as ferramentas relacionadas no Figma.
  • [ ] Criar um exemplo prático.

Conteúdo Teórico

Prototipagem e Interatividade

Prototipagem é o processo de simular a experiência real do produto. No Figma, conectamos telas e elementos para criar fluxos navegáveis.

graph LR
    T1[Tela 1] --> |Clique no Botão| T2[Tela 2]
    T2 --> |Arrastar| T3[Tela 3]
    T3 --> |Timer| T1
  • Connections: Setas azuis que ligam o ponto de partida ao destino.
  • Triggers: O que inicia a ação (On Click, On Drag, While Hovering).
  • Actions: O que acontece (Navigate to, Open Overlay, Back).
  • Animations: Como a transição ocorre (Instant, Dissolve, Smart Animate).

Conceito

Um protótipo de Alta Fidelidade se parece e se comporta como um aplicativo real, sendo ideal para testes com usuários antes do desenvolvimento.

Smart Animate

A mágica do Figma! Ele identifica elementos com o mesmo nome em telas diferentes e anima as mudanças de posição, cor e tamanho.

$ # Configurações de Animação
$ Ease In/Out: Aceleração natural
$ Spring: Efeito de mola/quique
$ Custom: Curva de Bezier personalizada

Dica

Para que o Smart Animate funcione, as camadas devem ter EXATAMENTE o mesmo nome em ambas as telas.

Em Prática

Vamos criar um fluxo de "Login" onde, ao clicar no botão "Entrar", o usuário é levado para a "Home" com uma animação de deslizar (Push).

Atenção

Protótipos muito grandes podem ficar lentos no modo de apresentação. Divida seu projeto em múltiplos fluxos se houver muitas telas.

Resumo

Nesta aula aprendemos sobre: - Gatilhos e ações de prototipagem. - Uso de Overlays para menus e modais. - Criação de animações fluídas com Smart Animate.

🎯 Próximos Passos

Animações (Smart Animate) e Microinterações

Objetivos da Aula

  • [ ] Compreender os conceitos de Animações (Smart Animate) e Microinterações.
  • [ ] Praticar as ferramentas relacionadas no Figma.
  • [ ] Criar um exemplo prático.

Conteúdo Teórico

Handover: Do Design ao Código

O Handover é o momento em que o design é entregue aos desenvolvedores. O Figma possui ferramentas específicas para facilitar essa comunicação.

graph LR
    D[Designer] --> |Shared Link| Dev[Desenvolvedor]
    Dev --> |Inspeciona| CSS[Estilos CSS]
    Dev --> |Exporta| Assets[Imagens/Ícones]
    Dev --> |Lê| Specs[Medidas/Paddings]
  • Dev Mode: Interface focada em código (CSS, Swift, Kotlin).
  • Inspeção: Ver medidas, cores HEX e propriedades de texto com um clique.
  • Exportação: Gerar arquivos PNG, SVG ou PDF em diferentes escalas (1x, 2x, 3x).

Conceito

Um bom handover reduz o atrito e garante que o produto final seja fiel ao que foi projetado.

Plugins de Exportação

Existem plugins que convertem designs diretamente para código funcional.

$ # Ferramentas de Handover
$ Zeplin/Avocode: Plataformas externas de entrega
$ Figma to Code: Plugin para HTML/Tailwind/Flutter
$ Anima: Criação de protótipos funcionais com código

Dica

Sempre marque seus ícones como "Exportable" no painel direito. Isso permite que o desenvolvedor baixe tudo de uma vez.

Em Prática

Vamos simular o papel de um desenvolvedor, inspecionando o CSS de um botão e exportando um ícone em formato SVG.

Atenção

Não "jogue" o arquivo para o dev. Faça uma reunião de entrega, explique os fluxos e tire dúvidas sobre limitações técnicas.

Resumo

Nesta aula aprendemos sobre: - Fluxo de trabalho colaborativo (Designer-Dev). - Uso do Dev Mode e Ferramentas de Inspeção. - Melhores práticas de exportação de assets.

🎯 Próximos Passos

Hand-off para Desenvolvedores e Exportação

Objetivos da Aula

  • [ ] Compreender os conceitos de Hand-off para Desenvolvedores e Exportação.
  • [ ] Praticar as ferramentas relacionadas no Figma.
  • [ ] Criar um exemplo prático.

Conteúdo Teórico

Construindo seu Portfólio de UI

O portfólio é sua principal ferramenta para conseguir oportunidades no mercado. Ele deve mostrar não apenas o resultado final, mas o seu processo de pensamento.

graph TD
    P[Portfólio de Sucesso] --> CT[Contexto: Qual era o problema?]
    P --> PS[Processo: Como você resolveu?]
    P --> RF[Resultado: Telas Finais]
    P --> AP[Aprendizado: O que faria diferente?]
  • Plataformas: Behance, Dribbble ou site pessoal (Framer/Webflow).
  • Case Studies: Narre a jornada do projeto. Use textos curtos e muitas imagens de qualidade.
  • Mockups: Use modelos 3D de iPhones ou Laptops para dar contexto real aos seus designs.

Conceito

Recrutadores não buscam apenas "designs bonitos", eles buscam designers que sabem resolver problemas reais de usuários e negócios.

Presença Profissional

Como se destacar na comunidade de design.

$ # Canais de Divulgação
$ LinkedIn: Networking e vagas
$ Behance: Portfólio visual detalhado
$ Dribbble: "Vitrine" de shots rápidos

Dica

Publique seus projetos no LinkedIn marcando as ferramentas utilizadas e descrevendo um pouco do desafio. Isso aumenta muito sua visibilidade!

Em Prática

Vamos montar o layout da primeira página do seu estudo de caso, focando na capa e na descrição do problema.

Atenção

Não coloque tudo o que você fez no portfólio. Selecione seus 3 melhorores projetos. Qualidade supera quantidade!

Resumo

Nesta aula aprendemos sobre: - Estrutura de um Case Study. - Melhores plataformas para designers. - Como se apresentar ao mercado de trabalho.

🎯 Próximos Passos

Exercícios

📝 Exercícios Práticos

Mão na massa! Cada aula possui um conjunto de desafios para fixar o conteúdo.

🏋️ Desafios por Aula

Exercícios Aula 01

Nível: Fácil

  1. Crie um arquivo novo no Figma e...
  2. Desenhe formas básicas...

Nível: Médio

  1. Utilizando o que aprendeu, recrie a interface...
  2. Organize suas camadas...

Nível: Difícil

  1. Crie um componente completo com...

Exercícios Aula 02

Nível: Fácil

  1. Crie um arquivo novo no Figma e...
  2. Desenhe formas básicas...

Nível: Médio

  1. Utilizando o que aprendeu, recrie a interface...
  2. Organize suas camadas...

Nível: Difícil

  1. Crie um componente completo com...

Exercícios Aula 03

Nível: Fácil

  1. Crie um arquivo novo no Figma e...
  2. Desenhe formas básicas...

Nível: Médio

  1. Utilizando o que aprendeu, recrie a interface...
  2. Organize suas camadas...

Nível: Difícil

  1. Crie um componente completo com...

Exercícios Aula 04

Nível: Fácil

  1. Crie um arquivo novo no Figma e...
  2. Desenhe formas básicas...

Nível: Médio

  1. Utilizando o que aprendeu, recrie a interface...
  2. Organize suas camadas...

Nível: Difícil

  1. Crie um componente completo com...

Exercícios Aula 05

Nível: Fácil

  1. Crie um arquivo novo no Figma e...
  2. Desenhe formas básicas...

Nível: Médio

  1. Utilizando o que aprendeu, recrie a interface...
  2. Organize suas camadas...

Nível: Difícil

  1. Crie um componente completo com...

Exercícios Aula 06

Nível: Fácil

  1. Crie um arquivo novo no Figma e...
  2. Desenhe formas básicas...

Nível: Médio

  1. Utilizando o que aprendeu, recrie a interface...
  2. Organize suas camadas...

Nível: Difícil

  1. Crie um componente completo com...

Exercícios Aula 07

Nível: Fácil

  1. Crie um arquivo novo no Figma e...
  2. Desenhe formas básicas...

Nível: Médio

  1. Utilizando o que aprendeu, recrie a interface...
  2. Organize suas camadas...

Nível: Difícil

  1. Crie um componente completo com...

Exercícios Aula 08

Nível: Fácil

  1. Crie um arquivo novo no Figma e...
  2. Desenhe formas básicas...

Nível: Médio

  1. Utilizando o que aprendeu, recrie a interface...
  2. Organize suas camadas...

Nível: Difícil

  1. Crie um componente completo com...

Exercícios Aula 09

Nível: Fácil

  1. Crie um arquivo novo no Figma e...
  2. Desenhe formas básicas...

Nível: Médio

  1. Utilizando o que aprendeu, recrie a interface...
  2. Organize suas camadas...

Nível: Difícil

  1. Crie um componente completo com...

Exercícios Aula 10

Nível: Fácil

  1. Crie um arquivo novo no Figma e...
  2. Desenhe formas básicas...

Nível: Médio

  1. Utilizando o que aprendeu, recrie a interface...
  2. Organize suas camadas...

Nível: Difícil

  1. Crie um componente completo com...

Exercícios Aula 11

Nível: Fácil

  1. Crie um arquivo novo no Figma e...
  2. Desenhe formas básicas...

Nível: Médio

  1. Utilizando o que aprendeu, recrie a interface...
  2. Organize suas camadas...

Nível: Difícil

  1. Crie um componente completo com...

Exercícios Aula 12

Nível: Fácil

  1. Crie um arquivo novo no Figma e...
  2. Desenhe formas básicas...

Nível: Médio

  1. Utilizando o que aprendeu, recrie a interface...
  2. Organize suas camadas...

Nível: Difícil

  1. Crie um componente completo com...

Exercícios Aula 13

Nível: Fácil

  1. Crie um arquivo novo no Figma e...
  2. Desenhe formas básicas...

Nível: Médio

  1. Utilizando o que aprendeu, recrie a interface...
  2. Organize suas camadas...

Nível: Difícil

  1. Crie um componente completo com...

Exercícios Aula 14

Nível: Fácil

  1. Crie um arquivo novo no Figma e...
  2. Desenhe formas básicas...

Nível: Médio

  1. Utilizando o que aprendeu, recrie a interface...
  2. Organize suas camadas...

Nível: Difícil

  1. Crie um componente completo com...

Exercícios Aula 15

Nível: Fácil

  1. Crie um arquivo novo no Figma e...
  2. Desenhe formas básicas...

Nível: Médio

  1. Utilizando o que aprendeu, recrie a interface...
  2. Organize suas camadas...

Nível: Difícil

  1. Crie um componente completo com...

Exercícios Aula 16

Nível: Fácil

  1. Crie um arquivo novo no Figma e...
  2. Desenhe formas básicas...

Nível: Médio

  1. Utilizando o que aprendeu, recrie a interface...
  2. Organize suas camadas...

Nível: Difícil

  1. Crie um componente completo com...

Projetos

🚀 Mini-Projetos

Aplique tudo o que aprendeu em cenários reais e construa seu portfólio.

🛠 Projetos por Aula

Projeto Aula 01

Descrição

Desenvolva uma tela de aplicativo que utilize Introdução ao Design de Interfaces e Instalação...

Requisitos

  • [ ] Usar Frames corretos (ex: iPhone 14)
  • [ ] Aplicar Grids
  • [ ] Utilizar os estilos definidos

Desafio

Tente adicionar uma interação avançada de...

Projeto Aula 02

Descrição

Desenvolva uma tela de aplicativo que utilize Explorando a Interface do Figma...

Requisitos

  • [ ] Usar Frames corretos (ex: iPhone 14)
  • [ ] Aplicar Grids
  • [ ] Utilizar os estilos definidos

Desafio

Tente adicionar uma interação avançada de...

Projeto Aula 03

Descrição

Desenvolva uma tela de aplicativo que utilize Ferramentas Básicas: Formas e Vetores...

Requisitos

  • [ ] Usar Frames corretos (ex: iPhone 14)
  • [ ] Aplicar Grids
  • [ ] Utilizar os estilos definidos

Desafio

Tente adicionar uma interação avançada de...

Projeto Aula 04

Descrição

Desenvolva uma tela de aplicativo que utilize Manipulação de Textos e Tipografia...

Requisitos

  • [ ] Usar Frames corretos (ex: iPhone 14)
  • [ ] Aplicar Grids
  • [ ] Utilizar os estilos definidos

Desafio

Tente adicionar uma interação avançada de...

Projeto Aula 05

Descrição

Desenvolva uma tela de aplicativo que utilize Teoria das Cores e Aplicação no Figma...

Requisitos

  • [ ] Usar Frames corretos (ex: iPhone 14)
  • [ ] Aplicar Grids
  • [ ] Utilizar os estilos definidos

Desafio

Tente adicionar uma interação avançada de...

Projeto Aula 06

Descrição

Desenvolva uma tela de aplicativo que utilize Gerenciamento de Estilos (Styles)...

Requisitos

  • [ ] Usar Frames corretos (ex: iPhone 14)
  • [ ] Aplicar Grids
  • [ ] Utilizar os estilos definidos

Desafio

Tente adicionar uma interação avançada de...

Projeto Aula 07

Descrição

Desenvolva uma tela de aplicativo que utilize Trabalhando com Imagens e Máscaras...

Requisitos

  • [ ] Usar Frames corretos (ex: iPhone 14)
  • [ ] Aplicar Grids
  • [ ] Utilizar os estilos definidos

Desafio

Tente adicionar uma interação avançada de...

Projeto Aula 08

Descrição

Desenvolva uma tela de aplicativo que utilize Auto Layout: Fundamentos...

Requisitos

  • [ ] Usar Frames corretos (ex: iPhone 14)
  • [ ] Aplicar Grids
  • [ ] Utilizar os estilos definidos

Desafio

Tente adicionar uma interação avançada de...

Projeto Aula 09

Descrição

Desenvolva uma tela de aplicativo que utilize Auto Layout: Avançado e Responsividade...

Requisitos

  • [ ] Usar Frames corretos (ex: iPhone 14)
  • [ ] Aplicar Grids
  • [ ] Utilizar os estilos definidos

Desafio

Tente adicionar uma interação avançada de...

Projeto Aula 10

Descrição

Desenvolva uma tela de aplicativo que utilize Constraints e Grids...

Requisitos

  • [ ] Usar Frames corretos (ex: iPhone 14)
  • [ ] Aplicar Grids
  • [ ] Utilizar os estilos definidos

Desafio

Tente adicionar uma interação avançada de...

Projeto Aula 11

Descrição

Desenvolva uma tela de aplicativo que utilize Componentes Básicos e Instâncias...

Requisitos

  • [ ] Usar Frames corretos (ex: iPhone 14)
  • [ ] Aplicar Grids
  • [ ] Utilizar os estilos definidos

Desafio

Tente adicionar uma interação avançada de...

Projeto Aula 12

Descrição

Desenvolva uma tela de aplicativo que utilize Variantes e Propriedades de Componentes...

Requisitos

  • [ ] Usar Frames corretos (ex: iPhone 14)
  • [ ] Aplicar Grids
  • [ ] Utilizar os estilos definidos

Desafio

Tente adicionar uma interação avançada de...

Projeto Aula 13

Descrição

Desenvolva uma tela de aplicativo que utilize Bibliotecas e Design Systems...

Requisitos

  • [ ] Usar Frames corretos (ex: iPhone 14)
  • [ ] Aplicar Grids
  • [ ] Utilizar os estilos definidos

Desafio

Tente adicionar uma interação avançada de...

Projeto Aula 14

Descrição

Desenvolva uma tela de aplicativo que utilize Prototipagem: Navegação e Interações...

Requisitos

  • [ ] Usar Frames corretos (ex: iPhone 14)
  • [ ] Aplicar Grids
  • [ ] Utilizar os estilos definidos

Desafio

Tente adicionar uma interação avançada de...

Projeto Aula 15

Descrição

Desenvolva uma tela de aplicativo que utilize Animações (Smart Animate) e Microinterações...

Requisitos

  • [ ] Usar Frames corretos (ex: iPhone 14)
  • [ ] Aplicar Grids
  • [ ] Utilizar os estilos definidos

Desafio

Tente adicionar uma interação avançada de...

Projeto Aula 16

Descrição

Desenvolva uma tela de aplicativo que utilize Hand-off para Desenvolvedores e Exportação...

Requisitos

  • [ ] Usar Frames corretos (ex: iPhone 14)
  • [ ] Aplicar Grids
  • [ ] Utilizar os estilos definidos

Desafio

Tente adicionar uma interação avançada de...

Quizzes

🧠 Quizzes Interativos

Teste seu conhecimento após cada aula e reforce seu aprendizado.

❓ Avaliações por Aula

Quiz 01 - Introdução

1. Qual a principal função de Introdução ao Design de Interfaces e Instalação?
Função incorreta A
Função correta
Função incorreta B
2. Qual atalho é usado para esta ferramenta?
Ctrl + A
Tecla correta
Alt + F4

Quiz 02 - Introdução

1. Qual a principal função de Explorando a Interface do Figma?
Função incorreta A
Função correta
Função incorreta B
2. Qual atalho é usado para esta ferramenta?
Ctrl + A
Tecla correta
Alt + F4

Quiz 03 - Introdução

1. Qual a principal função de Ferramentas Básicas: Formas e Vetores?
Função incorreta A
Função correta
Função incorreta B
2. Qual atalho é usado para esta ferramenta?
Ctrl + A
Tecla correta
Alt + F4

Quiz 04 - Introdução

1. Qual a principal função de Manipulação de Textos e Tipografia?
Função incorreta A
Função correta
Função incorreta B
2. Qual atalho é usado para esta ferramenta?
Ctrl + A
Tecla correta
Alt + F4

Quiz 05 - Introdução

1. Qual a principal função de Teoria das Cores e Aplicação no Figma?
Função incorreta A
Função correta
Função incorreta B
2. Qual atalho é usado para esta ferramenta?
Ctrl + A
Tecla correta
Alt + F4

Quiz 06 - Introdução

1. Qual a principal função de Gerenciamento de Estilos (Styles)?
Função incorreta A
Função correta
Função incorreta B
2. Qual atalho é usado para esta ferramenta?
Ctrl + A
Tecla correta
Alt + F4

Quiz 07 - Introdução

1. Qual a principal função de Trabalhando com Imagens e Máscaras?
Função incorreta A
Função correta
Função incorreta B
2. Qual atalho é usado para esta ferramenta?
Ctrl + A
Tecla correta
Alt + F4

Quiz 08 - Introdução

1. Qual a principal função de Auto Layout: Fundamentos?
Função incorreta A
Função correta
Função incorreta B
2. Qual atalho é usado para esta ferramenta?
Ctrl + A
Tecla correta
Alt + F4

Quiz 09 - Introdução

1. Qual a principal função de Auto Layout: Avançado e Responsividade?
Função incorreta A
Função correta
Função incorreta B
2. Qual atalho é usado para esta ferramenta?
Ctrl + A
Tecla correta
Alt + F4

Quiz 10 - Introdução

1. Qual a principal função de Constraints e Grids?
Função incorreta A
Função correta
Função incorreta B
2. Qual atalho é usado para esta ferramenta?
Ctrl + A
Tecla correta
Alt + F4

Quiz 11 - Introdução

1. Qual a principal função de Componentes Básicos e Instâncias?
Função incorreta A
Função correta
Função incorreta B
2. Qual atalho é usado para esta ferramenta?
Ctrl + A
Tecla correta
Alt + F4

Quiz 12 - Introdução

1. Qual a principal função de Variantes e Propriedades de Componentes?
Função incorreta A
Função correta
Função incorreta B
2. Qual atalho é usado para esta ferramenta?
Ctrl + A
Tecla correta
Alt + F4

Quiz 13 - Introdução

1. Qual a principal função de Bibliotecas e Design Systems?
Função incorreta A
Função correta
Função incorreta B
2. Qual atalho é usado para esta ferramenta?
Ctrl + A
Tecla correta
Alt + F4

Quiz 14 - Introdução

1. Qual a principal função de Prototipagem: Navegação e Interações?
Função incorreta A
Função correta
Função incorreta B
2. Qual atalho é usado para esta ferramenta?
Ctrl + A
Tecla correta
Alt + F4

Quiz 15 - Introdução

1. Qual a principal função de Animações (Smart Animate) e Microinterações?
Função incorreta A
Função correta
Função incorreta B
2. Qual atalho é usado para esta ferramenta?
Ctrl + A
Tecla correta
Alt + F4

Quiz 16 - Introdução

1. Qual a principal função de Hand-off para Desenvolvedores e Exportação?
Função incorreta A
Função correta
Função incorreta B
2. Qual atalho é usado para esta ferramenta?
Ctrl + A
Tecla correta
Alt + F4

Slides

Slides das Aulas

Abaixo você encontra os slides de todas as aulas:

Introdução ao Design de Interfaces e Instalação

Aula 01

Objetivos

  • Entender Introdução ao Design de Interfaces e Instalação
  • Dominar as ferramentas do Figma
  • Aplicar em projetos reais

Conceito Principal

Definição do conceito...

  • Ponto 1
  • Ponto 2
  • Ponto 3

Demonstração no Figma

[!NOTE] Acompanhe a demonstração prática.

  1. Selecione a ferramenta
  2. Aplique a propriedade
  3. Veja o resultado

Resumo

  • Recapitulando ponto A
  • Recapitulando ponto B

Próxima Aula: ...

Explorando a Interface do Figma

Aula 02

Objetivos

  • Entender Explorando a Interface do Figma
  • Dominar as ferramentas do Figma
  • Aplicar em projetos reais

Conceito Principal

Definição do conceito...

  • Ponto 1
  • Ponto 2
  • Ponto 3

Demonstração no Figma

[!NOTE] Acompanhe a demonstração prática.

  1. Selecione a ferramenta
  2. Aplique a propriedade
  3. Veja o resultado

Resumo

  • Recapitulando ponto A
  • Recapitulando ponto B

Próxima Aula: ...

Ferramentas Básicas: Formas e Vetores

Aula 03

Objetivos

  • Entender Ferramentas Básicas: Formas e Vetores
  • Dominar as ferramentas do Figma
  • Aplicar em projetos reais

Conceito Principal

Definição do conceito...

  • Ponto 1
  • Ponto 2
  • Ponto 3

Demonstração no Figma

[!NOTE] Acompanhe a demonstração prática.

  1. Selecione a ferramenta
  2. Aplique a propriedade
  3. Veja o resultado

Resumo

  • Recapitulando ponto A
  • Recapitulando ponto B

Próxima Aula: ...

Manipulação de Textos e Tipografia

Aula 04

Objetivos

  • Entender Manipulação de Textos e Tipografia
  • Dominar as ferramentas do Figma
  • Aplicar em projetos reais

Conceito Principal

Definição do conceito...

  • Ponto 1
  • Ponto 2
  • Ponto 3

Demonstração no Figma

[!NOTE] Acompanhe a demonstração prática.

  1. Selecione a ferramenta
  2. Aplique a propriedade
  3. Veja o resultado

Resumo

  • Recapitulando ponto A
  • Recapitulando ponto B

Próxima Aula: ...

Teoria das Cores e Aplicação no Figma

Aula 05

Objetivos

  • Entender Teoria das Cores e Aplicação no Figma
  • Dominar as ferramentas do Figma
  • Aplicar em projetos reais

Conceito Principal

Definição do conceito...

  • Ponto 1
  • Ponto 2
  • Ponto 3

Demonstração no Figma

[!NOTE] Acompanhe a demonstração prática.

  1. Selecione a ferramenta
  2. Aplique a propriedade
  3. Veja o resultado

Resumo

  • Recapitulando ponto A
  • Recapitulando ponto B

Próxima Aula: ...

Gerenciamento de Estilos (Styles)

Aula 06

Objetivos

  • Entender Gerenciamento de Estilos (Styles)
  • Dominar as ferramentas do Figma
  • Aplicar em projetos reais

Conceito Principal

Definição do conceito...

  • Ponto 1
  • Ponto 2
  • Ponto 3

Demonstração no Figma

[!NOTE] Acompanhe a demonstração prática.

  1. Selecione a ferramenta
  2. Aplique a propriedade
  3. Veja o resultado

Resumo

  • Recapitulando ponto A
  • Recapitulando ponto B

Próxima Aula: ...

Trabalhando com Imagens e Máscaras

Aula 07

Objetivos

  • Entender Trabalhando com Imagens e Máscaras
  • Dominar as ferramentas do Figma
  • Aplicar em projetos reais

Conceito Principal

Definição do conceito...

  • Ponto 1
  • Ponto 2
  • Ponto 3

Demonstração no Figma

[!NOTE] Acompanhe a demonstração prática.

  1. Selecione a ferramenta
  2. Aplique a propriedade
  3. Veja o resultado

Resumo

  • Recapitulando ponto A
  • Recapitulando ponto B

Próxima Aula: ...

Auto Layout: Fundamentos

Aula 08

Objetivos

  • Entender Auto Layout: Fundamentos
  • Dominar as ferramentas do Figma
  • Aplicar em projetos reais

Conceito Principal

Definição do conceito...

  • Ponto 1
  • Ponto 2
  • Ponto 3

Demonstração no Figma

[!NOTE] Acompanhe a demonstração prática.

  1. Selecione a ferramenta
  2. Aplique a propriedade
  3. Veja o resultado

Resumo

  • Recapitulando ponto A
  • Recapitulando ponto B

Próxima Aula: ...

Auto Layout: Avançado e Responsividade

Aula 09

Objetivos

  • Entender Auto Layout: Avançado e Responsividade
  • Dominar as ferramentas do Figma
  • Aplicar em projetos reais

Conceito Principal

Definição do conceito...

  • Ponto 1
  • Ponto 2
  • Ponto 3

Demonstração no Figma

[!NOTE] Acompanhe a demonstração prática.

  1. Selecione a ferramenta
  2. Aplique a propriedade
  3. Veja o resultado

Resumo

  • Recapitulando ponto A
  • Recapitulando ponto B

Próxima Aula: ...

Constraints e Grids

Aula 10

Objetivos

  • Entender Constraints e Grids
  • Dominar as ferramentas do Figma
  • Aplicar em projetos reais

Conceito Principal

Definição do conceito...

  • Ponto 1
  • Ponto 2
  • Ponto 3

Demonstração no Figma

[!NOTE] Acompanhe a demonstração prática.

  1. Selecione a ferramenta
  2. Aplique a propriedade
  3. Veja o resultado

Resumo

  • Recapitulando ponto A
  • Recapitulando ponto B

Próxima Aula: ...

Componentes Básicos e Instâncias

Aula 11

Objetivos

  • Entender Componentes Básicos e Instâncias
  • Dominar as ferramentas do Figma
  • Aplicar em projetos reais

Conceito Principal

Definição do conceito...

  • Ponto 1
  • Ponto 2
  • Ponto 3

Demonstração no Figma

[!NOTE] Acompanhe a demonstração prática.

  1. Selecione a ferramenta
  2. Aplique a propriedade
  3. Veja o resultado

Resumo

  • Recapitulando ponto A
  • Recapitulando ponto B

Próxima Aula: ...

Variantes e Propriedades de Componentes

Aula 12

Objetivos

  • Entender Variantes e Propriedades de Componentes
  • Dominar as ferramentas do Figma
  • Aplicar em projetos reais

Conceito Principal

Definição do conceito...

  • Ponto 1
  • Ponto 2
  • Ponto 3

Demonstração no Figma

[!NOTE] Acompanhe a demonstração prática.

  1. Selecione a ferramenta
  2. Aplique a propriedade
  3. Veja o resultado

Resumo

  • Recapitulando ponto A
  • Recapitulando ponto B

Próxima Aula: ...

Bibliotecas e Design Systems

Aula 13

Objetivos

  • Entender Bibliotecas e Design Systems
  • Dominar as ferramentas do Figma
  • Aplicar em projetos reais

Conceito Principal

Definição do conceito...

  • Ponto 1
  • Ponto 2
  • Ponto 3

Demonstração no Figma

[!NOTE] Acompanhe a demonstração prática.

  1. Selecione a ferramenta
  2. Aplique a propriedade
  3. Veja o resultado

Resumo

  • Recapitulando ponto A
  • Recapitulando ponto B

Próxima Aula: ...

Prototipagem: Navegação e Interações

Aula 14

Objetivos

  • Entender Prototipagem: Navegação e Interações
  • Dominar as ferramentas do Figma
  • Aplicar em projetos reais

Conceito Principal

Definição do conceito...

  • Ponto 1
  • Ponto 2
  • Ponto 3

Demonstração no Figma

[!NOTE] Acompanhe a demonstração prática.

  1. Selecione a ferramenta
  2. Aplique a propriedade
  3. Veja o resultado

Resumo

  • Recapitulando ponto A
  • Recapitulando ponto B

Próxima Aula: ...

Animações (Smart Animate) e Microinterações

Aula 15

Objetivos

  • Entender Animações (Smart Animate) e Microinterações
  • Dominar as ferramentas do Figma
  • Aplicar em projetos reais

Conceito Principal

Definição do conceito...

  • Ponto 1
  • Ponto 2
  • Ponto 3

Demonstração no Figma

[!NOTE] Acompanhe a demonstração prática.

  1. Selecione a ferramenta
  2. Aplique a propriedade
  3. Veja o resultado

Resumo

  • Recapitulando ponto A
  • Recapitulando ponto B

Próxima Aula: ...

Hand-off para Desenvolvedores e Exportação

Aula 16

Objetivos

  • Entender Hand-off para Desenvolvedores e Exportação
  • Dominar as ferramentas do Figma
  • Aplicar em projetos reais

Conceito Principal

Definição do conceito...

  • Ponto 1
  • Ponto 2
  • Ponto 3

Demonstração no Figma

[!NOTE] Acompanhe a demonstração prática.

  1. Selecione a ferramenta
  2. Aplique a propriedade
  3. Veja o resultado

Resumo

  • Recapitulando ponto A
  • Recapitulando ponto B

Próxima Aula: ...

Configuração

Configuração do Ambiente

Instalação do Figma

  1. Baixe o Figma em figma.com/downloads.
  2. Instale no seu sistema operacional (Windows, macOS).
  3. Crie uma conta gratuita.

Fontes

Recomendamos instalar as fontes: - Inter - Roboto - Poppins

Instalação do Figma (Windows/macOS)

  1. Acesse figma.com/downloads.
  2. Baixe a versão Desktop App para seu sistema.
  3. Execute o instalador e faça login na sua conta.

Instalação do Figma (Linux)

O Figma não possui cliente oficial para Linux, mas você pode usar:

  1. Figma-Linux (Não oficial): Disponível via Snap ou .deb/rpm.
  2. Navegador: O Figma roda perfeitamente no Chrome ou Firefox.

Sobre

Sobre o Curso

Este é o módulo de Design de Interfaces com Figma, parte da trilha de desenvolvimento e design profissional.

🎯 Missão

Capacitar novos designers a criar interfaces que não apenas pareçam boas, mas que funcionem perfeitamente, unindo estética visual com fundamentos sólidos de sintaxe, Gestalt e arquitetura de informação.

👤 Instrutor

Ricardo Especialista em design e desenvolvimento, com foco em criar experiências digitais impactantes e acessíveis.

© 2026 Ricardo - Todos os direitos reservados.

Project Roadmap: Reestruturação Figma

🚩 Marcos Alcançados

  • [x] Definição das novas diretrizes didáticas (16 aulas).
  • [x] Plano de Implementação aprovado.
  • [x] Limpeza de metadados legados (Python/Backend).

🗺 Cronograma de Execução

Fase 1: Fundação

  • [x] Atualização do README e Plano de Ensino.
  • [/] Reestruturação dos menus e navegação inicial.
  • [ ] Implementação do layout de cards em todos os índices.

Fase 2: Conteúdo 16x16

  • [ ] Expansão das 16 aulas com Mermaid, Termynal e Visual "WOW".
  • [ ] Geração dos 16 conjuntos de Exercícios (Básico, Intermediário, Desafio).
  • [ ] Geração dos 16 Mini-projetos.
  • [ ] Criação dos 16 Quizzes (10 questões cada).

Fase 3: Visual e Slides

  • [ ] Padronização dos slides Reveal.js com 20+ slides por aula.
  • [ ] Inclusão de animações e transições modernas.

Fase 4: Finalização e Deploy

  • [ ] Testes de build e links internos.
  • [ ] Configuração de CI/CD para GitHub Pages (gh-pages).
  • [ ] Geração do walkthrough final.

Materiais de Apoio

Aqui você encontra links úteis para o curso:

Versão para Impressão

Esta página contém todo o conteúdo do curso em uma única visualização para impressão.