Designs und Bilder an einen Prompt anhängen

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.

Wenn du mit Figma Make funktionale Prototypen, Web-Apps und interaktive Benutzeroberflächen erstellst, kannst du Designs und Bilder an deine Prompts anhängen, um die KI zu einem zufriedenstellenden Ergebnis zu führen.

Du kannst bis zu drei Anhänge pro Prompt haben, und diese Anhänge können eine beliebige Mischung aus Designs und Bildern sein.

Ein Design anhängen

Wenn du ein Design an einen Prompt in einer Konversation anhängst, kann das in Figma Make verwendete KI-Modell das Design interpretieren und die Ebenen und Inhalte in funktionalen Code übersetzen. Das Ergebnis wird versuchen, die Form des Designs, einschließlich Text und Bilder, so genau wie möglich nachzubilden, während es deine Anweisungen und andere Anhänge berücksichtigt.

Es gibt zwei Möglichkeiten, Figma-Designs an eine Prompt anzuhängen:

• Klicke im Eingabefeld auf +, dann Aus Figma importieren und suche nach dem Design, der Komponente oder der Community-Datei, die du anhängen möchtest.

• Kopiere Designs aus deinen Dateien in Figma Design in das Eingabefeld ein.

Suche nach einem Design

Wenn du eine Marke erstellst oder bearbeitest und auf Aus Figma importieren klickst, erscheint das Modal „Design anhängen“. Im modal „Design anhängen“ kannst du nach Komponenten und Frames in Projekten deiner Teams und deiner Organisation suchen.

Um Designs und Community-Inhalte zu finden, gib etwas in die Suche ein.

Das Suchfeld im Anhänge-Modal unterstützt auch die visuelle Suche. Um die visuelle Suche zu verwenden, klicke im Suchfeld auf visuelle Suche und wähle ein Bild als Orientierungshilfe aus.

Klicke auf „Mehr anzeigen“, um Komponenten oder andere Designs zu durchsuchen, die zu deinen Suchbegriffen passen.

Wenn du eine Komponente auswählst, kannst du klicken:

• Einfügen, um es direkt in das Eingabefeld hinzuzufügen
• Gehe zur Hauptkomponente, um die Original-Designdatei in einem neuen Tab zu öffnen.

Wenn du unter andere Designs ein Design auswählst, kannst du klicken:

• Design anhängen, um es der Prompt hinzuzufügen
• Datei öffnen, um die ursprüngliche Designdatei in einem neuen Tab zu öffnen
• Vorschau, um eine große Vorschau des Designs zu sehen

Wenn du in einer Organisation bist, werden in der Suche Bibliotheken angezeigt, die als Ressourcen genehmigt und standardmäßig aktiviert wurden.

Du kannst auch auf Community klicken, um Designs aus der Figma-Community zu durchsuchen, die deinen Suchbegriffen entsprechen.

Ähnlich wie bei anderen Designs in deiner Community kannst du beim Auswählen eines Community-Designs auf Folgendes klicken:

• Design anhängen, um es der Prompt hinzuzufügen
• In der Community öffnen, um die Community-Liste in einem neuen Tab zu öffnen
• Vorschau, um eine große Vorschau des Designs zu sehen

Ein Bild anhängen

Um das Modell bei der Erstellung eines funktionsfähigen Prototyps oder einer Web-App zu unterstützen, kannst du Bilder bereitstellen. Das Modell kann deine Bilder nicht exakt nachbilden — betrachte sie als einen Vorschlag für die Richtung, die das Modell einschlägt. Das Modell tut sein Bestes, um Text, Farben und die Position von Elementen im Bild zu replizieren, aber die Ergebnisse können sich dennoch von den im Bild dargestellten Ergebnissen unterscheiden.

Es gibt zwei Möglichkeiten, Bilder an eine Prompt anzuhängen.

• Klicke im Promptsfeld auf +, dann  Bild hochladen und wähle das Bild aus dem Datei-Browser deines Systems aus.

• Kopiere das Bild und füge es in das Eingabefeld ein.

Best Practices für die Arbeit mit Anhängen

Wenn du mit dem Anhängen von Bildern und Designs an deine Prompt arbeitest, findest du hier einige Best Practices, die du befolgen solltest.

Allgemeine Best Practices

• Verwende in Designs nach Möglichkeit Auto-Layout. Wenn du ein Design oder eine Komponente anhängst, versteht das System den Fluss von Inhalten mithilfe von Auto-Layout gut.
• Konzentriere dich zuerst auf das Layout und dann auf die Funktionalität. Wähle das gewünschte Layout aus und füge dann mit den folgenden Anweisungen weitere Funktionen hinzu.
• Arbeite in Schritten. Anstatt zu versuchen, dem System eine vollständige End-to-End-Beschreibung des gewünschten Ergebnisses zu geben, beginne mit einer allgemeinen Beschreibung dessen, was du möchtest. Dann füge während der Arbeit immer mehr Details und Funktionen hinzu. Wenn du Komponenten und Bilder von komplexeren Designs anhängst, hänge sie Frame für Frame an, anstatt alles auf einmal.
• Iteriere das Ergebnis. Bei komplexen funktionalen Prototypen oder Web-Apps sind wahrscheinlich mehrere Gesprächsrunden nötig, um ein Ergebnis zu erzielen, das alle deine Anforderungen erfüllt. Zögere nicht, dem System mitzuteilen, wo die Funktionalität falsch ist. Gib dabei Beispiele für die gewünschten Ergebnisse.
• Gemeinsame Designelemente und Layouts sorgen für die besten Ergebnisse auf Anhieb. Zum Beispiel funktionieren einfache Galerien und Web-Apps, die nur einen primären Frame verwenden, bei ähnlichen Designansätzen gut. Komplexere oder neuartigere Layouts erfordern möglicherweise zusätzliche Prompts.
• Konzentriere dich auf Desktop- und Vollbild-freundliche Ergebnisse. Wir arbeiten daran, die mobile Ausgabe zu verbessern, aber im Moment funktionieren Inhalte, die auf Vollbildschirme passen, am besten.

Einzelne Anhänge

Wenn du mit einzelnen Anhängen arbeitest, solltest du diese Best Practices befolgen.

• Gib einen exakten 1:1-Build oder eine Referenz als Stil an. Sag dem System in deinem Prompt, ob du eine exakte 1:1-Build des Anhangs möchtest oder ob der Anhang als Stilvorlage/Referenz dienen soll.
• Füge Details für jeden Abschnitt des Builds hinzu. Für die genaueste 1:1-Nachbildung kannst du deine Wünsche genauer angeben. Versuche, dies Abschnitt für Abschnitt in deinem Design zu tun. Du kannst das Modell auch bitten, beim Verfassen einer detaillierteren Prompt zu helfen.

Mehrere Anhänge

Wenn du mit mehreren Anhängen arbeitest, findest du hier einige Best Practices, die du befolgen solltest.

• Bildschirm für Bildschirm erstellen. Du kannst mehrere Designs oder Bilder anhängen, aber um die besten 1:1-Ergebnisse zu erzielen, versuche, jeweils nur ein oder zwei Designs anzuhängen. Denk daran: Das System merkt sich, was du angehängt hast. Wenn es es also beim ersten Mal nicht erhalten hat, erinnere es daran, was du angehängt hast, und versuche es erneut.
• Stilverweise auf mehreren Bildschirmen. Du kannst mehrere Designs oder Bilder anhängen, um den gewünschten Stil zu erstellen. Denk aber daran, dem System mitzuteilen, dass die Bilder als Inspiration dienen sollen und nicht 1:1 übernommen werden sollen.

Probleme lösen

Wenn du versuchst, auftretende Probleme zu beheben oder zu umgehen, findest du hier einige Best Practices, die du befolgen solltest.

• Versuche kleinere Designs. Wenn dein Design nicht originalgetreu nachgebildet wird, versuche es mit einem kleineren Anhang für eine genauere Verarbeitung.
• **Versuche es mit weniger Bildern und weniger inhaltsreichen Designs.** Wenn du Designs mit vielen Bildern, SVGs oder Vektorillustrationen anhängst, kann das System manchmal Probleme haben. Versuche, die Bildqualität oder -größe zu verringern oder einen weniger umfangreichen Anhang zu verwenden.