Aller au contenu

Mapping du Design System — Bricks (BRI-299)

Livrable #1 du ticket BRI-299. Cartographie des composants et tokens disponibles pour la génération de prototypes Figma en langage naturel. Fichier Figma source : 🎨 Uimmo — yEPrXyd3donmRXv4K7kHtN. Dernière exploration : 2026-06-03.

Cette page liste les noms de composants et les tokens. Les clés exactes (componentKey, clés de propriétés), le cookbook d'assemblage et les pièges MCP sont capitalisés dans le skill Claude Code figma-bricks-proto (versionné dans le repo) et repris côté Cursor dans .cursor/rules/figma-proto.mdc.

1. Bibliothèques

Bibliothèque Rôle Statut
🎨 Uimmo Design system mobile : atomes (boutons, inputs…) + composants métier ✅ branchée, source principale
🧱 Investors Composants/écrans assemblés spécifiques app investisseurs ✅ branchée
🖥️ WebApp Ancien DS desktop (2024-2025) disponible, à éviter (legacy)

⚠️ Pour la génération, privilégier Uimmo + Investors. Ignorer WebApp (doublons obsolètes) et les kits publics (Material 3, iOS, etc.).

2. Tokens (l'ADN visuel)

Couleurs sémantiques (chaque état a une rampe Background100→700 + Text) : - Marque Bricks : brandText #ec5223 (orange), brandBackground100 #fde6d7, brandBackground400 #f07141 - Success #16b374 · Alert #d72746 · Info #3280c2 · Pending #a66be1 - Neutres : neutralBackground50 #faf9f8 → 400 #c7c7c7, defaultHeading #13273e, nonInteractiveBorder #eceae8, Core/white #ffffff

Typographie : police Inter — Text/sm 12px/500, Text/md 14px/500 (lineHeight ~1.5)

Espacements / rayons : 2xs=4 · sm=8 · xs=12 · md=20 · lg=24 · full=9999

3. Composants par catégorie

Boutons & actions

Button, buttonCircle, filterButton, Feedback button, valueButton, autoCompleteButton (suggestions de montant), autocomplete buttons group, BottomCTA, bottomActionSheet → Investors : walletButton, walletMoneyButtons, Item button

Saisie (formulaires)

TextInput, numberInput (montant d'invest.), textArea, searchBar, numberInputWithController, numberInputGroupMiniCalc, inputHintText, numberInputHintText, Checkbox, Switch, switchItem, Taxation switch, selectCard

Statut & feedback

Badge (6 états × 3 styles × 2 tailles), badgeIcon, notifChip, tag (+ tag-2, tag-right, tag-cross, like-tag, user-tag), Toast, Helper, AlertDialog, topBar (bannière)

Overlays & modales

Modale, ConfirmModale, bottomSheet, headerSheet, handleBar, PopoverTooltip, menu, DropdownMenu, HeaderMenuList

Navigation & structure de page

Header (variants Ghost/Plain), BottomBarNavigation, safeArea, Tab, TimeLine → Investors : tabBar, tabBarItem, Header section

Cartes & listes

card, cards, newsCard, clickableCard, clickableCardInline, keyPointCard, security-card, selectCard, newCardItem, ListItem, To do list, transactionItem, transactionCategoryIcon → Investors : Properties Cards, PropertyCard - ComingCollectMini, ProjectCard - Upcoming investment, Playful item

Data viz

chart (plusieurs), chart-square, presention-chart, diagram, ProgressBar, percentage-circle, percentage-square → Investors : Progression tick, progressLifeProjectIndicator

Métier (investissement immobilier Bricks)

InvestmentInfo, InvestmentScoring, InvestmentInfoAndScoring, PropertyCriterias, RentaType, BricksersCount, BricksPossessed, propertyBottomBar (7 états de financement), auto-invest → Investors : investmentSimulation, investmentItemSubtitle, hasBricksInvested

Iconographie

Large set d'icônes (style Iconsax) : wallet-*, empty-wallet-*, card-*, money-*, chart-*, arrow-*, etc.

4. Observations clés pour la génération auto

  1. Nommage des variantes ultra-régulier : State=… , Style=… , Size=…. Idéal pour qu'un agent choisisse la bonne variante par props.
  2. Beaucoup de composants ont une description dans Figma (règles d'usage, ex. Modale ≥641px, safeArea, propertyBottomBar) → contexte exploitable directement par l'agent.
  3. DS orienté mobile (bottomSheet, safeArea, BottomBarNavigation) → les premiers prototypes V0 seront des écrans mobiles.
  4. Couche métier riche : pour l'exemple du ticket (confirmation d'investissement), les briques existent déjà → InvestmentInfo, numberInput, BottomCTA, ProjectCard, propertyBottomBar.

5. Limites identifiées

  • L'API Figma ne liste pas les pages composants (seulement Cover/Logo) → on passe par search_design_system (mono-mot) ou les node-ids.
  • Doublons inter-bibliothèques (Uimmo vs WebApp) → toujours filtrer sur Uimmo/Investors.
  • Inventaire issu de recherches par mots-clés : exhaustif sur les grandes catégories, mais un composant au nom inattendu peut manquer. À compléter au fil de l'eau.

Voir aussi

  • .cursor/rules/figma-proto.mdc — comportement IA pour générer un proto Figma depuis du langage naturel (intégration Cursor de BRI-299).
  • .cursor/rules/design.mdc — lentille Product Design (parcours, états, fidélité, QA design) à appliquer avant de générer.
  • Skill Claude Code figma-bricks-proto — source canonique : logique de génération, cookbook de clés de composants, pièges MCP, tokens, patterns/limites. Versionné dans le repo.

Sources