# Lou-Ka — Kit Figma du frontend

Fichier Figma généré depuis le code source du frontend Lou-Ka déployé sur le cluster (M4M64a : ~/apps/lou-ka, www.lou-ka.com) : design system, composants, écrans desktop 1440 et mobile 390, plus les captures du site en production.

Figma ne permet pas de créer un .fig hors de l'application : le kit prend donc la forme d'un plugin de développement qui construit le fichier en une exécution (≈ 20 s), à partir des jetons de frontend/src/ka/tokens.css et des styles de frontend/src/styles.css.

# Importer dans Figma (3 minutes)

Dans Figma (application de bureau), créer un fichier vide Lou-Ka — Design system.
Menu Plugins → Development → Import plugin from manifest… et choisir plugin/manifest.json de ce dossier.
Plugins → Development → Lou-Ka — Générateur de fichier Figma. Le plugin charge les polices Google Space Grotesk, Inter et JetBrains Mono (disponibles dans Figma sans installation), puis crée les 6 pages et se ferme.
Facultatif : glisser les captures pleine page de references/full/ sur la page « ⑤ Références live » (Figma importe les JPEG directement).

Le plugin n'a aucun accès réseau (networkAccess: none) : les photos et captures sont embarquées en base64 dans plugin/code.js.

# Contenu du fichier généré

Page	Contenu
⓪ Couverture	Logo, titre, sommaire
① Fondations	Nuancier (18 couleurs + 2 filets), 21 styles typographiques, espacements `--sp-1…8`, rayons (10 / 6 / 999 / 24), bordures, 6 ombres décalées, logo « porte entrouverte » (clair, sombre, wordmark), règles d'usage. Crée aussi les styles Figma (couleur, texte, effet) et 2 collections de variables (`Lou-Ka · Couleurs`, `Lou-Ka · Dimensions`).
② Composants	Boutons (jeu de variantes : défaut / primaire / accent CTA / fantôme / connexion), chips (défaut / survol / actif / accent), badges photo, FairValueBadge (▼ ≈ ▲), pastille KA Score, jauges KA, recherche `.q-big` + critères, champs, KPI + sparkline, jauges Stats, cellules, carte d'annonce (composant + survol + recommandée + mobile), header desktop/mobile, ticker, tabbar flottante, bouton KA Agent, pagination, zone de recherche, barre de résultats, footer Groupe KA, blocs de fiche (héro, coût réel, historique, analyse de prix, carte, KA Scores, quartier).
③ Écrans · Desktop 1440	Accueil, Fiche logement, Stats, Villes — auto-layout complet, contenu réel (annonce 719 5e Avenue, chiffres live du 2026-09-04).
④ Écrans · Mobile 390	Les mêmes 4 écrans + menu plein écran + feuille de critères ; repère du pli à 844 px ; tabbar, barre d'action basse et bouton KA positionnés en absolu.
⑤ Références live	10 captures du site en production (5 pages × desktop/mobile) mises à l'échelle 1440 / 390.

Les écrans sont construits avec les mêmes fonctions que les composants : modifier une fonction dans plugin/src/code.js et relancer node build.mjs régénère tout de façon cohérente.

# Dossier

text

lou-ka-figma/
├── plugin/
│   ├── manifest.json        ← à importer dans Figma
│   ├── code.js              ← GÉNÉRÉ (source + images embarquées, ≈ 2,9 Mo)
│   ├── src/code.js          ← source du générateur (éditer ici)
│   └── test/run-mock.mjs    ← exécution hors Figma sur une maquette de l'API
├── tokens/lou-ka.tokens.json← jetons W3C Design Tokens (Tokens Studio / import de variables)
├── references/
│   ├── fold/                ← captures au-dessus du pli (@2x) — embarquées
│   ├── full/                ← captures pleine page — à glisser dans Figma
│   ├── photos/              ← 12 photos d'annonces réelles (640 px) — embarquées
│   └── manifest.json        ← annonce de référence, liste des captures
├── shots.mjs                ← capture www.lou-ka.com (Playwright de ~/ka-screenshots)
└── build.mjs                ← assemble plugin/code.js

# Régénérer

bash

node shots.mjs                    # nouvelles captures + photos depuis le site live
node build.mjs                    # réassemble plugin/code.js
node plugin/test/run-mock.mjs     # vérifie que le plugin s'exécute (hors Figma)

Dans Figma, relancer le plugin dans un fichier vide (il crée des pages et des styles ; il ne nettoie pas une exécution précédente).

# Fidélité et limites

Les valeurs clamp() sont figées à leur maximum (1440 px) pour le desktop et à leur valeur 390 px pour le mobile.
Le grain de film (body::before), les flous backdrop-filter et les animations ne sont pas reproduits.
Les cartes Mapbox sont des placeholders vectoriels aux couleurs ka-maps (eau vert forêt, routes lime) ; les photos sont de vraies photos d'annonces du jour de la capture.
La création des variables échoue silencieusement sur les forfaits Figma limités ; les styles sont créés dans tous les cas.
Source de vérité du design : le code dans le repo lou-ka (spbgit). Ce kit en est une projection à la date de génération, pas l'inverse.