HomeCasa Prompts

Figma-Komponente spezifizieren mit Auto Layout, Varianten und Variablen

Erhalte eine vollständige Spezifikation einer Figma-Komponente: Ebenenstruktur, Auto-Layout-Einstellungen, Properties und Varianten, Variablen und Modi, Zustände, Stresstests und Handoff-Notizen. Entwickelt für ChatGPT, Claude, Gemini und Microsoft Copilot. Er enthält 5 anpassbare Variablen und lässt sich kostenlos mit einem Klick kopieren.

Experte · Text · Redaktionelle Prüfung ausstehend

Entwickelt für:

Prompt

Handle als Design-System-Designer mit Expertenwissen in Figma (Auto Layout, Component Properties, Variablen und Modi).

Kontext:
- Komponente: {{komponente}}
- Anwendungsfälle: {{anwendungsfaelle}}
- Benötigte Ausprägungen: {{auspraegungen}}
- Vorhandene Tokens oder Variablen: {{tokens}}
- Zielplattform: {{plattform}}

Liefergegenstände:
1. Anatomie: Ebenenstruktur mit klaren Ebenennamen (als Codeblock), mit Kennzeichnung verschachtelter Instanzen.
2. Auto-Layout-Einstellungen je Ebene: Richtung, Abstand, Padding, Ausrichtung, Größenverhalten (Hug, Fill, Fixed), minimale und maximale Breite sowie Wrap.
3. Component Properties: Varianten, Boolean, Instance Swap und Text. Entwirf die Variantenmatrix so, dass keine kombinatorische Explosion entsteht, und erkläre, was du über Properties statt Varianten löst.
4. Bindung an Variablen: Abstände, Farben, Radien und Typografie; Hell/Dunkel- und Dichte-Modi, falls relevant.
5. Zustände: Standard, Hover, Fokus, gedrückt, deaktiviert, Laden und ggf. Fehler, jeweils mit der genauen Änderung.
6. Stresstests: langer Text, Übersetzungen bis zu 30-40 % länger (etwa Deutsch gegenüber Englisch), fehlende Icons, schmale Container und bei Bedarf Rechts-nach-links-Ausrichtung.
7. Handoff-Notizen: Zuordnung der Figma-Properties zu Code-Props und Maße, die die Entwicklung einhalten muss.
8. QA-Checkliste vor der Veröffentlichung in der Bibliothek.

Einschränkungen:
- Nutze nur tatsächlich vorhandene Figma-Funktionen; hängt eine vom Tarif oder einer neuen Version ab, weise darauf hin und nenne eine Alternative.
- Erfinde keine Tokens; fehlen welche, schlage vorläufige Namen mit [AUSFÜLLEN] vor.
- Sind die Anwendungsfälle unklar, frage mich, bevor du Varianten festlegst.

Format: Codeblock mit Ebenenstruktur, Tabellen für Auto Layout, Properties und Zustände sowie eine abschließende Checkliste.

So verwenden Sie ihn

  1. Beschreibe die Komponente und die Screens, in denen sie vorkommt. 2. Füge die Namen deiner aktuellen Variablen oder Tokens ein. 3. Baue die Komponente in Figma nach der Ebenenstruktur und arbeite vor dem Veröffentlichen die Checkliste ab.

Anwendungsbeispiel

Komponente: Produktkarte · Ausprägungen: mit und ohne Rabatt, horizontal und vertikal · Tokens: space/100-800, color/surface · Plattform: Responsive Web.

Beispielergebnis

1. Anatomie

ProductCard (Komponente · Auto Layout)
├── Media (Frame)
│   ├── Image
│   └── DiscountBadge (Instanz · Boolean)
└── Content (Frame)
    ├── Title (Text)
    ├── Rating (Instanz · Boolean)
    └── PriceRow (Frame)
        ├── Price (Text)
        └── OldPrice (Text · Boolean)

2. Auto Layout

EbeneRichtungGapPaddingGrößenverhalten
ProductCardVertikal / horizontal je Variantespace/3000Fill · min. 160 px
ContentVertikalspace/200space/400Fill
PriceRowHorizontalspace/2000Hug

3. Properties

  • Variante: orientation = vertical | horizontal (nur 2 Varianten).
  • Booleans: hasDiscount, showRating – so vervielfachen sich die Varianten nicht.
  • Text: title, price.

Damit decken 2 Varianten 8 Kombinationen ab statt 8 Varianten.

6. Stresstests

  • Titel über 3 Zeilen: nach 2 Zeilen mit Ellipse kürzen.
  • Deutsche Übersetzung (+35 %): Der Preis darf nicht umbrechen…

Wichtige Fakten

Kategorie
UI/UX-Design · Figma
Ausgabetyp
Text
Niveau
Experte
Entwickelt für
ChatGPT, Claude, Gemini und Microsoft Copilot
Verifiziert in
Redaktionelle Prüfung ausstehend
Variablen
Komponente, Anwendungsfälle, Benötigte Ausprägungen, Tokens oder Variablen und Zielplattform
Sprache
Deutsch
Preis
Kostenlos, ohne Anmeldung
Aktualisiert
07.11.2026

Häufig gestellte Fragen

Wann ist eine Boolean-Property besser als eine Variante?

Wenn nur eine Ebene ein- oder ausgeblendet wird, etwa ein Icon oder Badge. Varianten lohnen sich für Änderungen an Struktur oder Stil, denn jede Kombination vervielfacht ihre Anzahl.

Warum mit übersetzten Texten testen?

Weil deutsche Texte oft deutlich länger sind als englische. Fängt das Auto Layout das nicht ab, bricht die Komponente im Produkt.

Wofür ist dieser Prompt gedacht?

Erhalte eine vollständige Spezifikation einer Figma-Komponente: Ebenenstruktur, Auto-Layout-Einstellungen, Properties und Varianten, Variablen und Modi, Zustände, Stresstests und Handoff-Notizen.

Mit welchen KI-Tools funktioniert er?

Er ist für ChatGPT, Claude, Gemini und Microsoft Copilot entwickelt. Wir haben ihn in diesen Tools noch nicht überprüft, daher können die Ergebnisse variieren.

Wie passe ich den Prompt an?

Klicken Sie auf „Anpassen“ und füllen Sie die Variablen aus (Komponente, Anwendungsfälle, Benötigte Ausprägungen, Tokens oder Variablen und Zielplattform). Der Text wird sofort aktualisiert und lässt sich anschließend mit einem Klick kopieren. Die Werte werden nur in Ihrem Browser gespeichert.

Brauche ich Erfahrung, um ihn zu verwenden?

Er ist für Experten: Er richtet sich an Personen mit Erfahrung im Thema, die das Ergebnis beurteilen und anpassen können.

Ist dieser Prompt kostenlos?

Ja. Jeder Prompt von HomeCasa Prompts ist kostenlos, ohne Anmeldung und ohne Abonnement. Sie können ihn auch in beruflichen Projekten verwenden.

Kann ich der KI-Ausgabe vertrauen?

Betrachten Sie sie als hochwertigen Entwurf: Prüfen Sie Daten, Zahlen und wichtige Aussagen immer, bevor Sie etwas veröffentlichen oder Entscheidungen treffen.

Ähnliche Prompts