Figma Use

figma-use ist der Skill, den du vor jedem `use_figma`-Aufruf installieren solltest, damit JavaScript sicher im Kontext einer Figma-Datei ausgeführt wird. Er unterstützt Aufgaben der Design-Umsetzung wie das Erstellen und Bearbeiten von Knoten, das Verknüpfen von Variablen und Stilen, das Aufbauen von Komponenten und Varianten sowie das programmgesteuerte Prüfen der Dateistruktur. Das Repo enthält Nutzungshinweise, Stolperfallen und Muster, mit denen sich typische Automatisierungsfehler in Figma reduzieren lassen.

figma-generate-design hilft dabei, codierte Seiten, Modals, Drawers, Sidebars, Panels und andere Ansichten mit mehreren Bereichen in Figma anhand des veröffentlichten Designsystems umzusetzen. Es findet Komponenten, Variablen, Styles und Library-Assets aus Code Connect und verwandten Quellen und setzt den Screen dann Abschnitt für Abschnitt für die Design-Implementierung zusammen, statt alles manuell neu zu zeichnen. Nutze den figma-generate-design-Guide, wenn du hohe Übereinstimmung mit Code und Tokens brauchst.

figma-create-new-file erstellt eine neue leere Figma- oder FigJam-Datei in den Entwürfen, mit Standardwerten für Editor-Typ und Dateiname. Diese figma-create-new-file Skill hilft bei Design-Umsetzungen, schnellem Prototyping und beim Start einer frischen Arbeitsfläche vor use_figma. Außerdem übernimmt sie bei Bedarf die planKey-Auflösung über whoami.

figma-implement-design wandelt Figma-Screens in produktionsreife Codebasis in deinem Repo um und zielt dabei auf eine hohe visuelle Übereinstimmung bei Layout, Zuständen, Tokens und responsivem Verhalten. Nutze es für die Figma-zu-Code-Implementierung, nicht für Figma-Editing, Code-Connect-Mapping oder das Erstellen neuer Designs. Enthalten sind Installationshinweise, Nutzungshinweise und klare Grenzregeln für Design-Implementierungs-Workflows.

figma-generate-library hilft dabei, eine Codebasis in eine Figma-Designsystem-Bibliothek mit Tokens, Variablen, Komponenten, Theming und Dokumentation zu überführen. Verwende den figma-generate-library Skill, wenn du einen phasenbasierten Workflow für Design-System-Arbeit brauchst – einschließlich Installation, Einrichtung, Analyse, Erstellung, Validierung und Abgleich mit dem Code.

figma-generate-design hilft dabei, einen echten Screen, eine Seite oder ein Layout mit mehreren Abschnitten in Figma zu übertragen, indem das veröffentlichte Designsystem wiederverwendet wird statt generischer Formen. Es eignet sich ideal, um Code- oder Produktseiten mit hoher Parität, bearbeitbarer Struktur und tokenbasierter Konsistenz nachzubilden. Verwenden Sie es für vollständige UI-Design-Updates, nicht für grobe Mockups.