Importer depuis Figma

​

Démarrer une nouvelle application depuis Figma

1. Allez sur Base44.
2. Cliquez sur l’icône + dans la zone de prompt.
3. Cliquez sur Import from Figma.
4. Cliquez sur Connect to Figma.
5. Suivez les instructions à l’écran pour donner à Base44 l’accès à Figma.
6. Collez votre lien Figma et cliquez sur Generate.

​

Ajouter une page depuis Figma

1. Ouvrez votre application dans l’éditeur.
2. Dans le chat IA, cliquez sur l’icône + et sélectionnez Add page from Figma.
3. Dans Figma, faites un clic droit sur le cadre ou la section à importer.
4. Choisissez « Copy/Paste as », puis sélectionnez « Copy link to selection ».
5. Collez le lien dans la boîte de dialogue et cliquez sur Add page.

​

Consignes d’import depuis Figma

​

Structurer votre mise en page Figma

• Divisez la page en sections logiques : enveloppez le contenu apparenté (par exemple, une section hero, une rangée de fonctionnalités ou un pied de page) dans des cadres ou des groupes pour que chaque zone de la page soit clairement définie.
• Utilisez Auto Layout pour la hiérarchie : appliquez Auto Layout aux composants tels que les cartes, les barres de navigation et les blocs de contenu répétés. Par exemple, une carte d’info avec une image, un titre et une description doit être groupée en Frame ou Group, ou de préférence en Auto Layout. Cela aide Base44 à comprendre comment les éléments sont liés et comment ils doivent se redimensionner.
  
• Gardez une imbrication utile : groupez les éléments qui vont ensemble (par exemple, image + titre + description dans une carte) et évitez les imbrications profondes inutiles qui ne reflètent pas la structure visuelle.
  
• Alignez et espacez de manière cohérente : utilisez un padding, des espacements et des alignements cohérents dans vos cadres pour 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 composé de nombreux chemins séparés (par exemple, une icône faite de plusieurs formes), aplatissez-le en un seul vecteur dès que possible.
  
• Convertissez les traits en contours 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 calques totalement masqués ou repoussés loin du canvas pour qu’ils 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 à l’import. Vous pouvez mettre à jour la typographie plus tard dans Base44.
• Effets de design qui peuvent ne pas être préservés à l’identique :
  • Filtres d’image
  • Plusieurs calques d’arrière-plan sur un seul élément
  • Variables et styles pilotés par variables
• Affinages de mise en page :
  • Ajustez l’espacement, la responsivité et les interactions après l’import en utilisant le chat IA ou le 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 votre 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 les pages supplémentaires manquantes (par exemple, About, Pricing, 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 de la page d’accueil aux nouvelles pages internes.

Review the home page carefully, including both its content and its design style. Use the home page as the main reference to understand the website's structure and design language. Identify which additional pages are needed to create a complete website. Create the missing pages while maintaining the same design language, layout principles, and visual style as the home page, so they feel like a direct continuation and not disconnected. When finished, return to the home page and connect all relevant buttons and links so each one navigates to the appropriate internal page.