Introduction
Pourquoi cette convention ?
Nous utilisons Claude Code avec le MCP Figma pour importer automatiquement vos maquettes dans le CMS. L'IA lit la structure de vos fichiers Figma et crée les pages, zones, colonnes et blocs en base de données - éditables immédiatement dans le back-office.
Le processus
1
Vous maquettez
Dans Figma, en nommantles calques avec des préfixes
2
Claude Code lit
Via le MCP Figma,il reçoit la structure complète
3
Il interprète
Identifie chaque élémentcomme un bloc CMS
4
Il crée en base
Pages, zones, colonnes,blocs - prêts en BO
Votre travail créatif ne change pas.
La seule différence : vous nommez vos frames et composants avec des préfixes normalisés entre crochets. Le design reste entièrement libre.
Fondamentaux
Les 5 règles d'or
Tout le système repose sur ces principes simples.
Les 5 règles
- Le préfixe est toujours entre crochets - [slider] [nav] [faq]
- Les variantes sont séparées par un pipe
|- [slider|splide] [cta|primary] - Les variantes sont cumulables - [slider|splide|rounded]
- Le reste du nom est libre (votre description) - [slider|splide|rounded] Témoignages clients
- Insensible à la casse -
[Slider]=[slider]=[SLIDER]
Anatomie d'un nom de calque
[slider|splide|rounded] Témoignages clients
Type de bloc
Variante / Template
Modificateur
Nom libre (pour vous)
Structure
Structure de page
Le CMS structure chaque page en : Page → Zones → Colonnes → Blocs. Votre maquette Figma doit refléter cette hiérarchie via l'imbrication des frames.
| Préfixe Figma | Élément CMS | Description |
|---|---|---|
| [page] | Page + Layout | Frame racine de la page. Contient toutes les zones. |
| [page|home] | Page d'accueil | Template home.html.twig, marquée comme index du site. |
| [page|cms] | Page contenu | Template cms.html.twig. Le plus courant. |
| [page|legacy] | Page légale | Pages réglementaires : mentions légales, politique de confidentialité, gestion des cookies. Template legacy.html.twig, alimenté par les informations légales du site. |
| [page|product-index] | Liste produits | Page catalogue paginée (module Catalog), template catalog/index.html.twig. |
| [page|product-view] | Fiche produit | Détail d'un produit (module Catalog), template catalog/view.html.twig. |
| [page|newscast-index] | Liste actualités | Liste paginée des articles (module Newscast), template newscast/index.html.twig. |
| [page|newscast-view] | Fiche actualité | Détail d'un article (module Newscast), template de vue du module. |
| [zone] | Zone | Section horizontale. Contient des colonnes. |
| [zone|section] | Zone <section> | Rendu HTML sémantique avec balise <section>. |
| [zone|fullwidth] | Zone pleine largeur | Pas de container, bord à bord. |
| [col] | Colonne | Grille Bootstrap (1-12). Taille déduite de la largeur dans Figma. |
Auto-détection
Les frames de premier niveau dans une page sont automatiquement interprétés comme des zones. Les frames côte à côte (auto-layout horizontal) sont interprétés comme des colonnes. Le préfixe [zone] ou [col] n'est nécessaire que pour lever une ambiguïté.
Exemple - Page d'accueil complète
Arborescence Figma
Figma Layers
[page|home] Accueil
├── [nav|fixed] Navigation principale
├── [zone|fullwidth] Hero
│ └── [slider|home] Slider Hero
│ ├── Slide 1 - Bienvenue
│ └── Slide 2 - Offre du moment
├── [zone|section] Nos services
│ ├── [title|header] Ce que nous faisons
│ ├── [col] Service 1
│ │ └── [card] Création web
│ ├── [col] Service 2
│ │ └── [card] SEO
│ └── [col] Service 3
│ └── [card] Hébergement
├── [zone|bg:dark] Chiffres clés
│ ├── [counter] +200 clients
│ ├── [counter] 15 ans d'expérience
│ └── [counter] 98% de satisfaction
├── [zone|section] Témoignages
│ └── [slider|splide|rounded] Avis clients
├── [zone] Dernières actus
│ └── [newscast|teaser] 3 derniers articles
└── [footer] Pied de page
Exemple - Page intérieure simple
Arborescence Figma
Figma Layers
[page|cms] Qui sommes-nous
├── [zone] Introduction
│ ├── [title|header] Notre histoire
│ ├── [intro] Depuis 2010, nous accompagnons...
│ └── [image] Photo équipe
├── [zone|section] Notre équipe
│ ├── [col] Jean Dupont
│ │ ├── [image|rounded] Portrait
│ │ ├── [title] Jean Dupont
│ │ └── [text] Directeur général
│ └── [col] Marie Martin
│ ├── [image|rounded] Portrait
│ ├── [title] Marie Martin
│ └── [text] Directrice créative
└── [zone] Nous contacter
├── [text] Envie d'en savoir plus ?
└── [cta|primary] Contactez-nous
Contenu
Titres & Textes
Les briques de base pour tout contenu éditorial.
| Préfixe Figma | Bloc CMS | Quand l'utiliser |
|---|---|---|
| [title] | title | Titre principal d'une section (H2, H3…) |
| [title|header] | title-header | En-tête de section complet : titre + sous-titre + chapô |
| [text] | text | Paragraphe de texte, contenu riche HTML |
| [intro] | layout-intro | Texte d'introduction / chapô (mise en forme distincte) |
| [blockquote] | blockquote | Citation mise en exergue |
Exemple - Zone éditoriale classique
Contenu éditorial
Figma
[zone|section] À propos
├── [title|header] Notre vision → BlockIntl.title + .subTitle
├── [intro] Depuis 15 ans, nous croyons que... → BlockIntl.introduction
├── [text] Lorem ipsum dolor sit amet... → BlockIntl.body (HTML)
├── [blockquote] "L'innovation est ce qui distingue..."
└── [text] Suite du contenu...
Médias
Images & Médias
Images, vidéos, galeries - les médias sont importés automatiquement depuis Figma et rattachés aux entités Media du CMS.
| Préfixe Figma | Bloc CMS | Quand l'utiliser |
|---|---|---|
| [image] | media | Image seule (photo, illustration) |
| [image|rounded] | media + radius | Image avec coins arrondis (portrait, avatar…) |
| [video] | video | Vidéo embed (YouTube, Vimeo, MP4) |
| [gallery] | Gallery (3 cols) | Grille d'images, 3 colonnes par défaut |
| [gallery|popup] | Gallery + lightbox | Galerie avec ouverture plein écran au clic |
| [gallery|3cols] | Gallery 3 colonnes | Explicite : 3 colonnes |
| [gallery|4cols] | Gallery 4 colonnes | Galerie plus dense |
Exemple - Zone avec galerie et vidéo
Médias
Figma
[zone|section] Nos réalisations
├── [title|header] Portfolio
├── [gallery|popup|4cols] Projets récents
│ ├── Projet Alpha.jpg ← chaque image = 1 MediaRelation
│ ├── Projet Beta.jpg
│ ├── Projet Gamma.jpg
│ └── Projet Delta.jpg
├── [separator]
├── [title] Découvrez notre processus
└── [video] Vidéo de présentation ← embed YouTube/Vimeo
Logos & image d'en-tête
Ces trois éléments sont des médias globaux du site (réglés une seule fois dans le back-office, sous Information → Logos), pas des images de contenu. Taguez-les explicitement pour que Claude Code les rattache à la bonne catégorie au lieu de les importer comme une image de bloc.
| Préfixe Figma | Catégorie CMS | Quand l'utiliser |
|---|---|---|
| [logo] | logo | Logo principal du site, affiché dans la navigation |
| [logo|footer] | footer | Logo de pied de page (souvent version monochrome / claire) |
| [image|header] | title-header | Image d'en-tête / bandeau par défaut des pages intérieures |
Médias uniques, réutilisés partout
Inutile de répéter ces tags sur chaque page : un seul [logo] et un seul [logo|footer] suffisent pour tout le site. S'ils ne sont pas tagués, Claude Code retombe sur la détection automatique (une image dans un [nav] ou [footer] est traitée comme logo), mais le tag explicite lève toute ambiguïté.
Exemple - Logos en nav / footer & bandeau de page
Logos & en-tête
Figma
[nav|fixed] Navigation principale
├── [logo] Logo principal → catégorie « logo »
└── [nav-link] Accueil
[page|cms] Qui sommes-nous
├── [image|header] Bandeau de la page → catégorie « title-header »
└── [zone] Contenu…
[footer] Pied de page
└── [logo|footer] Logo pied de page → catégorie « footer »
Interactions
Boutons / CTA
Deux familles distinctes. [btn] pour les boutons d'interface (génère les classes Bootstrap btn-*) et [cta] pour les appels à l'action mis en avant (génère les classes cta-*). Chaque famille porte ses propres variantes de style.
Boutons [btn]
Boutons d'action et d'interface. Style Bootstrap standard.
| Préfixe Figma | Style CSS généré | Rendu |
|---|---|---|
| [btn] | btn (défaut) | Bouton standard |
| [btn|primary] | btn-primary | Bouton couleur principale du site |
| [btn|secondary] | btn-secondary | Bouton couleur secondaire |
| [btn|outline] | btn-outline-primary | Bouton contour, fond transparent |
| [btn|back] | bouton retour | Retour à la page précédente |
CTA [cta]
Appels à l'action mis en avant. Génère les classes cta-* (style propre au site, distinct des boutons d'interface).
| Préfixe Figma | Style CSS généré | Rendu |
|---|---|---|
| [cta] | cta (défaut) | CTA standard |
| [cta|primary] | cta-primary | CTA couleur principale du site |
| [cta|secondary] | cta-secondary | CTA couleur secondaire |
| [cta|outline] | cta-outline | CTA contour, fond transparent |
| [cta|link] | lien simple | Texte cliquable (pas de bouton) |
| [cta|external] | lien externe | Ouvre dans un nouvel onglet |
Exemple - Zone avec CTA multiples
Call-to-action
Figma
[zone|section|bg:primary] Passez à l'action
├── [title] Prêt à démarrer votre projet ?
├── [text] Contactez-nous pour un devis gratuit...
├── [cta|primary] Demander un devis → targetStyle="cta-primary"
├── [cta|outline] En savoir plus → targetStyle="cta-outline"
└── [cta|link] Voir nos tarifs → → lien simple
Carrousels
Carrousels / Sliders
5 templates de carrousel disponibles, chacun déclinable en droit (coins carrés) ou arrondi (border-radius).
Les 5 templates
| Préfixe | Template | Comportement |
|---|---|---|
| [slider] | bootstrap | Carousel classique, 1 slide visible, effet fondu |
| [slider|splide] | splide | Multi-items : 4 desktop / 3 miniPC / 2 tablette / 1 mobile |
| [slider|banner] | banner | Bannière lente (15s), idéale pour des logos partenaires |
| [slider|home] | main-home | Slider héro plein écran pour la page d'accueil |
| [slider|two-columns] | two-columns | Slider en 2 colonnes (image + contenu texte) |
Droit vs Arrondi
DROIT - par défaut
Coins carrés, pas de border-radius
radius = falsePas de modificateur nécessaire
ARRONDI
Coins arrondis sur les images
radius = trueAjouter |rounded
Toutes les combinaisons
[slider]Bootstrap droit
[slider|rounded]Bootstrap arrondi
[slider|splide]Splide droit
[slider|splide|rounded]Splide arrondi
[slider|banner]Bannière droit
[slider|banner|rounded]Bannière arrondi
[slider|home]Hero droit
[slider|home|rounded]Hero arrondi
[slider|two-columns]2 colonnes droit
[slider|two-columns|rounded]2 colonnes arrondi
Options supplémentaires
| Modificateur | Effet | Exemple |
|---|---|---|
| items:N | Nombre d'items visibles par écran (splide) - optionnel | [slider|splide|items:3] |
| indicators | Points de pagination | [slider|splide|indicators] |
| no-controls | Masquer les flèches | [slider|banner|no-controls] |
| no-autoplay | Pas de défilement automatique | [slider|no-autoplay] |
| progress | Barre de progression | [slider|splide|progress] |
| thumbnails | Vignettes de navigation | [slider|thumbnails] |
| popup | Lightbox au clic | [slider|popup] |
| fade | Transition fondu (défaut) | [slider|fade] |
| slide | Transition glissement | [slider|slide] |
Nombre d'items par écran (splide uniquement)
Optionnel. Sans tag, le splide affiche 4 items en desktop, 3 en miniPC, 2 en tablette, 1 en mobile. Pour forcer une valeur :
- items:N - fixe le nombre d'items en desktop, les breakpoints inférieurs s'ajustent automatiquement. Ex. [slider|splide|items:3]
- items:D-M-T-Mo - contrôle complet par breakpoint : desktop / miniPC / tablette / mobile. Ex. [slider|splide|items:4-3-2-1]
itemsPerSlide / itemsPerSlideMiniPC / itemsPerSlideTablet / itemsPerSlideMobile, toujours modifiables ensuite dans le back-office.
Exemple - Slider héro (droit)
Hero Slider
Figma
[slider|home] Hero principal ← template=main-home, radius=false
├── Slide 1
│ ├── Image hero printemps.jpg ← SliderMediaRelation
│ ├── [title] Bienvenue chez Félix ← MediaRelation.title
│ └── [cta|primary] Découvrir nos services ← MediaRelation.targetLink
└── Slide 2
├── Image hero offre.jpg
├── [title] Offre spéciale été
└── [cta|secondary] En profiter
Exemple - Témoignages multi-items (arrondi)
Splide arrondi
Figma
[slider|splide|rounded|indicators] Témoignages clients
├── Slide - Jean D. ← radius=true sur chaque slide
│ ├── [image|rounded] Portrait
│ └── [text] "Très satisfait du service..."
├── Slide - Marie M.
│ ├── [image|rounded] Portrait
│ └── [text] "Service impeccable..."
├── Slide - Pierre L.
│ └── ...
└── Slide - Sophie B.
└── ...
Exemple - Logos partenaires (bannière arrondi, sans flèches)
Banner arrondi
Figma
[slider|banner|rounded|no-controls] Nos partenaires
├── Logo partenaire 1.png
├── Logo partenaire 2.png
├── Logo partenaire 3.png
└── Logo partenaire 4.png
Composants
Cards (fiches)
Bloc composite : image + titre + texte + CTA. Le composant le plus courant pour présenter des services, produits ou articles en grille.
| Préfixe Figma | Bloc CMS | Description |
|---|---|---|
| [card] | card | Fiche standard (coins droits) |
| [card|rounded] | card + radius | Fiche avec coins arrondis et ombre |
Exemple - Grille de services (3 colonnes)
Cards en grille
Figma
[zone|section] Nos services
├── [title|header] Ce que nous proposons
├── [col] Col 1 ← auto-détecté comme col-md-4 (1/3)
│ └── [card|rounded] Création web
│ ├── [image] illustration-web.jpg → BlockMediaRelation
│ ├── [title] Création de site internet → BlockIntl.title
│ ├── [text] Sites vitrines, e-commerce... → BlockIntl.body
│ └── [cta|primary] En savoir plus → BlockIntl.targetLink
├── [col] Col 2
│ └── [card|rounded] SEO
│ ├── [image] illustration-seo.jpg
│ ├── [title] Référencement naturel
│ ├── [text] Optimisation on-page...
│ └── [cta|primary] En savoir plus
└── [col] Col 3
└── [card|rounded] Hébergement
├── [image] illustration-hosting.jpg
├── [title] Hébergement & maintenance
├── [text] Serveurs sécurisés...
└── [cta|primary] En savoir plus
Composants
FAQ / Accordéon
Accordéon de questions/réponses avec données structurées SEO (Schema.org) générées automatiquement.
| Préfixe Figma | Entité CMS | Description |
|---|---|---|
| [faq] | Module Faq | Accordéon classique (1 ouverte à la fois) |
| [faq|all-open] | Module Faq | Toutes les réponses visibles par défaut |
| [faq|all-closed] | Module Faq | Toutes fermées par défaut |
| [faq|no-microdata] | Module Faq | Sans données structurées SEO |
| [faq-question] | Entité Question | Chaque paire question/réponse |
Exemple - FAQ complète
FAQ
Figma
[zone|section] Questions fréquentes
├── [title|header] Vos questions, nos réponses
└── [faq] FAQ principale
├── [faq-question] Comment passer commande ?
│ └── Vous pouvez commander directement → QuestionIntl.body
│ sur notre site, 24h/24. Il vous suffit
│ de créer un compte et...
├── [faq-question] Quels sont les délais de livraison ?
│ └── Comptez 48h ouvrées en moyenne pour
│ la France métropolitaine...
├── [faq-question] Comment retourner un article ?
│ └── Vous disposez de 14 jours pour nous
│ retourner tout article non utilisé...
└── [faq-question] Proposez-vous un SAV ?
└── Oui, notre équipe SAV est disponible
du lundi au vendredi de 9h à 18h...
Contenu des questions
Le nom du calque [faq-question] devient le titre (la question affichée). Le contenu texte à l'intérieur du frame devient la réponse.
Modules
Modules spécialisés
Fonctionnalités métier du CMS. Le préfixe indique à Claude Code quel module instancier.
Onglets
| Préfixe Figma | Module CMS | Description |
|---|---|---|
| [tab] | Tab horizontal | Onglets en haut, contenu en dessous |
| [tab|vertical] | Tab vertical | Onglets à gauche, contenu à droite |
| [tab|accordion] | Tab accordéon | Version dépliable |
| [tab-content] | Content | Contenu d'un onglet individuel |
Onglets
Figma
[tab] Nos formules
├── [tab-content] Formule Starter
│ ├── [title] Starter - 490€/mois
│ ├── [text] Idéal pour débuter...
│ └── [cta|primary] Choisir cette formule
├── [tab-content] Formule Pro
│ └── ...
└── [tab-content] Formule Enterprise
└── ...
Formulaires
| Préfixe Figma | Bloc CMS | Type de champ |
|---|---|---|
| [form] | Module Form | Conteneur du formulaire |
| [form|step] | Module StepForm | Formulaire multi-étapes |
| [form-field|text] | form-text | Champ texte simple |
| [form-field|email] | form-email | Champ email |
| [form-field|phone] | form-phone | Champ téléphone |
| [form-field|textarea] | form-textarea | Zone de texte multiligne |
| [form-field|select] | form-choice-type | Liste déroulante |
| [form-field|checkbox] | form-checkbox | Case à cocher |
| [form-field|file] | form-file | Upload de fichier |
| [form-field|date] | form-date | Sélecteur de date |
| [form-field|gdpr] | form-gdpr | Consentement RGPD (obligatoire) |
| [form-field|submit] | form-submit | Bouton d'envoi |
Champ obligatoire ou facultatif
Par défaut, un champ est facultatif. Pour le rendre obligatoire, on ajoute le modificateur required à la fin de ses variantes : un champ email facultatif [form-field|email] devient obligatoire en écrivant [form-field|email|required].
| Modificateur | Propriété CMS | Exemple |
|---|---|---|
| required | FieldConfiguration.required = true | [form-field|email|required] |
| (aucun) | FieldConfiguration.required = false (défaut) | [form-field|text] |
Champ obligatoire vs facultatif
Figma
[form] Formulaire de contact
├── [form-field|text|required] Nom → required=true, validé à l'envoi
├── [form-field|email|required] Email → required=true
├── [form-field|phone] Téléphone → required=false (facultatif, défaut)
├── [form-field|gdpr] J'accepte la politique... → toujours obligatoire
└── [form-field|submit] Envoyer
Par défaut, un champ est facultatif
Sans modificateur,
required = false. Le tag required bascule le champ en obligatoire et active la validation côté formulaire. Le champ [form-field|gdpr] reste toujours obligatoire, qu'on l'indique ou non. required se cumule avec les autres variantes : [form-field|email|required], [form-field|textarea|required].
Formulaire
Figma
[zone|section] Contact
├── [title|header] Contactez-nous
└── [form] Formulaire de contact
├── [form-field|text|required] Nom → obligatoire
├── [form-field|text] Prénom → facultatif
├── [form-field|email|required] Email → obligatoire
├── [form-field|phone] Téléphone
├── [form-field|select] Sujet
├── [form-field|textarea|required] Votre message → obligatoire
├── [form-field|gdpr] J'accepte la politique...
└── [form-field|submit] Envoyer
Index & Listes (Actualités, Produits…)
| Préfixe Figma | Action CMS | Description |
|---|---|---|
| [newscast|index] | Newscast index | Liste paginée de toutes les actualités |
| [newscast|teaser] | Newscast teaser | Aperçu des 3-4 derniers articles |
| [newscast|teaser|slider] | Newscast teaser slider | Dernières actus en carrousel |
| [catalog|index] | Catalog index | Grille de produits avec filtres |
| [catalog|teaser] | Catalog teaser | Sélection de produits vedettes |
| [catalog|teaser|slider] | Catalog teaser slider | Produits en carrousel |
| [portfolio|index] | Portfolio | Grille de réalisations |
| [recruitment|index] | Recruitment | Liste d'offres d'emploi |
Filtres sur un index
Par défaut, un index ne présente aucun formulaire de filtres. Ajouter le modificateur filters sur l'action d'index pour afficher le filtre par catégorie : [newscast|index|filters].
| Modificateur | Propriété CMS | Exemple |
|---|---|---|
| filters | Listing.displayFilters = true | [newscast|index|filters] |
| filters-inline | Listing.filtersInline = true | [newscast|index|filters|filters-inline] |
Deux affichages possibles pour les filtres
filters active le formulaire de filtres de l'index (filtre par catégorie). Par défaut, il s'affiche sous forme de menu déroulant avec recherche. En ajoutant filters-inline, les filtres passent en ligne (boutons / chips de catégories côte à côte). Ces modificateurs s'appliquent à n'importe quel index : [newscast|index|filters], [catalog|index|filters|filters-inline], [portfolio|index|filters].
Index d'actualités avec filtres
Figma
[page|newscast-index] Toutes nos actualités
└── [zone|section] Liste des articles
├── [title|header] Nos actualités
└── [newscast|index|filters|filters-inline] Articles filtrables → displayFilters=true, filtersInline=true
Index produits avec filtres
Figma
[page|product-index] Tous nos produits
└── [zone|section] Catalogue
├── [title|header] Notre catalogue
└── [catalog|index|filters|filters-inline] Produits filtrables → displayFilters=true, filtersInline=true
Actualités
Figma
[zone|section] Nos actualités
├── [title|header] Les dernières nouvelles
├── [newscast|teaser] Aperçu blog ← affiche les 3 derniers articles
│ ├── Article 1 - aperçu visuel (maquetter le rendu souhaité)
│ ├── Article 2 - aperçu visuel
│ └── Article 3 - aperçu visuel
└── [cta|primary] Voir toutes les actualités
Autres modules
| Préfixe Figma | Module CMS | Description |
|---|---|---|
| [contact] | Contact | Bloc coordonnées (adresse, tél, email) |
| [map] | Map | Carte interactive (OpenStreetMap/Google) |
| [map|contact] | Map contact | Carte avec template contact |
| [agenda] | Agenda | Calendrier d'événements |
| [timeline] | Timeline | Frise chronologique |
| [table] | Table | Tableau de données |
| [newsletter] | Newsletter | Formulaire d'inscription newsletter |
| [search] | Search | Barre ou page de recherche |
| [separator] | separator | Ligne de séparation |
| [counter] | counter | Chiffre clé / compteur animé |
| [widget] | widget | Code personnalisé / embed |
| [share] | social-networks | Boutons de partage réseaux sociaux |
| [icon] | icon | Icône (FontAwesome) |
| [alert] | alert | Bandeau d'information / alerte |
| [collapse] | collapse | Bloc dépliable (hors FAQ) |
| [modal] | modal | Pop-up / fenêtre modale déclenchée au clic |
| [zone-nav] | zones-navigation | Navigation entre les zones de la page |
Contact + Map
Figma
[zone|section] Nous trouver
├── [col] Infos
│ ├── [title] Nos coordonnées
│ ├── [contact] Adresse & téléphone
│ └── [form] Formulaire rapide
│ ├── [form-field|text] Nom
│ ├── [form-field|email] Email
│ ├── [form-field|textarea] Message
│ ├── [form-field|gdpr] RGPD
│ └── [form-field|submit] Envoyer
└── [col] Carte
└── [map|contact] Notre localisation
Modificateurs
Modificateurs visuels transversaux
Ces modificateurs s'ajoutent à n'importe quel préfixe pour préciser le rendu. Ils se cumulent avec le pipe |.
Couleur de fond [bg]
Calqué sur l'utilitaire Bootstrap bg-*. Concerne uniquement le fond - à ne pas confondre avec la couleur du texte text:*.
| Modificateur | Propriété CMS | Exemple |
|---|---|---|
| bg:primary | backgroundColor = "bg-primary" | [zone|bg:primary] |
| bg:secondary | backgroundColor = "bg-secondary" | [zone|bg:secondary] |
| bg:dark | backgroundColor = "bg-dark" | [zone|bg:dark] |
| bg:light | backgroundColor = "bg-light" | [zone|bg:light] |
| bg:white | backgroundColor = "bg-white" | [zone|bg:white] |
| bg:#HEX | hexadecimalCode = "#HEX" | [zone|bg:#1A1A2E] |
| bg-fixed | backgroundFixed = true | [zone|bg-fixed] |
| bg-parallax | backgroundParallax = true | [zone|bg-parallax] |
Couleur de texte [text]
Calqué sur l'utilitaire Bootstrap text-*. Définit la couleur du texte (champ color), indépendamment du fond. Comme pour bg:*, la valeur référence une couleur de la palette du site et se cumule avec un fond : [zone|bg:dark|text:white].
| Modificateur | Propriété CMS | Exemple |
|---|---|---|
| text:primary | color = "text-primary" | [title|text:primary] |
| text:secondary | color = "text-secondary" | [text|text:secondary] |
| text:dark | color = "text-dark" | [title|text:dark] |
| text:light | color = "text-light" | [text|text:light] |
| text:white | color = "text-white" | [title|text:white] |
Fond et texte sont deux familles distinctes
bg:* agit sur le fond (propriété
Dans les deux cas, la valeur n'est pas figée : elle référence le slug d'une couleur de la palette du site (entité
backgroundColor, classe bg-{code}) ; text:* agit sur la couleur du texte (propriété color, classe text-{code}). Les deux sont cumulables : [zone|bg:dark|text:white].
Dans les deux cas, la valeur n'est pas figée : elle référence le slug d'une couleur de la palette du site (entité
Color, gérée dans le back-office), au format bg-{code} / text-{code}. Les raccourcis bg:* et text:* ne s'appliquent qu'aux couleurs réellement présentes dans la palette du projet. Le raccourci bg:#HEX écrit directement dans hexadecimalCode et reste valable quelle que soit la palette.
Forme & Ombre
| Modificateur | Propriété CMS | S'applique à |
|---|---|---|
| rounded | radius = true | Bloc, Card, Slider, Image, Zone, Col |
| shadow | shadow = "shadow" | Tout élément |
Visibilité responsive
| Modificateur | Effet | Exemple |
|---|---|---|
| hide-mobile | Masqué sur smartphone | [image|hide-mobile] |
| hide-tablet | Masqué sur tablette | [col|hide-tablet] |
| hide-minipc | Masqué sur petit écran / mini-PC | [col|hide-minipc] |
| hide-desktop | Masqué sur desktop | [zone|hide-desktop] |
Exemple - Combinaisons de modificateurs
Modificateurs combinés
Figma
[zone|section|bg:dark|bg-parallax|shadow] Témoignages
[card|rounded|shadow|hide-mobile] Service premium
[image|rounded|hide-mobile|hide-tablet] Illustration décorative
[cta|primary|hide-tablet|hide-minipc|hide-desktop] Appeler maintenant
[zone|fullwidth|bg:#F0E6FF] Bandeau promotion
Workflow
Bonnes pratiques & pièges à éviter
Quelques conseils pour maximiser la qualité de l'import automatisé.
À FAIRE
- Nommer chaque section de premier niveau avec un préfixe
- Utiliser l'auto-layout Figma (traduit en colonnes)
- Grouper les slides dans le frame [slider]
- Grouper les questions dans le frame [faq]
- Mettre le vrai contenu (textes, images réels)
- Garder une hiérarchie propre dans le panneau calques
- Nommer les frames de manière descriptive
- Utiliser des composants Figma pour les éléments récurrents
À ÉVITER
- Laisser les noms par défaut (
Frame 427,Group 12) - Imbriquer des zones dans des zones
- Mélanger navigation et contenu dans le même frame
- Utiliser du texte en image (illisible pour l'IA)
- Aplatir les calques (garder la hiérarchie)
- Dupliquer les préfixes inutilement
- Oublier [faq-question] dans un [faq]
- Mettre du Lorem Ipsum (le vrai texte sera importé)
Ce que le dev complète après l'import
L'import automatisé crée la structure. Ces éléments sont finalisés manuellement :
- Responsive - Ajustements des breakpoints mobile/tablette
- Animations - Non présentes dans Figma
- Logique métier - Filtres, pagination, tri des index
- SEO - Meta, canonical, Schema.org avancé
- Formulaires - Validation, emails, configuration RGPD
- Intégrations - Analytics, Brevo, APIs tierces
Référence
Cheat Sheet - Mémo rapide
Tous les préfixes en un coup d'œil. Cliquez pour copier.
Structure
[page]
[page|home]
[page|cms]
[page|legacy]
[page|product-index]
[page|product-view]
[page|newscast-index]
[page|newscast-view]
[zone]
[zone|section]
[zone|fullwidth]
[col]
Navigation
[nav]
[nav|fixed]
[nav|always-fixed]
[nav|vertical]
[nav|lateral]
[footer]
[nav-link]
[nav-link|external]
Titres & Textes
[title]
[title|header]
[text]
[intro]
[blockquote]
Médias
[image]
[image|rounded]
[video]
[gallery]
[gallery|popup]
[gallery|3cols]
[gallery|4cols]
Boutons
[btn]
[btn|primary]
[btn|secondary]
[btn|outline]
[btn|back]
CTA
[cta]
[cta|primary]
[cta|secondary]
[cta|outline]
[cta|link]
[cta|external]
Carrousels
[slider]
[slider|rounded]
[slider|splide]
[slider|splide|rounded]
[slider|banner]
[slider|banner|rounded]
[slider|home]
[slider|home|rounded]
[slider|two-columns]
[slider|two-columns|rounded]
Cards & FAQ
[card]
[card|rounded]
[faq]
[faq|all-open]
[faq|all-closed]
[faq-question]
Modules
[tab]
[tab|vertical]
[tab|accordion]
[form]
[form|step]
[contact]
[map]
[map|contact]
[newscast|index]
[newscast|teaser]
[catalog|index]
[catalog|teaser]
[portfolio|index]
[recruitment|index]
[agenda]
[timeline]
[table]
[newsletter]
[search]
[modal]
Modificateurs
rounded
shadow
bg:primary
bg:dark
bg:light
bg-parallax
text:primary
text:dark
text:white
hide-mobile
hide-tablet
hide-minipc
hide-desktop
Convention Figma SFCMS 7 - v1.0 - félixcréation - Mai 2026
Cliquez sur n'importe quel [code] pour le copier dans le presse-papier