Aller au contenu principal

Comment intégrer Cursor avec Figma

Cursor offre une intégration transparente avec Figma, permettant aux développeurs de visualiser et de référencer facilement les designs Figma directement dans leur éditeur de code. Ce guide vous montrera comment configurer et utiliser l'intégration Figma dans Cursor.

Prérequis​

Avant de commencer, assurez-vous d'avoir :

  1. Un compte Figma
  2. Cursor installé sur votre ordinateur
  3. Un projet Figma auquel vous souhaitez accéder

Configuration de l'intégration​

Étape 1 : Obtenir le token d'accès Figma​

  1. Connectez-vous à votre compte Figma
  2. Allez dans les paramètres de votre compte
  3. Naviguez vers l'onglet "Account Settings"
  4. Faites défiler jusqu'à la section "Access tokens"
  5. Cliquez sur "Generate new token"
  6. Donnez un nom à votre token et copiez-le

Étape 2 : Configurer Cursor​

  1. Ouvrez Cursor
  2. Accédez aux paramètres (⌘/Ctrl + ,)
  3. Recherchez "Figma"
  4. Collez votre token d'accès dans le champ approprié

Utilisation de l'intégration​

Une fois configurée, vous pouvez :

  1. Visualiser les designs Figma directement dans Cursor
  2. Copier les styles et les propriétés CSS
  3. Référencer les composants Figma dans votre code

Dépannage​

Si vous rencontrez des problèmes :

  1. Vérifiez que votre token d'accès est valide
  2. Assurez-vous d'avoir les permissions nécessaires sur le projet Figma
  3. Redémarrez Cursor si nécessaire

Ressources supplémentaires​