# Figma: rebrand y pantallas

Kasy entrega el design system como archivo **Figma** en Community. Duplícalo en
tu cuenta, edita colores y fuente, y deja que la IA sincronice Flutter.

**Enlace para duplicar:**
https://www.figma.com/design/S083trj2ctFrEFNjcavtpC/Kasy-Design-System/duplicate

Figma es solo **una** pieza. La pantalla Design System en la app refleja el
código; `DESIGN_SYSTEM.md` es el contrato para la IA (regla, no tabla de colores
para editar). En el sitio: docs → Conceptos → Design System.

---

## Qué incluye el proyecto

Después de `kasy new`:

| Archivo | Qué es |
| ------- | ------ |
| `docs/figma-guia.md` | Esta guía offline en el idioma del proyecto |
| `docs/figma-workflow.md` | Reglas para IA (inglés) |
| `DESIGN_SYSTEM.md` | Contrato del design system para IA/dev |

El design system **no** se copia como archivo local. Usa el enlace de arriba.

Las pantallas de **tu** producto van en otro archivo Figma, por ejemplo `Mi App`.

---

## Duplicar el design system

1. Abre el enlace duplicate (cuenta Figma gratuita).
2. Guarda una copia en **Drafts**.
3. Abre el archivo duplicado en Figma.

---

## Rebrand en 4 pasos

### 1. Abrir Variables

En Figma: **Local variables** → colección **Kasy Colors**.

Modos **Light** y **Dark**.

### 2. Cambiar tu marca

- **brand/primary/base:** color principal (botones CTA). En Dart:
  `context.colors.primary`. Ejemplo del kit: light `#0553B1`, dark `#2563EB`
  (bindeado en Sign In del Figma master). Enlaces en dark usan `text/link`
  (`foregroundLink`, `#4BA3FF`). Sin `brand/secondary`.
- **color/background/background** o **background/base:** fondo (también afecta
  el splash). En Dart: `context.colors.background`.
- **color/foreground/foreground** o **foreground/base:** texto principal.
- Fuentes del producto: **Poppins** (familia única: Display, headings, body/UI).
  Figma y la app usan la misma familia. Para migrar un archivo antiguo
  (Inter/Nunito), ejecuta el plugin **Kasy Poppins Sync**
  (`tools/kasy-figma-poppins-sync/`). Para regenerar tokens desde cero, usa
  **Kasy DS Generator** (`tools/kasy-figma-generator/`).

### 3. Prompt para la IA

```
Lee AGENTS.md y docs/figma-workflow.md.

Mi archivo Figma: [PEGA LA URL DE TU COPIA]
Usa Figma MCP get_variable_defs en la página 01 Tokens.

Sincroniza TODOS los colores en lib/core/theme/colors.dart
(KasyColors.light() y .dark()), no solo accent.

Si cambió el fondo, actualiza el splash en pubspec.yaml.

Verifica en Design System (claro y oscuro).
flutter analyze limpio.
```

### 4. Verificar en la app

```bash
kasy run --web
```

Ve a **Home → Design System**. Cambia tema claro/oscuro en Ajustes.

---

## Ícono, logo y favicon

Después de `kasy new`, la marca visual está en `assets/branding/`:

| Archivo | Uso | Comando |
| ------- | --- | ------- |
| `app-icon.png` | Ícono del app (iOS/Android) | `kasy icon --image ...` |
| `logo-light.png` / `logo-dark.png` | Logo en la app (login, sidebar) | `kasy splash` (sincroniza) o reemplaza el archivo |
| `splash-logo-light.png` / `splash-logo-dark.png` | Splash nativa | `kasy splash --light ... --dark ...` |
| `favicon.png` | Pestaña del browser / PWA | `kasy favicon --image ...` |

Manual: reemplaza el PNG y ejecuta `dart run flutter_launcher_icons` (ícono/favicon)
o `dart run flutter_native_splash:create` (splash). Docs:
[Ícono](https://kasy.dev/docs/personalizacao/icone),
[Splash](https://kasy.dev/docs/personalizacao/splash),
[Favicon](https://kasy.dev/docs/personalizacao/favicon).

---

## Crear una pantalla nueva

### 1. Diseñar

Crea un archivo Figma `Mi App`. Usa las **mismas variables** del design system.

### 2. Prompt para la IA

```
Lee docs/figma-workflow.md.
Mi archivo de pantallas: [URL FIGMA]
Implementa la pantalla [NOMBRE DEL FRAME].
Fiel al layout, funcional (botones, campos, navegación).
Componentes Kasy, tokens, i18n (pt, en, es).
Si algún color no existe en el design system, avísame antes de codear.
flutter analyze limpio.
```

### 3. Probar

```bash
kasy run --web
```

---

## Errores comunes

| Problema | Qué hacer |
| -------- | --------- |
| La app sigue azul | Pide sincronizar **todos** los colores, no solo accent |
| La IA usó Material crudo | Pide `KasyButton`, `KasyCard`, `KasyTextField` |
| Color distinto al mockup | Primero entra al design system, después al código |
| Texto fijo en Dart | Todo vía i18n |

---

## Resumen

1. **Rebrand** en Figma (variables) → IA → `lib/core/theme/`.
2. **Pantallas** en archivo de app → IA → fiel y funcional.
3. **Color fuera del DS** → la IA avisa, sin hardcode.

Ver también [Colores](https://kasy.dev/docs/personalizacao/cores) y
[Design System](https://kasy.dev/docs/conceitos/design-system).