Avant de commencer

Qui peut utiliser cette fonctionnalité

Disponible dans tous les abonnements payants

Nécessite un accès Design complet ou un accès Dev Mode

L'extension Figma for VS Code permet aux développeurs d'accéder facilement aux designs et de les inspecter directement depuis VS Code. Vous pouvez naviguer et examiner les fichiers de design, collaborer avec des concepteurs, suivre les modifications et accélérer la mise en œuvre des designs, le tout sans quitter votre environnement de développement.

Utilisez l'extension Figma for VS Code pour :

• Suivre et répondre aux commentaires et à l'activité en temps réel
• Obtenir des suggestions de code basées sur les designs
• Associer les fichiers de code aux composants de design

Ouvrir les designs Figma dans VS Code

Il existe plusieurs façons d'ouvrir un fichier de design via l'extension VS Code :

Depuis le Dev Mode

1. Définissez CSS comme langage préférentiel dans Code settings ou dans la section Code du panneau Inspect.
2. Cliquez sur un cadre de premier niveau.
3. Dans le panneau Inspect, cliquez sur Options à côté du nom du calque.
4. Sélectionnez Open in VS Code.

Depuis VS Code

1. Ouvrez VS Code.
2. Cliquez sur Figma dans la barre d'activité, ou trouvez Figma for VS Code dans votre liste d'extensions.
3. Dans la barre latérale principale, sous Files, cliquez sur le design que vous souhaitez ouvrir.

Inspecter les designs Figma dans VS Code

Explorer un fichier de design dans VS Code

Figma for VS Code permet d'étendre les fonctionnalité d'inspection du Dev Mode et d'importer vos fichiers de design directement dans votre éditeur de texte. Lorsque vous sélectionnez un fichier de design dans VS Code, vous voyez les cadres dans le fichier regroupés par section, statut (par ex. prêt pour développement) et page. Si un cadre ne comporte pas de section parente ou de statut attribué, il ne s'affichera pas.

Inspecter un cadre

Sélectionnez des cadres dans une grille de cadres et affichez-les individuellement grâce à la vue Focus. Recherchez des cadres et filtrez les résultats pour trouver rapidement ce que vous recherchez.

Voir les designs prêts pour développement

Cliquez sur Layers dans la barre d'outils pour afficher les sections comportant la mention Ready for development.

Voir les extraits de code

Consultez les extraits de code et toutes les informations pertinentes, telles que les modes et les styles, dans l'onglet Code.

Choisissez votre langage et votre unité préférentiels pour les extraits de code dans le coin en haut à droite de la barre d'outils Inspect.

Accéder aux ressources de développement

Accédez aux liens de développement pertinents dans l'onglet Dev resources. Cliquez sur Add Dev resources pour ajouter un lien vers un fichier de code ou une ressource de développement.

Si un lien comporte un déploiement correspondant dans votre code base, cela ouvre le fichier dans VS Code, et non pas dans le navigateur.

Ajouter un lien vers les ressources de développement dans le Dev Mode →

Voir les propriétés des composants

Si vous avez sélectionné un composant, vous pouvez voir ses propriétés dans l'onglet Component.

Exporter les ressources

Téléchargez et exportez les ressources pour un calque sélectionné dans l'onglet Assets.

En savoir plus sur l'exportation des sélections depuis Figma →

Remplissage automatique des suggestions de code

L'extension Figma for VS Code fournit des suggestions automatiques basées sur le calque sélectionné. Cette fonctionnalité est utile si vous créez des composants qui n'ont pas déjà un déploiement inclus dans votre code base.

Voir les notifications de commentaires

Vous pouvez consulter les notifications de commentaires en temps réel sous Notifications, dans la barre latérale principale. Cliquez sur une notification pour voir et ajouter un commentaire au design via VS Code.

Guide des commentaires dans Figma →

Exécuter des plugins dans VS Code

Utilisez des outils tiers et du code personnalisé sans quitter votre éditeur de code.  Consultez nos documents pour découvrir comment faire fonctionner votre plugin privé dans VS Code →

Se déconnecter de Figma for VS Code

1. Dans VS Code, appuyez sur Shift Cmd P pour afficher et exécuter des commandes.
2. Sélectionnez Figma: Log out dans la liste d'options de la barre de recherche.