> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Passer de Figma à une application en direct

> Transformez des frames Figma en application Replit publiable qui respecte la mise en page, la typographie et les couleurs.

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

Vous avez déjà des écrans dans Figma. L'Agent les construit sous forme
d'application Replit en direct que vous pouvez modifier, prévisualiser et
publier : mise en page, typographie, couleurs et espacement. Le résultat est
un produit fonctionnel, pas une capture d'écran. Indiquez à l'Agent des frames
précises si le fichier contient plusieurs parcours.

## Idéal pour

* Les designers produit qui ont besoin d'une application Replit codée à partir de frames qu'ils ont déjà.
* Les fondateurs qui ont un fichier Figma et ont besoin qu'il soit en direct sans reconstruire depuis une page vide.

## Connecteurs

<Connectors
  items={[
{
  id: "figma",
  name: "Figma",
  why: "Frames, composants, typographie et couleurs à implémenter",
},
]}
/>

## Avant de commencer

Ayez un fichier Figma avec des frames nommées (accueil, produit, checkout,
etc.). Connectez Figma. Partagez le fichier avec l'Agent, ou collez le lien du
fichier et les liens des frames qui vous intéressent. Précisez s'il s'agit
d'un site marketing, d'une application, ou d'une simple page de destination.

## Invite à l'Agent

<AiPrompt>
  À partir de ce fichier Figma \[lien], construis une application Replit en
  direct à partir de ces frames : \[noms ou liens des frames]. Respecte la mise
  en page, la typographie, les couleurs, l'espacement et les points de rupture
  (desktop et mobile).
</AiPrompt>

## À quoi s'attendre

L'Agent lit les frames sélectionnées et construit des pages correspondantes que vous
pouvez publier depuis Replit. Vérifiez l'espacement, la typographie et les couleurs
par rapport à Figma. Examinez vous-même les éléments interactifs (navigation,
formulaires, survol). Ils nécessitent souvent une seconde passe. Prévisualisez sur
desktop et à une largeur de téléphone. Cliquez sur la navigation et les formulaires,
puis comparez une capture d'écran à Figma avant de publier.

## Adaptez-le à vos besoins

<AiPrompt>
  Implémente d'abord uniquement les frames mobiles. Respecte l'auto-layout et
  l'espacement de Figma. Le desktop viendra après mon approbation du mobile.
</AiPrompt>

<AiPrompt>
  Réutilise un seul composant pour les boutons, les champs et les cartes.
  Récupère les couleurs et la typographie depuis les variables Figma si elles
  existent.
</AiPrompt>

## Dépannage

* **L'Agent ne peut pas lire le fichier :** connectez Figma, partagez le fichier, et collez les liens des frames, pas seulement l'URL du fichier. Nommez les frames (accueil, produit, checkout) si le fichier contient plusieurs parcours.
* **La navigation, le survol ou les formulaires semblent inachevés :** la mise en page et les couleurs arrivent souvent en premier. Demandez une seconde passe sur les éléments interactifs, et vérifiez l'espacement par rapport à Figma.

## Voir aussi

<CardGroup cols={2}>
  <Card title="Concevoir une page de destination" href="/fr/use-cases/design-landing-page">
    Pour les designers produit qui ont d'abord besoin de frames, à partir d'un brief Notion.
  </Card>

  <Card title="Créer une boutique en ligne" href="/fr/use-cases/build-online-store">
    Pour les fondateurs et designers produit qui ont ensuite besoin d'une vitrine Shopify.
  </Card>
</CardGroup>