Dieser Inhalt ist nur für snipKI Mitglieder bestimmt.
Jetzt beitreten

Von der Idee zum Interface – mit Google Stitch und Figma

Klicke auf die Sterne, um eine Bewertung hinzuzufügen
( 5 )
Veröffentlicht: vor 6 Stunden 52 Ansichten 0 Kommentare

Du willst in Minuten komplette App-Designs generieren, die du direkt in Figma weiterbearbeiten kannst? Mit Google Stitch bekommst du hochwertige UI-Mockups inklusive CSS- oder HTML-Code – ganz einfach per Texteingabe oder Bild. In diesem Snip zeige ich dir, wie du mit Google Stitch Designideen entwickelst, anpasst und exportierst.

Ergebnis: Wenn du diesen Snip umsetzt, kannst du ein vollständiges App-Design mit Google Stitch erstellen, individuell anpassen und direkt in Figma zur Weiterbearbeitung übertragen.

AnfangerInnen
  1. Besuche stitch.withgoogle.com und melde dich mit deinem Google-Account an (kostenfrei, aktuell Beta-Phase).
  2. Wähle zwischen “Standard Mode” (schneller) und “Experimenter Mode” (präzisere Ergebnisse).
  3. Gib deinen Prompt ein, z. B.: „Ich benötige eine mobile App ähnlich wie Freeletics für Outdoor-Übungen“.
  4. Wähle aus, ob das Design für Mobile oder Web generiert werden soll.
  5. Klicke auf “Generate Designs” und beantworte ggf. Folgefragen zur App-Struktur.
  6. Warte ca. 1-2 Minuten, bis Stitch die einzelnen Seitenvorschläge deiner App generiert hat.
  7. Passe dein Design an – z. B. Theme, Bilder, Schriftarten – über weitere Prompts oder das Theme-Menü.
  8. Klicke auf “Copy to Figma”, kopiere das Design und füge es direkt in dein Figma-Projekt ein.
  9. Bearbeite dein Mockup in Figma weiter – allein oder im Team.
  1. Verstehen, wie Google Stitch in der Beta-Version genutzt wird.
  2. Erlernen der schnellen Erstellung von UI-Designs per Prompt-Eingabe.
  3. Anpassung und Verfeinerung von generierten Designs über Prompts und UI-Optionen.
  4. Export von Design-Daten zur Weiterbearbeitung in professionellen Design-Tools wie Figma.
  5. Integration von Google Stitch in kollaborative Design-Workflows.
  1. Schnelles Prototyping von Web- und Mobile-App-Designs für Startups und Projekte.
  2. Designen individualisierter Dashboards oder Admin-Panels für interne Tools.
  3. Erstellen von Marketing-Materialien und Landingpages mit ansprechender UI-Gestaltung.
  4. Entwicklung von visuellen Mockups für Kundenpräsentationen und Pitchdecks.
  5. Design-Iteration und Testing im Team durch nahtlosen Export in kollaborative Designprogramme.
Als nächstes
Teilen

Neugierig auf mehr?

Bereits über 420 praxisorientierte und kompakte KI-Tutorials warten auf dich!