Figma (rebrand e telas)
Duplique o design system Kasy no Figma, troque a marca e peça para a IA implementar no Flutter.
O Kasy entrega o design system como arquivo Figma. Você duplica para sua conta, edita as variables (cores, fonte) e a IA do editor aplica no Flutter.
Duplicar para sua conta: https://www.figma.com/design/S083trj2ctFrEFNjcavtpC/Kasy-Design-System/duplicate
Figma é uma das duas opções de ferramenta de design do Kasy, a outra é o Pen (pen.dev). Os dois entregam exatamente o mesmo design system e os dois têm MCP próprio, usável em qualquer IDE. Escolha o que preferir; esta página cobre o caminho pelo Figma.
Figma é só uma das peças. A tela Design System no app espelha o código; o DESIGN_SYSTEM.md é o contrato pra IA. Papéis dos três: Design System.
Com o MCP do Kasy, o rebrand é uma conversa. Peça "faz o rebrand do meu app" e a tool rebrand_project pergunta o essencial (documento de marca, logo, tipografia, arquivo Figma), mostra um preview e só aplica depois do seu sim. As instruções saem pelo MCP, com assinatura ativa. Não são página pública nem arquivo do projeto.
Implementação
Duplicar o design system
- Abra o link de duplicate acima (conta Figma gratuita).
- Salve nos seus Drafts.
- Abra no Figma desktop ou web.
Rebrand em 4 passos
1. Abrir Variables
No Figma: Local variables → Kasy Colors (modos Light e Dark).
Página 01 Tokens no arquivo espelha Home → Design System no app.
2. Mudar sua marca
- color/accent/accent: cor principal. Comece aqui.
- color/background/background: fundo (também afeta splash).
- color/foreground/foreground: texto.
- Fonte padrão: Inter.
3. Prompt para a IA
Com o MCP do Kasy instalado, é só pedir: "faz o rebrand do meu app com base no meu Figma: [URL]". A tool rebrand_project (designTool: "figma") pergunta o que faltar, mostra um preview e só aplica depois do seu sim.
Use a tool rebrand_project do MCP do Kasy, com designTool "figma".
Meu arquivo Figma: [URL DO SEU ARQUIVO DUPLICADO]
Use Figma MCP get_variable_defs na página 01 Tokens.
Sincronize TODAS as cores em lib/core/theme/colors.dart
(KasyColors.light() e KasyColors.dark()), não só o accent.
Se o fundo mudou, atualize splash no pubspec.yaml.
Confira Design System no app (claro e escuro).
flutter analyze sem erros.Telas novas: com o Kasy MCP instalado, peça "cria a tela [nome] igual ao frame do Figma: [URL]". A tool create_screens constrói na hora.
4. Conferir no app
kasy run --webHome → Design System. Alterne claro/escuro em Configurações.
Só crie telas novas depois que o rebrand estiver certo.
Criar uma tela nova
- Desenhe no seu arquivo Figma usando as mesmas variables.
- Peça à IA para implementar o frame (fiel, funcional, componentes Kasy, i18n).
- Rode
kasy run --webe teste.
Informações
O que vem no projeto
Depois de kasy new:
| Arquivo | O que é |
|---|---|
DESIGN_SYSTEM.md | Contrato do design system pra IA/dev (não é o lugar de editar cor) |
As instruções de rebrand e de criação de telas não vêm no projeto. Saem pelo MCP, com assinatura ativa.
O design system não vem como arquivo local: ele vive na nuvem do Figma. Use o link de duplicate acima para ter sua própria cópia.
Telas do seu produto ficam em outro arquivo Figma, por exemplo Meu App.
Comandos úteis
| Comando | Para quê |
|---|---|
kasy new | Cria projeto (inclui docs Figma) |
kasy run --web | Roda no navegador |
flutter analyze | Deve ficar zerado |
Erros comuns
| Problema | O que fazer |
|---|---|
| App continua azul | Sync de todas as cores, não só accent |
| IA usou Material cru | Peça KasyButton, KasyCard, KasyTextField |
| Cor fora do mockup | Entra no design system antes do código |
| MCP no master | Duplique primeiro; edite sua cópia |
Resumo
- Rebrand nas variables Figma → IA →
lib/core/theme/. - Telas no arquivo de app → IA → fiel e funcional.
- Cor fora do DS → IA avisa, não hardcode.
Veja também Cores e Design System.
Atualizado em 03/11/2026