> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Importer depuis Figma
> Transformez vos designs Figma en applications et pages fonctionnelles. Importez un cadre pour démarrer une nouvelle application, ou ajoutez des pages Figma à une application existante à tout moment dans l'éditeur d'application.
Base44 se connecte à Figma pour vous permettre de créer directement à partir de vos designs. Importez un cadre Figma pour démarrer une nouvelle application, ou ajoutez des pages depuis Figma à une application existante à n'importe quel moment du développement.
* **Poste Figma :** vous devez disposer d'un poste Editor. Figma bloque l'accès API pour les comptes View et Collaborator.
* **Fichier Design :** vous devez utiliser un fichier Figma Design. FigJam, Slides et les autres types de fichiers ne sont pas pris en charge.
* **Lien de cadre public :** votre lien de cadre doit être défini sur **Anyone with the link – Can view**. Dans Figma, cliquez sur **Share** pour le mettre à jour. Vous pouvez le repasser en privé après l'import.
Vous pouvez connecter un compte Figma par espace de travail.
***
## Démarrer une nouvelle application depuis Figma
Utilisez **Import from Figma** sur l'écran d'accueil pour transformer un cadre Figma en une nouvelle application Base44. Base44 recrée la mise en page, la structure et le style visuel de votre design comme point de départ.
**Pour démarrer une nouvelle application depuis un design Figma :**
1. Allez sur [Base44](https://base44.com).
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**.
L'import se concentre sur le cadre ou la section sélectionnée. Les autres parties du fichier Figma ne sont pas incluses sauf si vous les importez séparément.
***
## Ajouter une page depuis Figma
Une fois votre application dans l'éditeur, vous pouvez ajouter des cadres Figma comme nouvelles pages à tout moment. Vous n'êtes pas limité à l'import initial. Un accès Editor est requis pour ajouter des pages depuis Figma. Les Viewers ne peuvent pas ajouter de pages, et vous devez attendre la fin d'une génération en cours avant d'ajouter une page.
**Pour 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
Préparer votre fichier Figma avant l'import aide Base44 à lire votre design et à le recréer sous forme de mise en page propre et fidèle. Suivez ces consignes pour obtenir les meilleurs résultats.
### Structurer votre mise en page Figma
Une structure claire dans Figma facilite la création par Base44 d'une mise en page responsive qui correspond à votre intention.
Une page d'accueil bien structurée avec des sections claires et des composants cohérents donne les meilleurs résultats lorsque vous étendez le design à une application complète.
* **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
Nettoyer les éléments vectoriels avant l'import rend le positionnement et le rendu plus précis. Aplatir et simplifier les vecteurs réduit les surprises sur l'alignement, la mise à l'échelle et le rendu une fois dans Base44.
* **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
Certaines parties de votre design Figma sont adaptées à l'import pour que la mise en page obtenue fonctionne de manière fiable dans Base44.
* **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.
Si votre design s'appuie fortement sur des effets non pris en charge ou des configurations complexes de variables, attendez-vous à des différences visuelles après l'import et prévoyez d'affiner le résultat dans Base44.
### Construire le reste de votre application
Une fois votre cadre Figma importé, vous pouvez traiter la nouvelle page comme la base d'une application ou d'un site complet.
* 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.
**Vous pouvez utiliser un prompt comme :**
> `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.`
Si vous voyez des motifs répétés dans votre design importé (comme des cartes, des rangées de fonctionnalités ou des blocs d'appel à l'action), mentionnez-les dans votre prompt pour que l'IA puisse réutiliser ces motifs sur les nouvelles pages.
Cette page a été traduite à l'aide de l'IA. Pour les informations les plus précises et à jour, consultez la [version anglaise](/).