Lernen Sie Vibe Code mit Figma Make

1. Figma Make Intro: Hallo. Mein Name ist Greg Kang Ich bin ein kanadischer Inhaltsersteller, IT-Technologe und seit über einem Jahrzehnt als Leiter der Vibe-Programmierer verschiedener App-Plattformen wie Bolt Ich habe meinen Vibe-Coding-Kurs, generativen KI-Kurs, Open AI SA für KI-Videos, SynthesiaF AI-Videos sowie den Google VO den Google Jetzt haben wir Figma gemacht. Was ist Figma? Figma ist führend im UI- und UX-Bereich. Sie hatten kürzlich einen erfolgreichen Börsengang und haben eine sehr aufregende Funktion namens Figma Make in ihre Plattform eingeführt namens Figma Make in ihre Plattform Figma Make ist also eine KI-gestützte Vibe-Codierungsplattform Sie tatsächlich funktionierende funktionale Prototyp-Apps erstellen können funktionierende Wir sprechen über Apps zum Golf-Scoring. Wir sprechen über Online-Dating-Apps. Wir sprechen von Kryptowährungs-Dashboards mit echten Live-Daten Ich habe all diese Apps bereits mit Figma Make erstellt. Deshalb bringe ich meine Erfahrung mit Vibe-Coding auf verschiedene Plattformen Ich habe auch mit Bolt Dot U am weltweit größten Hackathon teilgenommen , und ich werde diese innovative Erfahrung in den Figma Make-Kurs einbringen diese innovative Erfahrung in den Figma Make-Kurs Dies ist ein anfängerfreundlicher Kurs. Sie müssen nicht wissen, wie man programmiert. Was Sie jedoch tun müssen , ist in der Lage zu sein, Ihre Vision oder Ihre Idee in natürlicher Sprache auf der KI-Plattform zu kommunizieren und zu artikulieren oder Ihre Idee in natürlicher Sprache , um Sie bei der Erstellung Ihrer Apps zu unterstützen Und ich werde Ihnen einige der Tipps beibringen , die das tatsächlich einfacher und schneller machen können. Ich gebe Ihnen eine Einführung in die Plattform. Wie fängst du an? Und ich werde Ihnen einen Vergleich der anderen Marktführer in diesem Bereich geben , wie Lovable, wie Replet Bol Dot NU, Googles OPO, Googles Gemini Canvas Ich freue mich darauf, Sie im Kurs zu sehen und Ihnen dieses hochmoderne Wissen beizubringen. Lass uns gehen. 2. Figma Make Tour: Hallo. Und willkommen auf der Figma-Online-Plattform Also habe ich ein Abonnement für 20 USD gekauft, dem Sie hier auf diese Plattform zugreifen können Hallo. Hier ist Greg. Ich gebe Ihnen einen kurzen Überblick Figma Make, die Vibe-Coding-Anwendung werde die Kamera entfernen , weil ich Ihnen die gesamte Oberfläche zeigen möchte. Also hier sind wir. Der Hauptbereich, in dem Sie arbeiten würden, ist die Eingabeaufforderung. Die Eingabeaufforderung befindet sich also unten links, und hier würden Sie die KI in natürlicher Sprache bitten, das zu erstellen, was Sie möchten. Also ich habe gerade alle meine Credits aufgebraucht, also wird diese Nachricht angezeigt, aber weil es noch sehr neu ist, wird es immer noch für mich funktionieren. Also haben sie hier auf der linken Seite einige Beispielaufforderungen. Das ist also der Anmeldeablauf, und ich kann im Grunde hier klicken und ihn bitten, den Anmeldeablauf zu erstellen Das mache ich etwas später. Ich möchte Ihnen einige andere Funktionen der Plattform zeigen. Also oben hier, wir haben die Vorschau aktualisiert. also nach Ihrer Vorschau Wenn Sie also nach Ihrer Vorschau Änderungen vornehmen, können Sie sie aktualisieren. Hier können Sie die Konsole öffnen, und hier können Sie tatsächlich die mobile Ansicht für verschiedene Telefone und Geräte aufrufen. Okay, die Vorschau bedeutet, dass Sie, sobald Sie Ihre Prototyp-App haben, sie tatsächlich sehen können. Sie können sie verwenden und mit ihr interagieren. Die Codeansicht ist der eigentliche Code hinter Ihrer App. Und dann auf der rechten Seite können Sie hier tatsächlich die Vollbildansicht Ihrer App öffnen. Hier hast du deine Einstellungen. Sie können Ihre App also benennen, ihr eine Meta-Beschreibung, eine Google Analytics-ID, ein Favicon-Bild , ein Social-Sharing-Bild und sogar einen benutzerdefinierten Code geben Sie können sowohl die Domain als auch die Datenbankintegrationen festlegen. der Schaltfläche „Veröffentlicht“ wird diese App tatsächlich mit einer Internet-URL veröffentlicht diese App tatsächlich mit einer Internet-URL Sie können sie auch mit anderen Figma-Benutzern sowie der Community oben rechts teilen anderen Figma-Benutzern sowie der Community oben rechts In Ordnung, das ist also die Hauptansicht. Ich werde uns vorerst nur hier rausholen. Also werden wir oben links klicken und dann zurück zu Dateien klicken. Das ist also eher das eigentliche Dashboard. Und hier drüben kannst du dein Konto sehen. Du hast das Thema, du kannst es leichter machen. Das ist vielleicht einfacher zu erkennen. Sie haben Ihre Einstellungen mit E-Mail, Community-Benachrichtigungen und Sicherheit. Und auf der linken Seite haben Sie Ihren Administrator Wenn Sie Ihr Team verwalten möchten, haben Sie den Papierkorb, alle Projekte, Entwürfe auf der linken Seite, und dann haben Sie Ihre Startprojekte hier auf der linken Und Sie haben hier oben die Community-Ressourcen. Und um auf die verschiedenen Figma-Anwendungen außerhalb von MAC zuzugreifen , befindet sich dies oben rechts Also Design, FIG Jam, Slides, Buzz, Site, aber wir konzentrieren uns auf MAC , der sich hier oben rechts befindet Also lass uns nochmal machen. Und lass uns einfach eine der Standardansagen verwenden , also melde dich einfach an. Das gibt uns hier unsere Aufforderung. Und beachten Sie einfach im Eingabeaufforderungsbereich, dass wir den Text ändern können. Wir können aus Figma importieren, wenn Sie andere Figma-Assets haben. Sie können ein Bild als Referenz hochladen , wenn Sie ein bestimmtes Design oder einen bestimmten Stil wünschen Ein Bild sagt viel Und hier drüben befindet sich Ihre Schaltfläche „ Zeigen und Bearbeiten“ Wenn Sie eine Vorschau haben und einen bestimmten Bereich angeben möchten, können Sie diesen auch verwenden. Und dann ist dies Ihre Enter-Taste, sobald Sie Ihre Aufforderung erhalten haben. Drücken wir also die Eingabetaste. Und auf der linken Seite können Sie sehen, dass die KI denkt, sie denkt. Und dann, in der Mitte , werden Ihr Profil und Ihre Bauvorschriften ausgearbeitet Ihr Profil und Ihre Bauvorschriften ausgearbeitet Also ja, diese Phase des Projekts kann einige Zeit dauern. Also, was ich tun werde, ist, dass das eine gute Gelegenheit ist, auf die Toilette zu gehen oder einen Kaffee zu trinken. Und wenn Sie dann zurückkommen, können Sie tatsächlich eine Vorschau der App anzeigen und mit ihr interagieren. Während dieser Phase können Sie auch zur Co-Ansicht gehen und sehen , wie der Code hier erstellt wird Okay, ich gehe zurück zur Vorschau. Und wenn es fertig ist, schauen wir uns die Vorschau die App an und interagieren damit. Okay, wir haben unsere Vorschau und können uns den Code ansehen. Wir können tatsächlich zu verschiedenen mobilen Ansichten wechseln. Ich werde hier einfach die Konsole schließen. Das ist also iPhone 16, Android usw., wir können zum Desktop zurückkehren Gehe zurück zur Desktop-Ansicht. Und lassen Sie uns einfach auf das vollständige Vorschaufenster klicken und dann probieren wir es aus. Okay, wir können also tatsächlich mit Gmail oder Apple weitermachen. Wir können eine Kopie davon machen und remixen. Ähm, wir interagieren also mit der App Wir können die Bilder hier tatsächlich ändern. Wie sieht das aus? Also das testet tatsächlich die E-Mail-Anmeldung. Greg H Okay. Willkommen an Bord. Das ist also der Flow. Das ist eine Vorschau-App. Von hier aus können wir die Eingabeaufforderung unten links verwenden die Eingabeaufforderung unten links , um es noch einmal zu wiederholen und einige Änderungen vorzunehmen Sie bitten es also im Grunde nur, bestimmte Änderungen vorzunehmen. Könnte Design, Farbe oder Funktionalität sein. Wir können das mit anderen Menschen teilen. Wir können es im Internet oder in der Community veröffentlichen. Wenn Sie dies also in der Community veröffentlichen möchten, können Sie das Optionsfeld aktivieren und dann auf Veröffentlichen klicken. Das wird also ein paar Minuten dauern. Aber im Grunde habe ich Ihnen hier in diesem Video einige der Kernfunktionen von Figma Make vorgestellt einige der Kernfunktionen von Figma Make Und wir haben weitergemacht und eine einfache App mit einer der Standardansagen erstellt eine einfache App mit einer der Standardansagen und sie veröffentlicht Damit ist diese Videolektion abgeschlossen. 3. Erstellen einer App mit einem Referenzbild: Okay, wir sind bei Figma Make, figma.com Flash M. Also eine etwas andere Ansicht als ich auf der Tour gemacht habe Aber wir haben hier die gleichen Standardanweisungen: Onboarding-Flow, Daten-Dashboard, Gradient-Galerie Daten-Dashboard Wir werden also einfach versuchen, eine App zu erstellen, indem wir die Eingabeaufforderung auf einmal verwenden Erstellen Sie einen Online-Videoeditor , der mobilfreundlich ist. Und lass los. Und jetzt öffnet es tatsächlich Fig Mamek. Also hat es die Aufforderung tatsächlich nicht verarbeitet. Hier können wir also tatsächlich ein Referenzbild hochladen. Okay, also werde ich dieses Referenzbild verwenden. Schau, wie ich es dort angehängt habe. Sie können die Bildvorschau unten links sehen, ein Online-Video erstellen, es für Mobilgeräte bearbeiten und die angehängte Datei als Design als Inspiration verwenden Okay. Jetzt drücke ich Enter. Jetzt denkt es nach. Anstatt also Annahmen zu treffen, wird Figma dieses Referenzbild verwenden und hoffentlich einen Videoschnitt aufbauen, der dem ähnelt , was ich beigefügt habe Also kann ich mir die Argumentation ansehen , den Argumentationsteil Ich erstelle einen mobilfreundlichen Online-Videoeditor von Ihrem Bild inspiriert ist, Hauptvideovorschau mit Wiedergabesteuerung, zusammenklappbare Werkzeuge-Seitenleiste mit Bearbeitungsstilen und schnellen Aktionen, eine berührungsfreundliche Timeline mit Video, Audiospuren, responsives Design, ein dunkles Design, das zum Inspirationsbild passt, sowie Export - und Speicherfunktionen Export Das klingt also gut. Mal sehen, was tatsächlich passiert. Schauen wir uns den Code hier an. Wunderbar. Okay, wir haben hier eine Vorschau. Wie sieht das aus? Sieht gut aus. Und ich erwarte nicht , dass das eine einmalige Aufforderung ist. Das ist Ihre Gelegenheit, es zu testen, zu sehen, was funktioniert, zu sehen, was bewiesen werden muss. Als Erstes frage ich mich, wo wir das Video eigentlich importieren können das Video eigentlich importieren Es sieht nicht so aus, als könnte ich die Zeitleiste anpassen. Lassen Sie uns die Stile für die automatische Bearbeitung ausprobieren. Das scheint nicht zu funktionieren. Funktioniert der Speichern-Button überhaupt? Okay, visuell gesehen haben wir einen guten Ausgangspunkt, aber an der Funktionalität muss noch viel gearbeitet werden. Wir müssen Videos importieren. Wir müssen die Größe des Zeitleistenbereichs tatsächlich ändern und wir benötigen die Möglichkeit, tatsächlich zu exportieren Also meine nachfolgende Aufforderung, ich kann all diese Vorschläge machen, aber als bewährte Methode sollten Sie es nicht übertreiben Sie könnten mit einer Funktion beginnen. Fügen Sie eine Schaltfläche zum Importieren von Videos hinzu, mit der Sie den Clip in der Timeline zuschneiden und das Video zum Speichern und Exportieren korrigieren können. Geben Sie ein. Hoffentlich können wir diese drei grundlegenden Fragen lösen. Nur der Zeit zuliebe, aber wenn nicht, ist eine Frage nach der anderen am besten. Sie können diese Option also einfach testen. Aber es ist leicht, gierig zu sein und zu viel zu verlangen, aber das kann auch das KI-Modell verwirren Okay, das ist die Bearbeitung meiner zweiten Frage. Mir ist also aufgefallen, dass es eine Schaltfläche zum Importieren von Videos gibt. Lass uns tatsächlich darauf klicken und sehen, ob das funktioniert. Also hier ist ein Video. Und lass mich sehen, ob ich es tatsächlich zuschneiden kann. Das ist eigentlich Funktion. Es sieht also so aus, als könnte ich es tatsächlich trimmen. Sieht so aus, als ob die Schaltfläche Speichern funktioniert. Im Grunde funktioniert Vibe-Coding so. Sie testen es und fügen die neuen Funktionen hinzu, bis Sie schließlich die ausgefeilte und funktionierende App erhalten Also werde ich dieses Projekt einfach mit meinem Team teilen dieses Projekt einfach mit meinem Team und später weiterarbeiten . Was wir hier getan haben, ist, dass wir eine Vorschau mit einem Referenzbild für die Videobearbeitungs-App erstellt haben, und wir haben nach dem Testen eine Follow-up-Aufforderung gemacht , um die fehlenden Funktionen zu korrigieren. 4. Wie ich eine Variante von Uno namens Bruno gemacht habe: Okay, wir sind bei Figma Make und ich habe eine Variante des Spiels Uno namens Bruno gemacht Und ich zeige dir die Anweisungen, wie ich es gemacht habe, und wir werden es zusammen durchgehen und veröffentlichen Fangen wir also einfach mit dem Spiel an. Ich mache einfach ein Beispielspiel. Also werde ich das Spiel hier einfach aktualisieren und ein neues Spiel starten. In Ordnung. Also das ist die Co-Ansicht, und das ist die Vorschau, in der wir tatsächlich spielen können. Das ist also im Grunde eine spielbare Version von Uno, aber sie heißt Bruno Also werde ich meinen Namen angeben. Ich werde einen KI-Spieler hinzufügen, den Computer. Und im Grunde ordnen wir Karten nach Nummer oder Farbe zu, rufen Bruno an und haben noch eine Karte übrig. Ich bin mir eigentlich nicht sicher, wie wir das mit diesem Spiel machen. Und ja, das Ziel ist es, deine Karte zu leeren. Also lass uns das Spiel starten. Also ist das Deck in der Mitte. Es ist also eine Skip-Turn-Karte. Äh, okay, also ich verwende dieselbe Farbe. Also jetzt ist es eine Sieben. Also kann ich entweder die Acht oder dieselbe Zahl verwenden , also mache ich Sieben. Ich klicke darauf und dann auf Play Card. Okay. Sie sehen also, der Computer ist kaputt gegangen. Derzeit sind es zwei. Ich hoffe also, dass ich mehr als zwei Karten auswählen kann. Das ist also eine Änderung , die ich am Spiel vornehmen muss. , wenn es die gleiche Zahl ist, sollte es mir technisch gesehen erlaubt sein, diese beiden zu stapeln, Also, wenn es die gleiche Zahl ist, sollte es mir technisch gesehen erlaubt sein, diese beiden zu stapeln, diese beiden zu verwenden Das ist also das, was wir die Testphase nennen, Benutzerakzeptanztests Wir haben also eine praktikable Version. Wir müssen sie testen, um zu sehen, ob es irgendwelche Fehler oder Verbesserungen gibt , die behoben werden müssen. Und dort würden wir eine Iteration durchführen. Also, die aktuelle Karte ist vier, also muss ich jetzt bestehen, weil ich nichts habe Was ist das? Regenbogen-Karte? Okay. Bruno hat Siege gekauft. Okay, schauen wir uns jetzt die Eingabeaufforderungen an. Die erste Aufforderung lautete also, eine für mehrere Mobilgeräte geeignete Version von no namens Bruno zu erstellen eine für mehrere Mobilgeräte geeignete Version und zu sagen, dass ich diese Unterstützung für zwei bis vier Spieler übernehmen werde Und ja, ich habe mich anfangs gefragt, ob ich eine Datenbank erstellen möchte. Aber ich denke, für diese Art von Spiel brauchst du keine Datenbank weil du einfach ein neues Spiel startest, du musst keine Daten speichern. Mein zweites Problem war also, ein süßes Bruno-Logo auf die Rückseite der Karten zu legen und die Möglichkeit zu geben , gegen den Computer, KI, zu spielen. Und genau das hat es getan. Und es gibt Version drei. Und jetzt möchte ich sagen, dem Benutzer die Möglichkeit geben, mehr als eine Karte auszuwählen. Falls zutreffend, zum Beispiel, wenn ein Spieler mehrere Karten mit derselben Nummer wie die Deckkarte hat mehrere Karten mit derselben Nummer . Ordnung. Also das ist ein Beispiel für Überarbeitung oder Oh, okay. In Ordnung, der Code wurde also aktualisiert. Und im Grunde werde ich, sobald dies erledigt ist , dieselbe Funktion erneut testen. Ich werde das hier nicht durchgehen, aber währenddessen möchte ich Ihnen nur die anderen Menüs oben zeigen . Sie können die mobile Vorschau sehen. Sie können die Desktop-Ansicht sehen. Und dann haben wir mit der mobilen Ansicht hier die Möglichkeit, Geräte zu wechseln. Das ist also der Vorteil von Figma. Oben rechts haben wir die Möglichkeit, das Spiel zu veröffentlichen Wir können ihm sogar ein Favicon geben. Wir können ihm eine Google Analytics-ID geben. Und wir können dieses Spiel veröffentlichen, was ich danach mache. Okay. Ich werde die Möglichkeit hinzufügen, mehrere Karten mit derselben Nummer auszuwählen und auszuspielen. Großartig. Also das ist etwas, das wir testen müssen. Andere Dinge, die wir tun können, sind es tatsächlich mit einer Domain zu verknüpfen. Sobald wir es veröffentlicht haben, können wir tatsächlich eine URL wie no.com für Dlash Bruno oder etwas Ähnliches, bruno.com , Aber Sie müssen diesen Domainnamen besitzen. Sobald das fertig ist, werde ich es veröffentlichen. Schauen wir uns auch den Share-Button an. Sie haben also die Möglichkeit, es mit anderen zu teilen, und Sie können ihnen die Möglichkeit geben, es zu bearbeiten und anzusehen. Sie können es mit einem Passwort schützen und in der Community veröffentlichen, in der Community veröffentlichen, was ich vielleicht tun werde. Ich warte nur darauf, dass es zu Ende ist. Und es sieht so aus, als ob Version vier fertig ist und wir haben einen Fehler. Es behebt also die Fehler automatisch. Und ich glaube, das zugrundeliegende Modell ist nahezu anthropisch ist anderen Vibe-Coding-Plattformen wie Bolt Dot U sehr ähnlich anderen Vibe-Coding-Plattformen wie Bolt Dot U . Es hat also eine ähnliche Logik Es ist also ziemlich intelligent. Sie können mit ihm in natürlicher Sprache sprechen. Und wenn Sie etwas reparieren müssen, können Sie einfach sagen, beheben Sie den Fehler. Ordnung, also was ich tun werde, ist das einfach zu veröffentlichen Wenn ich es also in der Community veröffentlichen möchte, könnte ich das im Grunde hier tun und auf Veröffentlichen klicken Und das werde ich tun, nachdem der Agent diese Autofix-Fehler behoben Da haben wir es also, hinter die Kulissen eines Bruno-Multiplayer-Spiels 5. Einführung in die Figma Make Community: Ordnung, jetzt veröffentliche ich dieses Spiel für die Community, damit die Community es tatsächlich spielen kann Sie können es remixen und ihre eigenen Variationen des Spiels erstellen Und in der Community können Sie sich tatsächlich andere Anwendungen ansehen . Also hier ist meins. In Ordnung. Und sehen Sie, wir können tatsächlich andere Community-Anwendungen sehen. Schauen wir uns das einfach mal an. Fortune Cookie, Button-Effekt, Mini-Controller, E-Commerce, Taschenrechner der Marke Figma, sogar eine Unternehmenswebsite Okay. Lass es uns versuchen Lass uns diese App hier ausprobieren. Ansicht mit 180-Grad-Drehung der Produktion. Sie sehen also, wir haben die Fähigkeit, es zu hören. Wir können es speichern und nach unserer eigenen Vorstellung neu mischen . Okay, und ich kann auch die Eingabeaufforderungen sehen, die dieser Benutzer verwendet. Ich möchte eine 180-Grad-Drehung für mein Produkt. Okay? Und dann sehen wir die Ausgabe hier und dann sehen wir eine weitere Eingabeaufforderung. Dieser Benutzer verwendet Großbuchstaben für seine Eingabeaufforderungen, damit sie leichter zu befolgen sind Ja, füge all diese hinzu und mache die Rotation reibungsloser. Sag mir, ob ich mehr Bilder und Winkel von Chachi BT importieren kann , sag mir die Winkel und ich werde sie bekommen Diese Benutzer führen also tatsächlich eine Art Konversation mit den KI-Agenten Für die Farben haben wir Schwarz, Weiß, Rot, Marineblau, machen 30$ Okay. Also los geht's. Hier ist sein Hoodie und wir können ihn sogar wechseln. Das ist also ziemlich cool Sie können Dies wäre ein gutes Modell für verschiedene Arten von Produkten Es ist schön, dass er das hier geteilt hat. Wir haben automatische Rotationen. Es war sehr cool. Ich werde tatsächlich mit diesem herumspielen. Das ist also ein Beispiel Veröffentlichen in der Community und das anschließende Remixen einer anderen Figma-App aus der 6. Figma-Solana-Monopol: Ich werde mein mit Vibe codiertes Spiel Solana Monopoly vorführen. Dieses Spiel soll also ein lustiger Prototyp sein. Monopoly mit Slana spielen. Und das kann tatsächlich deine Brieftasche verbinden. Es ist nicht real, aber es könnte sehr real sein. Und im Grunde ist dies eine gute Möglichkeit, sich mit dem Salana-Krypto-Token vertraut zu mit dem Salana-Krypto-Token machen, während Sie ein lustiges klassisches Spiel spielen Und Salanas ist eine dieser energieeffizienten Blockchains, die nicht teuer ist. Deshalb wurde ich inspiriert, Solana zu verwenden Also führe ich dich einfach zuerst durch das Spiel und dann schauen wir uns Ich benutze die Plattform, die Figma entwickelt hat. Also haben wir hier damit begonnen, unseren Charakter auszuwählen, und wir brauchen mindestens zwei Spieler Und lass uns einfach sehen. Vielleicht brauchen wir vier. Okay, wir haben hier einige wichtige Spieler geschaffen und wir haben den Silana-Vorstand Spieler eins hat also 0,1 500, also keine Eigenschaften. Lass uns die Würfel würfeln. Okay. Also wo ist die D-Linie? Eins, zwei, drei, vier , fünf, sechs, sieben, acht, neun und alles klar. Spieler drei hat also die Möglichkeit , Rainbow Bridge für 0,022 SOL zu kaufen Okay, also Spieler drei besitzt Rainbow Bridge, die sich hier drüben befindet Also gehört ihnen dieses Grundstück, und jetzt werden wir das Glück herausfordern. Ich könnte diese Spieler ein bisschen größer machen. Es ist schwer zu erkennen. Aber das ist definitiv ein Spiel , das wiederholt werden kann Wie dem auch sei, es ist ein Spiel , bei dem es darum geht, ein Krypto-Asset anzuhäufen, Und schauen wir uns die Eingabeaufforderungen an. Erstellen Sie also zunächst ein lustiges Monopoly-Spiel, bei dem der Salon und die Kryptotken als Belohnung zum Spielen verwendet und die Kryptotken als Machen Sie es zu Bruchteilen, damit es Spaß macht, es zu spielen, also ist es nicht Und es hieß: Klar, lasst uns das Spiel machen und hat Version eins erstellt Die erste Version war also nicht wirklich schön anzusehen, war nicht sehr visuell ansprechend. Und es gab viele Stellen auf dem Brett. Also sagte ich, mach das Brett optisch ansprechender, mobilfreundlicher und weniger Flecken auf dem Brett und bunter und erlaube es , einen niedlichen Charakter als Spielerfigur auszuwählen. Also hieß es: Okay, wir reduzieren die Brettfelder um 40 bis 20 und fügte die niedlichen Spielerstücke hinzu, die wir gesehen haben Und Salana Monopoly wurde komplett neu gestaltet. Und das war Version drei. Und nur noch eine Aufforderung. Ich habe den Text korrigiert, während er aus der Tafel herausläuft. Wir hatten also diese Namen mit den Board-Beschreibungen , die aus den Boxen herauskamen Also hat es das behoben. Und das bringt uns zu unserer Kartenversion , mit der ich ziemlich zufrieden bin. Schauen wir uns einfach kurz den Code an. 206 Zeilen. Und es macht mir nichts aus, das zu veröffentlichen. Und so würden wir veröffentlichen gehen. Und es macht mir nichts aus, es mit der Community zu teilen, also klicken wir einfach auf Veröffentlichen. Das ist es also. Ich hoffe, dir hat das Intro zu Salana Monopoly gefallen. 7. Remix eines E-Commerce-Shops mit Stripe-Integration: Okay, ich möchte dir einen Remix zeigen, den ich gemacht habe. Also diese App hier, 180-Grad-Produktrotationsanzeige Also mische ich das neu und zeige dir einfach das fertige Produkt Also hier ist die Paddellounge. Dies ist eine Pickleball-E-Commerce-Site . Und das Hauptmerkmal dieser Seite ist die Möglichkeit, die Paddel so zu drehen Wir können hier auch hineinzoomen. Zurücksetzen. Und wenn wir das Paddel wählen, können wir es in einen Warenkorb legen Also füge die Karte hinzu, damit wir den Warenkorb dort sehen können. Das ist also nur im Demo-Modus. Wir werden eigentlich keine Zahlung bearbeiten, aber das könnte leicht funktionieren, wenn Sie den API-Schlüssel von Stripe erhalten und ihm einfach in Ihrer Aufforderung mitteilen, dass Sie einen echten Zahlungsvorgang wünschen, und dann würden Sie den API-Schlüssel in einem sicheren Ordner teilen , und los geht's. Sie haben einen ziemlich guten Prototyp, sogar eine funktionierende App, bei der Sie sich auf ein Produkt konzentrieren und sie vorführen könnten. Und das sind einfach, ich würde nicht sagen, die besten Screenshots, aber ja, Sie haben die Idee, dass wir das Produkt automatisch drehen und das Produkt aus verschiedenen Blickwinkeln betrachten könnten automatisch drehen und . Lassen Sie mich Sie also hinter die Kulissen mitnehmen, wie ich das gemacht habe. Lass uns also zu meinem Projekt gehen. Also habe ich das ursprüngliche Projekt neu gemischt. Also habe ich mit dem Remix angefangen. Okay. Und ich kann alle Eingabeaufforderungen sehen, die sie benutzt haben Also scrolle ich einfach nach unten, bis ich herausfinde , wo ich in dieser App angefangen habe Okay, ich glaube, es ist Version sechs. Also meine erste Aufforderung, ich habe ein Bild von einem Pickleball-Paddel angehängt und gesagt: Benutze diesen Pickleball-Aufsatz für das Produktbild und nenne ihn VaticProprism und Okay, ich habe Version 7 erstellt und den Hoodie erfolgreich durch ein Pickleball-Paddel ersetzt und mir ein Bild wie dieses ein Also dachte ich, lassen Sie mich noch einen Schritt weiter gehen Lass uns mehr Fotos hochladen. Nun, davor wollte ich das Header-Bild ändern. Hängen Sie also ein Bild von Pickleball an, und ich habe es gebeten, dieses Bild in der Kopfzeile zu verwenden und den Laden Powdle Lounge zu nennen und die Preise aufzulisten In Ordnung? Also das hat Version acht erstellt Und dann, bei der nächsten Aufforderung, habe ich einen weiteren Screenshot des Pickleball-Paddels aus einem anderen Winkel hinzugefügt des Pickleball-Paddels aus einem anderen Winkel Ich sagte, verwende diese zusätzlichen Paddelbilder für Dadurch wurde Version neun erstellt. Und dann habe ich mit derselben Aufforderung einen weiteren Winkel hinzugefügt Benutze die Positions-Palimages für die automatische Dadurch wurde Version zehn erstellt. Und dann habe ich noch einen Screenshot mit einem anderen Blickwinkel hinzugefügt , genau dieselbe Aufforderung. Und dann war die letzte Frage Kannst du einen Einkaufswagen mit Stripe-Integration hinzufügen? Das bringt uns also zu Version 11. Um das einzurichten, brauchte es eine Datenbank, also eine hervorragende Integration Und das brachte uns zu Version 14. Sie können hier also sehen, wie wir mit dem Remix angefangen haben, und ich habe ihn im Grunde an ein anderes Produkt angepasst Und das Hauptmerkmal dieser Seite war automatische Rotation des Produkts Aber ich habe es auch um einen Einkaufswagen erweitert. Schauen wir uns den Code hier also kurz an. Ich denke, das ist eine ziemlich detaillierte App, wenn nur diesen ganzen Code anschaut. Wenn wir also die API hinzufügen wollen, ich, ob ich einen Stripe-API-Schlüssel habe , um echte Zahlungen zu verarbeiten Wo kann ich ihn sicher teilen . Wo kann ich ihn sicher teilen und in der App aktualisieren Also Walt Dot New, ich bin mit dem Prozess vertraut. Es gibt einen ENV-Ordner, in den wir ihn einfach kopieren und einfügen können Okay, also im Grunde richtet es diesen Bereich ein und du fügst ihn einfach hier Fügen Sie es hier ein und klicken Sie auf Create Secret. Also los geht's. 8. Figma Zusammenfassung erstellen: Danke, dass du am Figma Make-Kurs teilgenommen hast. Ich hoffe es hat dir gefallen Ich hoffe, du hast viel gelernt und es hat deine Kreativität zum Fließen gebracht. Es braucht eine Menge all Ihrer Ideen und kann sie tatsächlich zum Leben erwecken, einen funktionierenden Prototyp, egal ob es sich um einen funktionierenden Prototyp, egal ob es eine Golftor-App oder ein Kryptowährungs-Dashboard handelt. Jetzt haben Sie die Macht , ob Sie UI- oder UX-Designer oder nur ein Inhaltsersteller oder Geschäftsinhaber sind, wer auch immer, Sie können jetzt Figma verwenden funktionale Apps zu erstellen und zu Sie können die Community auch nutzen, um Ideen zu sammeln und Ihre App mit der Community zu teilen Und dieser Bereich verändert sich so schnell, dass ich davon ausgehe, dass sich regelmäßig Änderungen ergeben werden. Deshalb werde ich versuchen, diesen Kurs auf dem neuesten Stand zu halten. Sie interessieren sich für andere Vibe-Coding-Plattformen wie Bolt Dot U, dann habe ich Kurse dazu, falls Sie tiefer eintauchen möchten Sie haben eine kurze Einführung in die anderen Wettbewerber bekommen. Ich habe dir einen Vergleich gegeben. Was ich an Figma M mag , ist , dass Sie das Team einbeziehen können Sie können es mit dem Team teilen. Sie erhalten Zugriff auf viele visuelle Kontrollmöglichkeiten, die visuell ansprechendsten Apps mit Vibe-Codierung, und die Stärke von Figma liegt in der Benutzeroberfläche, das ist also zu erwarten auch sei, ich hoffe, dass Ihnen der Kurs gefallen hat, und danke, dass Sie zu uns gekommen sind. Tschüss