Documents
Figma
Une seule bibliothèque Figma pour toute la marque : « Forme Design System ». Ses
variables reprennent le socle @forme-ch/design-system (mêmes noms, mêmes
valeurs). Le fichier Slides « Gabarit présentation Forme » y est abonné.
| Fichier | Rôle |
|---|---|
| Forme Design System | Bibliothèque publiée : variables, styles, composants, slides de base. Seule source Figma. |
| Gabarit présentation Forme | Figma Slides : une rangée « Gabarit » de 16 slides, reconstruites depuis les slides de base. Dupliquer ce fichier pour chaque offre. |
Utiliser la bibliothèque
- Dans un fichier : panneau des bibliothèques (Assets → Libraries), activer « Forme Design System ».
- Toujours partir d'une instance de composant ; ne pas détacher, sauf les slides de base, qu'on détache pour les remplir. Une couleur se pose par variable ou par style « Marque/… », jamais par valeur hexadécimale.
- Quand la bibliothèque change, accepter la mise à jour proposée par Figma dans les fichiers abonnés, puis vérifier le texte des pastilles imbriquées.
- Les anciennes bibliothèques (« Forme ERP — Design System », « Forme website 11 », « Design system sources », « ASSETS SLIDES FORME ») ne sont plus des sources.
Pages
| Page | Contenu |
|---|---|
| Fondations | Quatre sections côte à côte : Lisez-moi, Fondations (couleurs à 3 niveaux, styles de texte, grille), Logos & pictos, Composants de présentation. |
| Présentation — slides de base | 16 composants « Slide / NN » de 1920 × 1080, point de départ de toute présentation. |
| Archive | Éléments dépréciés et anciennes planches, à ne pas utiliser. |
Slides de base
Seize composants de 1920 × 1080, sur la grille Forme (12 colonnes de 150, gouttière 8, marges 16, marge de pied 124), regroupés en quatre sections :
- 1 Ouverture — 01 Couverture · 02 Équipe · 03 Prestations · 04 Forme® Process · 05 Collaborer
- 2 Projet et offre — 06 Contexte et enjeux · 07 Déroulé du projet (nodal) · 08 Détail de phase (tableau) · 09 Récapitulatif d'offre
- 3 Références et réseau — 10 Mur de projets · 11 Partenaires · 12 Mosaïque · 13 Ils nous font confiance · 14 Distinctions
- 4 Clôture — 15 Conditions générales · 16 Contact
Les slides Process et Conditions générales sont standard : identiques pour toutes les offres, on ne les adapte pas.
Variables et styles
Trois collections de variables. La syntaxe de code de chaque variable renvoie au token CSS équivalent.
| Collection | Contenu | Code |
|---|---|---|
| Marque | Couleurs (plein, light, ultra-light), gris, Vif, rayons, espaces | var(--forme-*) |
| Interface | Clair / Sombre — neutres et tokens d'interface des apps | var(--color-*) |
| Graphiques | Clair / Sombre — séries dataviz validées | var(--dv-*) |
- Styles de couleur liés aux variables, en dossiers
Marque/Plein,Marque/Light,Marque/Ultra-lightetMarque/Neutres. - 22 styles de texte « Présentation/ », en dossiers Titres, Textes et Mono : voir Présentations.
- Deux styles de grille : « Forme Slideshow 1920×1080 · 12 col » (toutes les slides) et « · Nodal 4 col » (déroulé du projet).
Composants
- Pastille — Composant unique (ex-Étiquette, Étiquette S et Pastille) : Style Plein / Contour ; Couleur Orange, Rose, Violet, Bleu, Vert, Rouge, Noir, Blanc (contour sur fond sombre) ; Taille M (20 px), S (15 px), XS (10 px). Texte blanc sur le plein.
- Pied de page — Client, Titre, Date, Référence, Pagination ; Couleur Noir / Blanc ; calé sur la grille 12 colonnes, à y 972.
- Logo Forme — Couleur Noir / Blanc × Taille 40 / 24, toujours avec le ®.
- Personne · Argument · Award — Équipe, à faire / à éviter, distinctions.
- Carte · Icône de carte — Tuile de contenu, avec une propriété Icône (Générique, Cheffe de projet, Vision globale, Communication).
- Ligne d'offre · Total d'offre — Tableaux de phase et récapitulatif : titre, description, quantité, taux, montant.
- Process — Les cinq étapes du Forme®Process.
- Légende de projet · Video slider — Images et références.
- Nodal / Crochet de phase · Carte étape · Carte détail · Connecteur — Slide « Déroulé du projet ».
Générateur des offres
Le déroulé et les tableaux de phase d'une offre se génèrent depuis l'ERP. Claude lit l'offre
(admin.forme.ch/api/offres/<numéro>/schema-nodal ou outil MCP
get_offre_schema_nodal), puis exécute
generer-slides.js (dépôt forme-design-system, publié sur ce site avec son mode d'emploi) dans un fichier Slides abonné à la bibliothèque. Les fichiers d'offre sont nommés par numéro d'offre. Règles de mise en page : Présentations.