Importer depuis Figma dans Base44

​

Avant d’importer depuis Figma

• Assurez-vous de travailler dans un fichier Figma Design. FigJam, Slides et autres types de fichiers ne sont pas pris en charge.
  
• Sélectionnez un seul cadre ou une seule section que vous souhaitez importer. N’utilisez pas un lien de document complet ou de niveau page.
• Dans Figma, cliquez sur Share et sous Who has access, définissez le lien sur Anyone with the link – Can view. Copiez le lien du cadre ou de la section sélectionnée et collez-le dans Import from Figma dans Base44. Une fois l’import terminé, vous pouvez remettre les autorisations du fichier Figma en mode privé si vous préférez.

​

Structurer votre mise en page Figma

• Divisez la page en sections logiques : Enveloppez le contenu lié (par exemple, un hero, une rangée de fonctionnalités ou un pied de page) dans des cadres ou des groupes afin que chaque zone de la page soit clairement définie.
• Utilisez l’auto layout pour la hiérarchie : Appliquez Auto Layout aux composants tels que les cartes, barres de navigation et blocs de contenu répétitifs. Par exemple, une carte d’information avec une image, un titre et une description doit être groupée comme Frame ou Group, ou de préférence Auto Layout. Cela aide Base44 à comprendre comment les éléments se rapportent les uns aux autres et comment ils doivent être redimensionnés.
  
• Gardez l’imbrication significative : Groupez les éléments qui vont ensemble (par exemple, image + titre + description dans une carte), et évitez l’imbrication profonde et inutile qui ne reflète pas la structure visuelle.
  
• Alignez et espacez de manière cohérente : Utilisez un padding, des espaces et un alignement cohérents à l’intérieur de vos cadres afin que Base44 puisse préserver votre espacement et votre hiérarchie.

​

Travailler avec les vecteurs et les formes

• Aplatissez les vecteurs complexes : Si un vecteur est construit à partir de nombreux chemins séparés (par exemple, une icône composée de plusieurs formes), aplatissez-le en un seul vecteur chaque fois que possible.
  
• Contourez les traits avant d’aplatir : Pour les lignes, cercles, étoiles et formes similaires :
  • Utilisez Outline Stroke puis aplatissez le résultat en un seul élément vectoriel.
• Supprimez les éléments cachés : Supprimez les couches complètement cachées ou poussées loin hors du canvas afin qu’elles n’interfèrent pas avec la mise en page importée.
  
• Simplifiez les remplissages : Si un élément a plusieurs remplissages, ne gardez que ce dont vous avez réellement besoin. Base44 n’importe que le dernier remplissage d’un élément.
  

​

Polices, effets et autres limitations

• Polices :
  • Seules les Google Fonts sont entièrement prises en charge.
  • Les polices personnalisées sont remplacées par une police par défaut lors de l’import. Vous pouvez mettre à jour la typographie plus tard dans Base44.
• Effets de design qui peuvent ne pas être préservés exactement :
  • Filtres d’image
  • Plusieurs couches de fond sur un seul élément
  • Variables et styles pilotés par variables
• Raffinements de mise en page :
  • Affinez l’espacement, la réactivité et les interactions après l’import à l’aide du chat IA ou du mode Visual Edit.
  • Si quelque chose ne semble pas correct, ajustez la structure directement dans Base44 ou mettez à jour votre fichier Figma et importez à nouveau depuis un cadre plus propre.

​

Construire le reste de votre application

• Utilisez la page importée comme page d’accueil et référence principale pour la structure, la mise en page et le langage visuel.
• Demandez au chat IA de :
  • Identifier quelles pages supplémentaires manquent (par exemple, À propos, Tarifs, Blog ou Contact).
  • Créer de nouvelles pages qui suivent le même langage de design et les mêmes principes de mise en page.
  • Connecter les boutons, menus et liens sur la page d’accueil aux nouvelles pages internes.

Examine attentivement la page d'accueil, y compris son contenu et son style de design. Utilise la page d'accueil comme référence principale pour comprendre la structure et le langage de design du site web. Identifie quelles pages supplémentaires sont nécessaires pour créer un site web complet. Crée les pages manquantes tout en maintenant le même langage de design, les mêmes principes de mise en page et le même style visuel que la page d'accueil, afin qu'elles donnent l'impression d'être une suite directe et non déconnectée. Une fois terminé, retourne à la page d'accueil et connecte tous les boutons et liens pertinents afin que chacun navigue vers la page interne appropriée.