> ## 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 dans Base44

> Conseils pour vous aider à préparer vos designs Figma afin que la fonctionnalité Import from Figma crée des mises en page propres et précises dans Base44.

## Avant d'importer depuis Figma

Préparer correctement votre fichier Figma aide Base44 à lire votre design et à le recréer en une mise en page fonctionnelle.

* Assurez-vous de travailler dans un fichier **Figma Design**. FigJam, Slides et autres types de fichiers ne sont pas pris en charge.

  <Frame caption="Les fichiers Figma design sont pris en charge dans Base44">
    <img src="https://mintcdn.com/base44/392ibkP8vd5KkQv-/images/Figmadeisgnfiles.jpg?fit=max&auto=format&n=392ibkP8vd5KkQv-&q=85&s=5ae3cf918ed7cc0218c13cf2e67062bb" alt="Figmadeisgnfiles" width="1630" height="338" data-path="images/Figmadeisgnfiles.jpg" />
  </Frame>
* 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.

<Note>
  Import from Figma se concentre sur le cadre ou la section sélectionné. Les autres parties du fichier Figma ne sont pas apportées dans Base44 sauf si vous les importez séparément.
</Note>

***

## Structurer votre mise en page Figma

Une structure claire dans Figma facilite la construction par Base44 d'une mise en page réactive qui correspond à votre intention.

<Tip>
  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 en une application complète.
</Tip>

* **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.

  <Frame caption="Sélection de deux éléments pour auto layout dans Figma">
    <img src="https://mintcdn.com/base44/MurR_Wl5TS5X1qcL/images/selectingtwoelementsforautolayout.jpg?fit=max&auto=format&n=MurR_Wl5TS5X1qcL&q=85&s=bfc95a27db769e27148291d3592e4503" alt="Selectingtwoelementsforautolayout" width="1614" height="1062" data-path="images/selectingtwoelementsforautolayout.jpg" />
  </Frame>
* **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.

  <Frame caption="Un groupe de cadres après application de l'auto layout dans Figma">
    <img src="https://mintcdn.com/base44/bLTE_wWnl_DPdQ-A/images/Autolayout.jpg?fit=max&auto=format&n=bLTE_wWnl_DPdQ-A&q=85&s=dd70c0ccc6b6dcc9aa673a942ed88f30" alt="Autolayout" width="1614" height="1052" data-path="images/Autolayout.jpg" />
  </Frame>
* **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

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 dans la façon dont les éléments s'alignent, s'adaptent et se rendent une fois dans Base44.

* **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.

  <Frame caption="Aplatissez les vecteurs complexes en un seul vecteur dans Figma">
    <img src="https://mintcdn.com/base44/392ibkP8vd5KkQv-/images/Flattencomplexvectorsintoasinglevector.jpg?fit=max&auto=format&n=392ibkP8vd5KkQv-&q=85&s=477f4e731f164d23d51e6168e7ca53be" alt="Flattencomplexvectorsintoasinglevector" width="1626" height="1054" data-path="images/Flattencomplexvectorsintoasinglevector.jpg" />
  </Frame>
* **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.

  <Frame caption="Supprimez tous les éléments cachés dans Figma">
    <img src="https://mintcdn.com/base44/KFsdFz7i1wqax-he/images/hiddenelements.jpg?fit=max&auto=format&n=KFsdFz7i1wqax-he&q=85&s=170ab4d786073f01726b36b622a68461" alt="Hiddenelements" width="1684" height="1100" data-path="images/hiddenelements.jpg" />
  </Frame>
* **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.

  <Frame caption="Un élément avec plusieurs remplissages dans Figma">
    <img src="https://mintcdn.com/base44/K4xKJvhMiJxUbRoz/images/multiplfills.jpg?fit=max&auto=format&n=K4xKJvhMiJxUbRoz&q=85&s=2e4cfa24784a430ce87fef6ce59f002c" alt="Multiplfills" width="1698" height="1102" data-path="images/multiplfills.jpg" />
  </Frame>

***

## Polices, effets et autres limitations

Certaines parties de votre design Figma sont adaptées lors de l'import afin que la mise en page résultante 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 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.

<Warning>
  Si votre design dépend fortement d'effets non pris en charge ou de configurations de variables complexes, attendez-vous à des différences visuelles après l'import et prévoyez d'affiner le résultat dans Base44.
</Warning>

***

## 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 web complet.

* 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.

**Vous pouvez utiliser un prompt comme :**

> `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.`

<Tip>
  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.
</Tip>

<Note>Cette page a été traduite à l'aide de l'IA. Pour les informations les plus précises et à jour, consultez la [version anglaise](/). </Note>
