Capa1120 × auto

Guia interno · DHF / TOK / Expressa / Lance

Figma no Padrão Kit

Os produtos do Figma, os estilos visuais, os métodos de trabalho e onde cada um entra nos nossos negócios. No fim, o fluxo RETOMAR → OBSERVAR adaptado para design, com checklist por projeto.

Frame = tela ou peça Componente = peça reutilizável Plano gratuito já serve para começar

Hug × Hug

01 · Produtoso que existe dentro do Figma

Tipos de arquivo e ferramentas

Filtre pelo negócio para ver onde cada ferramenta ajuda.

Figma Design

principal

O editor de telas. Frames, camadas, auto layout, componentes, protótipo clicável.

Nosso usoTelas do Kanban e calendário do Chatwoot, painel central-robos, landing pages de campanha.

FigJam

quadro branco

Quadro colaborativo: post-its, fluxogramas, votação, timer. Bom para reunião.

Nosso usoDesenhar o fluxo do robô C6 → Chatwoot → vendedor; mapa do funil de leads; programação do evento.

Figma Slides

apresentação

Apresentações feitas com os mesmos componentes do design. Exporta PDF e PPTX.

Nosso usoApresentação jurídica e operacional de eventos TOK; proposta comercial para lojas parceiras.

Figma Buzz

marketing

Gera peças em lote a partir de um modelo: troca foto, preço e texto mantendo a marca.

Nosso usoUm post por carro do estoque da Expressa com preço e "pronta entrega", trocando só os dados.

Dev Mode

programador

Modo de inspeção: medidas, cores, fontes e CSS prontos para quem vai codar.

Nosso usoPassar a tela aprovada para o Claude/Codex implementar sem chute de espaçamento e cor.

Figma Make

IA

Descreve em texto e a IA monta um protótipo funcional. Bom para rascunho rápido.

Nosso usoTestar ideia de tela antes de gastar tempo: "formulário de pré-análise EGV em 3 passos".

Figma Sites

site

Publica o design como site responsivo direto do Figma.

Nosso usoPágina de campanha de um carro ou de um evento, no ar sem programar.

Figma Draw

ilustração

Pincéis, texturas e vetores livres para ilustração e ícones próprios.

Nosso usoMascote/boneco da TOK em poses diferentes para vinhetas e stickers.

Nomes e recursos mudam com frequência. Confira no figma.com antes de assinar plano.

02 · Estilos8 linguagens visuais

Estilos visuais e quando usar

Wireframe

Caixas cinza, sem cor. Decide estrutura antes de estética. Use em toda tela nova de sistema.

Flat colorido

Formas chapadas e cores fortes. Posts de engajamento e stories da TOK.

Glassmorphism

Vidro fosco sobre gradiente. Cards de app e capas de evento. Cuidado com leitura.

Neobrutalismo

Borda preta grossa, sombra dura. Chama atenção em anúncio de oferta.

Dashboard escuro

Fundo escuro, números grandes, verde de status. Painel de robôs e de leads.

Editorial

Serifa grande, muito branco. Material jurídico, institucional, proposta.

Neumorfismo

Relevo suave. Só para botões e detalhes; contraste baixo atrapalha.

Varejo automotivo

Foto do carro, preço gigante, selo amarelo. Padrão Expressa para estoque.

03 · Métodoscomo trabalhar dentro do arquivo

Métodos que mais rendem

Auto layout

base

Caixas que crescem com o conteúdo, como flexbox. Trocou o texto, o botão se ajusta sozinho.

Componentes e variantes

◆ reuso

Um botão mestre com variantes (primário, secundário, desativado). Mudou o mestre, muda em todo lugar.

Variables (tokens)

marca

Cores, espaços e textos como variáveis. Um clique troca tema claro/escuro ou marca TOK ↔ Expressa.

Grid de 8 pt

espaço

Todo espaçamento múltiplo de 8 (8, 16, 24, 32). Acaba com o "tá meio torto".

Atomic design

organização

Átomos (cor, ícone) → moléculas (campo com rótulo) → organismos (formulário) → páginas.

Protótipo clicável

validação

Liga as telas e testa no celular com o app do Figma antes de programar.

Nomenclatura

ordem

Página ✅ Aprovado, 🚧 Em andamento, 🗄 Arquivo. Frames com nome e tamanho: Post / CS75 / 1080×1350.

Plugins úteis

atalhos

Remove BG (fundo de foto de carro), Iconify (ícones), Unsplash (fotos), Stark (contraste), html.to.design (importa site existente).

Figma + Claude

integração

Pelo servidor MCP do Figma, o Claude lê o frame aprovado e gera o código igual ao desenho.

04 · Aplicaçõesonde usar já

Aplicações nos nossos negócios

Negócio	Peça	Ferramenta	Formato	Ganho
Expressa	Post de cada carro do estoque	Buzz + componente	1080×1350	Modelo único, troca foto e preço em minutos
Expressa	Capa e legenda de Reels (CS75)	Design	1080×1920	Capa padronizada no feed
TOK	Vinheta: storyboard quadro a quadro	FigJam / Design	1080×1920	Dona aprova antes de editar o vídeo
TOK	Evento 15 anos: programação, convite, crachá	Design + Slides	A4 / 1080×1350	Muda horário em um lugar só
TOK Real / Expressa	Template WhatsApp EGV (mockup)	Design	390×844	Ver o template como o cliente vê
Lance	Criativos de anúncio Meta em variações	Buzz	1080×1080	Teste A/B rápido
DHF	Kanban, calendário, painel de robôs	Design + Dev Mode	1440×900	Tela aprovada vira código sem retrabalho
DHF	Fluxo dos robôs e do n8n	FigJam	canvas	Todo mundo entende onde o lead passa

05 · Padrão Kit7 etapas aplicadas a design

O fluxo do kit dentro do Figma

1

RETOMAR

Abrir referências e o que já existe.

Página Referências com prints, áudio transcrito e peças anteriores.

2

DELIMITAR

O que entra e o que não entra.

Um frame "Briefing": objetivo, formato, prazo, quem aprova.

3

ISOLAR

Mexer numa cópia, nunca no aprovado.

Branch do arquivo ou página 🚧 Em andamento.

4

EXECUTAR

Wireframe, depois visual, só com componentes.

Auto layout + variables da marca. Nada de cor solta.

5

VALIDAR

TDD visual contra a referência.

Lado a lado com a referência, no celular, Stark para contraste.

6

ENTREGAR

Exportar e passar adiante.

Mover para ✅ Aprovado, export PNG/PDF, link do Dev Mode.

7

OBSERVAR

Medir o resultado e anotar.

Alcance e leads da peça anotados no frame; nota no vault.

TDD visual: vermelho → verde

Vermelho: antes de mexer, liste o que a peça atual não cumpre (preço errado, texto cortado, fora da marca).
Verde: cada item corrigido e conferido quadro a quadro contra a referência.
Teste no tamanho real, no celular, com o app do Figma.

Estrutura de arquivo padrão

00 Capa: nome, dono, status, data
01 Referências
02 Componentes: botões, selos, tipografia, cores
🚧 Em andamento · ✅ Aprovado · 🗄 Arquivo

06 · Checklistsalvo neste navegador

Checklist por projeto

0/0