Objectif : Pour faciliter l’intégration des sites dans Elementor, l’idée est d’utiliser UIChemy pour intégrer le contenu directement depuis la maquette Figma.

Le design n’étant pas fait par des intégrateurs, il va falloir ‘préparer’ le design pour le faire correspondre autant que possible à une structure de containers et aux widgets Elementor. Il y aura nécessairement des ajustements à faire ensuite dans la page mais c’est une base intéressante.

1- Installation du plugin dans le site web concerné

• Les identifiants pour accéder au plugin UI Chemy sont dans Bitwarden Production
• Configurer le plugin en choisissant le builder (Elementor) puis cliquer sur Start Importating Design.
• Ça va rediriger sur une page dans laquelle il faudra cliquer dans la zone ‘Figma to Elementor | UIChemy’ sur ‘Install in Figma’.

2- Lier UIChemy à Figma

• Le lien va rediriger vers Figma. Se connecter avec Google, le compte production@effetfute.com (identifiants dans Bitwarden Production).
• Cliquer sur ‘Ouvrir dans’ et sélectionner le projet concerné.
•  Cliquer sur ‘Exécuter’.
• Ça va demander une Clé d’activation, qui est dans le compte UI Chemy, c’est la licence.
• Répondre aux différentes questions posées dans le widget Figma, mettre expert pour la connaissance de Figma et Elementor.

3- Adapter la structure de Design

• Commencer par Step by Step Method avec le Widget ‘Elementor Default’.
• Dupliquer la page à intégrer en ajoutant (pour intégration), pour éviter de modifier la version originale.
• Se positionner sur la page qu’on vient de dupliquer et dans le widget, choisir la page à intégrer (le plan de travail)
• Sélectionner la page qu’on vient de dupliquer.
• On peut retrouver le widget dans l’icône et ‘Figma to Elementor | UIChemy si jamais on ne le voit plus
• En Step 2, il va indiquer les éléments du design à combiner pour l’intégration. Lock All.
• Cocher ‘Manual Widget Tagging’ puis ‘Convert to Auto Layout’.
• Ça va créer un doublon avec une restructuration du contenu.
• Ajuster l’ensemble des issues.
• Faire mapper l’ensemble des éléments avec des widgets Elementor.
• Faire l’import (étape à détailler)