Passer au contenu principal

​
Importer depuis Figma

⏰ Durée estimée : trois minutes Importez un cadre Figma dans Replit et convertissez le design en une application React fonctionnelle. Pour des options d’import complètes incluant d’autres plateformes comme GitHub, Bolt et Lovable, consultez la documentation de la fonctionnalité d’import.

​
Avant de commencer

  • Un fichier Figma contenant un cadre que vous souhaitez importer
  • Accès pour connecter votre compte Figma
  • Un compte Replit

​
Étapes d’import

  1. Ouvrez replit.com/import.
  2. Sélectionnez Figma.
  3. Connectez votre compte Figma.
  4. Dans Figma, sélectionnez un cadre et copiez son URL.
  5. Collez l’URL dans Replit.
  6. Sélectionnez Import.

​
Ce qui est importé

  • Le thème et le style des composants
  • Les images et les ressources d’icônes
  • L’architecture d’application pour un projet React

​
Améliorer la qualité de la conversion

  • Utilisez la mise en page automatique autant que possible.
  • Gardez les noms de calques courts et descriptifs.
  • Convertissez les groupes en cadres avant l’import.
  • Marquez les calques d’image pour l’export.

​
Configure and run your app

During import, . If your app needs changes, use these Workspace tools:
  • Agent: Refine features, debug issues, and make code changes
  • Secrets: Add API keys and environment variables
  • Workflows: Set the Run command for your app

​
Limites d’import

Figma limite la fréquence d’import en fonction de votre plan Figma et de votre type de siège. Ces limites sont définies par Figma, pas par Replit.
  • Sièges Free, Starter, View et Collab : 1 import par mois.
  • Sièges Dev et Full (plans Pro, Organisation ou Enterprise) : Limites plus élevées avec des plafonds par minute et par jour.
Si vous atteignez une limite de débit lors de l’import, passez à un siège Dev ou Full Figma pour un accès accru. Consultez la documentation sur les plans et les autorisations de Figma pour tous les détails.

​
Interagissez dans le chat Agent (bêta)

Après l’import, vous pouvez coller des liens Figma dans le chat Agent pour inspecter les calques, extraire des tokens et demander des modifications de code. Un siège Figma Dev ou Full est recommandé pour les fonctionnalités du chat Agent. Les sièges Free et Starter sont limités à 6 appels d’outil MCP par mois. Consultez le guide : Intégration Figma MCP.

​
Continue your journey

Now that you’ve imported your , explore these next steps: