Vor dem Start
Wer diese Funktion verwenden kann
Figma Make ist für Full-Lizenzen in kostenpflichtigen Abos verfügbar.
Du kannst Figma Make mit anderen Lizenzen und Abos ausprobieren.
Damit Figma Make einen funktionalen Prototyp oder eine Web-App erstellen kann, die deinen Bedürfnissen und Erwartungen besser entspricht, kannst du Richtlinien in der Datei Guidelines.md angeben. Dazu gehören Anweisungen, wie sich Figma Make in Bezug auf Programmierung und Persönlichkeit verhalten soll und wie Dinge wie Stilkontext verwendet werden sollen.
Richtlinien hinzufügen
Um die Richtliniendatei zu öffnen:
- Klicke oben in Figma Make auf Code.
- Im Datei-Explorer auf der linken Seite des Code-Editors klickst du auf Richtlinien und dann auf Guidelines.md.
Anweisungen, Best Practices und Beispiele für die Verwendung der Richtliniendatei sind in der Datei selbst enthalten. Der Inhalt der Datei ist im folgenden Abschnitt verfügbar.
Inhalt der Datei „Guidelines.md“
Verwende diese Datei, um der KI Regeln und Richtlinien vorzugeben, die sie befolgen soll.
Diese Vorlage enthält einige Beispiele für Objekte, die du hinzufügen kannst. Du kannst deine eigenen Abschnitte hinzufügen und sie nach deinen Wünschen formatieren.
TIPP: Mehr Kontext ist nicht immer besser. Das kann das LLM verwirren. Versuche, die wichtigsten Regeln hinzuzufügen, die du brauchst
# Allgemeine Richtlinien
Alle allgemeinen Regeln, die die KI befolgen soll.
Zum Beispiel:
* Verwende die absolute Positionierung nur, wenn es notwendig ist. Entscheide dich für responsiv und gut strukturierte Layouts, die standardmäßig Flexbox und Raster verwenden.
* Verändere den Code kontinuierlich, um ihn sauber zu halten.
* Halte die Dateigrößen klein und packe Hilfsfunktionen und Komponenten in eigene Dateien.
--------------
# Designsystem-Richtlinien
Regeln dafür, wie die KI Generationen so aussehen lassen soll, wie das Designsystem deines Unternehmens.
Wenn du im Eingabefeld ein Designsystem auswählst, kannst du außerdem auf die Komponenten, Token, Variablen und Komponenten deines Designsystems verweisen.
Zum Beispiel:
* Verwende eine Basis-Schriftgröße von 14px
* Datumsformate sollten immer im Format „Jun 10“ sein
* Die untere Symbolleiste sollte maximal 4 Elemente enthalten
* Verwende niemals die schwebende Aktionsschaltfläche mit der unteren Symbolleiste
* Chips sollten immer in Sets von 3 oder mehr geliefert werden
* Verwende keine Dropdown-Liste, wenn es 2 oder weniger Optionen gibt
Du kannst auch Unterabschnitte erstellen und spezifischere Details hinzufügen
Zum Beispiel:
## Button
The Button component is a fundamental interactive element in our design system, designed to trigger actions or navigate
users through the application. It provides visual feedback and clear affordances to enhance user experience.
### Nutzung
Schaltflächen sollten für wichtige Aktionen verwendet werden, die Benutzer*innen ausführen müssen, z. B. Formularübermittlungen, Bestätigen von Auswahlmöglichkeiten oder Prozesse zu initiieren. Sie kommunizieren Interaktivität und sollten klare, aktionsorientierte Beschriftungen haben.
### Varianten
* Primäre Schaltfläche
* Zweck: Wird für die Hauptaktion in einem Abschnitt oder einer Seite verwendet
* Visueller Stil: Fett, gefüllt mit der primären Markenfarbe
* Nutzung: Eine primäre Schaltfläche pro Abschnitt, um den User zur wichtigsten Aktion zu führen
* Sekundäre Schaltfläche
* Zweck: Wird für alternative oder unterstützende Aktionen verwendet
* Visueller Stil: Mit der Primärfarbe umrandet, transparenter Hintergrund
* Nutzung: Kann neben einer primären Schaltfläche für weniger wichtige Aktionen angezeigt werden
* Tertiäre Schaltfläche
* Zweck: Wird für die am wenigsten wichtigen Aktionen verwendet
* Visueller Stil: Nur Text ohne Rand, mit Primärfarbe
* Nutzung: Für Aktionen, die verfügbar, aber nicht hervorgehoben sein sollten