Les extraits de code apparaissent dans le panneau d'inspection de Dev Mode lorsqu'un objet est sélectionné dans le plan de travail. La section Code fournit des détails du composant pertinents et génère du code en fonction de la sélection et des préférences linguistiques définies dans le panneau d'inspection :

• Lorsqu'un texte est sélectionné, la section Code affiche un aperçu typographique, suivi d'informations sur la mise en page, la typographie et le contenu.
• Pour toutes les autres sélections, un modèle de zone s'affiche avec des détails sur les marges, les bordures et le remplissage, ainsi que des informations sur la mise en page et le style.

Définir des préférences linguistiques

Vous pouvez définir la langue et l'unité de votre choix pour les extraits de code sous Code settings dans le panneau d'inspection. Les paramètres de langue et d'unité s'appliquent à tous les extraits de code générés pour les objets sélectionnés dans le plan de travail.

1. Désélectionnez tous les objets dans le plan de travail.
2. Sélectionnez une option à partir du menu déroulant Language :
   • CSS (Web)
   • SwiftUI ou UIKit (iOS)
   • Compose ou XML (Android).
3. À partir du menu déroulant Unit, sélectionnez une unité. Les unités disponibles dépendent de la langue sélectionnée.

Modifier les préférences en matière de langue et d'unité

Une fois que vous avez sélectionné un objet, vous pouvez modifier votre choix de langue et d'unité dans la section Code du panneau d'inspection.

1. En haut à droite de la section Code, sélectionnez une langue à partir du menu déroulant.
2. Click Inspect settings and select a unit from the dropdown.

Définir l'échelle des unités

La mise à l'échelle des unités vous permet de définir les dimensions d'une unité par rapport à une taille spécifiée. Par exemple, vous pouvez définir une taille de police racine pour les unités rem CSS ou définir un facteur d'échelle pour mettre à l'échelle des dimensions en points iOS.

Pour ajuster l'échelle des unités pour la langue et l'unité sélectionnées :

1. Sélectionnez un objet dans le plan de travail.
2. Dans la section Code du panneau d'inspection, cliquez sur [inspect settings icon] Inspect settings à côté du menu déroulant des langues.
3. Sélectionnez Set unit scale…
4. En fonction de la préférence d'unité, saisissez ou sélectionnez l'échelle dans la fenêtre modale Unit scale.
5. Click .

Voir les extraits de code

Les extraits de code sont générés lorsque vous sélectionnez un objet sur le plan de travail en Dev Mode. La section Code affiche des informations pertinentes en fonction du type d'objet et de la langue sélectionnés.

Alors que la plupart des objets dans le plan de travail génèrent des extraits de code similaires, les sélections de texte varient légèrement. La section Code affiche une vue typographique au lieu d'un modèle de zone, suivie d'extraits de code contenant des informations typographiques pertinentes.

Toutes les variables affectées à un objet sélectionné apparaîtront également dans l'extrait de code. La syntaxe de code vous permet de représenter les variables dans le code en utilisant des noms de variables valides afin de faciliter le transfert.

En savoir plus sur la syntaxe de code et les variables dans Figma Design ->

Copier les extraits de code

Vous pouvez copier un extrait de code et le transférer dans un éditeur de texte. Pour copier un extrait de code :

1. Sélectionnez l'objet pour lequel vous souhaitez générer du code.
2. Recherchez l'extrait de code que vous souhaitez copier dans la section Code du panneau d'inspection.
3. Passez le curseur de la souris sur l'extrait de code et cliquez sur Copy dans le coin supérieur droit.

Code Connect

Code Connect est un outil destiné aux design systems et aux équipes d'ingénierie pour intégrer le code des composants en Dev Mode. Lors de l'inspection d'un composant avec des extraits de code connectés, les développeurs verront le code du design system provenant de leurs librairies au lieu du code généré automatiquement.

Code Connect s'appuie sur l'API Figma et est entièrement personnalisable : il peut donc prendre en charge différents design systems, produits et langues.

En savoir plus sur la synchronisation des extraits de code personnalisés avec des composants sur le hub Code Connect →

Une fois Code Connect implémenté, vos extraits de code dans Dev Mode indiquent qu'ils sont connectés et affichent des extraits issus de la bibliothèque de votre organisation.