Sites Figma : créer des sites Web sans code

1. 0 Bande-annonce: Bonjour, je m'appelle Jeremy et bienvenue dans mon cours sur les sites Figma où vous allez créer un site Web sans code dans Figma sans aucun Je vais vous montrer tout ce qu'il a à offrir en ce moment et comment vous pouvez créer votre propre site Web de portfolio ou même un site Web client de base. Je vais vous montrer l'ensemble du processus de l'espace de travail global, apprenant à utiliser l'interface utilisateur. Je vais expliquer comment ajouter des sections et utiliser des modèles dans l'espace de travail FIGMA Je vais également montrer mon processus de conception d' un site Web d'une page où nous ajoutons des images. Jouez avec la topographie, créez des composants et apprenez à rendre le site Web réactif puis à finaliser le site et à le publier en ligne sur le domaine de votre choix Donc ça a l'air amusant. Inscrivez-vous au cours aujourd'hui et commencez à consulter des sites Web dans Figma en 2. 1 Introduction à l'espace de travail et à l'interface utilisateur dans Figma: Tout d'abord, une fois que vous aurez accédé à Figma, ceux qui ont Sigma Four vous seront assez familiers Vous pouvez voir maintenant que vous avez un site et qu'il est écrit Beta. Nous pouvons cliquer dessus pour générer un espace de travail sur le site. Figma propose donc quelques modèles pour le moment, il y en aura probablement beaucoup d'autres plus tard. Les gens vont probablement créer des modèles. Mais pour l'instant, si vous êtes sur l'onglet Explorer, vous pouvez voir des modèles simples créés ici, rien de trop sophistiqué. Vous pouvez donc commencer par quelque chose comme ça si vous ne voulez pas construire à partir de zéro. Je veux créer à partir de zéro, vous pouvez apprendre les bases de la création du site Figma Vous pouvez également cliquer sur la gauche si vous souhaitez une page d'accueil, personnelle ou un portfolio. Pour l'instant, je vais juste aller explorer et cliquer sur Blank Site. Une fois dans l'espace de travail, vous trouverez vos outils en bas de la page. Vous avez votre barre d'outils avec tout ce dont vous avez besoin. Sur le côté droit, vous avez les styles, l'exportation, les arables et tout ce qui a trait à la topographie comme d'habitude, puis sur la gauche, vous avez vos couches Vous remarquerez tout de suite que vous avez la page d'accueil, et vous pouvez voir qu'il s'agit d'un cadre gris à l'intérieur duquel vous trouverez votre ordinateur de bureau et votre mobile. Maintenant, sur le côté gauche, vous avez vos pages Web. Notre page d'accueil est donc la page que nous utilisons actuellement. Si nous voulons ajouter une page, il vous suffit d'aller en haut à gauche et de cliquer sur le signe plus à côté de la section de la page Web. ai actuellement une page d'accueil, je peux donc cliquer ici avec le bouton gauche de la souris et ajouter une page secondaire. Je peux double-cliquer dessus et créer une page À propos ou une page de contact ou quoi que ce soit d'autre. Si vous ne voulez pas cette page, vous pouvez simplement cliquer sur Supprimer une fois que vous l'avez sélectionnée, et je m'en débarrasserai. Vous avez également les paramètres de votre page avec un petit rouage. Si vous placez votre souris sur la page d'accueil, je vais cliquer dessus et nous avons ici quelques détails de base sur le référencement, comme les méta-informations, le titre de la page, qui est le titre principal que vous voyez sur Google. Vous avez le langage ici et aussi l'image sociale ici. Lorsque vous partagez Link, par exemple sur LinkedIn, il apparaît avec cette image d'aperçu afin que vous puissiez y télécharger une image. Vous avez également des domaines ici afin que nous puissions les connecter ultérieurement, puis vous avez des informations générales sur le site ici. Donc favicon, et vous avez un code personnalisé si vous souhaitez intégrer des widgets ou des éléments codés spécifiques Et c'est essentiellement tout pour les détails du site. Je vais appuyer sur une petite flèche pour revenir en arrière, et maintenant nous sommes de retour ici. Donc, ce que je vais faire maintenant pour le moment, c'est me débarrasser de l'affichage mobile, et je vais m'en tenir à l'écran de bureau. Ce que nous pouvons réellement faire, c'est commencer à glisser-déposer certaines sections et certains éléments à l'intérieur. Je veux donc aller sur le côté gauche, et vous voulez aller insérer. Ils ont déjà des modèles de pages prédéfinis, ce qui est plutôt cool. Vous avez donc quelques modèles ici. Vous avez également un système de navigation. Nous avons donc un NavBA. Nous avons également des sections sur les héros, des fonctionnalités et des fonctionnalités intégrées pour que vous puissiez intégrer une vidéo YouTube ou un lien URL, ce qui est plutôt cool Vous pouvez également y ajouter des iris. Vous pouvez également rechercher des éléments si vous avez des composants, certaines choses. Vous avez également créé une nouvelle chose appelée M, utilise le codage AI. Vous n'avez donc pas à créer de code, mais cela générera des effets pour vous, ce qui est cool. Si vous souhaitez modifier la couleur d'arrière-plan de notre site Web, nous pouvons simplement accéder au champ et la changer pour qu'elle soit noire ou la couleur de votre choix. Une fois que vous avez cliqué dessus, vous pouvez également double-cliquer dessus et appeler Homepage, à droite. Mais il est probablement bon de le laisser sur le bureau et de le conserver sur la page d'accueil. En bas de la barre d'outils, vous avez vos outils. Vous avez la page Web, qui est un cadre W pour F, section est Shift S. Vous avez également le M et les outils d'intégration, je vous montrerai plus tard, puis vous avez vos outils de forme de base, votre outil d' image, votre texte Ensuite, vous avez d'autres outils que vous pouvez rechercher. C'est l'introduction à l'espace de travail fongique. Je vais vous montrer comment créer certaines sections et concevoir la première mise en page et la première structure de 3. 2 Version de bureau Mise en page automatique: R. Tout d'abord, cliquez sur le petit bouton plus sur la gauche, et je vais passer à la navigation. Et je vais y déposer cette jolie petite barre de navigation ici, et je vais la déposer directement là-dedans Il devrait s'enclencher automatiquement. Maintenant, si nous allons dans le panneau des couches, nous pouvons voir que la couche se trouve à l'intérieur du bureau, comme nous pouvons le voir. Nous avons l'en-tête, le menu, puis vous avez toutes ces mises en page de commande Vous avez donc le logo et les boutons dans l'ordre dans lequel nous zoomons . Il serait donc bon de parcourir vous-même ces couches et de découper ce qu'elles contiennent. Nous avons donc deux boutons ici, puis nous avons un logo ici, que nous pouvons modifier. Je vais ajouter une section consacrée aux héros. Faisons peut-être celui-ci ici. glisser et déposez-le dedans. Et boum, nous avons cette section de héros cool. Nous aurions pu, cela pourrait être un tableau de bord ou quelque chose d'amusant. Nous avons des boutons et un titre. Maintenant, ajoutons également une section de fonctionnalités. Allons-y, devrions-nous opter pour une grille à bento ? On ne peut pas se tromper avec un bento. Alors jetez-la dedans. Nous pouvons également ajouter peut-être une autre section. Allons-y avec les témoignages. Peut-être que nous y mettrons du texte. Quelles autres fonctionnalités pouvons-nous ajouter. Nous pouvons également ajouter quelques cartes. Nous pouvons également simplement supprimer une section, cliquer avec le bouton gauche de la souris et supprimer. Si nous ne vibrons pas ou si nous n'en avons pas besoin, nous pouvons toujours le modifier C'est très bien. Maintenant, j'ai remarqué qu'il n' y a pas d'onglet Fuda, mais qu'il y a le Foota dans la section de navigation Vous allez donc ici et disons que nous pouvons faire le foota de base avec, disons, les trois Permettez-moi de le remettre en place, assurez-vous que vous voyez les lignes bleues ou qu'elles apparaissent. Cool. Nous l'avons donc obtenu. Je pense que je dois également ajouter un appel à l'action. Donc, laissez-moi savoir s' ils ont un CTA ici. Mais nous pouvons toujours simplement ajouter les nôtres. Je pourrais simplement ajouter cela là-dedans. Il peut s'agir d'un bouton. Nous avons donc la mise en page de base de notre page de destination de bureau, et nous allons continuer à personnaliser le design. J'ai quelques images de marque, un logo et une marque que j'ai créés et que nous allons ajouter au design. Je vous recommande donc de créer votre propre brief ou d'utiliser le brief que je fournis et de l'utiliser pour créer des maquettes, générer des images Vous pouvez utiliser l'IA, c'est très bien. Utilisez ce qui vous convient et générez de belles images et des éléments que vous pouvez compléter avec et générez de belles images et des éléments que vous pouvez toutes les informations et le contenu du site Web. Vous n'êtes pas obligé de copier exactement comme je le fais, mais jouez, ajoutez les fonctionnalités et les sections que vous souhaitez, et nous allons les personnaliser. 4. 3 4 Conception et images Pt: le cadre de la leçon, nous allons ajouter nos images et notre design afin pouvoir commencer à finaliser l' apparence visuelle globale de notre site Web allée de l'avant et j'ai ajouté mon atout . J'ai quelques textes que j'ai créés et j'ai créé ce produit appelé Neuroshot C'est un regain d'énergie lorsque vous pouvez le boire. Il contient de la caféine, du magnésium et tout un tas de choses qui viennent d'être créées, et j'ai quelques illustrations ici. J'ai un fond, des icônes et des portraits de témoignages. Je veux les ajouter ici. Ce que nous allons faire d'abord, c'est ajouter nos couleurs et notre texte. Lorsque nous commençons à créer le site Web, nous pouvons mettre à jour l'ensemble du design. Je suis allée de l'avant et j'ai créé certaines de nos couleurs. Vous avez la couleur pêche ici et le violet que j'ai créé. Et lorsque vous cliquez dessus, c'est juste une forme avec la couleur dedans Vous pouvez cliquer sur ces quatre cercles, puis cliquer sur le petit bouton plus. Si vous avez une nouvelle couleur, vous pouvez venir ici et appeler, vous savez, pêche ou tapez ce que vous voulez et créez une collection, afin que je puisse créer cette variable. Et maintenant, vous voyez que cette couleur a été créée dans nos variables. Maintenant, si je vais dans les variables en haut à droite, vous pouvez cliquer dessus. Vous pouvez voir maintenant que notre couleur est ajoutée ici et vous pouvez voir que c'est de la pêche. Je peux entrer ici et cliquer avec le bouton droit de la souris et dupliquer des variables, je peux supprimer ou effacer ce que je veux. Je veux juste le supprimer car je les ai déjà ajoutés ici. Si vous voulez être plus soignée, vous pouvez aller sur les trois points et créer une collection et appeler cette marque les couleurs de la marque Et maintenant, vous avez plusieurs collections ici. Donc, pour ajouter, je veux ajouter de la couleur à cette collection, nous pouvons le faire, ou vous pouvez simplement laisser dans la collection par défaut. Maintenant, je vais aller dans la section des héros, et je vais appuyer sur Ctrl et bouton gauche de la souris, ce qui m' aidera à cliquer sur un élément qui se trouve à l'intérieur d'un groupe. Vous pouvez voir sur le panneau des couches que si je clique simplement dans la zone générale ici, si je clique sur cette section ici, vous pouvez voir que nous avons un texte dans la mise en page automatique. Et vous pouvez voir que c'est une mise en page verticale avec du texte, puis des boutons. Et si vous souhaitez cliquer rapidement sur un élément sans le sélectionner, il suffit d'appuyer sur Ctrl et de survoler cet élément. Vous le trouverez , puis cliquez avec le bouton gauche pour accéder au groupe et le sélectionner C'est juste un peu plus rapide. Maintenant, ce que je veux faire ici, c'est aller dans la section typographie et je veux taper BN Je vais changer la police en B nectar Je crois que c'est la police que j'utilisais pour la marque, donc j'aime beaucoup celle-ci. Et je vais juste ajuster l'espacement des lettres. Passons peut-être à 2 %. Oui, c'est cool. Et ce que nous pouvons faire maintenant, c'est que je vais l'ajouter en tant que style de texte. Je vais aller en haut à droite, voir à nouveau les quatre cercles. Il est écrit « Appliquer le style ». Je vais cliquer dessus, et je vais cliquer sur le petit bouton plus. Et je vais l' appeler H un, et nous pouvons simplement faire H un titre. Vous pouvez mettre un petit tiret si vous voulez simplement le rendre plus lisible, comme vous le souhaitez, et nous pouvons vous proposer plus d'options et vous pouvez personnaliser la taille la pâte de laitue et tout ça. Si vous souhaitez avoir des points de rupture différents pour les appareils mobiles, si vous souhaitez un dimensionnement distinct, vous devez créer un textyle Ensuite, lorsque vous le réduisez, la taille ne sera pas modifiée. Pour l'instant, je vais simplement laisser ce style ici et créer. Maintenant, si je passe à mes polices, disons que je veux sélectionner cette police ici, je peux revenir aux quatre points, et mon style est là. Je vais donc également créer un style pour le texte des paragraphes. Donc, pour le texte du paragraphe, j'utilise un figuier. Oups. Figuier, et nous utilisons un médium. Nous pouvons aussi probablement opter pour le 16 normal, peut-être opter pour la taille 20. espacement entre les lettres peut être de 0 % et la hauteur de la ligne est de 1:50. Peut-être voulons-nous l'augmenter ou le durcir Je pense que nous pourrions le durcir un peu. Nous allons en 145. Je vais donc enregistrer ceci, et nous allons l'appeler body and create style, alors maintenant j'ai ce style. Mais je veux aussi en ajuster la couleur. Je vais donc utiliser la couleur violet foncé à 50 %. Allons-y à 75 %. Nous avons donc cette couleur violette, qui semble belle, et maintenant elle devrait être mise à jour. Maintenant, si j'y vais, testons-le rapidement, et voilà, il est magnifique. 5. 4 Conception et images Pt: J'ai les principaux styles, et maintenant travaillons sur la barre de navigation avant de télécharger les autres designs Je vais donc utiliser la barre de navigation, et ce que je veux faire, c'est faire en sorte que la barre de navigation reste en place lorsque je fais Donc actuellement, quand je fais défiler la page, vous pouvez voir que la barre de navigation ne vient pas avec nous Je vais en faire une barre de navigation fixe. Donc, ce que vous voulez faire est de sélectionner la barre de navigation, d' aller en haut à droite et de cliquer sur la position, et nous voulons la changer en fixe Maintenant, corrigé, cela signifie simplement qu'il se fixe sur une partie spécifique du canevas ou du navigateur. Donc, si je corrige ce problème maintenant, vous pouvez voir qu'il a été débarrassé de ce conteneur arrière. Et maintenant, si j'appuie sur Play sur notre parchemin, vous pouvez voir qu'il colle au canevas en haut. Je vais mettre à jour une partie de la couleur. Je vais donc double-cliquer, assurer que nous sommes sélectionnés dans le menu et je vais remplacer le remplissage par la couleur violette. Ensuite, je vais aller de l'avant et apporter mon logo. Mais je vais rapidement en faire une version blanche. Et je vais juste double-cliquer ici pour accéder à l'entreprise. Je mets donc ce logo en page et je vais simplement le réduire, puis m'assurer qu'il est centré à l'intérieur de ce bloc. Et je vais juste mettre ce logo dans la mise en page de commande, pour m' assurer que tout fonctionne. Balayer. Alors ce que je vais faire, c'est que nous pouvons avoir un lien ici. Nous pouvons peut-être dire peut-être des critiques, et nous pouvons dire « bien » maintenant. Et je vais faire le bouton peut-être comme ça. Et je veux en faire un dégradé, comme une couleur de pic. Vous en avez donc deux à l'arrêt. Vous pouvez l'ajuster si vous le souhaitez. Je pense que pour le moment, ça a l'air bien. Et je veux vraiment changer la police pour qu'elle soit un nectar. Je vais sélectionner l'arrière-plan, aller jusqu'à, cliquer sur Image et cliquer sur Télécharger depuis un ordinateur, et je vais juste localiser mes fichiers et double-cliquer pour les charger, ce qui est super cool. Je vais changer mon texte, mon titre. Je veux me débarrasser du bouton secondaire. Maintenant, ce que je veux faire, c'est faire glisser mon image ici et la déposer à l'intérieur. J'appuie sur Control set, je sélectionne dans l'en-tête et je colle l'image ici. Nous pouvons le rendre vraiment grand. Je vais changer le positionnement en absolu, afin que nous puissions le faire glisser n' importe où dans cette boîte. Ainsi, dans le schéma d'ordre des héros, lorsque vous créez quelque chose d'absolu, cela signifie qu'il peut être déplacé n'importe où dans ce conteneur parent ou cette mise en page parent. Donc, si j'appuie sur Play, vous pouvez voir que cela devrait être à l'intérieur de cette image, ce qui est cool. Et peut-être que je voudrais que cela chevauche un peu le texte Je ne sais pas, quelque chose comme ça. Et faisons en sorte que ce titre soit vraiment gros. Vous pouvez utiliser Control Shift et le bouton d'arrêt complet pour le rendre vraiment grand. Et je vais juste continuer et appuyer sur Coller. Oups. Et celui-ci sera violet. Cool. Et je vais le sélectionner, et maintenant je vais agrandir la zone, la largeur est étroite, pour qu'elle ressemble à une zone de texte Nous allons donc simplement faire en sorte que la largeur soit d'environ 1056. C'est très bien Nous pouvons toujours le personnaliser. Et peut-être que nous pouvons avoir plusieurs bouteilles. Peut-être que nous avons, genre, une saveur différente là-dedans. Je vais copier et coller le texte, et je vais devoir créer de nouveaux styles, donc je vais créer ce style H deux. Vous pouvez également appuyer sur Ctrl pour sélectionner, puis sur Sding Shift Vous pouvez sélectionner plusieurs objets. Je vais sélectionner les en-têtes. Et je vais sélectionner la carte, et je vais juste changer la couleur de ce remplissage, et je vais probablement opter pour cette couleur claire ici. Lâchez un outil. Vous pouvez sélectionner plusieurs objets et appuyer sur I pour accéder à l'outil Eyedropper Je vais juste échantillonner cette couleur, ce qui vous facilitera Vous souhaitez avoir plusieurs couleurs. L'un pourrait être de la pêche, l'autre 25 %. Je ne sais pas, quelque chose comme ça serait cool. Je vais juste aller ici et télécharger ces images ici. Je vais juste le glisser là-dedans. Je vais faire glisser l'autre image l'intérieur d'ici et simplement supprimer l'autre. Je vais aller à l'intérieur , accéder à image dans le panneau des calques, cliquer simplement sur le saut, et je vais faire glisser l' autre image ici. Et nous pouvons l'étendre, et vous pouvez voir que le contenu est déjà découpé, ce qui s'y intègre parfaitement Pour les autres, il va falloir que je m' assure qu'il soit un peu mieux ajusté. Nous pouvons donc l'étendre un peu comme ceci. Je vais cliquer sur l'image, et je vais la recadrer pour nous débarrasser de cette section supérieure, appuyez sur Entrée. Et je vais sélectionner la carte, et je vais peut-être l'étendre. Et je vais également agrandir l'ensemble de ce conteneur pour que nous puissions voir cette image ici. Nous sélectionnons donc le conteneur de la grille. Nous pouvons donc voir qu'il y a la section des cartes de fonctionnalités, puis la grille à l'intérieur. Nous voulons simplement l'étendre un peu. Je vais sélectionner le dos, et nous allons pouvoir ajuster l'espacement. Mais augmentons la taille globale de cette section afin d'avoir plus de possibilités de jeu. Celui-ci, nous pouvons simplement l'étendre. 6. 5 4 Conception et images Pt: Remportez la victoire maintenant. Et pour celui-ci, je vais utiliser la victoire. Victoire. Bol Victory 24. Violet. Je vais créer un titre H trois , puis je vais créer ce H trois, le rendre violet. Je vais y mettre cette image et supprimer les autres. Nous avons cette image. Je vais appuyer sur Shift A pour le mettre dans un cadre, et je vais centrer ce cadre. Je vais juste l'étendre comme ça. Maintenant, c'est cool avec les sites Figma, vous pouvez réellement utiliser l' IA pour éditer des images Je vais donc cliquer sur l'image, je dois le sentir. Ce que je vais faire, c'est cliquer sur Modifier l'image, et elle apparaîtra. Maintenant, je vais dire supprimer le fond blanc. Vous pouvez voir que c'est évidemment AI Beta, mais je vais appuyer sur Ctrl Enter pour voir s'il est capable de se débarrasser de l'arrière-plan. Je l'ai supprimée, mais elle a ce fond gris, donc je vais dire que je veux dire supprimer l'arrière-plan, et je vais procéder à la suppression de ces images ici. Je vais faire glisser mes images à l'intérieur d'ici, puis je vais simplement les redimensionner, pareil. Vous pouvez simplement cliquer sur les petites icônes de réalité augmentée en bas et cliquer sur Déplacer l'arrière-plan. Maintenant, je vais copier-coller la figure principale ici et je vais l'intégrer dans la section des cartes. Je vais aller au sommet et le rendre absolu. Et maintenant, vous pouvez voir qu'aucune carte n'est écartée car Absolute ignore tous les éléments contenus dans cette boîte et vous permet de la déplacer Je peux donc y ajouter des ingrédients. Nous allons juste le faire glisser un peu comme ça. Et puis c'est une façon amusante de créer cet élément, et ensuite je pourrai peut-être faire « Oups Je vais sélectionner le texte et peut-être changer le champ à 75 %. Je vais maintenant passer à la section suivante consacrée aux subalternes. Je vais supprimer certains d'entre eux. Je vais double-cliquer à l'intérieur d'ici sélectionner les cartes et je peux les supprimer. Grâce aux témoignages, je peux copier et simplement sélectionner, et cela peut remplacer Control Shift R. Je vais donc réduire toutes les dimensions de ces images Vous pouvez donc cliquer avec le bouton droit de la souris sur le format Lock, puis je vais taper 50 pour la largeur. Je vais faire du figuier. Pour celui-ci, je vais le faire régulièrement. J'en ferai 15, j'irai 16170. 16 et couleur de remplissage, 75 %. Je vais changer de figuier et le mettre en demi-gras, et la couleur pourrait être le violet foncé. Et nous y voilà. Nous en avons de belles. Et si je voulais changer la couleur de la bordure ? Je vais juste contrôler et maintenir la touche Maj enfoncée, cliquer et sélectionner la carte, et vous pouvez voir que le trait n' est qu'un trait noir, mais nous pouvons le changer en violet ou mais nous pouvons le changer en violet ou obtenir cette couleur claire orange. Je vais choisir la couleur pêche. Je trouve que ça a l'air sympa. Appuyez et collez le bouton. Je vais le coller. À présent, le bouton de la boutique augmente à la taille. Pliez le pied vers le haut, nous pouvons jouer avec différentes choses ici. Vous pouvez simplement modifier la sélection des couleurs en bas. Allons-y. Quelque chose de différent par rapport au bas de l'écran. Je veux coller le logo, donc je vais sélectionner la section en bas dans le pied vers le haut. Mais je le veux en dehors du conteneur, et je vais également le changer en absolu. Et on peut faire en sorte que ça ressemble à ça. Je vais juste faire glisser les icônes ici, puis je vais cliquer avec le bouton gauche de la souris et mettre sur le côté. Je vais contrôler, puis sélectionner l'intérieur ici et le coller dedans. Et je vais m'assurer que ce texte est bien je vais le mettre dans un autre schéma de commande et changer l'ordre en horizontal , puis ça deviendra comme ça. Shift A, puis assurez-vous simplement que l'écart est le même que l'autre. Modifiez la mise en page. Réduisez cela. Lorsque le design est terminé. Tout ce que nous allons faire dans la leçon suivante, c'est ajouter des interactions et des effets de survol amusants 7. 6 Ajoutez des interactions (logo curseur, effets de survol): Je vais donc vous montrer comment ajouter des interactions fluides et des effets de survol pour donner vie à votre site Web. abord, je vais commencer par la barre de navigation, et je vais aller sur le bouton Je vais aller en haut et je vais cliquer sur Plus à côté du lien. Cela va ajouter un lien, et nous pouvons ajouter un lien. Nous pouvons mettre une URL. Donc, s' il y a une autre page, nous pouvons la lier à une autre page. Donc, si je vais en haut à gauche, que je clique sur le bouton Plus, et disons simplement que je veux en faire une page produit. Je peux revenir à mon bouton. Appuyez sur le menu déroulant pour obtenir un produit. Maintenant, si je passe la souris dessus, que je clique dessus, je vais aller sur la page du produit et en haut à gauche, vous pouvez voir à quoi cela ressemble. Maintenant, pour rendre les choses plus intéressantes, il vous suffit de cliquer sur cette extrémité en bas, de courir en haut et de cliquer sur interaction à côté l'onglet de conception et nous pouvons voir ici les interactions. Il y a déjà un effet de survol dessus. Nous pouvons ajouter plusieurs effets de survol si vous le souhaitez. Mais je peux ajouter une autre interaction. Je vais donc cliquer sur Plus et sur Scroll 2, et je vais changer le déclencheur. À l'heure actuelle, il est activé pendant le survol. Vous pouvez le faire en appuyant, en laissant la souris, en bas. Sauf que vous cliquez en appuyant sur. Je souhaite accéder à la section des citations ou à la section des témoignages, par exemple Maintenant, vous pouvez voir ces petites lignes d'interaction qui vous indiquent où il va. Donc ça va aller ici. Maintenant, si je reviens en arrière et que je fais l'interaction, je passerai à ça. Cliquez sur le texte ici, et l'une des fonctionnalités intéressantes est que vous pouvez réellement mettre à jour les choses avec du code. Et ce que nous pouvons faire, c'est aller dans le coin supérieur droit et cliquer sur Rendre interactif avec du code. Maintenant, ce que je peux faire, c'est demander à l'IA de trouver quelque chose d'intéressant. Je peux donc dire de faire vaciller le texte sur HVA. L'IA réfléchira. Il y a une jolie petite animation sur son objet. Maintenant, lorsque nous survolons, vous pouvez le voir vaciller, ce qui est Maintenant, si je veux le tester rapidement, tirez sur ma souris et vous verrez qu'il plane Maintenant, le texte est plein car il est en version bêta. Ils ne prennent pas en charge les polices personnalisées. Modifiez également le code. Et disons simplement que nous ne voulons pas cet effet, nous pouvons aller et venir aux trois points et dire restaurer le design original, haut à droite, et je vais me débarrasser de cet effet. Alors maintenant, cela n'aura plus cet effet. Donc, comme les polices ne sont pas enregistrées, enregistrées nous pouvons réellement décrire le texte. Je vais double-cliquer dessus, cliquer avec le bouton droit souris et cliquer sur Outline Stroke. Ainsi, lorsque vous prévisualisez si vous utilisez une police personnalisée, vous pouvez voir qu' elle la décrira et qu'elle devrait fonctionner. Vous devrez donc peut-être le faire pour tout, mais allons-y et ajoutons d' autres interactions. Je vais appuyer sur le bouton plus et vous obtiendrez de nombreux effets différents. Supposons que nous voulions créer un effet révélateur, que nous puissions créer un fondu et que nous quittions la sortie ou aucune. Nous pouvons le dimensionner, le glisser , tout ce que vous voulez. Faisons peut-être une incursion par le bas. Une fois les charges payées, ça va se glisser et ça vous donne un petit aperçu, ce que j'aime beaucoup. Pour ceux-ci également, nous ferons la même chose. Vous pouvez également cliquer avec le bouton droit de la souris et supprimer les interactions si cela ne vous plaît Je vais donc entrer dans les interactions , les révéler, et nous allons glisser vers le bas. Chargez la page, prévisualisons-la, et vous pourrez voir les designs apparaître, ce qui est super cool. En gros, la meilleure chose à faire est de jouer. Donc, vous savez, peut-être que je voudrais sélectionner l'une de ces cartes ou cette grille, nous pouvons interagir et faire une parallaxe de défilement C'est peut-être 50 % de vitesse, vous pouvez faire défiler la page et vous pouvez y voir l'effet de parallaxe, mais évidemment, je ne veux pas cet effet Faites également des choses amusantes, comme ajouter une interaction ludique cliquable Par exemple, si je veux avoir cette image ici, je peux interagir, jouer et la rendre déplaçable Et je peux le récupérer, et nous voulons simplement nous assurer de pouvoir simplement faire glisser dans le conteneur parent , à savoir cette carte. Je vais donc appuyer sur Play pour le tester. Donc, si je passe la souris dessus, je peux le faire glisser maintenant comme ça, ce qui est cool. Il est donc à l'intérieur de ce contenant. Mais disons que nous voulions simplement le faire glisser n'importe où. Je peux revenir à l'effet. Je peux le mettre à jour, le prévisualiser. Et maintenant, il devrait pouvoir glisser n'importe où. Et comme il est à l'intérieur de ce conteneur, il ne bouge pas, ce qui est plutôt cool. Vous pouvez voir toutes ces icônes que vous pouvez faire glisser maintenant, ce qui est un peu amusant. Vous pouvez ajouter autant d' interactions que vous souhaitez pour rendre le site encore plus agréable. Je suggère d'ajouter de simples fondu. Donc, pour celui-ci, nous pouvons faire un effet de survol, et disons simplement que nous voulons l'agrandir un peu. Comme un sur quatre. Nous pouvons modifier la transition pour qu'elle soit facile à entrer et à sortir ou vous pouvez la rendre souple ou rapide ou ce que vous voulez Vous pouvez donc le voir. Si j' appuie sur Play maintenant et que je survole, vous pouvez voir qu'il y a un effet de survol sympa, ce qui est amusant Alors joue avec ça. Classe. Je vais rendre le site web adaptatif pour les mobiles afin que tout fonctionne correctement. 8. 7 Rendre les mobiles réactifs: Nous rendrons le site Web entièrement réactif afin qu'il fonctionne pour les tablettes et les mobiles. Donc, une fois que vous aurez terminé votre design, que vous aurez obtenu des interactions et que tout sera prêt . Pour supprimer cette page, je vais cliquer sur le bouton plus et ajouter un nouveau point d'arrêt Maintenant, quelle que soit la modification que vous apportez sur le bureau, elle les ajoutera à la tablette, puis elle s'affichera. Nous pouvons donc passer à la tablette et nous voulons également ajouter un mobile. Je recommande toujours commencer par la conception de l'ordinateur de bureau afin que cela se répercute en cascade. Vous pouvez voir maintenant, comme je l'ai déjà dit, que si vous pouvez créer une taille différente pour points d'arrêt les plus petits, c'est pourquoi il est toujours bon de revenir à nos styles de topographie Je vais faire une sélection là-dessus. Et si vous passez à la typographie, nous pouvons cliquer sur Modifier le style et vous souhaitez ajouter des points d'arrêt Donc, sur Tablet View, vous pouvez voir que nous voulons peut-être passer à 35 et pour les mobiles, nous voulons même aller peut-être plus loin. On va y aller en 20. Et il devrait ajuster cela. Alors maintenant, si nous cliquons ici, ajustons-le , mais je pense que comme il s' agit d'une version bêta, ils ne l'ont probablement toujours pas mise à jour. Je vais donc simplement changer la taille moi-même et ajuster cette section. Et je vais juste ajuster ces bouteilles. Je vais mettre une mise en page de commande, et je veux la personnaliser comme ceci. En fait, je vais continuer. Je vais juste le personnaliser Et pour les autres bouteilles, je vais le masquer, donc je vais supprimer l'opacité, afin que nous ne puissions le voir nulle part Et évidemment, cela ne se voit pas, mais nous voulons voir cette bouteille ici. Il suffit de passer par là. Nous allons vérifier toutes les tailles, et si vous souhaitez ajouter un peu de rembourrage, vous pouvez le faire Je pense que c'est bon pour le moment. Pour ces ingrédients, nous allons simplement les placer au centre. Je veux ajuster cela et le déplacer vers le bas. Et tout le reste semble bon. Il s'agit donc simplement de gérer l'espacement et le dimensionnement et de s' assurer que tout fonctionne dans des tailles différentes Une fois la version bêta terminée, je suis sûr que tous ces correctifs seront corrigés. Apportez ceci, celui-ci. Tu peux le sortir. Vous pouvez également ajuster la taille sur le côté. OK, vous pouvez donc y voir les modifications. Au fur et à mesure qu'elle baisse, la mise à l'échelle est différente. Pour celui-ci, ce que nous voulons faire. Nous allons simplement remodeler cette zone de texte. M. Je vais ajuster la taille de celui-ci Et je pense que tout va bien sauf ces témoignages Je ne sais pas ce que j' ai à faire pour résoudre ce problème. J'ai donc enregistré à nouveau les images parce que j' avais des masques de découpage parce que je les ai créées dans Illustrator pour ces problèmes Je l'ai donc simplement réexportée en tant que . Maintenant, si nous faisons glisser la balance, nous pouvons voir ce qu'elle fait. Donc, si nous le réduisons, vous pouvez voir ce qui se passe à différentes tailles. Et il faudrait le réparer. Vous voyez comment le Nav et le texte doivent être redimensionnés différemment. Donc, ce que j'aime faire, c'est que si je veux le garder à une certaine taille, nous pouvons aller sur le côté droit et ajouter une largeur minimale. Et cette largeur minimale doit être de 612. Alors maintenant, si j'appuie sur Play, vous pouvez voir qu'il devrait rester et qu'il devrait toujours être aligné au centre. Alors voilà. Mais une fois que c'est atteint, sous la vue mobile, il y a toujours un centre et au minimum, nous pouvons ajouter une largeur d'homme, vous pourriez 300, donc il devrait être centré là pour que vous puissiez y voir. C'est donc une façon de résoudre ce problème. Et une fois que vous serez prêt, prochaine leçon, je vous montrerai comment publier votre site Web. 9. 8 Présentation de Publish Site pour expliquer comment connecter un domaine: Une fois que vous êtes satisfait et que tout va bien, vous pouvez aller en haut à gauche, cliquer sur Publier. Et Figmae vous proposera un site de mise en scène. Donc, si vous ne connectez pas le domaine, c'est très bien. Je peux littéralement cliquer sur Publier et cela me connectera à cette URL. Si vous avez d'autres problèmes, il vous dira que vous avez des masques ou autre. Et il y a l'accessibilité et tout le reste, mais je n'entrerai probablement pas trop dans les détails. Une fois que c'est prêt, il vous suffit de cliquer sur le site Web et je peux le parcourir. Tout semble fonctionner en mode bureau. Et c'est littéralement en ligne dans le navigateur. C'est littéralement ainsi que vous publiez votre site Web. Maintenant, si vous souhaitez connecter un domaine, cliquez sur Connecter, puis sur Connecter et vous souhaitez connecter un site Web. J'achète généralement mes domaines chez Go Daddy ou vous avez acheté Namecheap, et il vous suffit de suivre les instructions ici. C'est assez simple. 10. 9 Outro: Pour avoir suivi ce court cours vidéo sur la façon de configurer rapidement un site Web Infigma now Vous n'avez pas besoin d'apprendre un autre outil tiers. Vous pouvez tout faire, du design aux logos, en passant la conception et la création de sites Web, Infigma qui est plutôt cool Je suis sûr que vous allez dans la section des discussions et des projets de classe Je vais ajouter quelques liens supplémentaires pour expliquer certaines choses, donner plus d'informations, donner des ressources utiles, ainsi qu'un brief. Si vous n'avez pas de brief à créer, vous pouvez créer une marque ou un produit similaire et créer une page de destination d'une seule page. La classe, veuillez également laisser un avis si vous trouvez cela utile afin que d'autres étudiants puissent suivre le cours.