Intégrez vos sites web en direct dans Figma

Utilisez l’extension Chrome de Figma pour capturer votre site web en temps réel ou sélectionner plusieurs éléments directement dans votre navigateur, puis collez-les sur le canvas Figma.

Pour commencer, installez l'extension Chrome de Figma et connectez-vous avec votre compte Figma. Ouvrez la page web sur laquelle vous souhaitez travailler, choisissez Capturer le code ou Capturer le design, et capturez la page entière ou sélectionnez les éléments dont vous avez besoin. Collez ensuite votre capture dans un fichier Figma. Vous n'avez pas besoin d'accéder à la base de code du site web ni de recourir à un agent de codage.

Choisissez en fonction de ce que vous souhaitez faire avec le contenu capturé :

• La fonctionnalité Capturer le code intègre votre contenu web dans le canvas sous forme de calques de code, vous permettant ainsi d'interagir avec l'expérience utilisateur existante et de la développer. Le code capturé peut ne pas reproduire intégralement les interactions ou les fonctionnalités du site web d'origine.
• La fonctionnalité Capturer le design convertit votre contenu web en calques de design Figma modifiables. Utilisez-le lorsque vous souhaitez modifier du texte, ajuster des couleurs, réorganiser la mise en page ou explorer une nouvelle orientation visuelle.

Par exemple, vous pouvez coller un calque de code capturé à côté d'une expérience de conception mise à jour pour comparer les modifications que vous proposez. Les deux éléments figurent sur le même canvas, ce qui permet à votre équipe de les examiner conjointement.

Oui, l'extension Chrome de Figma est gratuite. L'importation de votre contenu capturé dans Figma sous forme de calques de code est actuellement en version bêta. Cette opération ne consomme pas de crédits d'IA. Toutefois, des crédits d'IA peuvent être utilisés si l'agent de codage doit corriger des erreurs ou effectuer des ajustements pour assurer le bon fonctionnement du contenu.