Was macht figma-code-connect?
Erstellt und pflegt Figma Code Connect-Vorlagendateien, die Figma-Komponenten zu Code-Snippets zuordnen. Verwenden, wenn der Benutzer Code Connect, Figma-Komponentenzuordnung, Design-to-Code-Übersetzung erwähnt oder darum bittet, .figma.ts- oder .figma.js-Dateien zu erstellen/aktualisieren.
Beschreibung
Diese Fähigkeit hilft Entwicklern, die Brücke zwischen Design und Code zu schlagen, indem sie die Erstellung und Aktualisierung von Figma Code Connect-Dateien automatisiert. Sie ist ideal für Teams, die Figma als ihr primäres Design-Tool verwenden und sicherstellen möchten, dass die Code-Implementierung mit den Design-Spezifikationen übereinstimmt.
Verwendung
- Erstellen von .figma.ts-Dateien: Wenn der Benutzer angeben möchte, wie eine Figma-Komponente in TypeScript-Code übersetzt wird.
- Aktualisieren von .figma.js-Dateien: Wenn bestehende Verbindungen zwischen Figma-Komponenten und JavaScript-Code geändert werden müssen.
- Verwalten von Code-Snippets: Hinzufügen oder Ändern von Code-Snippets, die mit bestimmten Figma-Komponenten verknüpft sind.
Plattformen
- Figma
- Jedes Entwicklungs-Repository, das .figma.ts- oder .figma.js-Dateien unterstützt (z. B. React-, Vue- oder Angular-Projekte).
Funktionsweise
- Der Benutzer erwähnt den gewünschten Vorgang (z. B. „Code Connect für Button-Komponente erstellen“).
- Die Fähigkeit generiert die entsprechende .figma.ts- oder .figma.js-Vorlage.
- Der generierte Code kann dann in das Repository integriert werden.
Beispiele
// Beispiel für eine .figma.ts-Datei
import { figma } from "@figma/code-connect";
figma.connect({
component: "https://www.figma.com/file/xxx/MyComponent",
example: (props) => <MyComponent {...props} />,
props: {
label: figma.string("Label"),
variant: figma.enum("Variant", {
Primary: "primary",
Secondary: "secondary",
}),
},
});
Verwandte Konzepte
- Figma Code Connect
- Design-to-Code-Workflow
- Komponentenzuordnung