Zum Hauptinhalt springen

Cursor mit Figma integrieren 🎨

Cursor bietet eine nahtlose Integration mit Figma, die es Ihnen ermöglicht, Ihre Figma-Designs direkt in Ihrem Code zu referenzieren.

Voraussetzungen​

  • Ein Figma-Konto
  • Ein Cursor-Account
  • Zugriff auf ein Figma-Projekt

Schritte zur Integration​

1. Figma-Plugin installieren​

  1. Öffnen Sie Figma
  2. Gehen Sie zum Community-Tab
  3. Suchen Sie nach "Cursor"
  4. Installieren Sie das Cursor-Plugin

2. Cursor-Plugin konfigurieren​

  1. Öffnen Sie Ihr Figma-Projekt
  2. Klicken Sie auf Plugins > Cursor
  3. Melden Sie sich bei Ihrem Cursor-Konto an
  4. Folgen Sie den Anweisungen zur Einrichtung

3. Code-Integration​

Sobald Sie das Plugin eingerichtet haben, können Sie:

  • Designs direkt aus Figma in Ihren Code referenzieren
  • Design-Tokens automatisch synchronisieren
  • Komponenten-Spezifikationen abrufen

4. Verwendung in der Praxis​

// Beispiel einer Komponente mit Figma-Integration
import { FigmaComponent } from '@cursor/figma';

const MyComponent = () => {
  return (
    <FigmaComponent
      figmaId="your-figma-id"
      style={{
        // Stilangaben hier
      }}
    />
  );
};

Tipps und Best Practices​

  • Halten Sie Ihre Design-Systeme synchronisiert
  • Nutzen Sie Auto-Updates für Design-Tokens
  • Dokumentieren Sie Figma-IDs in Ihrem Code
  • Verwenden Sie Versionskontrolle für Design-Änderungen

Fehlerbehebung​

Häufige Probleme und Lösungen:

  1. Verbindungsprobleme

    • Überprüfen Sie Ihre Internetverbindung
    • Stellen Sie sicher, dass Sie angemeldet sind
    • Aktualisieren Sie das Plugin

  2. Sync-Fehler

    • Cache leeren
    • Plugin neu installieren
    • Support kontaktieren

Ressourcen​