Wiki pour l'équipe Futée

Figma vers Elementor via UI Chemy – bonnes pratiques

Si c’est propre dans Figma, ce sera propre dans Elementor. UI Chemy traduit littéralement la structure des calques en code Flexbox/Grid.

Tout élément sur la page sans structure générera des positions absolues impossibles à gérer en responsive.

Ce qu’il faut faire dans Figma

La structure

Chaque section de la maquette doit respecter la hiérarchie sémantique du web.

En développement Web, la sémantique, c’est le fait d’utiliser le bon code pour donner du sens à ce qu’on affiche, afin que les navigateurs et les moteurs de recherche comprennent la structure de la page.

  1. Le wrapper global (section/conteneur parent) : Toujours configuré en pleine largeur (1440px ou 1920px). C’est lui qui porte la couleur ou l’image de fond.
  2. Le conteneur (.container) : Fixé à la largeur maximale du site (ex: 1320px), centré avec l’Auto Layout.
  3. Les boîtes de contenu (colonnes/éléments) : À l’intérieur du conteneur.

Maîtriser Flexbox avec l’Auto Layout

  • Le texte crée la boîte : On ne dessine pas un rectangle pour faire un bouton ou une carte. Il faut écrire le texte, puis faire Maj + A pour créer un Auto Layout autour.
  • Abuser du « Fill container » (remplir le conteneur) : Pour des grilles ou des colonnes responsives (ex: 50/50 ou 33/33/33), il faut mettre toutes les sous-boîtes en Fill container. Elles se partageront l’espace équitablement de manière fluide.
  • Gérer le bouton « en bas de boîte » : Si une carte contient une image, un titre, un texte et un bouton, et qu’on veut avoir tous les boutons alignés vers le bas, on regrouper l’image, le titre et le texte ensemble dans un sous-frame Auto Layout. On laisse le bouton seul en bas. La carte parente, configurée en auto (Space-between), poussera uniquement le bouton vers le bas.

Sémantique et éléments « modèles »

  • Utiliser les Composants : Il faut créer un composant maître pour les éléments, comme les boutons. UI Chemy reconnaîtra la structure et générera un vrai Widget bouton Elementor plutôt qu’un div.
  • Nommer les calques de manière logique : Il faut utiliser des termes clairs comme Bouton, Services, Header. Bien nommer les calques, c’est donner des indices textuels clairs à UI Chemy pour qu’il injecte le bon code HTML et les bons widgets Elementor du premier coup.
  • Intégrer le Hover dans Figma : On doit utiliser les variantes de composants et les connecter en mode Prototype avec le déclencheur « While hovering » (Au survol) et une animation Smart Animate (200-300ms). UI Chemy l’injectera directement dans l’onglet « Survol » du widget Elementor.

Configurer et respecter les colonnes dans Figma

Pour qu’on n’ait pas à redimensionner tous les blocs dans WordPress, on peut utiliser et configurer une grille de colonnes native dans Figma qui correspond exactement aux standards du web.

La configuration mathématique de la grille

Sur le Frame du conteneur de 1320px, on doit ajouter une Layout Grid avec les réglages suivants :

  • Type : Columns (Colonnes)
  • Count (Nombre) : 12
  • Type d’alignement : Stretch (S’étirer du bord gauche au bord droit du conteneur)
  • Gutter (Gouttière) : 24px
Comment aligner les éléments pour UI Chemy

Une fois la grille de 12 colonnes visible, les blocs de contenu (ex: une carte, un bloc de texte, une image) doivent s’aimanter (snapper) parfaitement sur les lignes de ces colonnes.

  • La règle des proportions : Une boîte doit toujours occuper un nombre entier de colonnes. Par exemple, une mise en page classique à trois colonnes utilisera 3 boîtes de 4 colonnes chacune.
  • Ce que UI Chemy va faire : Lorsque UI Chemy voit une boîte s’aligner pile-poil sur 4 colonnes à l’intérieur du conteneur de 1320px, il calcule le pourcentage automatiquement. À l’importation dans Elementor, il va configurer la largeur du conteneur enfant à 33.33%.
Le piège des marges manuelles

Idéalement, on ne devrait pas laisser une boîte finir « au milieu » d’une colonne ou d’une gouttière. Si une boîte fait, par exemple, 4.3 colonnes de large, UI Chemy va générer une largeur fixe bizarre en pixels (ex: 472px) au lieu d’un pourcentage fluide, ce qui va briser le responsive dans WordPress.

Ce qu’il ne faut pas faire dans Figma

  • Ne pas utiliser de groupes “simples” (Ctrl + G) : Il faut toujours utiliser des Frames avec Auto Layout (Maj + A). Les groupes simples n’ont pas de logique de flux web.
  • Ne pas forcer de dimensions fixes sur le texte : On laisse les zones de texte en hauteur Hug (Ajuster) pour que le texte puisse retourner à la ligne naturellement sans déborder de sa boîte lors des changements de résolution.

La première étape dans WordPress : configurer Elementor avant l’importation

Pour que le site reste propre, performant et facile à maintenir (sans code superflu), on doit préparer le terrain dans WordPress avant de lancer le premier import UI Chemy.

Aligner les styles du site d’Elementor sur le design system Figma

Avant toute chose, on ouvre une page Elementor vierge, on va dans le menu burger (en haut à gauche) et on sélectionne « Réglages du site » pour y configurer notre design system :

  • Couleurs globales : Enregistrer la palette exacte de la maquette Figma (Principale, Secondaire, Texte, Accent, Arrière-plan, etc.).
  • Polices globales : Configurer les familles de polices (ex: Inter, Montserrat), les graisses (Bold, Regular) et les hauteurs de ligne (Line-height) pour les styles de base (Titres H1 à H6, Texte de corps).
  • Mise en page (Layout) : Définir la Largeur du contenu de façon à ce qu’elle corresponde exactement au conteneur Figma (ex: 1320px) et définir la largeur entre les colonnes (24px si on a une grille avec des gouttières de 24px dans Figma).

Le grand nettoyage des styles locaux après l’import

Figma fonctionnant uniquement en pixels fixes, UI Chemy va appliquer les tailles et les polices de caractères de manière brute sur chaque élément lors de la conversion.

Une fois la page importée par UI Chemy, le premier réflexe de l’intégrateur doit être de « reconnecter » les éléments aux styles globaux d’Elementor.

Voici quelques exemples :

  1. Pour les titres et textes : Il faut sélectionner le widget, aller dans l’onglet Style, et vérifier la typographie et la couleur. Si UI Chemy a mis des valeurs personnalisées, il faut cliquer sur la petite icône de globe bleu pour réassigner le style global d’Elementor (ex: lier le titre H2 au style H2 Global).
  2. Pour les boutons : Même chose. On s’assure que les boutons importés utilisent les styles globaux d’Elementor plutôt qu’une couleur statique.

Pourquoi c’est important ? Si le client demande six mois plus tard de changer le bleu corporatif pour un vert, ou de grossir légèrement la police de tout le site, on sera en mesure de modifier le style à un seul endroit (dans les Réglages du site d’Elementor) et tout le site se mettra à jour instantanément.

Les limites de l’outil : Quand faut-il intégrer « à la main » ?

UI Chemy est un excellent assistant pour les structures standards, mais il atteint ses limites sur l’architecture technique.

Les en-têtes et pieds de page (Header / Footer)

  • Pourquoi : Dans Figma, le menu est statique (du texte brut). Dans WordPress, on veut un menu dynamique géré par le système.
  • Ça ne sert à rien d’intégrer le header et le footer. C’est plus efficace de le créer directement dans le Theme Builder d’Elementor pour utiliser les widgets de navigation et les conditions d’affichage globales.

La typographie responsive et les unités relatives (rem, vw)

  • Pourquoi : Figma ne jure que par les pixels (px). Il est impossible de lui dire nativement qu’un H1 fait 45px sur Desktop et 30px sur Mobile.
  • Recommandation : Laisser UI Chemy importer la taille Desktop. On devra passer rapidement dans Elementor pour réinitialiser les styles locaux afin de reconnecter les titres aux Styles Globaux d’Elementor, ou configurer les points de rupture directement dans WordPress.

Les designs asymétriques complexes

  • Exemple : Une image collée au bord gauche de l’écran qui prend exactement 40% de la largeur, tandis que le texte à droite doit rester parfaitement aligné sur la grille fixe de 1320px.
  • Pourquoi : Un robot ne comprend pas l’optimisation sémantique complexe. Il va créer deux vraies colonnes physiques (40/60), ce qui brisera l’alignement sur grand écran (ex: 1920px) ou alourdira le responsive.
  • Recommandation : On laisse UI Chemy importer le contenu brut, mais on doit reprendre le contrôle dans Elementor.