UI/UX DesignThrive Editorial

25 KI-Prompts für UI-Design in Figma

Figma AI hilft bei ersten Entwürfen und Änderungen an ausgewählten Frames. Diese Prompts beschreiben bearbeitbare Layouts. Prüfe in deinem eigenen Arbeitsbereich, welche Funktionen verfügbar sind.

13 Min. Lesezeit
Designarbeitsplatz mit mobilen Frames, Komponentenvarianten und Abstandshilfen.

Die Kurzfassung

  • Figma AI hilft bei ersten Entwürfen und Änderungen an ausgewählten Frames. Diese Prompts beschreiben bearbeitbare Layouts. Prüfe in deinem eigenen Arbeitsbereich, welche Funktionen verfügbar sind.
  • Generierte Oberflächen sind Entwürfe. Teste sie mit echten Inhalten, Tastatureingaben, kleinen Bildschirmen und den Menschen, die sie nutzen sollen. Eine ansprechende Gestaltung belegt noch keine gute Bedienbarkeit.

Figma AI hilft bei ersten Entwürfen und Änderungen an ausgewählten Frames. Diese Prompts beschreiben bearbeitbare Layouts. Prüfe in deinem eigenen Arbeitsbereich, welche Funktionen verfügbar sind.

Generierte Oberflächen sind Entwürfe. Teste sie mit echten Inhalten, Tastatureingaben, kleinen Bildschirmen und den Menschen, die sie nutzen sollen. Eine ansprechende Gestaltung belegt noch keine gute Bedienbarkeit.

So nutzt du diese Sammlung

Wähle die Aufgabe, die deiner Arbeit am nächsten kommt. Kopiere den Prompt und ersetze die allgemeine Szene oder den Code-Kontext durch deine eigenen Angaben. Behalte die Vorgaben bei, mit denen du das Ergebnis prüfen kannst. Ändere jeweils eine Variable, damit du erkennst, was besser geworden ist.

Der Ansatz folgt dem Figma-First-Draft-Leitfaden: Gib konkreten Kontext an und prüfe die Ausgabe, statt einen überzeugend formulierten ersten Entwurf ungeprüft zu übernehmen.

Prompts zum Beschreiben der Aufgabe

Benenne beim Beschreiben der Aufgabe die Nutzer und die Entscheidung, die der Bildschirm unterstützen soll.

1. Eine mobile Checkout-Oberfläche

Design a mobile checkout screen for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?

2. Eine Sammlung von Komponentenvarianten

Design a component variant set for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?

3. Ein System für Dashboard-Karten

Design a dashboard card system for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?

4. Eine Navigation für Einstellungen

Design a settings navigation for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?

5. Ein responsiver Preisbereich

Design a responsive pricing section for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?

6. Ein Onboarding-Formular

Design an onboarding form for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?

7. Ein Bereich für Suchfilter

Design a search filter panel for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?

8. Ein leerer Zustand

Design an empty state for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?

9. Ein Profilkopf

Design a profile header for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?

Editable mobile checkout interface concept with reusable component variants.

10. Eine Prüfung der Design-Tokens

Design a design token audit for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?

Prompts zur Gestaltung des Hauptbildschirms

Benenne beim Gestalten des Hauptbildschirms die Nutzer und die Entscheidung, die der Bildschirm unterstützen soll.

11. Eine mobile Checkout-Oberfläche

Design a mobile checkout screen for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.

12. Eine Sammlung von Komponentenvarianten

Design a component variant set for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.

13. Ein System für Dashboard-Karten

Design a dashboard card system for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.

14. Eine Navigation für Einstellungen

Design a settings navigation for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.

15. Ein responsiver Preisbereich

Design a responsive pricing section for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.

16. Ein Onboarding-Formular

Design an onboarding form for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.

17. Ein Bereich für Suchfilter

Design a search filter panel for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.

Three-step design workflow: brief the work, inspect the result, edit and verify.

18. Ein leerer Zustand

Design an empty state for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.

19. Ein Profilkopf

Design a profile header for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.

20. Eine Prüfung der Design-Tokens

Design a design token audit for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.

Prompts für fehlende Daten

Benenne beim Planen fehlender Daten die Nutzer und die Entscheidung, die der Bildschirm unterstützen soll.

21. Eine mobile Checkout-Oberfläche

Design a mobile checkout screen for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Prüfe, ob die Person den Vorgang fortsetzen kann, ohne bereits eingegebene Angaben zu verlieren.

22. Eine Sammlung von Komponentenvarianten

Design a component variant set for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Prüfe, ob die Person den Vorgang fortsetzen kann, ohne bereits eingegebene Angaben zu verlieren.

23. Ein System für Dashboard-Karten

Design a dashboard card system for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Prüfe, ob die Person den Vorgang fortsetzen kann, ohne bereits eingegebene Angaben zu verlieren.

24. Eine Navigation für Einstellungen

Design a settings navigation for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Prüfe, ob die Person den Vorgang fortsetzen kann, ohne bereits eingegebene Angaben zu verlieren.

25. Ein responsiver Preisbereich

Design a responsive pricing section for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.

Prüfung: Prüfe, ob die Person den Vorgang fortsetzen kann, ohne bereits eingegebene Angaben zu verlieren.

Was du vor der Verwendung des Ergebnisses prüfen solltest

Generierte Oberflächen sind Entwürfe. Teste sie mit echten Inhalten, Tastatureingaben, kleinen Bildschirmen und den Menschen, die sie nutzen sollen. Eine ansprechende Gestaltung belegt noch keine gute Bedienbarkeit.

Wenn die Ausgabe die Aufgabe verfehlt, kürze den Prompt und ergänze die fehlende Angabe oder Vorgabe. Halte fest, welche Version du verwendet hast, damit sich das fertige Material oder die Code-Änderung reproduzieren lässt.

Weiterführende Informationen

Mit einem verwandten Leitfaden fortfahren

Setzen Sie es in die Praxis um

Dein nächster Schritt

Hast du eine Frage oder Korrektur?

Thrive kontaktieren

Weiterlesen

Mehr aus dem Journal

Alle Artikel