Code Connect

Code Connect schließt die Lücke zwischen deiner Komponenten-Datenbank und Figma. Damit kannst du deine Designsysten-Komponenten direkt in Dev Mode in Figma einbinden. Lass dir Vorschauen von Beispiel-Komponenten anzeigen, die dem Rahmen deines Produktionscodes entsprechen.

Mit Code Connect kann Dev Mode Programmcodeschnipsel aus der Praxis anzeigen, die von deinem Designsystem definiert wurden, und ist nicht auf die automatisch generierten Codeschnipsel angewiesen, die standardmäßig in Dev Mode enthalten sind. Code Connect kann nicht nur Komponentendefinitionen verknüpfen, sondern auch Eigenschaften aus Programmcodes in Figma darstellen, wodurch dynamische und korrekte Codeschnipsel entstehen.

Code Connect ist besonders praktisch, wenn du bereits ein Designsystem hast und eine konsistente und korrekte Einführung dieses Designsystems über Design und Entwicklung hinweg erreichen möchtest.

Übersicht

Welche Schritte du konkret einhalten musst, um Code Connect einzurichten, hängt von der Architektur deines Designsystems und deiner Codebasis ab. Wenn du beispielsweise SwiftUI verwendest, solltest du dein Vorgehen anhand der von uns bereitgestellten SwiftUI-Ressourcen planen.

Grundsätzlich muss dein Unternehmen zum Einstieg diese Schritte unternehmen:

1. Die Einführung planen. Dazu gehört in der Regel:
   • Die Anforderungen deiner Front-End-Entwickler*innen identifizieren, z. B. ob du Support für React oder SwiftUI benötigst.
   • Die Komponenten in deiner Codebasis identifizieren, die du mit Dev Mode integrieren möchtest.
   • Die Konfiguration von Code Connect und die Mappings deiner Komponenten planen.
2. Den Code Connect-Datencontainer erhalten. Code Connect unterstützt:
   • React (oder React Native)
   • HTML (Webkomponenten, Angular, Vue usw.)
   • SwiftUI
   • Jetpack Compose
3. Die Komponenten-Mappings implementieren. Wie genau du die Mappings aufbaust, hängt von deiner Codebasis und deinem Designsystem ab. Grob gesagt geht es bei dem Prozess aber darum, Eigenschaften aus deinen Designsystem-Komponenten mit Eigenschaften in Figma zu verknüpfen. Dadurch kann Code Connect Programmcodeschnipsel generieren, die die Werte in Figma mit der Architektur deiner Komponenten verknüpfen. Dann werden die Codeschnipsel in Dev Mode angezeigt.
4. In Dev Mode überprüfen. Überprüfe in Dev Mode die Ergebnisse aus Code Connect gemeinsam mit deinen Entwickler*innen und Designer*innen, um die praktische Nutzbarkeit der Beispielkomponenten zu gewährleisten und, um sicherzugehen, dass die Darstellungen exakt passen.

Um Code Connect bestmöglich zu nutzen, sollten die Entwickler*innen, die für deine Designsystem-Komponenten verantwortlich sind, mit deinen Designer*innen zusammenarbeiten, um die Mappings aus deiner Produktions-Codebasis in Figma zu implementieren.

Was ist verfügbar?

Sieh dir die detaillierten Schritte an, die wir in der Code Connect-Entwicklerdokumentation bereitstellen, um mit Code Connect zu beginnen.

Code Connect unterstützt:

• React (oder React Native)
• HTML (Webkomponenten, Angular, Vue usw.)
• SwiftUI
• Jetpack Compose

Darüber hinaus bietet Code Connect einige erweiterte Funktionen:

• Integration mit Storybook
• Benutzerdefinierte Parser
• Vorlagen-API

Das Code Connect-Repository ist auf GitHub verfügbar.

Datenschutz und Code Connect

Figma sammelt nur die Daten, die für die Aktivierung von Code Connect auf der Benutzeroberfläche unbedingt erforderlich sind. Wenn du Figma Connect über die Code Connect-Befehlszeile ausführst, werden die folgenden Daten an Figma übermittelt: 

• Die Pfade für hinzugefügte Komponenten
• Die Repository-URL, in der die Code Connect-Komponenten implementiert sind
• Eigenschaften und Code in den .figma-Dateien

Figma speichert nur grundlegende Ereignisse, die zum Verständnis der Code Connect-Nutzung erforderlich sind: wenn Komponenten veröffentlicht oder entfernt werden sowie Anfragen zu Figma-Daten bei der Nutzung der Befehlszeile auf der Benutzerobefläche.

Weitere Informationen zum Datenschutzansatz von Figma findest du unter Datenschutzrichtlinie.