Apprendre à coder avec Figma Make

1. Introduction à Figma Make: Bonjour. Je m'appelle Greg Kang Je suis un créateur de contenu canadien, technologue informatique et un leader depuis plus de dix ans codeur Vibe sur diverses plateformes d'applications telles que Bolt Dot NU J'ai mon cours de codage Vibe, mon cours IA générative, mes vidéos Open AI SA pour l'IA, mes vidéos SynthesiaF AI, ainsi que le cours vidéo Google VO Three AI Maintenant, nous avons Figma Make. Qu'est-ce que Figma ? Figma est le leader de l'interface utilisateur et de l'espace UX. Ils ont récemment eu une introduction en bourse réussie et ils ont introduit une fonctionnalité très intéressante sur leur plateforme appelée Figma make Figma Make est donc une plateforme de codage Vibe alimentée par l'IA où vous pouvez réellement créer des prototypes d'applications fonctionnelles et fonctionnelles Nous parlons d'applications de notation de golf. Nous parlons d'applications de rencontres en ligne. Nous parlons de tableaux de bord de cryptomonnaies contenant des données réelles en temps réel J'ai déjà créé toutes ces applications avec Figma Make. J'apporte donc mon expérience du vibe coding sur différentes plateformes J'ai également participé au plus grand hackathon du monde avec Bolt Dot U, et je vais apporter cette expérience de pointe au cours Figma Make Il s'agit d'un cours adapté aux débutants. Vous n'avez pas besoin de savoir comment coder. Mais ce que vous devez faire, c'est être capable communiquer et d' articuler votre vision ou votre idée en langage naturel la plateforme d'intelligence artificielle pour vous aider à créer vos applications Et je vais vous donner quelques conseils qui peuvent réellement vous faciliter et accélérer les choses. Je vais vous présenter la plateforme. Comment commencez-vous ? Et je vais vous donner une comparaison des autres leaders du secteur, comme Lovable, comme Replet Bol point NU, OPO de Google, Gemini Canvas de Google donc hâte de vous voir suivre le cours et de vous enseigner ces connaissances de pointe. Allons-y 2. Tour de Figma: Bonjour. Et bienvenue sur la plateforme en ligne Figma J'ai donc acheté un abonnement de 20 dollars américains, ce qui vous donne accès à cette plateforme ici. Bonjour. Voici Greg. Je vais vous présenter un bref aperçu de Figma Make, l' application de codage Vibe pour vais retirer la caméra car je veux vous montrer l'interface dans son intégralité. Nous y voilà donc. Le principal domaine dans lequel vous travailleriez est l'invite. L'invite se trouve donc en bas à gauche, et c'est là que vous pouvez utiliser le langage naturel pour demander à l'IA de créer ce que vous voulez. J'ai donc épuisé tous mes crédits en ce moment, donc ce message s'affiche, mais comme il est encore très récent, il fonctionnera toujours pour moi. Ils ont donc quelques exemples d' instructions ici sur la gauche. Il s'agit donc du flux d'inscription, et je peux simplement cliquer ici et lui demander de créer le flux d'inscription Je le ferai un peu plus tard. Je souhaite vous montrer d'autres fonctionnalités de la plateforme. Donc, en haut, nous avons un aperçu actualisé. Ainsi, après votre aperçu, si vous apportez des modifications, vous pouvez l'actualiser. Ici, vous pouvez ouvrir la console, et ici vous pouvez réellement obtenir la vue mobile pour différents téléphones et appareils. OK, donc l'aperçu, c'est qu'une fois que vous avez votre prototype d'application, vous pouvez réellement le voir. Vous pouvez l'utiliser et interagir avec lui. La vue du code est le code réel qui sous-tend votre application. Et puis, sur le côté droit, c'est là que vous pouvez réellement ouvrir la vue plein écran de votre application. Ici, vous avez vos paramètres. Vous pouvez donc donner un nom à votre application, lui donner une méta-description, un identifiant Google Analytics, image de favicon, une image de partage social et même lui donner un code personnalisé Vous pouvez définir le domaine ainsi que les intégrations de base de données. Le bouton publié publiera en fait cette application avec une URL Internet, et vous pouvez également la partager avec d'autres utilisateurs de Figma ainsi qu' la communauté en haut à droite Très bien, c' est donc la vue principale. Je vais juste nous faire sortir d'ici pour le moment. Nous allons donc cliquer en haut à gauche et revenir sur Fichiers. Il s'agit donc davantage du tableau de bord proprement dit. Et ici, tu peux voir ton compte. Vous avez le thème, vous pouvez le rendre plus léger. C'est peut-être plus facile à voir en fait. Vous avez défini les paramètres relatifs à votre e-mail, aux notifications de la communauté et à la sécurité. Et sur la gauche, vous avez votre administrateur, si vous voulez gérer votre équipe, vous avez la corbeille, tous les projets, les brouillons sur le côté gauche, puis vous avez vos projets de départ ici sur la gauche Et vous avez les ressources communautaires au sommet ici. Et pour accéder aux différentes applications Figma en dehors du MAC, c' est en haut à droite Donc design, FIG Jam, slides, buzz, site, mais nous nous concentrons sur MAC, qui est ici en haut à droite. Alors allons-y à nouveau. Et utilisons simplement l'une des instructions par défaut, alors inscrivez-vous. Alors, donne-nous notre message ici. Et remarquez simplement que dans la zone d'invite, nous pouvons modifier le texte. Nous pouvons importer depuis Figma si vous avez d'autres actifs Figma. Vous pouvez télécharger une image comme référence si vous souhaitez un design ou un style particulier, une image en dit long. Et voici votre bouton de pointage et d'édition Si vous avez un aperçu et que vous souhaitez spécifier une certaine zone, vous pouvez réellement l'utiliser. Et puis c'est votre bouton Enter une fois que vous avez reçu votre invite. Alors, appuyons sur Entrée. Et sur le côté gauche, vous pouvez voir que l'IA pense, elle raisonne. Et puis, au centre, il s'agit de créer votre profil ainsi que le code du bâtiment. Donc oui, cette phase du projet peut prendre un certain temps. Donc ce que je vais faire, c'est que c'est une bonne occasion d'aller aux toilettes ou de prendre un café. Et puis, lorsque vous revenez, vous pouvez réellement prévisualiser l'application et interagir avec elle. Au cours de cette phase, vous pouvez également accéder au co Vew et vous pouvez voir en train de créer le code ici OK, je vais revenir à l'aperçu. Ensuite, une fois que ce sera fait, nous vérifierons l'aperçu, l'application, et nous interagirons avec elle. OK, nous avons donc notre aperçu, et nous pouvons vérifier le code. Nous pouvons en fait accéder à différentes vues mobiles. Je vais juste fermer la console ici. C'est donc l'iPhone 16, Android , etc., nous pouvons revenir au bureau Revenez à la vue du bureau. Et en fait, il suffit de cliquer sur la fenêtre d'aperçu complet, puis nous allons essayer. D'accord, nous pouvons donc continuer avec Gmail ou Apple. Nous pouvons en faire une copie et le remixer. Hum, nous interagissons donc avec l'application. Nous pouvons réellement modifier les images ici. À quoi cela ressemble-t-il ? Cela teste donc en fait la connexion par e-mail. Greg H : D'accord. Bienvenue à bord. C'est donc le flux. Il s'agit d'une application de prévisualisation. À partir de là, nous pouvons utiliser l'invite en bas à gauche pour réitérer et apporter quelques modifications. Donc, vous lui demandez simplement d'apporter certaines modifications. Cela peut être le design, la couleur ou la fonctionnalité. Nous pouvons partager cela avec d'autres personnes. Nous pouvons le publier sur Internet ou dans la communauté. Donc, si vous souhaitez le présenter à la communauté, vous pouvez activer ce bouton radio puis cliquer sur Publier. Cela prendra donc quelques minutes. Mais en gros, ce que j'ai fait ici dans cette vidéo, vous présenter certaines des fonctionnalités de c'est vous présenter certaines des fonctionnalités de base de Figma Make Et nous sommes allés de l'avant et nous avons créé une application de base avec l'une des instructions par défaut, et nous l'avons publiée. C'est ainsi que s'achève cette leçon vidéo. 3. Comment créer une application à partir d'une image de référence: OK, nous sommes chez Figma Make, figma.com flash M. La vue est donc légèrement différente de celle que j'ai vue pendant la tournée Mais nous avons les mêmes instructions par défaut ici : flux d'intégration, tableau de bord de données, galerie de dégradés Nous allons donc simplement essayer de créer une application en utilisant l' invite en une seule fois. Créez un éditeur vidéo en ligne adapté aux mobiles. Et lâchez prise. Il s'agit donc d' ouvrir Fig Mamek maintenant. Il n'a donc pas réellement traité l'invite. C'est donc ici que nous pouvons réellement télécharger une image de référence. OK, je vais donc utiliser cette image de référence. Voyez comment je l'ai attaché là. Vous pouvez voir l' aperçu de l'image en bas à gauche, créer une vidéo en ligne, effectuer des modifications adaptées aux appareils mobiles et utiliser le fichier joint comme design ou source d'inspiration D'accord. Maintenant, je vais appuyer sur Entrée. Maintenant c'est une question de réflexion. Donc, plutôt que de faire des suppositions, Figma va utiliser cette image de référence et espérons-le, créer un montage vidéo, similaire à ce que j'ai joint Je peux donc vraiment jeter un œil au raisonnement, à la partie du raisonnement. Je vais créer un éditeur vidéo en ligne adapté aux mobiles inspiré de votre image, aperçu vidéo principal avec commandes de lecture, barre latérale d'outils pliable avec styles d' édition et des actions rapides, chronologie tactile avec vidéo, pistes audio, un design réactif, thème sombre correspondant à l'image d'inspiration, exportation et de sauvegarde Donc ça sonne bien. Voyons ce qui se passe réellement. Jetons un coup d' œil au code ici. Merveilleux OK, nous avons donc un aperçu ici. À quoi cela ressemble-t-il ? Ça a l'air bien. Et je ne m'attends pas, vous savez, à ce que ce soit une réponse ponctuelle. C'est l'occasion pour vous de le tester, voir ce qui fonctionne, de voir ce qui doit être prouvé. Donc, la première chose que je me demande, c'est où pouvons-nous réellement importer la vidéo ? Il ne semble pas que je puisse ajuster la chronologie. Essayons les styles d'édition automatique. Cela ne semble pas fonctionner. Le bouton de sauvegarde fonctionne-t-il même ? OK, donc visuellement parlant, nous avons un bon point de départ, mais il reste encore beaucoup à travailler sur les fonctionnalités . Nous devons importer des vidéos. Nous devons réellement redimensionner la zone chronologique, et nous avons besoin de pouvoir réellement exporter Donc, dans mon message de suivi, je peux faire toutes ces suggestions, mais en tant que meilleure pratique, il ne faut pas en faire trop Vous pouvez commencer par une fonctionnalité. Ajoutez un bouton d'importation vidéo avec la possibilité de découper le clip dans la chronologie et corriger l'enregistrement et l' exportation de la vidéo. Entrez. J'espère donc que nous pourrons résoudre ces trois problèmes de base. Juste pour gagner du temps, mais si ce n'est pas le cas, une seule demande à la fois est préférable. Vous pouvez donc simplement tester cette option. Mais il est facile d'être gourmand et d'en demander trop, mais cela peut également embrouiller le modèle d'IA OK, c'est le traitement de ma deuxième demande. J'ai donc remarqué qu'il existe un bouton d'importation de vidéo. Cliquons dessus et voyons si cela fonctionne. Voici donc une vidéo. Et laissez-moi voir si je peux vraiment le couper. C'est en fait une fonction. Il semble donc que je puisse vraiment le couper. Il semblerait que le bouton de sauvegarde fonctionne. En gros, c'est ainsi que fonctionne le Vibe Coding. Vous la testez, vous ajoutez les nouvelles fonctionnalités jusqu'à ce que vous obteniez finalement l'application peaufinée et fonctionnelle. Je vais donc simplement partager ce projet avec mon équipe et continuer à travailler avec elle plus tard. Nous avons donc créé un aperçu à l'aide d'une image de référence pour l'application de montage vidéo, et nous avons envoyé une demande de suivi après l'avoir testée pour corriger les fonctionnalités manquantes. 4. Comment j'ai réalisé une variante de Uno appelée Bruno Bruno: OK, nous sommes sur Figma Make, et j'ai créé une variante du jeu Uno appelée Bruno Et je vais vous montrer comment je l'ai créé, et nous allons le parcourir et le publier ensemble Commençons donc par le jeu. Je vais juste faire un exemple de jeu. Je vais donc simplement rafraîchir le jeu ici, en démarrer un nouveau. C'est bon. C'est donc la vue conjointe, et c'est l'aperçu où nous pouvons réellement jouer. Il s'agit donc essentiellement d'une version jouable d'Uno, mais elle s'appelle Bruno Je vais donc mettre mon nom. Je vais ajouter un lecteur AI, l'ordinateur. Et en gros, on fait correspondre les cartes par numéro ou par couleur, appelle Bruno avec une carte restante. En fait, je ne sais pas comment nous y parvenons avec ce jeu. Et oui, le but est de vider votre carte. Commençons donc le jeu. Le deck est donc au milieu. Il s'agit donc d'une carte à double tour. Euh OK, donc j'utilise la même couleur. Alors maintenant c'est un sept. Je peux donc utiliser le huit ou le même chiffre, donc je vais faire sept. Je vais cliquer dessus, et je vais cliquer sur Play Card. OK. Vous voyez donc que l'ordinateur est parti. Il y en a actuellement deux. Je peux donc sélectionner plus de deux cartes, j'espère. C'est donc un changement que je dois apporter au jeu. Par exemple, si c'est le même nombre, techniquement, je devrais être autorisé à cumuler, utiliser les deux. Il s'agit donc en fait de ce que nous appelons la phase de test, les tests d'acceptation par les utilisateurs. Nous avons donc une version fonctionnelle. Nous devons le tester pour voir s'il y a des bugs ou des améliorations à apporter. Et c'est là que nous ferions une itération. Donc, la carte actuelle est quatre, donc je dois réussir maintenant parce que je n'ai rien. Qu'est-ce que c'est ? Une carte arc-en-ciel ? OK. Bruno a acheté des victoires. OK, alors regardons les instructions maintenant. La première demande a donc été de créer une version multi-mobile de No Called Bruno et j'ai dit : Je vais faire ce support pour deux à quatre joueurs ». Et oui, je m'ai d'abord demandé si je voulais créer une base de données. Mais je pense que pour ce type de jeu, vous n'avez pas besoin d'une base car il suffit de démarrer une nouvelle partie, vous n'avez pas besoin de sauvegarder de données. Mon deuxième problème a donc été de mettre un joli logo Bruno au dos des cartes et de leur donner la possibilité de jouer contre l'ordinateur, l'IA. Et c'est ce qu'il a fait. Et il donne la version trois. Et maintenant, je veux dire, donnez à l'utilisateur la possibilité de sélectionner plus d'une carte. cas échéant, par exemple, si un joueur possède plusieurs cartes portant le même numéro que la carte du deck. C'est bon. C'est donc un exemple de révision ou d'itération Oh, d'accord. Très bien, le code a donc été mis à jour. Et en gros, une fois cela fait, je vais tester à nouveau cette même fonctionnalité. Je ne vais pas en parler ici, mais en attendant, permettez-moi de vous montrer les autres menus en haut de la page. Vous pouvez voir l'aperçu mobile. Vous pouvez voir la vue du bureau. Et puis avec l'affichage mobile, nous avons la possibilité de changer d'appareil ici. C'est donc l' avantage de Figma. En haut à droite, nous avons la possibilité de publier le jeu. On peut même lui donner un favicon. Nous pouvons lui donner un identifiant Google Analytics. Et nous pouvons publier ce jeu, ce que je ferai plus tard. OK. J'ajouterai la possibilité de sélectionner et de jouer plusieurs cartes portant le même numéro. Génial. C'est donc quelque chose que nous devons tester. autre chose que nous pouvons faire est de le lier à un domaine. Donc, une fois que nous l'avons publié, nous pouvons avoir une URL comme no.com fordlash Bruno ou quelque chose comme ça, Mais vous devez posséder ce nom de domaine. Donc, une fois que ce sera terminé, je le publierai. Examinons également le bouton Partager. Vous avez donc la possibilité de le partager avec n'importe qui, et vous pouvez leur donner la possibilité de le modifier, de le visualiser. Vous pouvez le protéger par mot de passe, le publier auprès de la communauté, ce que je pourrais faire. J'attends juste que ça se termine. Et il semble que la quatrième version soit terminée, et nous avons une erreur. Il corrige donc automatiquement les erreurs. Et le modèle sous-jacent, je crois, est étroitement anthropique Tellement similaire à d'autres plateformes de codage Vibe, comme Bolt Dot U. Elle a donc un type de logique similaire C'est donc très intelligent. Vous pouvez lui parler en langage naturel. Et si vous avez besoin de réparer quelque chose, vous pouvez simplement dire corriger l'erreur. D'accord, donc ce que je vais faire , c'est simplement publier ceci. Donc, en gros, si je veux le présenter dans la communauté, je pourrais le faire ici, et je clique sur Publier. Et c'est ce que je ferai une fois que l'agent aura corrigé ces erreurs de correction automatique Nous voilà donc dans les coulisses d'un jeu multijoueur avec Bruno. 5. Introduction à la communauté Figma Make: Très bien, maintenant je publie ce jeu pour la communauté, afin que la communauté puisse réellement y jouer Ils peuvent le remixer et créer leurs propres variantes du jeu Et dans la communauté, vous pouvez consulter d' autres applications. Voici donc la mienne. C'est bon. Et vous voyez, nous pouvons effectivement voir d'autres applications communautaires. Jetons un coup d'œil ici. Fortune Cookie, effet bouton, mini-manette, commerce électronique, calculatrice de marque Figma et même un site Web professionnel OK. Essayons Essayons cette application ici. Vue de rotation de production à 180 degrés. Vous voyez donc que nous avons la capacité de l'entendre. Nous pouvons le sauvegarder et le remixer selon notre propre vision. D'accord, et je peux également voir les instructions utilisées par cet utilisateur. Je souhaite une rotation de 180 degrés pour mon produit. D'accord ? Ensuite, nous voyons le résultat ici, puis nous voyons une autre invite. Cet utilisateur utilise des majuscules pour ses instructions, sera donc plus facile à suivre Oui, ajoutez tout cela et simplifiez la rotation. Dites-moi si je peux importer plus d'images, d' angles depuis Chachi BT, dites-moi les angles, et je les récupérerai Cet utilisateur a donc en fait une sorte de conversation avec les agents de l'IA. Pour les couleurs, nous avons le noir, blanc, le rouge, le bleu marine, pour 30$ OK. Alors, on y va. Il y a son sweat à capuche ici, et on peut le changer. Donc c'est plutôt cool. Vous pouvez Ce serait une bonne maquette pour différents types de produits C'est bien qu'il ait partagé cela ici. Nous avons des rotations automatiques. C'était très cool. En fait, je vais jouer avec celui-ci. C'est donc un exemple d'utilisation de la publication pour la communauté, puis remixage d'une autre application Figma de la 6. Monopoly Figma Solana: Je vais faire une démonstration de mon jeu codé Vibe, Solana Monopoly. Ce jeu est donc censé être un prototype amusant. Jouer au Monopoly avec Slana. Et cela peut réellement connecter votre portefeuille. Ce n'est pas réel, mais cela pourrait être très réel. Et en gros, c'est un bon moyen de se familiariser avec le jeton cryptographique Salana tout en jouant à un jeu classique amusant Et Salana est l'une de ces chaînes de blocs économes en énergie et peu coûteuses, c'est pourquoi j'ai eu l'idée d' utiliser Solana Je vais donc d' abord vous présenter le jeu , puis nous examinerons les instructions. J'utilise la plateforme Figma make. Nous avons donc commencé par sélectionner notre personnage ici, et nous avons besoin d'au moins deux joueurs. Et voyons voir. Peut-être qu'il nous en faut quatre. OK, nous avons donc créé quelques joueurs clés ici, et nous avons le plateau Silana Le joueur 1 a donc 0,1 500, donc aucune propriété. Lancez les dés. OK. Alors, où est la ligne D ? Un, deux, trois, quatre, cinq, six, sept, huit, neuf, et très bien. Le troisième joueur a donc la possibilité d'acheter Rainbow Bridge pour 0,022 SOL D'accord, donc le joueur 3 possède Rainbow Bridge, qui se trouve ici Ils sont donc propriétaires de cette propriété, et maintenant nous allons lancer les dés. Je pourrais agrandir un peu ces joueurs. C'est difficile à voir. Mais il s' agit certainement d'un jeu qui peut être itéré. Quoi qu'il en soit, c'est un jeu qui consiste accumuler un actif cryptographique, à accumuler Et jetons un coup d' œil aux instructions. Alors, tout d'abord, créez un jeu amusant de Monopoly qui utilise le salon et le cryptotken comme récompenses pour Faites-en une fraction, pour que ce soit amusant à jouer, donc ce ne soit pas cher à jouer Et il a dit : « Bien sûr, créons ce jeu et créons la première version ». La première version n'était donc pas vraiment agréable à regarder, elle n'était pas très conviviale sur le plan visuel. Et il y avait beaucoup de places sur le plateau. Alors j'ai dit : rendez le plateau plus attrayant visuellement, plus adapté aux mobiles, moins de places sur le plateau et coloré, et permettez à un personnage mignon d'être choisi comme pièce de jeu. Donc, il a dit : OK, nous allons réduire les espaces du plateau de 40 à 20, ajoutant les jolies pièces de joueur que nous avons vues Et le Salana Monopoly a été complètement repensé. Et c'était la version 3. Et encore un message. J'ai corrigé le texte au fur et à mesure qu'il sort du tableau. Nous avions donc ces noms de description du forum qui sortaient des boîtes Cela a donc résolu ce problème. Et cela nous amène à notre version carte, dont je suis plutôt content. Jetons un coup d' œil au code. 206 lignes. Et c'est quelque chose que je n'hésite pas à publier. Nous allions donc publier. Et cela ne me dérange pas de partager avec la communauté Il suffit donc de cliquer sur Publier. C'est donc ça. J'espère que vous avez apprécié cette introduction à Salana Monopoly. 7. : remanier un magasin de commerce électronique avec l'intégration de Stripe: OK, je voudrais vous montrer un remix que j'ai fait. Voici donc cette application, visualiseur de rotation des produits à 180 degrés. Je le remixe donc, et je vais juste vous montrer le produit fini Voici donc le paddle-lounge. Il s'agit d'un site de commerce électronique de pickleball. Et la principale caractéristique de ce site est la possibilité de faire pivoter les pagaies de cette façon Nous pouvons également zoomer ici. Réinitialisez. Et si nous choisissons la pagaie, nous pouvons l'ajouter à un panier. Ajoutez donc la carte pour que nous puissions y voir le panier. C'est donc juste en mode démo. Nous n'allons pas traiter un paiement, mais cela pourrait facilement être fonctionnel si vous obteniez la clé d'API auprès de Stripe et que vous lui indiquiez simplement que vous souhaitez un véritable processus de paiement, puis que vous partagiez la clé API dans un dossier sécurisé, et le tour est joué. Vous avez un très bon prototype, même une application fonctionnelle où vous pouvez vous concentrer sur un produit, vous pouvez en faire la démonstration. Et je ne dirais pas que ce sont les meilleures captures d'écran, mais oui, vous avez l' idée que nous pourrions faire une rotation automatique et voir le produit sous différents angles. Alors laissez-moi vous expliquer comment je l'ai fait dans les coulisses. Passons donc à mon projet. J'ai donc remixé ce projet original. J'ai donc commencé par le remix. OK. Et je peux voir toutes les instructions qu'ils ont utilisées Je vais donc simplement faire défiler l'écran vers le bas jusqu'à ce que je trouve par où j'ai commencé sur cette application. OK, c'est la version six, je crois. Donc, à ma première demande, j'ai joint l'image d'une raquette de pickleball et j'ai dit : «  Utilisez cet accessoire pickleball pour l'image du produit et appelez-le VaticProprism et appelez-le OK, j'ai créé la version 7 et j'ai remplacé avec succès le sweat à capuche une pagaie de pickleball et je m' ai donné une image comme celle-ci Alors j'ai pensé : laissez-moi aller un peu plus loin dans la version 8. Téléchargeons d'autres photos. Eh bien, avant cela, je voulais changer l'image d'en-tête. Joignez donc une image du pickleball, et je lui ai demandé d'utiliser cette image dans l'en-tête , d'appeler le magasin le Powdle Lounge pour indiquer les prix D'accord ? Cela a donc créé la version huit. Et puis à l'invite suivante, j'ai ajouté une autre capture d'écran de la pagaie Pickleball sous un angle différent J'ai dit d'utiliser ces images de pagaie supplémentaires pour la fonction d'autorotation. Cela a créé la version 9. Et puis j'ai ajouté un autre angle avec la même invite, utilisez les palimages de position pour la rotation automatique Cela a créé la version dix. Et puis j'ai ajouté une autre capture d' écran avec un autre angle, exactement la même invite. Et puis la dernière question était pouvez-vous ajouter un panier d'achat avec l'intégration de Stripe ? Cela nous amène donc à la version 11. Donc, pour mettre cela en place, il avait besoin d'une base de données, donc d' une excellente intégration Et cela nous a amené à la version 14. Vous pouvez donc voir ici comment nous avons commencé avec le remix, et je l'ai essentiellement adapté à un autre produit Et la principale caractéristique de ce site était cette rotation automatique du produit. Mais je l'ai également amélioré avec un panier d'achat. Jetons donc un coup d' œil au code ici. Je pense que c'est une application assez détaillée, il suffit de regarder tout ce code. Donc, si nous voulions ajouter l'API, demanderai si j'ai une clé d'API Stripe pour traiter les paiements réels, où puis-je la partager en toute sécurité en mettant à jour dans l'application. Donc, Walt point New, je connais le processus. Il existe un dossier ENV dans lequel nous pouvons simplement le copier-coller OK, donc en gros, il configure cette zone et il vous suffit de la coller ici. Collez-le ici et cliquez sur Créer un secret. Alors, on y va. 8. Résumé Figma make: Merci d'avoir suivi le cours de fabrication de Figma . J'espère que cela vous a plu. J'espère que vous avez beaucoup appris et que cela a stimulé votre créativité. Il faut beaucoup de toutes vos idées et peut réellement leur donner vie, un prototype fonctionnel, qu'il s' agisse d'une application de score de golf ou d'un tableau de bord de cryptomonnaies. Que vous soyez concepteur d' interface utilisateur ou d'expérience simple créateur de contenu ou propriétaire d'entreprise, peu importe qui, vous pouvez désormais utiliser Figma Make et créer des applications fonctionnelles Vous pouvez également utiliser la communauté pour trouver des idées et partager votre application avec la communauté. Et cet espace évolue si rapidement que je m' attends à ce que des changements se produisent régulièrement. Je vais donc essayer de maintenir ce cours à jour. Vous êtes intéressé par d'autres plateformes de codage Vibe, comme Bolt Dot U, alors j'ai des cours à ce sujet si vous souhaitez approfondir Vous avez reçu une brève présentation des autres concurrents. Je t'ai fait une comparaison. Ce que j'aime chez Figma M, c'est que vous pouvez impliquer l'équipe Vous pouvez le partager avec l'équipe. Vous avez accès à une grande partie du contrôle visuel, applications codées Vibe les plus attrayantes sur le plan visuel, et la force de Figma réside dans l'interface utilisateur, donc c'est ce à quoi il fallait Quoi qu'il en soit, j'espère que vous avez apprécié le cours, et merci de vous joindre à nous. Au revoir.