Design UI/UX avec Figma : plus de 5 projets réels (2022) | Chetan Pujari | Skillshare

Vitesse de lecture


1.0x


  • 0.5x
  • 0.75x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Design UI/UX avec Figma : plus de 5 projets réels (2022)

teacher avatar Chetan Pujari

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Introduction (Design UI/UX avec Figma)

      1:42

    • 2.

      La différence entre UX et UI

      5:33

    • 3.

      Introduction à Figma, et téléchargez et installez Figma

      4:00

    • 4.

      Tableau de bord d'interface Figma

      5:21

    • 5.

      Importer des dossiers Figma dans Figma

      4:14

    • 6.

      Outils dans Figma

      9:30

    • 7.

      Panneau de calques Figma

      2:26

    • 8.

      Composants Figma

      5:40

    • 9.

      Onglet/panneau de design

      14:35

    • 10.

      Outil de texte et polices

      8:00

    • 11.

      Images dans Figma

      4:35

    • 12.

      Opérations booléennes dans Figma

      2:25

    • 13.

      Alignement et distribution Figma

      1:26

    • 14.

      Bibliothèques d'équipe Figma

      1:57

    • 15.

      Le panneau de code dans Figma

      2:26

    • 16.

      Prototypage dans Figma

      6:57

    • 17.

      Défilement horizontal et vertical

      4:35

    • 18.

      Masques dans Figma

      2:35

    • 19.

      Exportations Figma | JPG . PNG . SVG . PDF | Sauvegarder le projet dans .fig

      3:09

    • 20.

      Maquette dans photoshop

      4:06

    • 21.

      Plugins dans Figma

      3:44

    • 22.

      5 plugins doivent être fournis aux designers Figma !

      6:52

    • 23.

      Qu'est-ce que le wireframing ?

      2:21

    • 24.

      Wireframing avec Figma

      7:28

    • 25.

      Comment créer un wireframe dans wireframe.cc

      5:54

    • 26.

      Mise en place d'équipe et création d'un projet d'équipe

      3:39

    • 27.

      Collaborer en temps réel(équipes)

      3:06

    • 28.

      Wireframing pour LattoFatto

      17:14

    • 29.

      Page de nom de marque pour LattoFatto

      3:36

    • 30.

      Page d'accueil pour LattoFatto

      10:12

    • 31.

      Page d'inscription pour LattoFatto

      3:30

    • 32.

      Page de menu pour LattoFatto

      13:35

    • 33.

      Prototypage pour Lattofatto

      8:20

    • 34.

      Wireframing pour la plateforme de streaming OTT

      7:15

    • 35.

      Plateforme de streaming OTT

      19:08

    • 36.

      Prototypage pour la plateforme de streaming OTT

      2:45

    • 37.

      Conception de votre application musicale

      0:59

    • 38.

      UI de l'application Musify

      11:22

    • 39.

      Prototyper l'application Musify

      2:13

    • 40.

      Wireframing pour page Web des médias sociaux

      3:38

    • 41.

      Conception

      22:36

    • 42.

      Projet 5(Testez vos compétences UIUX)

      1:11

    • 43.

      Systèmes de grille dans Web et UI design

      3:29

    • 44.

      15 choses qui rendent votre design d'interface utilisateur légère ! !

      8:03

    • 45.

      5 SITES WEB QUE VOUS DEVEZ VOIR ! Inspiration de conception Web

      6:10

    • 46.

      Plus de 50 outils et ressources gratuits pour créer des interfaces utilisateur impressionnantes

      5:03

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

552

apprenants

1

projet

À propos de ce cours

Figma est un logiciel de conception de premier plan qui aide les équipes et les individus à créer des designs plus rapidement et plus efficacement. Figma est gratuit et vous pouvez l'utiliser directement sur votre navigateur Web, sur Mac et sur Windows.

Le cours comporte un composant pratique qui vous emmène étape par étape dans le flux de travail d'un designer d'applications professionnel. Des diagrammes de flux utilisateur au wireframing en passant par les maquettes et les prototypes.

Les étudiants qui terminent le cours sauront créer des applications belles et adorables qui laissent les gens avec un sourire sur leur visage.

Le cours UI/UX Design avec Figma est idéal pour les personnes n'ayant aucune expérience en design ou des designers expérimentés qui souhaitent se familiariser rapidement avec le design d'applications mobiles et le design Web. Nous explorerons les notions clés d'interface utilisateur et d'UX qui sont essentielles pour créer des applications attrayantes et faciles à utiliser qui sont appréciées des utilisateurs.

Les seules applications qui fonctionnent bien sont celles qui sont bien pensées en termes d'interface utilisateur et d'expérience utilisateur. C'est pourquoi il est si important d'apprendre les compétences en design qui permettront à votre application de se démarquer dans la foule.

Utilisant les dernières meilleures pratiques en design Web et en design mobile, ainsi qu'en design d'interface utilisateur et en design d'expérience utilisateur (UI/UX), ce cours vise à vous faire passer de zéro à un point où vous pouvez être embauché ou gagner des emplois indépendants. Nous utiliserons des outils demandés tels que Figma pour vous montrer un flux de travail complet du début à la fin.

Rencontrez votre enseignant·e

Teacher Profile Image

Chetan Pujari

Enseignant·e

Chetan is the instructor of some of the highest-rated Video editing and technical courses online.

Having been a self-taught video editor and programmer, he understands that there is an overwhelming number of online courses, tutorials, and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $1000+ to spend on video editing and programming institute. Any skills should be affordable and open to all. An education material should teach real-life skills that are current and they should not waste a student's valuable time.

He is now dedicating 100% of his time to teaching others valuable content creation and software ... Voir le profil complet

Compétences associées

Adobe XD Design Design UI/UX Prototypage
Level: All Levels

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Introduction (conception de UI/UX avec Figma): Bienvenue dans la conception de l'interface utilisateur avec Figma. C'est l'un des meilleurs tutoriels de la planète. Par limite que je suis concepteur UI UX, YouTubeur, freelance, créateur de contenu et programmeurs. À ce jour, soit enseigné, soit des tonnes de Turin en personne et en ligne. Et je suis très enthousiaste à l'idée d'être votre instructeur sur ce cours. En tant qu'étudiant sur ce cours, vous aurez accès aux quatre heures de contenu vidéo HD. Quel contenu ? Tutoriels pas à pas, projets interactifs, exercices et mode. Je vais vous guider tout au long du processus étape par étape que vous suivrez avec moi tout au long de ce cours. Dans ce cours, nous allons parler principes et des fondamentaux de la conception graphique, jusqu'à la création de produits de retrait. Découvrez l'expérience utilisateur, l'interface utilisateur et l'interaction, et création d'un processus de conception complet que vous pourrez utiliser avec tous vos futurs projets et clients. Nous allons apprendre tous les outils modernes et tissus mous des grandes entreprises à poser comme Figma. Désormais, le design est une compétence précieuse qui ne se désuète pas facilement, comme la plupart des compétences techniques. J'utilise Figma depuis quatre ans et je sais que chaque coche et tous les conseils pour ce cours couvriront chaque sortie du Y si X du début à l'avance. Après avoir parcouru l'interface, je vous guiderai étape par étape dans création de projets réels cool PHI, tels que la création d'applications, d'applications de médias sociaux, je suis désolé, pour une plateforme auditive, une application de lecteur de musique. Et le dernier est surpris. J'ai conçu ce cours pour tous les designers, que vous soyez un débutant dans conception de publics et de design enthousiastes, je cherche à apprendre ce nouveau domaine, Martin. Alors pourquoi attendons-nous encore ce cours avec tout ce dont vous avez besoin pour maîtriser Figma. Joignez-vous à la classe et commençons à concevoir. 2. La différence entre UX et UI: Quel genre de très grave Bienvenue avec une autre vidéo. Dans cette vidéo, nous allons découvrir ce qu'est la conception y, la conception UX et quelle est la différence entre l'interface utilisateur et l'UX ? conception de l'interface utilisateur et la conception UX sont deux des termes les plus souvent confus et conflictuels de la conception Web et des applications . Ils sont donc parfaitement placés ensemble en un seul terme comme la conception de l'interface utilisateur utilisateur. Et la blessure du service semble décrire la même chose. Et il est souvent difficile de trouver la solide discrétion des deux personnes qui dissentent trop loin dans le jargon. Mais ne craignez pas à la fin de cette vidéo, vous comprendrez bien ce qui les différencie et comment ils se rapportent les uns aux autres. Nous allons donc plonger dedans. Donc, la première chose que nous voulons discuter, c'est que le blanc est dans l'urine, je ne défendais pas l'interface utilisateur. L'interface utilisateur est la mise en page graphique d'une application. Il se compose du bouton que l'utilisateur clique sur le texte, ils lisent l'image, texte du curseur dans le champ et tout le reste de l'élément que vous transformez en x que nous obtenons. Cela inclut la mise en page de l'écran , l'animation de l'interface de transition et chaque micro-indirection beaucoup à concevoir. Ce travail était au concepteur d'interface utilisateur, a décidé à quoi ressemblera l'application. Ils doivent choisir un jeu de couleurs, puis façonner la largeur des lignes et les polices utilisées pour les textes. Vous êtes concepteurs, créez le look et Philip et les applications, l'interface utilisateur, le concepteur graphique d'actifs de conception d'interface utilisateur. Ils sont parallèles à l'esthétique. C'est à eux de s'assurer que les interfaces d'application attirent vers une stimulation visuelle, tentée de correspondre à l'objectif. Et ils doivent s'assurer que chaque élément visuel se remplit, United à la fois acide et intrants. La prochaine chose est donc, qu'est-ce que le design UX ? Vous étendez l'expérience utilisateur ou l'expérience utilisateur de l'application dépend de la façon dont ils interagissent avec vous. C'est l'expérimenté, lisse, ER, entité ou gros ou déroutant. Racontons l'application philologique ou est-ce que c'est déroutant ? Interagissez avec les gens pour envoyer manière très efficace l'accomplissement de la tâche qu'ils se sont fixés ? Ou est-ce que ça ressemble à une lutte ? L'expérience utilisateur est déterminée par la facilité ou la difficulté d'interagir avec l'élément d'interface utilisateur créé par le concepteur d'interface utilisateur. Ainsi, USD est un autre accord avec l'interface utilisateur de l'application. Et c'est pourquoi les gens sont confus. Notre différence entre les deux. Mais alors que si je l'ai fait sur notre tâche, nous décidons de l'apparence de l'interface utilisateur. Une dette énorme et sont chargés de déterminer le fonctionnement de l'interface utilisateur. ont déterminé la structure de l'interface et la fonctionnalité, façon dont elle est organisée et comment toutes les parties sont liées les unes aux autres. En bref, ils conçoivent le fonctionnement de l'interface. S'il fonctionne bien et parfaitement fluide, l'utilisateur aura une bonne expérience. Mais si la navigation est compliquée , un utilisateur méchant expérimente probablement travail d'un concepteur américain sur notre deuxième scénario. Il existe également certaines analyses de données homéodomaines dans la conception UX, les concepteurs créeront un rendu filaire de l'interface dans la direction et obtiendront les commentaires des utilisateurs. Ils interagiront cela dans leur conception. Il est important pour nous de vouloir avoir une compréhension holistique des préparateurs Pauser pour interagir avec l'application. Alors comment ils travaillent ensemble. Vous avez donc conçu, décidez du fonctionnement de l'interface utilisateur pendant que le concepteur d'interface décide de l'apparence de l'interface utilisateur. Il s'agit d'un processus très collaboratif et les deux équipes de conception ont tendance à travailler en étroite collaboration alors que l'équipe UX travaille sur le flux de l'application. Comment tous les boutons ne vous permettent jamais de traverser votre tâche et comment l'interface répond efficacement aux besoins des utilisateurs d'informations. L'équipe de l'interface utilisateur travaille sur la façon dont tous ces éléments d'interface apparaîtront à l'écran. Disons qu'à un moment donné du processus de conception, il a décidé que des boutons supplémentaires devaient être ajoutés ou donnés à l'écran. Cela modifiera la façon dont les boutons devront s' organiser et peuvent nécessiter un changement de forme et de taille. L'équipe To UX déterminera la meilleure façon de disposer le bouton pendant que les équipes de l'interface utilisateur s'additionnent, elles sont conçues pour s'adapter à la nouvelle mise en page. Communication et collaboration constantes entre l'interface utilisateur, UX conçoit une aide pour garantir que l'interface utilisateur finale est aussi belle que possible. Tout en fonctionnant efficacement et intuitivement. Il y a certains risques, comme la recherche vitale pour l'interface utilisateur et le concepteur UX. Il est important que les deux disciplines rassemblent autant d'informations que possible pour les aider à élaborer une conception appropriée. Et les deux suivent une approche similaire. Ce qui va rechercher, ce que l'utilisateur veut, ce que l'expert de l'application du genre développé. Les citoyens sont souvent session d'utilisabilité de l'interface interactive, où l'utilisateur réel interagira avec une version évolutive de certaines fonctionnalités ou une conception visuelle texturée et déterminera si la conception se déplace sur la bonne voie. Car le sac est intégré à chaque interaction. Ce processus implique la diffusion prototypes de faible fidélité tels que des filaires, saisie de l'élément d'interface afin de mesurer rapidement la réponse de l'utilisateur aux fonctionnalités testées. Cela peut également favoriser prototype visuel de différentes origines possibles du look et remplir l'interface pour déterminer quel utilisateur préfère. Dans tous les cas, la recherche aide à guider les coches du concepteur d' état au fur et à mesure qu'ils contribuent. Cependant, les informations recherchées par l'interface utilisateur et la dette UX et R sont très différentes. Il s'agit donc de savoir pourquoi les concepteurs UX conçoivent et remarquent la différence entre eux. Nous avons également discuté de quelques clés de recherche. C'est donc tout pour la vidéo d'aujourd'hui. Et je vous verrai dans le prochain. 3. Introduction à Figma et à télécharger et à installer Figma: Quoi qu'il en soit, si jamais vous y revenez une autre vidéo. Dans cette vidéo, nous allons découvrir Weber General Figma et comment télécharger Figma pour votre PC. Comme vous pouvez le constater, j'ai ouvert la version du navigateur Figma. Il suffit d'aller dans votre navigateur et de taper figma.com comme ceci. Et après avoir cliqué sur Entrée, cette page sera ouverte. Comme vous pouvez le voir, l'espace est vraiment cool. Il y a déjà quelques animations sur cette page d'accueil. De plus, je pense que c'est la réutilisation. Voyons un par un. Nous avons donc ce logo en haut. Après cela, nous avons un produit. Dans les produits, nous avons la conception, le prototypage, système de conception et les téléchargements à partir de là, nous allons télécharger notre logiciel. Nous le téléchargerons dans ma lettre. Voyons donc ce qu'il y a dans l'entreprise. En entreprise Nous avons tous vos clients et contactons le service commercial. Si vous cliquez sur le prix, il y aura trois options. Nous allons utiliser la version gratuite. Et si vous voulez acheter la fourniture d'origine ou tout NIOSH et que vous pouvez le faire, mais je vous suggérerai d'utiliser la version gratuite. Disons que l'onglet Communauté dans la communauté, nous avons des fichiers et des modèles et des plugins. Nous avons également certaines options telles que les événements et les diffusions en direct, meilleures pratiques de confidentialité, les programmes de nutrition et les groupes d'utilisateurs. Nous sommes donc intéressés par le fichier et 10 bits dans un fichier et Tenbrunsel, nous avons plus de 1000 modèles. Nous pouvons l'utiliser dans notre projet. Nous avons également des plugins. Je vais donc vous montrer comment utiliser les plugins dans notre projet dans les prochaines vidéos. En compagnie, je pense qu'ils ont tenu des blogs, carrière, notre histoire et notre centre d'aide. Si nécessaire, aide que vous pouvez contacter ici. Je sais que vous êtes nouveau ici. Cliquez donc sur le bouton S'inscrire et vous pouvez connecter votre compte Google. Vous pouvez également utiliser l'e-mail et mot de passe pour créer le compte sur Figma. Mais je vous suggérerai d'utiliser votre compte Google car si vous ajoutez votre e-mail et votre mot de passe, vous devez vous souvenir du mot de passe. Donc, si vous vous connectez à votre compte Google, vous n'avez pas à vous souvenir de la partie de Figma. Et si vous cliquez sur le bouton S'inscrire et qu'il vous affichera votre compte Google et vous pouvez y entrer et vous connecter avec lui. Je ne vais donc pas le faire car j'ai déjà le compte Figma. Je vais donc juste verrouiller mon compte Google parce que c'est vraiment simple. C'est mon compte. Après vous être connecté à notre inscription à Figma, c'est le tableau de bord que vous allez voir. Donc, dans ce tableau de bord, nous avons une raison, la communauté des chiens et votre projet et votre équipe, votre profil. Et vous pouvez également voir les options à partir d'ici. Nous allons donc regarder ces choses dans la prochaine vidéo. Donc je dois le faire, je pense avoir deux logos pour vous montrer comment télécharger Figma. Allons donc dans le produit et téléchargeons simplement. Ok, après avoir cliqué sur Télécharger, cette page apparaîtra. Vous pouvez voir que vous pouvez télécharger Figma pour macOS ou Windows. Vous pouvez utiliser votre appareil Apple ou Android pour l'aperçu. Et nous avons également trouvé un tore, mais nous nous intéressons aux applications de bureau. J'utilise actuellement Windows, donc je vais cliquer sur Windows. Si vous utilisez Mac, cliquez sur macOS. J'ai donc déjà installé au mieux, donc je n'ai pas besoin de le télécharger à nouveau. Il vous suffit donc de cliquer sur le bouton Enregistrer. Il le fera, il va dominer pour vous. C'est donc tout pour la vidéo d'aujourd'hui. Et je vais vous montrer d'autres choses dans la prochaine vidéo. Alors restez à l'écoute pour ça. C'est moi qui signe. Merci d' avoir regardé et je vous verrai dans le prochain. 4. Tableau de bord Figma InterfaceDashboard: Bienvenue de retour. Dans cette vidéo, nous allons apprendre notre tableau de bord sur Figma. Donc, lorsque vous installez le logiciel, vous pouvez voir que l'interface ressemblera à ceci. Si vous vous connectez à Figma, nous sommes en voyage. Et ensuite, l'interface est la même. Après l'installation lorsque vous vous connectez à Figma , les interfaces ressemblent à ceci. Aujourd'hui, ces derniers temps, dans un EP récent, nous avons quelques fichiers de figma, prototypage dans Figma à partir cadrage d' obésité et quelques couleurs. Vous pouvez choisir pour votre équipe. Mais vous travaillez pour vous-même, alors vous n'avez pas besoin de créer une équipe. Comme vous pouvez le constater, j'ai créé un projet. Ce projet porte sur la conception Web. La prochaine option est donc les brouillons, les interruptions. Nous avons des fichiers non projets. Si vous le dites simplement, cliquons sur ce projet. Et si vous souhaitez déplacer ce fichier dans un projet, vous pouvez le faire. Bon, le projet est ouvert maintenant. Donc, ce que vous devez faire, c'est simplement cliquer sur ce bouton fléché vers le bas, et ce menu apparaîtra. Et à partir de là, vous pouvez déplacer ce fichier vers le projet. Vous pouvez également effectuer une recherche dans votre projet à partir d'ici. Ou si vous souhaitez créer un nouveau projet, pouvez également cliquer sur Nouveau projet et MOOC. Il montre donc que votre projet est déplacé. Il s'agit donc maintenant d'un fichier de projet. Maintenant, si nous allons dans Home et que vous pouvez voir que le fichier n'est pas en D gouttes maintenant. Le fichier est dans le premier projet. Vous pouvez le voir ici. La prochaine option est donc la communauté. La communauté est l'une des principales fonctionnalités de Figma. À partir de là, vous pouvez télécharger des plug-ins, des gemmes fixes, système de conception, des filaires, des illustrations, des icônes et bien plus encore. Comme vous pouvez le constater, nous avons déjà créé des modèles. Vous pouvez utiliser ces modèles dans notre projet. Prenons donc celui-là. Vous pouvez donc voir cette page Web. Il s'agit donc de la page Web de la plateforme d'apprentissage en ligne. Et si vous souhaitez en savoir plus sur cette page Web, vous pouvez cliquer dessus. Et il vous montrera d'autres choses, notre page Web. Et vous pouvez également connaître qui est le créateur. opioïdes peuvent également les suivre à partir d'ici. Si vous voulez venir, vous pouvez également le faire à partir d'ici. Donc, pour l'instant, nous allons faire des fuites. Et nous pouvons aussi l'aimer à partir d' ici et il suffit de cliquer dessus pour plaider. Après avoir dupliqué le fichier, vous pouvez voir que le projet est ouvert dans les brouillons. Mais si vous souhaitez déplacer ce projet vers votre projet, il vous suffit de cliquer sur le projet MOOC et de sélectionner votre projet. Comme si je n'avais créé aucun projet ici, mais si je clique sur Default et qu'il va passer au premier projet, si vous le souhaitez. Vous pouvez également lire cette page, mais pour l'instant, nous allons apprendre nos choses. Je vais donc fermer cet onglet. Retournons à la maison. Donc, si vous êtes nouveau ici et que vous souhaitez créer un nouveau projet, vous allez dans le premier projet, cliquez sur ce bouton plus et cliquez simplement sur le fichier de conception. Disons même qu'il est sans titre, mais si nous voulons le renommer, vous pouvez également le renommer à partir d'ici. Disons qu'il s'agit d'une application. Donc je vais, je vais taper Enter. Alors nettoyons le cadre et choisissons n'importe qui comme iPhone. Et nous pouvons ajouter des éléments à partir de vous, comme une ligne. Ou si vous souhaitez ajouter une autre forme comme un polygone triangle ou ellipse. Ok, vous pouvez faire toutes sortes de Tokyo, mais regardons l'interface. Et vous pouvez voir le pélagique que vous avez créé. C'est vrai, ce n'est pas des gouttes. Et si vous voulez supprimer ce fichier, il suffit de cliquer dessus avec le bouton droit de la souris et de le supprimer. Et si vous travaillez avec votre équipe, vous pouvez simplement cliquer sur Créer une nouvelle équipe et le nom de l'équipe et cliquer simplement sur le bouton Créer une équipe. Mais à l'heure actuelle, nous ne travaillons que seul, donc nous n'allons pas créer de nouvelle équipe. Fermons cette page. Il y a donc plus d'options comme ce bouton de notification. Vous recevrez une notification ici. Et c'est le profil. À partir de là, vous pouvez accéder à des plugins comme. Actuellement, j'ai flotté ce plug-in photo. Et si vous le souhaitez, et si je veux le désinstaller, je peux simplement cliquer sur ce bouton et il va se dérouler pour moi. Vous pouvez également télécharger autant de plaintes que de la communauté. Et dans la communauté, j'ai mon nom, profil de molarité Beecher Stowe, dans mon propre style. J'ai donc immédiatement le même nom. Bibliothèques et applications de connexion et tout ça. Si vous souhaitez en ajouter d'autres pour accompagner, vous pouvez également les ajouter. Et vous pouvez, si vous souhaitez vous déconnecter après avoir terminé un projet, vous pouvez également vous connecter ici. Et je pense que cela convient, c'est tout au sujet du tableau de bord Figma ou de l'interface. Dans la vidéo suivante, nous en apprendrons plus sur les outils Figma et bien plus encore. Merci d'avoir regardé cette vidéo et je vous verrai dans la prochaine. 5. Importer des fichiers Figma de Figma dans Figma: Bienvenue de retour. Dans cette vidéo, nous allons apprendre comment importer des fichiers tels que des fichiers Figma, des fichiers esquisse et des modèles. Comme vous pouvez le constater, j'ai cette équipe. Allons-y. Et j'ai des dossiers dedans. Donc je ne vais pas Newton celui-là, donc je vais le faire pour l'importation, très bien. Allez dans New. Et vous pouvez voir que nous avons le bouton Importer, alors cliquez dessus. Et j'ai un projet Figma. Et vous pouvez voir que l'extension est remplie. Cliquez ensuite dessus et cliquez sur Ouvrir. Cela prendra donc un certain temps. Nos dernières pistes à la frontière ont été réalisées avec succès. Donc, si je me lance dans un projet. Vous pouvez donc voir que ce projet est ouvert maintenant, donc je peux apporter des modifications si je le veux. Et à la page 1, nous avons quatre cadres. Et pour deux cadres sont des pages Web et, et ces deux cadres pour l'application. Et il s'agit également d'une page Web. Si vous souhaitez apporter des modifications, vous pouvez également le faire à partir d'ici. Voici donc comment importer un projet à partir d'un fichier local. Supposons que si vous souhaitez télécharger comme nos modèles, que vous puissiez simplement taper dans Google, téléchargez les modèles Figma. J'ai donc trouvé ce site Web vraiment utile, figma.com. Donc, sur ce site, nous avons beaucoup de projets. vous suffit donc de cliquer dessus et de le télécharger depuis la vue. Et la prochaine étape est comme, disons que c'est le Figma template.com. Dans cette image, nous avions beaucoup de modèles et tous ces modèles sont gratuits pour que nous puissions conserver, vous pouvez apporter des modifications. Et vous pouvez également vous inspirer de ce projet si vous ne savez pas comment réaliser votre prochain projet. J'ai donc téléchargé ce projet auprès de vous. Supposons que si vous souhaitez importer un fichier d'esquisse, vous pouvez également le faire. Et pour les ressources de ce fichier d'esquisse, vous pouvez utiliser ce site Web appelé Sketchfab dot, ainsi dit. Ainsi, sur ce site, nous avons de grandes ressources de savon comme des modèles gratuits et vous pouvez dire filaire. Je garde aussi pour l'icône Android et tout ça. Ils téléchargent donc celui-ci. Et vous l'avez déjà fait dans le fichier, j'ai déjà téléchargé celui-ci. Vous pouvez donc vous voir. Je ne vais donc pas seulement écouter. Et vous pouvez voir ce fichier d'exercices que nous avons téléchargé et extrait. Cliquez dessus. Vous pouvez voir le fichier d'esquisse. Accédez à Figma, cliquez sur Nouveau et importez. Donc actuellement la même limite de fichier DEM que g. Je dois donc faire quelque chose. Je veux donc le faire dans celui-ci. Encore une fois, cliquez sur New Import. Et il s'agit d'un fichier à croquis. Et cliquez sur Ouvrir. Notre fichier est donc en cours d'importation. Vous pouvez voir le nom et le fichier a été importé avec succès. Terminé. Cliquez donc dessus. Donc, après avoir offert un fichier, même voir l'application ressemble à ceci. Nous sommes donc en train de me dire que les téléphones qui tombent ne sont pas disponibles pour les téléphones qui tombent ne sont pas disponibles que nous puissions les remplacer par d'autres formulaires. Il y a donc un problème avec le fichier Sketch, nous devons donc gagner ces formulaires. Une fois encore. Allons à la maison et prenons celui-là parce que je dois vous montrer quelque chose. Et juste au moment où j'ai créé cette seule commande complète, une interface utilisateur importante, disons que je veux déplacer ce projet pour qu'il aime mon nouveau projet. Vous pouvez donc voir que nous avons des options comme plusieurs. Donc, si je clique dessus et dans les options V8 comme les brouillons, et c'est mon équipe. Et si vous souhaitez créer une nouvelle équipe, vous pouvez également le faire à partir d'ici. Je veux donc emménager actuellement. Je passe à l'équipe des programmes imaginaires. Je vais donc cliquer sur celui-ci et bouger, je pense que c'est le premier projet mono 2. Et nous pouvons voir que notre projet est égal à 0. C'est ainsi que vous pouvez importer à partir d'un fichier, esquisser un fichier et de télécharger ces modèles. C'est donc important. Et je vous verrai dans le prochain. 6. Outils dans Figma: Nous sommes donc très sévères. Nous y reviendrons une autre vidéo. Dans cette vidéo, nous allons en apprendre davantage sur les outils. Créons un nouveau projet. Cliquons sur Nouveau et vous pouvez voir les options telles que fichier de conception, Figma, fichier de saut, importation et navigation des modèles. Vous pouvez voir ici que vous pouvez choisir Templars comme pour iPhone 11 Pro Max, ou vous pouvez choisir comme un autre smartphone. Ou si nous voulons créer notre page Web, vous pouvez également choisir un ordinateur de bureau, ou vous pouvez également choisir une diapositive de 16 ans à neuf. Et si vous le souhaitez, vous pouvez également choisir ici ces modèles préfabriqués. Nous avons également préservé la présentation du système de conception et le filaire. Et si vous cliquez sur la communauté CMO, elle vous redirigera vers la section communauté. Et il dispose également d'un gabarit de gestionnaire de figues. Il s'agit actuellement d'une version bêta. Nous sommes donc intéressés par l'espace vide. Et vous pouvez voir ici qu'il s'agit actuellement d'une équipe de programmeurs imaginaires et d'un premier projet. Et vous pouvez voir que c'est le premier projet. Nous avons donc besoin d'un écran vide. Je vais donc choisir le dossier de conception. Après avoir créé un nouveau fichier, l'interface va ressembler à ceci. Et si vous souhaitez le renommer, vous pouvez simplement cliquer sur ce menu déroulant et vous pouvez simplement le renommer à partir d'ici. Vous pouvez également passer à projeter, supprimer, lubrifier et exporter, et vous pouvez également afficher la chaîne d'origine. Pour l'instant, je vais simplement le renommer. Renommez-le en outils. Et comme vous pouvez le constater, il y a un logo Figma sur le côté gauche. Et si je clique sur ce Meno, vous pouvez voir les options. À partir de cette option de section rapide, vous pouvez rechercher tout ce que je veux rechercher comme polygone. Je peux l'utiliser directement. Et vous pouvez simplement dessiner le polygone comme ceci. oiseau. Examinons plus d'options. Et, et à partir de là, vous pouvez également accéder à File Edit, View, Object vecteur pris dans les plugins Ahrens. Actuellement, j'ai installé le seul plug-in qui soit des photos. Et vous pouvez également ajouter qu'il existe d'autres options telles que l'intégration et les bibliothèques de performances. Et vous pouvez également voir le compte en épingle pour utiliser la version Web de Figma alors l'option pourrait être différente. Pas toutes les options, certaines options comme dans cette section, vous obtiendrez une application de bureau. OK ? Ok, c'est le déménagement. D'ici. Vous pouvez déplacer vos vecteurs, objets, images, etc. Il existe également des options d'échelle. Ok, le prochain est Frame. Comme vous pouvez le voir dans le raccourci est F. Si vous appuyez sur F sur le clavier, il y a quelques modèles tels que téléphone, tablette, ordinateur de bureau, présentation, regarder les médias sociaux des gens et la communauté Figma. Mais si vous souhaitez créer comme sur le Web, vous pouvez choisir ces options telles que Desktop, MacBook, MacBook Pro et iMac. La plupart du temps, je choisis MacBook Pro. Nous allons donc cliquer dessus. Ensuite, le modèle est sur l'écran et le cadre nous avons également une option de tranche. Je pense que l'outil Slice n'est pas très utilisé, donc je vais ignorer ça. Dans la section suivante, nous avons des formes comme un rectangle, flèches de ligne, une ellipse, un polygone, une étoile. Et si vous souhaitez placer une image à partir de vos médias locaux, vous pouvez également le faire. Et choisissons un rectangle. Vous pouvez simplement le faire glisser sur le cadre. Et vous pouvez voir dans ce rectangle est créé ici. Mais si vous voulez dessiner un carré, le carré parfait, vous devez maintenir la touche Maj sur le clavier comme ceci. Et vous pouvez voir que le carré est dessiné, dessiné le cadre comme celui-ci. Mais si je retire mon doigt du vaisseau, vous pouvez voir que la forme est changée maintenant. Et c'est arrivé avec toutes les formes. Comme si je voulais créer un cercle. Ensuite, vous pouvez voir que je choisis l'ellipse et je fais glisser ça. Et je suis en train de mourir le cercle à l'écran, mais ce n'est pas les sondages qui sont l'OL. Je veux donc créer le cercle. Je vais donc maintenir la touche Maj sur le clavier. Comme vous pouvez le constater, il s'agit maintenant d'un cercle comme celui-ci. Et voici un arbre vraiment cool. Vous pouvez voir qu'il y a quatre points du côté est. Et si je le fais glisser à l'intérieur, vous pouvez créer un cercle comme celui-ci. Et si je veux créer une icône, vous pouvez utiliser cette option pour créer des arêtes plus nettes dans un coin arrondi. Je pense que je vous montre déjà comment utiliser ces choses dans la vidéo précédente, mais je ne pense pas vous montrer comment faire l'objet Likoud. Comme si vous deviez dupliquer ce cercle, suffit de cliquer dessus et de maintenir Alt sur votre clavier et de le faire glisser. Quand vous voulez comme ça et laissez-le. Et vous pouvez également le transformer en une autre forme déjà trouvée pour faire de ce cercle un petit. Vous pouvez simplement maintenir la touche Maj enfoncée et la faire glisser vers le bas comme ceci. Faites en sorte qu'il soit plus petit et moins d'assiettes explicite ici. C'est peut-être notre logo, comme celui-ci. Ok, la prochaine option est de faire tourner la douleur. Vous pouvez créer des formes, des formes aléatoires comme celle-ci. Nous pouvons également en fabriquer des roues. Disons comme ça. Comme s'unir ensemble. Comme ça. Vous pouvez voir si vous le souhaitez, vous pouvez également y ajouter une couleur. Il suffit de cliquer sur le remplissage et sur ce bouton plus. Et vous pouvez voir et la couleur, et la couleur est grise. Et si vous voulez apporter des modifications, puis vous pouvez choisir, ou vous pouvez simplement appuyer sur V sur votre clavier et simplement passer sur ce point rouge. Vous pouvez simplement le faire glisser comme ça. La forme va changer. Comme ça. Si vous souhaitez changer cette couleur grise en une autre couleur, il vous suffit d'appuyer sur cette icône et simplement faire glisser sur cette section de couleur. Vous pouvez également utiliser le dégradé si vous le souhaitez. Vous pouvez voir le changement de couleur maintenant sur le cadre, comme ceci. Ok, la prochaine option est le crayon. À partir de là, vous pouvez simplement dessiner comme ça. Et la prochaine option est le texte. Ajoutons du texte à l'écran comme celui-ci. Tout ce qui est aléatoire. La taille de la police est très petite. Donc, si nous voulons l'agrandir, il suffit de sélectionner la police à l'aide de Contrôle a. Et vous pouvez accéder à cette section de texte et modifier la taille de la police en P2. Je vais vous garder jusqu'à 48 ans. Nous pouvons donc voir la taille des polices augmenter maintenant. Vous pouvez également modifier le type de police comme celui-ci. Ma police préférée est le magnétoscope. Je vais donc choisir celui-là. Et vous pouvez voir la police comme celle-ci. Si vous voulez. Vous pouvez également ajouter des traits, des effets et tout cela. Et le prochain outil est Hand Tool. Supposons que si vous avez plus d'une image, dupliquons ce cadre. Appuyez sur Alt et déplacez-le comme ceci. Et actuellement, si vous travaillez sur la première image et que vous souhaitez déplacer une image vers une autre. Vous pouvez utiliser cette barre de curseur pour passer à un autre cadre. Mais ce n'est pas ça. Mais si vous avez beaucoup de cadre, comme trois ou quatre cadres, nous pouvons simplement utiliser la main. Et le raccourci pour l'outil à main est Edge. Et vous pouvez voir que la main est sur le cadre. Et oui, vous pouvez simplement le faire glisser comme ça. Deuxième cadre. Le premier cadre. Et l'outil suivant est la commande. Supposons que vous travailliez sur le projet et que je recommande à votre façon sur le cadre comme celui-ci est le logo. Vous pouvez donc me dire ce que vous aimez. C'est le changement. Comme ça. OK. J'ai commis beaucoup d'erreurs d'orthographe. Ensuite, vous deviez savoir que c'est le logo, donc nous n'avons pas à apporter de modifications. Vous êtes donc un autre partenaire ou un coéquipier peut répondre à ce message, d'accord ? Et il suffit de cliquer sur la réponse. OK ? Mais vous pouvez voir quand je vais dans l'outil Déplacer, il sera invisible. Mais si je reviens dans les commentaires , c'est maintenant visible. Et encore une fois, vous pouvez voir que le logo ne peut pas changer. Et votre coéquipier, monsieur. OK. Ce sont tous les outils la Figma que vous pouvez utiliser pour réaliser n'importe quel projet comme celui-ci serait un projet vraiment bizarre que Mary aime à l'écran. C'est donc tout pour aujourd'hui. Et je vous verrai dans le prochain. 7. Panneau Panneau Figma Calques de calques: Bienvenue, bienvenue, bienvenue. Et il s'agira d'apprendre comment créer des calques, des pages et des composants. Il s'agit donc d'un projet tiré de la vidéo précédente. Comme vous pouvez le constater, nous avons deux listes MacBook Pro pour mettre fin à mon MacBook Pro V1. Et à l'intérieur, il y a des vecteurs, ellipses, des cercles et tout mène au texte. Et si nous voulons créer une nouvelle page, une page blanche, je vais simplement cliquer sur ce bouton Plus. Et si vous voulez le renommer, vous pouvez simplement le renommer comme vous le souhaitez. Pour l'instant, je vais choisir des paires pour appuyer sur Entrée. Et vous pouvez voir que l'espace est complètement vide maintenant. Mais si je veux ce cadre, passez de la page 1 à la page 2 ou je veux simplement copier. Vous pouvez simplement appuyer sur Contrôle C et passer à la page deux et appuyer sur le contrôle V. Et vous pouvez voir notre cadre à partir de la première page. Il est maintenant dans le cadre, et nous ne faisons que le copier dans un seul cadre. Supposons que vous vouliez copier toutes les choses de la page 1 vers la page 1 pour accéder à la première page et sélectionner tous les amis maigres à l'aide de Contrôle ou de Commande D sur Mac. Et Control C pour copie. Maintenant, allez à la page deux et appuyez sur le contrôle V. Et vous pouvez voir toutes les choses à partir de la première page. Il se trouve maintenant à la page deux. Il s'agit donc de nos pages D. Et vous pouvez voir que c'est la liste, le MacBook Pro 21. Ce sont donc les calques. Et disons que j'ai ce cercle, mais c'est un logo, et je veux l'utiliser encore et encore. Je peux transformer ce logo en composants comme sélectionner ce cercle, aller au département DOE. Et vous pouvez voir cette icône du milieu. Il s'agit de créer un composant et le raccourci est Control Alt, puis cliquez dessus. Et si nous allons dans les ressources, vous pouvez voir le MacBook Pro V1 et le composant est un outil Ellipse comme celui-ci. Et si nous voulons l'utiliser et simplement le faire glisser sur l'écran comme ceci. Et nous voulons vous aider lorsque vous travaillez avec beaucoup d'amis. Tout grand projet. Voilà donc tout ce qui concerne les calques, les pages et le SSRS. C'est donc votre photo. Et je vous verrai dans le prochain. 8. Composants Figma: Eh bien, il faut vraiment que ce soit bienvenu dans une autre vidéo. Dans cette vidéo, nous allons en apprendre davantage sur les composants. Dans les vidéos précédentes, nous découvrirons comment créer des composants et comment les utiliser. Mais dans cette vidéo, nous allons en savoir plus sur les composants, comme le type de choses que vous pouvez faire avec les composants. Imaginons que vous conceviez une application, une application de navigateur Hub. Et vous avez plusieurs pages comme celle-ci. Et vous avez des icônes comme celle-ci. Et vous devez utiliser ces icônes sur la page d'accueil de ce bateau. Par exemple, supposons que je souhaite ajouter cette icône YouTube. Je vais donc simplement le sélectionner. Et déplacons ce cadre. Comme je l'ai dit, la plupart de ces icônes. Et nous voulons également ce point-virgule sur la page suivante. Ceci est dupliqué à l'aide d'une alerte sur Mac, c'est la touche Option, comme celle-ci. Mais je veux changer la couleur de cette icône comme l'icône YouTube. Je vais donc entrer dans le remplissage et le transformer en commerce. D'accord ? Les couleurs changent. Maintenant. Vous pouvez voir la vraie couleur. Mais en même temps, je veux aussi aimer la couleur de genre de cette icône, mais je dois le refaire. Donc, dans ce cas, les composants vont nous aider. Allons faire bouger ce battage médiatique dimanche. Cet espace vide, également celui-ci. Et sélectionnez l'icône. Et j'ai déjà fait allusion à la création d'un composant. Alors allez sur la barre supérieure amino, sélectionnez ce bouton diamant et cliquez dessus. Et vous avez maintenant un composant. Alors, comment saurez-vous qu'il s'agit d'un composant ou non ? Donc, si vous effectuez un zoom dessus, vous pouvez voir la petite icône de diamant sur vous. Et il y a aussi un composant. Et cela est également appelé après composant ou composant de modèle. Donc, si nous entrons dans l'actif Pentland et que vous pouvez voir notre logo YouTube, il est maintenant un composant. Vous pouvez simplement le faire glisser comme ça et le placer très bien. Vous voulez comme ça. Faisons donc de cet Instagram un composant et de cette icône PayPal. Il s'agit donc aussi du bouton Component Plus. Ce sont donc les composants. Maintenant, nous pouvons simplement le faire glisser comme ça, le placer où vous voulez, comme ça. Ce que je veux faire, c'est que cette icône soit affichée, également sur le cadre suivant. Appuyez sur Alt et faites-le glisser sur l'image suivante, comme ceci. Il s'agit du composant principal et s'agit du composant enfants. Et ce que je veux faire, c'est que je veux changer la couleur de ceci et de ceci. Ce que je vais faire, c'est que je vais cliquer, je vais sélectionner ce composant principal et nous allons créer le panneau et cliquer sur cette couleur de sélection. Donc actuellement cette couleur noire et je veux changer, vous allez aimer lire. Je vais donc juste le traîner au fardeau sur le rouge. Et vous pouvez voir le composant maître et la couleur du composant enfant est également modifiée sur le cadre d'un seul et également sur différents. Pour cette raison, vous n'avez pas besoin de changer la couleur encore et encore sur les différents cadres. Faisons le panneau de navigation. Et nous pouvons simplement y ajouter tous les éléments. Et nous allons créer ce panneau de navigation en composants afin que nous n'ayons pas à aimer le faire glisser encore et encore sur le deuxième panneau de stylet. Créons donc un panneau de navigation. Nous allons choisir un rectangle. Vous allez appuyer sur R pour le raccourci afin de créer un panneau de navigation simple comme celui-ci. Nous avons donc créé cette barre de navigation. Vous pouvez donc voir dans la section suivante de la première image, iPhone 11 Pro Max, le rectangle est en haut. Donc v va, si v, si je fais glisser cette icône YouTube, YouTube sur disbarred, alors elle ne s'affichera pas. Vous pouvez voir. Donc, si je déplace ce rectangle à la baisse, comme ça à la fin du cadre. Et si je fais glisser cette icône YouTube à nouveau sur le panneau de navigation, et que vous pouvez voir que le logo est maintenant visible. Nous allons donc faire glisser cette icône une par une. D'accord, le panneau de navigation est créateur. Nous allons donc sélectionner cette option et vous pouvez appuyer sur le bouton Composant pour créer un composant. Il s'agit maintenant d'un composant et vous pouvez le voir dans le panneau des ressources de l'iPhone 11 Pro Max 1. Disons que si je déplace ça en dehors de ce cadre. Il ne s'agit donc pas d'un composant universel. Et vous pouvez simplement le faire glisser sur le cadre comme celui-ci. D'accord ? Ces composants et ces composants sont donc totalement différents. Nous l'avons fait dans le panneau de navigation, puis après avoir créé un composant. Ce sont donc les différents. Si je supprime celui-ci, vous pouvez voir que le composant principal du panneau Asset n'est pas supprimé maintenant, mais pas à partir de ce panneau de navigation. Donc, ce genre de choses que vous pouvez faire avec un composant. C'est donc 24 ans. Et je vous verrai dans le prochain. 9. Tab/Panel: Bienvenue de retour. Dans cette vidéo, nous allons apprendre l'une des pénalités les plus importantes qui est conçue. Nous allons donc ouvrir ce projet. Donc, si je clique sur ce haut, vous pouvez voir le panneau de conception et vous pouvez voir les positions x et y. Nous sommes fatigués Angle. Et si vous voulez faire tourner les colons, vous ne pouvez pas les dépenser d'ici. Si vous souhaitez ajouter une mise en page automatique, vous allez le faire à partir de là. Mais si je clique dessus, vous pouvez voir si c'est foiré. Donc, je ne vais pas faire ça. Appuyez donc sur Control Z pour annuler les choses. OK, c'est normal maintenant. Et si je veux ajouter une colonne, vous pouvez le faire à partir d'ici. Actuellement, c'est un ingrédient. Alors choisissons la couleur et vous pouvez définir la quantité de colonne que vous voulez, comme actuellement, consacrée à cinq. Donc, surtout dans l'industrie, ils ont utilisé l'échec. Nous allons donc s'y tenir. Vous pouvez donc voir que nous pouvons ajuster ces textes comme celui-ci en fonction de ces colonnes. Il sera donc plus beau. Ok. Et nous avons des options comme la couche, trait de couleur silicium, les effets et l'exportation. Alors regardons un par un. Enlevons donc ça. D'accord ? Donc, si je clique sur ce logo, vous pouvez voir les positions x et y. Donc, si je veux entre comme un garçon, je peux générer à partir d'ici, comme actuellement il est 100 ohms, donc je peux bien le faire, c'est comme un 100. Vous pouvez donc voir que c'est j maintenant. Et si vous le souhaitez, vous pouvez le déplacer manuellement comme ceci. Vous pouvez également modifier la largeur et la hauteur. Comme actuellement, l'opiacé est comme 1906. Et vous pouvez voir que c'est un peu le mot district étiré. Et retracons l'hydrolyse. On voit donc que c'est vraiment bizarre. Rends-le normal. OK. Ainsi, à partir de cette option, nous pouvons créer des proportions de contrainte. Disons donc que si je change cela en 200, donc il va automatiquement ajouter juste l'EPR en hauteur. Voyons un autre exemple. Disons que je fais, je vais aller jusqu'à 250. Vous pouvez donc voir le changement de tension en fonction de la hauteur. Je vais donc rendre ça normal. Donc, si vous souhaitez modifier l'angle de ce logo, vous pouvez le faire à partir d'ici. Disons 45. Vous pouvez voir une chaîne pendante maintenant. Donc, si je me dirige le plus vers le logo et que vous pouvez voir mon curseur, vous changez. Je peux donc simplement bouger comme manuellement. Ou vous pouvez simplement aller ici et taper 0. Et si vous voulez faire ce tour, c' est donc un, c'est déjà rond, donc je ne vais pas le faire. Disons donc que si vous avez un carré comme celui-ci et que vous voulez changer les coins vifs en ronds. Donc, à partir d'ici, vous pouvez y arriver. Disons, donnons de la valeur. Et vous pouvez voir des coins vifs qui se transforment en ville. Nous pouvons donc commencer par contrainte nos logos et nos boutons de navigation. Par exemple, si je clique sur mon logo et passons à la contrainte. Contraintes. D'accord ? Donc, actuellement, il n'est pas gauche et en haut. Donc, si je me transforme en droit et Morton et si je décide de dire ce cadre, vous pouvez voir le logo, il est sorti de ce cadre. Ce que je veux faire, c'est que lorsque je redimensionne cette phase, le logo doit rester ici. Je veux donc épingler ce logo à cette position. Ce que je vais faire, c'est que je vais aller à intervention et à la position 4, c'est vécu et ça doit être sur le livre. Disons donc que si je sélectionne à nouveau cette image, l' avais décidé, vous pouvez le voir tourner maintenant. Et vous pouvez faire la même chose avec ce contact à domicile et à propos. Disons que je veux épingler un contact à domicile , mais je veux le faire en même temps. Pas encore et encore. Donc ce que je veux, ce que je vais faire, c'est que je vais cliquer sur Accueil et maintenir la touche Maj enfoncée, cliquer sur Contact et cliquer sur nous-mêmes. Ce contact à domicile est donc sélectionné. Je veux donc épingler cette position. Je vais donc entrer dans des contraintes. Et à l'heure actuelle, ce n'est pas le bon côté, donc je vais choisir brillant et le maintien de l'ordre devrait être enseigné. Et si je clique sur ce cadre et que je le redimensionne moins. Vous pouvez donc voir que c'est le cas. C'est ainsi que vous pouvez utiliser la conscience. La prochaine chose, c'est les couches. Vous pouvez donc choisir différents modes de fusion comme dague Modibo, la clavicule, comme ça. Je vous assure donc d'avoir choisi le carré. Disons que je veux le changer pour qu'il se multiplie. Je vais donc cliquer sur la multiplication. Vous pouvez donc voir l'effet. Il est devenu transparent. Et il a aussi la couleur grise. Donc, si vous souhaitez modifier la couleur, vous pouvez également la modifier à partir d'ici. Mais actuellement, je vais le laisser tel quel. Donc, ma préférée est comme cette exclusion. Vous pouvez voir la magie. Cela devient donc un film négatif. Pour l'instant, nous allons simplement multiplier. Si vous souhaitez utiliser d'autres options telles que esquive couleur grand écran, vous pouvez l'utiliser. Il suffit de jouer avec ça. D'accord ? Donc, si vous le souhaitez, vous pouvez également diminuer ou augmenter l'obésité sur le Web. Actuellement, c'est 100 pour cent, donc je vais jusqu'à 60 degrés. Vous pouvez donc voir qu'il est devenu une greffe alphabétique. Pour embaucher. Vous pouvez simplement cliquer sur ce bouton. Il sera automatiquement. Donc, rendons ça normal à 100 % comme ça. Changeons donc la couleur. Vous pouvez voir, nous pouvons changer la couleur de cette façon. Alors, choisissons celui-ci. D'accord ? De là, vous pouvez également, si vous le souhaitez, ajouter le code hexadécimal et le coller ici. Et nous pouvons également réduire l'opacité d' une file d'attente de 50 %. Ou si vous voulez vous cacher, vous pouvez vous cacher comme ça. Et disons que vous ne voulez pas de couleur, vous pouvez simplement appuyer sur ce bouton et il va se supprimer. Allons défaire ça. Le prochain est donc un accident vasculaire cérébral. Donc, vous pouvez ajouter un trait. Vous pouvez donc voir quand je clique sur le trait, qui a déjà ajouté le trait noir. Je veux donc passer à une autre couleur. Je peux donc simplement cliquer sur cette boîte de couleur. Et je peux simplement le faire glisser sur la palette de couleurs quand je veux, où je veux. Alors, choisissons cette leçon rouge. Ok, on voit que la bordure est rouge. Et si vous voulez ajouter une couleur dégradée. Vous pouvez donc simplement aller dans cette boîte. Et à partir de là, vous pouvez choisir linéaire. Vous pouvez donc ajouter deux piliers. Il pleut actuellement. Je vais donc ajouter la deuxième couleur, comme la couleur grise. Vous pouvez ainsi voir le moyeu devenir rouge et le moyeu devenir des noyaux. Faisons donc que c'est solide pour l'instant. D'accord ? Vous pouvez également augmenter ou diminuer le contraire. Vous pouvez également ajouter le code hexadécimal. Et vous pouvez également choisir différents formats de granulés comme RGB, CSS, car SSL est SB. Donc, si vous voulez augmenter le coup, vous pouvez simplement ajouter le nombre comme moins d'air dans la fine. Et vous pouvez voir que l'AVC est augmenté de cinq. Et disons que si vous le souhaitez, trait doit être centré, vous pouvez choisir le centre. Et vous pouvez aussi le faire pour l'extérieur comme ça. Ainsi, à partir de ces trois boutons, vous obtiendrez plus d'options. Comme si je ne faisais pas de traits, comme si un style de trait devrait être solide ou tiret. Donc, actuellement, obligatoirement le solide. Je vais donc choisir Dash. Vous pouvez donc le voir se détacher. Donc, si vous voulez ajouter combien de dettes et combien de Gabby veut, vous pouvez déjà vous familiariser. Par défaut, je pense que c'est 10, alors passons à 15. D'accord ? Et que devrions-nous appliquer Desk ? Par défaut, c'est comme Satan pour aucun. Donc, si vous le souhaitez, vous pouvez faire un carré ou un rond comme ça. Donc, le bureau devient autour. Vous pouvez donc ajuster la jointure comme si c'était un biseau millimétrique et je pense que celui-ci est tout autour. Vous pouvez donc également ajouter cet angle delta à partir d'ici. Je vais donc le laisser tel quel. Ça a l'air vraiment bien. Mais seule cette racine carrée est belle. C'est ainsi que vous pouvez ajouter un trait dans des formes et des objets. Nous allons donc choisir l'effet. Ainsi, à partir de l'effet que vous pouvez ajouter, ajoutons l'effet sur ce texte de programmeur émergent. J'ai donc choisi ce texte et le sang du terrain de jeu actuellement. Supprimons celui-ci et ajoutons un nouvel effet. C'est de l'ombre portée. Et vous pouvez voir que ce texte est un peu comme une rotation. Donc, si je veux, je vais aussi ajouter la quantité d'ombre que je veux. Donc, actuellement, c'est comme pourquoi il est plein et le sang a 4 ans. Donc, quand x augmente, y. Augmentons trop. Vous pouvez donc voir l'ombre. Passons donc les 40 prochaines années. Vous obtiendrez donc cet effet d'ombre portée cool. Par conséquent, c'est trop, donc je vais me rattraper à des listes aimées, très bien. Et devrait être 0. Maintenant, c'est vraiment cool. Donc, si vous le souhaitez, vous pouvez changer les couleurs comme efficaces seules. Pour l'instant, je vais partir tel quel, parce que c'est vraiment cool. Donc j'aime tout ce que vous attendez de vous. Si vous le souhaitez, vous pouvez également choisir différents modes de fusion tels que des mélanges de couleurs brun foncé en plusieurs parties, doux, clair et sortie. Utilisons multiplier. Bon, regardons. Je ne le faisais pas normalement. Disons que si je clique sur un autre élément comme une liste, je clique sur ce cadre. Les seules options de conception telles que les calques de cadre seront alors différentes pour cet élément. même pour cet élément, cet élément pour toutes les choses. Je pense que j'ai oublié de vous en parler davantage sur les effets. Je vais donc le faire, et ajoutons un autre carré. Bon, comme ça. Donc, si je vais dans les effets, je reçois actuellement une ombre portée et facultative. Donc, si vous le souhaitez, vous pouvez également choisir options telles que Ombre intérieure, flou de calque. Voyons donc un par un. Utilisons l'ombre intérieure. Nous pouvons donc voir que l'ombre intérieure est ajoutée. Vous pouvez le voir ici. Si vous le souhaitez, vous pouvez également inclure le sang. Comme nous allons ajouter les 20 et 20. Donc maintenant, vous pouvez voir le court intérieur de celui-ci. Nous allons donc le choisir à nouveau. Et nous y arriverons. Vous pouvez donc voir que l'effet de flou du calque y est ajouté. On peut aussi y ajouter du sang micron comme ça. Ce sont donc toutes les choses que vous pouvez faire avec des effets. Disons que j'ai ce cadre, le bureau trois, et que je veux ajouter comme une image sur l'arrière-plan opposé. Ajoutons cette image de pizza. Faites-le glisser et déposez-le sur le cadre comme celui-ci. D'accord ? Je pense que c'est vraiment foiré. Nous allons donc choisir l'écran du bureau et vous pouvez voir l'image sur les images en haut. Ce que je veux faire, c'est que je veux voir toutes les options comme les formes, le texte sur tout ça. Je vais donc déplacer ça en bas. Pour que vous puissiez voir, nous pouvons voir toutes les options. Diminuons donc l'opacité de celui-ci. Vous pouvez voir sur l'image du pendentif design et au contraire, c'est un 100 actuellement, donc nous allons choisir jusqu'à 20%. Ensuite, nos boutons de navigation et tous les éléments de ce cadre deviendront visibles. Si vous voulez. Vous pouvez également choisir les différents modes de fusion comme lundi par clavicule, exclusion, différence, différence, etc. Je vais donc partir tel qu'il est actuellement passé. Et si vous cliquez sur cette image, vous obtiendrez ce minéral. Comme les contraintes d'exposition, la saturation, reflets de température et de teinte et les ombres. Et vous pouvez lui adresser quelle image de vous, comme ça. Donc ça dépend totalement de toi. Donc, je suis juste comme déconner avec ça. Donc, si vous travaillez sur un projet vraiment cool, alors assurez-vous que vous avez un certain devrait être parfait. Il y a donc une sorte de chose, vous pouvez le faire avec le panneau de conception. C'est donc regrettable. Et je vous verrai dans le prochain. 10. Outil de texte: Bienvenue de retour. Dans cette vidéo, nous allons en apprendre davantage sur. Comme vous pouvez le voir, j'ai ce cadre appelé bureau un. Et pour accéder au texte, on peut placer P pour un code court. Je vais considérer l'icône 2k plus authentique. Et si je clique sur le cadre et que je tape du texte, comme ceci, si vous le souhaitez, vous pouvez également copier texte en utilisant le contrôle C et le contrôle V. C'est donc la première méthode sélectionnée dans le texte et cliquez sur l'écran. Et vous serez discuté et vous pourrez taper ce que vous voulez comme ceci. Et la deuxième méthode consiste à sélectionner du texte et à dessiner la dimension en fonction de votre projet comme celui-ci. Vous pouvez taper ce que vous voulez dans cette zone. Je veux simplement copier le collage comme ça. Si vous souhaitez aborder à nouveau ce texte, vous pouvez y accéder en cliquant dessus. Et il y a ceci ajouté en fonction de votre projet, comme ça. Supposons que si vous souhaitez augmenter la taille de police de ce texte, vous pouvez sélectionner dessus, puis accéder au panneau Création. Et vous pouvez voir le menu texte. Et à partir de là, vous pouvez ajuster la police. Par exemple, quel type de téléphone voulez-vous faire actuellement dans Roboto ? Donc, si nous voulons changer une autre police, disons des cercueils. Et vous pouvez simplement le taper et cliquer dessus. Il ne veut pas changer pour vous. Si je veux dire quatre formes différentes, vous pouvez y rechercher. Pour l'instant, je ne suis que dans les Poppins. Augmentons donc la taille de la police jusqu'à 50. Supposons que si vous souhaitez modifier votre police, normale en gras, vous pouvez la modifier à partir d'ici. Actuellement, il est régulier. Nous pouvons entrer dans ce menu et je peux simplement sélectionner Gras. Et vous pouvez voir votre texte sur chaque tableau authentique. Maintenant, si vous le souhaitez, vous pouvez également utiliser le raccourci appelé contrôle et B pour modifier votre rotation normale trop en gras, trop à bord comme celui-ci. Nous avons également d'autres options comme extra line, fine, légère, régulière, moyenne, semi-audacieuse, extra audacieuse et noire. Et vous pouvez également choisir cette option si vous le souhaitez. Le texte est né maintenant. Comme vous pouvez le voir, j'ai ce paradoxe et augmentons la police opposée. Sélectionnez donc ce paragraphe et canoniquement, la taille de la police est comme « dwell ». On va donc en faire 30. OK ? La taille de la police est augmentée. N'ajoutons que celui-ci. Comme ça. Supposons que je souhaite aligner ce texte au centre pouvoir accéder à ce menu. À partir de là, je peux aligner mes outils de texte, à gauche, au centre et à droite. Il est donc actuellement en direct dans ce centre de l'avenue. Vous pouvez donc voir que notre test est de l'alanine au centre. Et nous pouvons également aligner notre notation pour écrire. Ce faisant, c'est fini. Donc j'aime bien ça, le néphron, donc je vais le laisser comme ça. Supposons que nous voulions ajouter un espacement entre les lettres. Vous pouvez le faire à partir d'ici. Et le pays a fait 0%. Je vais donc augmenter jusqu'à aimer Phi. Et encore une fois, voyez à quel point il s'agit d'un espacement entre les lettres dans ce texte. Et si vous voulez ajouter comme un affligeant, vous pouvez l'ajouter actuellement à 0. Additionnons le Flex Grantee. Et vous pouvez voir comment l'espacement parallèle est ajouté ou ici. Vous pouvez également ajuster ce texte en fonction de votre cadre. Actuellement, c'est en tête. Je souhaite modifier ce texte au milieu pour pouvoir choisir cette option appelée align middle. Mon texte sera donc aligné, ancré sur ce texte. Et actuellement, c'est à Milan. Et nous allons également aligner le fourre-tout Oberlin et aussi l'arme comme celui-ci. ce menu Add-ons, vous pouvez choisir différentes options telles que Division Element, Paragraphe, Retrait, List-style. Des cas ultérieurs, comme si vous voulez faire des suppositions élevées ou plus grandes, vous pouvez également le faire à partir d'ici. Vous pouvez également voir l'aperçu de votre texte. Disons donc que j'ai choisi ce centre pour que vous puissiez en voir la preuve. Et c'est apparemment dans la gauche. Alors choisissons-les. Centre. Et c'est le bon, et c'est le justifié et la récursion frontale. Si vous voulez souligner à votre goût, vous pouvez le faire, vous pouvez l'ajouter à partir d'ici. Vous pouvez voir que le soulignement est ajouté à votre texte. Vous pouvez également y ajouter une barrée. Choisissez ce minimum de déclaration de police. Et vous pouvez voir que le texte est maintenant passé à travers. Et nous pouvons également ajouter la nervure parallèle. Donc connecté à 0, nous allons ajouter jusqu'à 20. Et vous pouvez voir que l'indentation est ajoutée à notre prévalence. Et nous pouvons également ajouter les puces comme des points et la liste comme celle-ci que vous pouvez voir le point est ajoutée ici. Et si je choisis le numéro un, vous pouvez voir que 12 sont ajoutés ici. Supposons que vous copiiez, collé du texte depuis Internet. Et le texte Alt est en minuscules. Et si vous voulez augmenter tout le texte en majuscules, nous pouvons le changer de votre part passant par Meno ultérieurement, et appuyez sur ce bouton majuscule. Vous pouvez donc voir que notre texte est maintenant en majuscules, et vous pouvez également le refaire en minuscules. Et si vous voulez changer en titre, en casse de titre, vous pouvez également le faire à partir d'ici, beaucoup d'utilisation de ce titre obtient Meno. Et à partir de cette section, vous pouvez également ajouter ces chiffres. Et nous avons beaucoup d'options à partir d'ici, mais nous ne sommes intéressés que par ces options comme l'alignement, la déclaration, l'organisation parente, le style de liste, petit cas, le cas n. Sélectionnons ce texte. Ajoutons-y un peu de couleur. Donc, actuellement, il est solide. Nous avons donc constaté que vous pouvez également les rendre brillants en utilisant ce linéaire. La première couleur est rouge. Et faisons de cette couleur un livre comme celui-ci. Et augmentons l'opacité jusqu'à ce que je ne fasse pas cette barre. Vous pouvez donc voir que le dégradé est ajouté à notre goût. effet de dégradé est donc ajouté à ce texte. Donc, si vous voulez augmenter ou diminuer le contraire, vous pouvez l'ajuster à partir d'ici. Disons que je veux diminuer le contraire de la liquidité ne l'était pas. Ainsi, vous pouvez voir le contraire diminué, faites-le 100. Et si vous voulez masquer le texte, vous pouvez aimer la forme hybride ici, comme ceci. Et si vous souhaitez supprimer, l'effet peut cliquer sur le bouton Moins. Le texte n'est donc plus là. Maintenant, appuyez sur Control Z pour annuler cette opération. Et vous pouvez également y ajouter un trait. Donc, si je clique sur le trait, vous pouvez voir que le contour est ajouté à ce texte. Si je zoome dessus, vous pouvez voir le trait. Et nous pouvons également changer la couleur de Destiel. Et vous pouvez également augmenter ou diminuer l'opacité et augmenter l'hommage. Par défaut, nous voulons qu'il en soit un. Alors choisissons de trouver. Et vous pouvez voir que le trait est maintenant phi, et vous pouvez également modifier la position de votre trait comme il se trouvait actuellement à l'extérieur afin que vous puissiez choisir à l'intérieur. Notre inconvénient en matière d'hygiène centrale est cool, donc je vais choisir dehors. Ajoutons donc un peu d'effet. Donc, si je clique sur cet effet, vous pouvez voir par défaut, effet d' ombre portée est appliqué dessus. Vous pouvez voir qu'il a tutoré l'ombre portée sur ce texte. Si vous souhaitez apporter des modifications, vous pouvez le faire à partir d'ici. Comme actuellement, y a quatre ans. Si vous voulez ajouter uniquement cette explosion de cette ombre portée, vous pouvez le faire à partir d'ici. Donc, actuellement, y a 4 ans, alors choisissons une séance. L'ombre portée est notre quartier en fonction de la position Y, soit dix. Et vous pouvez également ajouter le contraire, la formule. Par défaut, c'est 25. Et je pense que c'est cool. Je vais donc partir tel quel. Et nous pouvons également ajouter d'autres effets tels que l'ombre intérieure, flou de calque et le légume. Actuellement, je vais choisir l'ombre portée. Ce sont donc toutes les options que nous avons avec le texte. C'est donc abordable, Julia, et je vous verrai dans le prochain. 11. Images dans Figma: Bienvenue de retour. De cette façon, nous allons en apprendre davantage sur l'image. Créons donc un rectangle. Un rectangle simple comme celui-ci. Et actuellement, il est rempli de couleur grise. C'est donc solide maintenant. Mais je veux remplacer cette image de veto solide. Je vais donc cliquer sur le menu déroulant. Et je vais voir cette image. Et vous pouvez voir que nous avons ce motif comme un échiquier. Vous pouvez donc choisir une image. Donc, si je clique dessus, il sera directement dans mon dossier. Donc, à partir de là, je peux choisir une autre image. Disons donc que je vais choisir celui-ci. C'est donc l'image de nous Coréens. Actuellement, il est très populaire dans le monde entier. Si vous souhaitez regarder cette série, vous pouvez effectuer un audit sur Netflix. Vous pouvez donc voir que par défaut, il s' agit d'un remplissage. Alors, qu'est-ce qui est rempli ? Disons donc que j'ai cette forme et que lorsque je la redimensionne, vous pouvez voir les images s'ajuster en fonction de cette forme. Le prochain, c'est les pieds. Donc, disons que lorsque j'aime redimensionner mon conteneur, vous pouvez voir que la forme de l'image ne change pas. La seule continuité de Scheppach est en train de changer. Voici donc comment vous pouvez l'utiliser. Le prochain, c'est la culture. Ainsi, à partir du recadrage, vous pouvez recadrer votre image comme d'autres sujets tels que Photoshop et tout cela, comme ceci. Et si je ferme ça, vous pouvez voir les images recadrer maintenant. Et si je reviens dans ce remplissage, je peux donc recadrer cette image comme celle-ci. Et le prochain, c'est le titre. Alors, qu'est-ce qui fait bien pour qu'il répète l'image en fonction de la forme. Vous pouvez voir. Disons que j'ai redimensionné mon conteneur comme ça. Et vous pouvez voir que l'image se répète en fonction de la taille de ce conteneur. Comme ça. C'est plutôt cool. Vous pouvez voir le motif infrarouge ici. D'accord ? C'est donc une option que vous pouvez jouer avec. Donc, l'option suivante, actuellement moins de sujet dans le champ. Vous vous sentez simplement engourdi. Et si vous souhaitez faire pivoter cette image, vous pouvez le faire à partir d'ici. À partir du bouton perturbé. Si je clique sur cette image sera acheminée à l'azote. Et souvenez-vous d'une chose, seule l'image va tourner, pas le vaisseau. Si je crée une forme comme celle-ci, si je la fais pivoter à nouveau, on ne voit que les images tourner, pas la forme. Si vous souhaitez ajuster votre image. Nous avons des options telles que l'exposition, le contraste, la saturation peuvent prêcher des alertes, des hautes lumières et peu profondes. Si vous utilisez Adobe Lightroom, vous connaissez peut-être toutes les listes. Il existe donc trois façons d'importer vos images sur votre projet. Créons une image unique, un bloc de données comme celui-ci. Et si je déplace cette image sur le bureau, vous pouvez voir les images. De plus, je dois l'ajuster manuellement. Nous allons donc effacer certaines formes comme le profil d'ellipse. Supposons que vous deviez y ajouter une image. Vous pouvez donc le faire en utilisant moins d'image. Il peut se mettre en forme. Et vous pouvez choisir l'option « Placer l'image ». Et vous pouvez également utiliser des cours courts comme concluants. Je vais donc choisir celui-là. Imaginons. Cliquez sur Ouvrir. Et vous pouvez voir des images sur mon curseur. Et si je clique sur le cercle, l'image monte. Les images vont donc être placées sur ce cercle. Et la même chose avec ce polygone. Et si vous voulez apporter des changements énergiques et sélectionner ce cercle et aller à remplir. Et vous pouvez modifier toutes les options telles que le recadrage par tour, alimentation et tout cela. Disons que ce profil d'image est un peu plus haut, donc nous pouvons le faire comme ça. Et la prochaine méthode consiste à importer vos images qui simplement glisser-déposer, sélectionner notre image et simplement la faire glisser sur votre logiciel Figma comme ceci, et vous pouvez l'aborder où vous le souhaitez, comme ceci. Voilà donc tout ce que vous pouvez faire avec des images. C'est donc votre portefeuille et 0 dans le prochain. 12. Opérations booléennes dans Figma: Bienvenue de retour. Dans cette vidéo, nous allons en apprendre davantage sur les opérations booléennes. Quelles sont donc les opérations de l'opération booléenne ? Vous pouvez créer une forme personnalisée. Comme si vous souhaitez créer un logo, vous pouvez le faire à l'aide d'opérations booléennes. Faisons des jetons comme une ellipse. Prenons une autre ellipse comme celle-ci et sélectionnons les deux à l'aide de Maj. Vous pouvez donc voir sur la barre supérieure que nous avons avec une opération. Le premier est donc l'union. Supposons que vous souhaitiez combiner deux formes ensemble afin de pouvoir sélectionner cette sélection d'union. Et il est maintenant combiné. Et juste moi, je défais ce contrôle. D ou normal encore. Nous allons soustraire que je peux le faire. À partir d'ici. J'essayais de sélectionner les deux formes et d'accéder aux opérations booléennes et à soustraire la sélection. Et vous pouvez voir l'opération de soustraction. Ok, défaisons celui-là. D'accord ? La prochaine est donc la section d'introduction. Ainsi, vous pouvez voir dans votre juridiction, il ne reste plus que la section médiane, n Toutes les choses ont disparu. Maintenant, vous pouvez voir cette section d'interaction est restante. La prochaine est donc une section aiguë. En explorant, seule la section d'introduction sera coupée. Et toutes les choses vont demeurer telles qu'elles sont. Cliquons donc sur la section. Vous ne pouvez voir que distinct est découpé. Il vous suffit donc de jouer avec. Vous pouvez modifier des formes de mode , par exemple rectangle, comme ceci. Et laissons-les tous. Et choisissons la section Excuse. Et vous pouvez voir que l'option booléenne est exécutée sur ces trois formes. Juste limité. Vous pouvez personnaliser la forme. Si vous souhaitez créer un logo, vous pouvez également le faire à partir d'ici. C'est un peu de niveau. Vous pouvez donc simplement le placer sur le dessus, comme ça. C'est ainsi que vous pouvez créer un envoi personnalisé à l'aide d'opérations booléennes, donc Deci forth. Et je vous verrai dans le prochain. 13. Alignement et distribution Figma: Bienvenue de retour. Dans cette vidéo, nous allons apprendre comment aligner les choses dans Figma. Comme vous pouvez le voir, j'ai ce projet ouvert, appelons plus tard Harddle. Comme vous pouvez le voir, j'ai cette page de connexion. Disons que ces icônes sont assez math.pi comme ça. Et vous voulez les aligner ensemble comme ça. Ainsi, nous allons utiliser ces boutons d' alignement pour sélectionner plusieurs éléments. Dans Figma, vous devez maintenir Shift. Cliquez donc sur le bouton Twitter et maintenez la touche Maj enfoncée, puis cliquez sur Facebook, puis sur Google. Vous pouvez donc voir que plusieurs éléments sont sélectionnés maintenant. Alors maintenant, allez dans le panneau de conception. Actuellement, ces trois logos ne sont pas alignés verticalement, nous allons donc les aligner à la verticale à la maison. Nous avons donc un bouton spécial pour cela. Vous pouvez donc voir qu'il s'agit d'un bouton d'alignement vertical. Donc, si je clique dessus, vous pouvez voir que notre logo est aligné verticalement, mais il y a un problème. Et le problème, c'est que vous pouvez voir l'espacement ne correspond pas ici. Nous devons donc ajouter ces espaces. Nous pouvons donc ajouter des espaces en utilisant ce minimum d'héroïnes. Nous avons donc des options comme dans l'option Plus, comme l'espacement vertical de distribution lié et la répartition de l'espacement horizontal. Nous allons donc sélectionner un espacement horizontal distribué. Et vous pouvez voir que nos logos sont alignés ensemble et que l'espèce est également la même entre eux. C'est ainsi que vous pouvez aligner les choses dans Figma. C'est donc important pour vous et je vous verrai dans le prochain. 14. Bibliothèque de Figma Team de Team: Bienvenue de retour. Dans cette vidéo, nous allons en apprendre davantage sur la bibliothèque Team. Alors, qu'est-ce qui est considéré comme une bibliothèque ? Si vous entrez dans comme n'importe quel fichier et si nous voulons un actif, vous pouvez voir les options. Vous pouvez voir cette icône de livre. Et si nous cliquons dessus, ce menu apparaîtra. Vous pouvez donc voir et représenter dans les bibliothèques. Et le fichier actuel est sans titre. Vous pouvez voir que c'est le sans titre. Comme si vous souhaitez utiliser ces composants dans un mini-projet, vous pouvez donc les utiliser, mais actuellement j'utilise la version gratuite. Et si je clique dessus, vous pouvez le voir. Il me dit que c'est uniquement pour le compte professionnel. Il ne s'agit pas du compte gratuit. Il y a donc beaucoup d'autres options comme je n'ai pas vraiment besoin de cette icône de filtre, notre fichier de la communauté Figma. Encore une fois, utilisez-le. Allons donc allumer ça. Et vous pouvez voir les icônes comme celle-ci. Et je peux juste le faire glisser. Je peux donc utiliser ces icônes dans mes projets. Et cela me montre aussi mon équipe créative programmatrice imaginaire. Et si j'ouvre ça, ça me dira simplement quel type de couleurs ils sont utilisés dans cette équipe de programmeurs restante. Allons donc à la maison et nous irons dans la communauté. Et dans cette section d'icônes, nous avons ces icônes de lunette. Cliquez dessus. Et si vous voulez utiliser ceci, toutes les icônes, vous pouvez simplement cliquer sur ce bouton en double et il va dupliquer pour vous. Ensuite, vous pouvez utiliser toutes les icônes de cette bibliothèque d'équipe. Et nous devons simplement basculer cette option. Et nous pouvons simplement le faire glisser sur le projet ou le cadre comme celui-ci. Et il vous montrera également les types d'icônes que nous utilisons dans ce projet. Nous utilisons cette enceinte honnête et aussi ce panneau d'avertissement. Donc, ce genre de choses que vous pouvez faire avec une bibliothèque d'équipe. C'est donc tout pour la vidéo d'aujourd'hui. Et je vous verrai dans le prochain. 15. Le panneau de code de Figma: Bienvenue de retour. Dans cette vidéo, nous allons en apprendre davantage sur le panneau d'inspection. Donc, si je clique sur ce panneau d'inspection, vous pouvez voir des options comme le charbon. Vous pouvez également voir le CSS. Et si je clique dessus, vous pouvez voir les options comme iOS ou Android. Et c'est le code. Et si je clique dessus, c'est le tableau. À partir de là, vous pouvez voir cela la couleur d'arrière-plan, ma couleur non coloriée ce projet qui est vert et actuellement je ne suis pas sélectionné en édition, il est en arrière-plan. Si je le sélectionne, ma première image en tant que cadre de bureau. Et vous pouvez voir des options comme actuellement je suis sélectionné bureau une image et toutes les propriétés comme la hauteur bizarre, lèvre supérieure et le mélange. La couleur. Actuellement, nous sommes totalement blancs, donc la couleur se lit, le code hexadécimal est FFA pour 16. Et vous pouvez également voir la partie centrale. Supposons que vous soyez coéquipier, que vous soyez un développeur Web, un développeur Web frontal et qu'il travaille avec CSV. Il peut donc simplement copier ces propriétés et vous pouvez simplement les coller dans son appel. Vous n'avez donc pas besoin d'écrire en émettant uniquement comme ces propriétés telles que la hauteur ou la position de hauteur et la couleur d'arrière-plan. Et si je clique sur ce texte imaginaire de modèle de programme, il me le dira. Vous pouvez voir toutes les propriétés comme si nous le cacherions, gauche, la fusion et uniquement le texte. Et tout est le contenu que vous pouvez voir dans Photoshop, on dira quel type de police j'ai utilisé, une taille hybride, une longueur ou quelles sont les couleurs que j'ai utilisées comme si j'ai utilisé une couleur dégradée, ou quelles sont les couleurs que j'ai utilisées comme si j'ai etc. Quand il est violet et que l'on ressemble à une couleur lavande. Et dans ce cours, vous pouvez voir l'option CSS, iOS et Android. Et si je clique sur ce bouton IS. Et vous pouvez voir que nous avons du code iOS, donc nous pouvons simplement le copier et le coller dans notre noyau de développement d'applications iOS. Et c'est également la même chose pour Android. Vous pouvez simplement copier et coller dans le code de développement comme celui-ci. Vous pouvez également les consulter. Quelle est la table des matières qui s'y rattachent ? Comme les couleurs et le type de taille déformée, la hauteur et tout ça. Ou bien l'exclusion ou la position Y. Vous pouvez donc voir que j'utilise ce monstre, il alterne de forme à un autre avec le style 700 est normal. Si je change ça en gras, ça me montrera que c'est le boulon. Il me dira donc aussi quelle est la taille du pixel, actuellement 60 pixels. Quelle est la hauteur de la ligne et tout ça ? Il y a donc une option que vous aurez dans le panneau d'inspection. C'est donc votre dossier. Et je vous verrai dans le prochain. 16. Prototypage dans Figma: Bienvenue de retour. Dans cette vidéo, nous allons en apprendre davantage sur le prototype. Créons donc un cadre. Et créons-en un autre. OK, nous avons deux cadres maintenant. Et vous pouvez le renommer comme vous souhaitez pour l'outil de déplacement. Et renommez-le comme ce matin. Bon, créons un carré sur ce cadre. Et le raccourci est, et vous allez créer un carré. Et vous pouvez voir que le carré se trouve sur le premier écran. Nous allons donc copier ce carré sur la deuxième image, comme ceci. Et faisons de ce carré un cercle en utilisant ces points. OK ? Alors maintenant, passez au prototype. Dans la section produit, vous avez des options telles que le modèle d'arrière-plan. C'est le modèle objectif de l'iPhone 11 Pro Max, et c'est le nom de l'appareil et vous pouvez changer ce violon deux positions horizontales et verticales. Changeons donc l'arrière-plan en blanc, comme ça. Voyez en arrière-plan le blanc. Donc, ce que je veux faire, c'est que lorsque je clique sur cette case, il faut qu'elle se transforme en cercle. Si je clique sur le carré, vous pouvez voir qu'il y a un point blanc sur le côté droit du carré. Et si je clique dessus, vous pouvez voir qu'il y a un fil comme celui-ci. Et si je le déplace sur la deuxième image et que je l'artiste, alors vous pouvez voir ce panneau d'introduction apparaîtra. Ainsi, à partir de là, vous pouvez ajouter des options comme à temps, vous devez effectuer cette action. Comme si je tape dessus , cette racine carrée se transforme en cercle. Vous pouvez donc définir toutes les choses à partir d'ici. Donc, pour l'instant, je vais choisir sur le robinet. Et maintenant, nous arrivons au cercle. Nous naviguons à partir de cette page. Pour ce faire, nous allons choisir Naviguer et nous naviguons de carré en cercle. De la première image est carrée et la deuxième prémisse cercles. C'est pourquoi il s'agit du cercle. La plupart du temps, l'option de fin de mission est dans l'instance. Nous devons donc choisir l'intelligent et l'émission pour avoir cet effet cool. Et vous pouvez également définir l'heure. Actuellement, pas 300 millisecondes. Si vous le souhaitez, vous pouvez le modifier à partir d'ici. Mais pour l'instant, je vais partir tel quel. Et maintenant, cliquons sur ce bouton Lecture ou sur le bouton de présentation. Et vous pouvez voir que la nouvelle fenêtre s'affiche. Et vous pouvez également voir que l'arrière-plan est blanc. Si je clique sur ce smartphone, vous pouvez voir que cela me dit que c'est le raccourci clavier. Et si je clique sur ce carré, vous pouvez voir qu'il se transforme en cercle. Mais si je clique à nouveau sur le cercle, il ne faut pas les changer en carré. Nous pouvons donc y arriver. Reprenons le projet et cliquons simplement sur ce cercle. Et vous pouvez voir ce point. Et vous pouvez déplacer ces 2 premières images comme ceci. Vous pouvez voir le panneau d'interaction. Pour l'instant, je vais partir comme c'est comme toutes les options comme intelligente et émission et prise à temps. Reprenons donc le projet. Et vous pouvez voir qu'il est actuellement en cercle. Et si je clique à nouveau dessus, et vous pouvez voir que le cercle change pour prendre soin maintenant. Et si je clique à nouveau sur le carré, vous pouvez voir la tangente à encercler maintenant. J'ai donc un projet comme j'ai fait ce projet aléatoire à des fins de démonstration. Vous pouvez voir ces boutons de navigation tels que le contact à domicile. Ce que je veux faire, c'est que je souhaite joindre ces deux boutons de connexion à cette page et à propos de notre navigation vers la dernière page. Vous savez donc vraiment quoi faire. Vous pouvez mettre en pause la vidéo et y réfléchir, comment nous allons le faire. Faisons donc ces comportements. Actuellement, je suis dans le panneau prototype, donc vous pouvez voir dans ce bouton Plus et moins faire glisser dans ce deuxième panneau, deuxième image et listes. Cliquez sur ce point à moins de rejoindre ces outils. Troisième panneau, comme ça. Et si je joue à ceci, si je clique sur ce cadre, vous pouvez voir alors les enfants de l'hospice sont contact et si je clique sur ce contact, vous pouvez voir l'échange de cadre en contact. Et refaisons-le. Actuellement, sur cette page nous n'avons pas de clés de port d'hôte, donc nous devons effacer ces choses. Une fois encore. Nous ne rejoignons que cette première page, donc nous devons le faire pour la deuxième, la troisième. Nous allons donc le faire pour la deuxième page. De chez nous, nous devons aller à la page d'accueil et c'est donc la page de contact, donc nous n'avons rien à faire avec cela. Et cliquons sur le sujet et faites-le glisser sur la troisième image comme celle-ci. Et la même chose pour notre pitch à partir du bouton d'accueil. Il doit aller sur la page d'accueil et, euh, depuis le contact. Il doit aller sur la page de contact comme celle-ci. Et si je clique dessus, un de ces fils et vous pouvez voir qu'il y a des détails d'introduction comme à temps. Il doit continuer n'a pas l'outil de bureau comme celui-ci. Pour l'instant, nous interagissons simplement avec ces pages, de sorte que nous n'avons pas à choisir d'autres options comme Smart Dimension et tout cela. Mais si vous le souhaitez, vous pouvez le faire comme si vous pouvez simplement utiliser move out. Vous pouvez voir cette petite animation ou ici. Alors affichez-le à nouveau. Comme vous pouvez le voir actuellement sur la page de contact et les raccourcis clavier Alto home et à propos et si je clique sur cette page d'accueil, vous pouvez voir que nous sommes actuellement sur la page d'accueil et les listes. Passons au contact. Donc, actuellement sur le contexte. Allons donc sur le cadre. Et si je clique sur ce contact, vous pouvez le voir dans ce mouvement. Voici donc comment nous pouvons prototyper votre projet. Pour ce projet, j'ai choisi cet hyper protocole 0.9. Vous pouvez choisir ce que vous voulez, comme. Les éléments Ipad Pro sont pro. Vous pouvez également choisir Apollodorus. Mais c'est l'âme de la page Web, et c'est pourquoi j'ai choisi cela. Vous pouvez dire l'iPad Pro, car il a une résolution plus grande. Je pense donc que c'est tout. C'est donc possible de faire de la vidéo et je vous verrai dans la prochaine. 17. Défiler horizontale et verticale: Bienvenue de retour. Dans cette vidéo, nous allons apprendre comment ajouter les appels les plus profonds et le défilement horizontal. Nous allons donc choisir un cadre. Nous allons choisir l'iPhone 12 Pro Max. Imaginons que nous concevons des applications comme Instagram. Et dans cette application, nous avons des histoires. Bon, nous allons tous les sélectionner. Et moins. Un trait d'orange. L'AVC va être blanc. Faisons de ça un arbre. D'accord ? Maintenant, cliquez dessus avec le bouton droit de la souris. Accédez à Plugins. Et je vous ai déjà dit comment ajouter des plugins dans Figma. Donc je pense que nous avons un plugin appelé photos. Cliquez donc dessus. Ok, donc à partir de là, vous pouvez choisir différentes options, comme les animaux, prétendent s'étendre dans votre ville et alerter. Mais actuellement, nous allons ajouter, actuellement, nous allons choisir au hasard. Disons qu'il y aura des gens pro habituels. Je vais donc choisir des gens. Et il va automatiquement faire des cercles et les compter tous. Et je vais ajouter toutes ces images dans le cercle. Vous pouvez voir comme ça. Alors, fermons celui-là. D'accord, donc des images ont été ajoutées. Maintenant, nous allons les regrouper. Cliquez avec le bouton droit de la souris dessus et faites-le grouper. En utilisant, vous pouvez également utiliser Control G pour les regrouper. Vous pouvez cliquer dessus avec le bouton droit de la souris. Choisissez cette sélection de groupe. Bon, je vais stocker dans ce groupe maintenant. Cliquez à nouveau dessus avec le bouton droit de la souris et choisissez la sélection du cadre. Et maintenant, il suffit de le faire glisser sur le cadre de l'iPhone. Comme ça. Parfois, il sera difficile de gagner l'histoire à l'intérieur de ce cadre. J'ai donc finalement surélevé après ça. Les histoires sont donc ajoutées à l'iPhone 12 Pro Max. Cliquez donc maintenant sur le contenu du clip. Nous avons maintenant sélectionné le contenu du clip. Redimensionnons cet algorithme sur cette trame comme celle-ci. Bon, créons maintenant une copie de champ. Je vais utiliser une dimension aléatoire pour cela. Donc, parce que ce n'est qu'à des fins de démonstration sur cette résolution. Bon, je pense que j'en ai choisi six. Alors sélectionnez-les tous avec le bouton droit de la souris dessus. Allez dans les plugins, cliquez sur les photos. Et sur les photos, vous pouvez voir que nous avons une option appelée aléatoire. Cliquez dessus et choisissez aléatoire. Si vous le souhaitez, si vous souhaitez ajouter manuellement, vous pouvez utiliser l'option Placer l'image et ajouter des images à partir de vos fichiers locaux. Maintenant, toutes les images sont ajoutées dans cette première section. Fermez maintenant ces photos. Maintenant, cliquez dessus avec le bouton droit de la souris, créez un groupe. Vous pouvez également utiliser le raccourci Control G. Donc groupe distingué maintenant. Et encore une fois, cliquez dessus avec le bouton droit de la souris et choisissez la sélection du cadre. D'accord ? Donc, après la sélection d'image et faites glisser ce champ dans notre cadre comme ceci. OK, cliquez maintenant sur le contenu du clip. D'accord, nous allons ajuster cette première section comme ça. Maintenant, passez au prototype. Et vous pouvez voir que la première section est sélectionnée. Et actuellement, il n'y a pas de défilement. Choisissons un sommet désiré et les touristes choisissent le défilement horizontal. Et rendons ce cadre plus sombre car aujourd'hui ils sont très célèbres. Et j'aime aussi utiliser le mode sombre. Nous allons donc présenter celui-ci. Vous pouvez donc voir que l'application ressemble à ceci. Je pense donc que j'ai un public de problèmes Internet. C'est pourquoi l'image ne se charge pas. Donc, si je fais glisser ma souris sur le côté gauche et que je vois le défilement se déroule ou sur le smartphone. Et aussi sur cette première section, défilement, ce genre de lisse. Si vous faites défiler, vous pouvez voir qu'il ressemble à ceci. C'est ainsi que vous pouvez ajouter un score vertical et un défilement horizontal dans votre application ou vos pages Web. C'est donc tout pour la vidéo d'aujourd'hui. Et je vous verrai dans le prochain. 18. Masques de Figma: Bienvenue dans ce rebelle et apprenez comment utiliser la masse. Comme vous pouvez le voir sur mon écran, j'ai différents types de blop sur mon écran. Sur le bureau, un ion, c'est de la couleur. Mais ce que je veux faire, c'est que je veux placer l'image dans ce globe afin de pouvoir le faire. La façon traditionnelle de le faire est simplement de décondenser. Et vous pouvez accéder aux formes et placer une image ou ici. Ou vous pouvez aller remplir et choisir l'image solaire qu'elle ne l'est. Pour moi. Vous pouvez également choisir une image, mais vous pouvez également utiliser la masse pour faire la même chose. Alors prenons, émettons une image aléatoire. Prenons cette image et implicite ou ici qui correspond aux calques ou à vous, Ok, Sur le deuxième vecteur qui est notre soufflé, je veux placer cette image. Laissez-moi donc aimer le multi-attribut sur le côté droit et vérifiez-le une fois de plus sur le côté gauche. Ok, donc je peux maintenant plus 0 audience d'image. Pour ce faire, asseyez-vous au vecteur v. Nous voulons placer votre image et sélectionner votre image. Et maintenant, regroupez-les en utilisant le contrôle. C'est donc un groupe maintenant. Donc ce que nous devons faire, c'est qu'un DAG va grouper ce groupe B, groupe deux choses, guerrier. La première est cette image et le second est notre bloc. Sélectionnez donc le blog, cliquez dessus avec le bouton droit de la souris, cliquez sur utilise un masque et vous pouvez voir l'image se trouve à l'intérieur de cette zone bleue. Et vous allez également vous adresser à ce blog. Comme le recadrage, cette image est attribuée vers le haut, comme ceci. C'est ainsi que vous pouvez utiliser le masque. Je sais que vous pensez peut-être que l'image de la leçon peut être plus simple, comme sélectionner la forme et aller à l'image utiliser une image similaire à partir de votre disque local et le déplacer déjà ici. Je sais que c'est très simple, mais je n'utilise pas beaucoup de masquage. Cela dépend donc totalement de vous. Si nécessaire, une certaine personnalisation, vous pouvez utiliser cette technique de masquage. Nous allons donc placer cette image là-dessus. Placons cette image sur ce bloc. Placer des images en sorte de masquage. Mais c'est un processus très simple. C'est ainsi que vous pouvez utiliser le masquage. C'est donc le quatrième dérivé. Et je vous verrai dans le prochain. 19. Exportations de Figma |. JPG. PNG. SVG. PDF |Enregistrez le projet dans .fig: Bienvenue de retour. Dans cette unité, nous allons apprendre comment exporter votre projet. Et le fichier PNG JPEG aura n sa région. Comme vous pouvez le voir, j'ai ce clone sur Instagram et je veux exporter ce cadre. Il existe de nombreuses options à exporter dans Figma. Regardons donc un par un. Le premier est aller dans le fichier Figma. Et vous pouvez voir que nous avons le bouton Exporter. Et actuellement, nous avons sélectionné l'iPhone 12 Pro Max 2. Il s'agit du cadre et il est au format PNG. Et vous pouvez également voir la résolution ici. Cliquez maintenant sur Exporter. Et il vous demandera où nous voulons stocker votre projet. Créons donc un dossier ici. Et disons ce projet dans ce dossier. Cliquez sur l'enregistrement. Ce groupe se télécharge dans le dossier d'exportation et vous pouvez voir que notre projet est exporté. La deuxième méthode est le sélectif du cadre. Allez dans le panneau de conception et allez à la fin. Et vous pouvez voir que nous avons la possibilité d'exporter ici. Et actuellement, ce x et partez tel quel. Et si vous souhaitez exporter dans différents formats tels que JPEG, SVG ou vous pouvez choisir ces options. Supposons que nous voulions exporter cela en JPEG. Cliquez sur cet EPEC et cliquez sur Exporter, iPhone 13 correspond également. Vous pouvez également voir l'aperçu de cette application. Cliquez donc sur Exporter et il va vous demander où vous voulez stocker. Nous voulons donc le stocker dans le dossier de téléchargement et d'exportation. Cliquez donc sur la vente. Et passons à Download. Et vous pouvez voir qu'il est en effet au format JPEG. Celui-ci est au format PNG. Et même avec ce SVG et PDF. Actuellement, nous aimons l'exposition à l'offre. Et disons que si vous souhaitez exporter plusieurs images, vous pouvez aller dans Fichier et choisir d'exporter des cadres vers la police. Et votre projet va être exporté au format PDF. Cliquez donc sur cette flèche. Et ouvrons celui-ci. Et vous pouvez voir que notre fichier est ouvert dans Chrome. Et voici nos cadres, quatre cadres de notre application musicale. Voici donc comment exporter plusieurs fichiers au Parlement. Supposons que vous souhaitiez partager ce projet avec quelqu'un et que vous souhaitiez l'exporter dans un fichier comme Figma. Allez donc à nouveau dans les fichiers et cliquez sur cette copie locale C1. Et il vous demandera où vous voulez stocker. Nous voulons donc tomber dans le dossier d'exportation, cliquez sur la vente. Et c'est notre dossier Figma. Et si vous souhaitez partager avec quelqu'un avec Gmail ou vous pouvez partager ce fichier directement et il peut ouvrir ce fichier dans son logiciel Figma. Ce sont donc tous les métaux pour exporter nos projets. Cela importe donc la valeur religieuse, et je vous verrai dans le prochain. 20. Maquis dans Photoshop: Bienvenue dans cette rébellion et découvrez comment créer des maquettes dans Photoshop. Je vais donc créer une maquette de ce cadre. Il s'agit d'un clone Instagram, mais vous pouvez partager ou aimer l'hôte de quelqu'un, sélectionner le cadre et accéder au panneau de conception. C'est pour l'exportation. Vous pouvez voir l'exportation se trouve à la fin du panneau de conception. Ce que nous voulons faire, c'est que je souhaite exporter ce cadre en image, c'est-à-dire au format PNG. Vous pouvez choisir différents formats comme JPEG, SVG, PDF, mais je veux cela en PNG. Je vais donc choisir un PNG. Et si vous voulez voir un bleu, nous pouvons également voir un bleu d'ici, celui-ci. Et maintenant, cliquez sur le bouton Exporter. Il va donc exporter le disque local le plus récent. Actuellement, j'ai sélectionné ces téléchargements spécifiques, il va donc l'enregistrer dans ce dossier. Cliquons donc sur la vente. Passons donc aux téléchargements. Vous pouvez donc voir que l'image est exploitée dans ce dossier. Ouvrons votre navigateur préféré et recherchons des maquettes gratuites. Ou vous pouvez accéder à ce site Web appelé Free Peak. En fait, vous obtiendrez beaucoup de maquettes gratuites pour utiliser la recherche de maquettes d'iPhone et appuyez sur Entrée. Et nous voulons qu'il s' agisse d'un format GIF au format Photoshop. Vous pouvez donc voir que nous pouvons filtrer dans cette catégorie. n'avons donc qu'un seul cadre. Alors choisissons un seul cadre. Celui-là. Je pense que celle-ci est belle. Alors téléchargeons celui-ci. Configurez le cadre, cliquez sur le téléchargement et cliquez sur Téléchargement gratuit. Après le téléchargement, le formatage est effectivement effectivement. Vous devez donc extraire ce dossier. Vous pouvez utiliser un surplus comme 7 Zip ou les frotter pour extraire le dossier zip où le fichier est téléchargé. Extrayez ce fichier, cliquez dessus avec le bouton droit de la souris. J'ai 7-Zip. Je vais donc utiliser 7-Zip. Vous pouvez voir le fichier Photoshop et l'image de cette maquette. Allez donc sur Photoshop. Cliquez donc sur le bouton Ouvrir. C'est notre dossier. Nous avons extrait et choisi le fichier. Le fichier est maintenant ouvert. Allez donc dans les couches. Et c'est l'image intelligente. Vous pouvez donc voir la petite icône de l'image ici. Double-cliquez dessus. Et je pense que nous avons dû supprimer ce dossier, donc je vais le faire. Sélectionnez maintenant votre image que nous exportons Kate. Faites donc glisser cette image dans Photoshop et collez-la sur cet écran vide. Et vous pouvez voir les images bestiales ici. Maintenant, enregistrez cette image en utilisant Control S. Et il demande en place la finale avant de l'enregistrer. Cliquez donc sur l'endroit. Ok, l'image est placée. Passons maintenant à notre dossier original. Et vous pouvez voir que nous avons notre maquette, mais il y a un problème. Vous pouvez voir qu'il y a un texte et je souhaite supprimer ce texte. Le texte supprime donc celui-ci, et il est diligent. Maintenant. Exportons maintenant cette image. Accédez à Fichier et accédez à Exporter. Vous pouvez également choisir Exporter sous ou cliquer sur Exporter au format PNG. Je vais cliquer sur Quick Export en PNG. Et enregistrez-les dans les téléchargements. Et cliquez sur Enregistrer. Allons dans le dossier de téléchargement. Vous pouvez voir notre devise. Ouvrons celui-là. Et vous pouvez voir à quoi ressemble notre maquette. C'est ainsi que vous pouvez créer une maquette dans Photoshop. Et vous pouvez accéder à ce site Web. Et vous pouvez, si vous le souhaitez, utiliser une maquette de bureau et simplement la rechercher et télécharger simplement la maquette de bureau et l'importer dans Photoshop. Et tous les processus sont identiques. C'est ainsi que vous pouvez créer des maquettes dans Photoshop. C'est donc tout pour le calque d'origine. Et je vous verrai dans le prochain. 21. Plugins dans Figma: Bienvenue de retour. Dans cette vidéo, nous allons en apprendre davantage sur les plugins. Vous pouvez voir que j'ai un cadre ou un backstop. Je clique donc dessus. Vous pouvez voir que nous avons une option appelée plugins. Vous pouvez donc gérer vos plugins à partir d'ici. Si vous installez déjà quelques plugins. Et si vous voulez des plugins italiens, vous pouvez cliquer sur la communauté des plugins de navigateur. Allez maintenant dans l'onglet Plug-in. De là, vous obtiendrez beaucoup de plug-in. Vous pouvez utiliser ce projet senior de plug-in. Supposons que vous souhaitiez installer ce plugin appelé blobs. Il suffit donc de cliquer sur ce bouton, bouton Installer. Vous saurez donc aussi quelle est sa fonction. Il vous montrera également qui est le créateur de ce plugin et quand il est créé, et à quel point les gens n'associent pas ce plugin. Nous allons donc l'installer. Allons rejeter. Cliquez avec le bouton droit de la souris dessus, allez à nouveau dans les plug-ins, et vous pouvez voir que le plugin est installé, alors cliquez dessus. Ce que le sang fait, c'est qu'il crée des parts aléatoires pour vous. La valeur du contrat complice 10 est très bien. Cliquons donc sur les blocs MEG. Vous pouvez donc voir qu'il a créé un décalage aléatoire nous utiliserons dans notre projet. Donc, si vous le souhaitez, vous pouvez donner une valeur différente, disons 31. Notre nouvelle forme est donc là. Donc ce genre d'équipe vous pouvez faire avec ce plugin. Examinons maintenant un plugin photos actuelles. Il y a un de mes appels de plug-ins préférés. Je vais vous montrer pourquoi. Vous pouvez voir que c'est le plugin. Et ce plugin nous avons beaucoup de sites Web qui ont des images de stock et Julio, mais nous n'avions pas un seul plugin. Vous pouvez donc voir que le plugin est installé, alors cliquez dessus avec le bouton droit de la souris sur les plugins et vous pouvez le voir sur les photos. Le blogging photo est donc ouvert. Maintenant, vous pouvez rechercher des photos comme si vous souhaitez rechercher une zone spécifique mais vous pouvez rechercher une zone de recherche. Nous obtenons également des fichiers de donne-album et engourdi et bibliothèque. Et vous pouvez également choisir différents types de catégories comme les technologies, l'architecture de la ville portuaire, etc. Mais j'aime bien cette option aléatoire. Supposons que j'ai ces deux formes et que je veux placer l'image sur ces deux formes. Je vais donc aller en tandem. Et je peux choisir différentes options comme les animaux, la ville, la plage, les gens. Mais il existe également une option appelée aléatoire. Il va donc choisir automatiquement deux prévisions et gagner une place sur ces formes. Donc, si je clique sur ce point aléatoire, vous pouvez voir que les deux photos sont insérées dans cette forme. Et ça a l'air plutôt cool. Cela vous aidera lorsque vous créez une application de médias sociaux et cette application, vous avez une session d'étude et vous souhaitez placer toutes les images à la fois. Vous pouvez donc utiliser cette fonctionnalité aléatoire et vous pouvez choisir des personnes. Donc, dans cette histoire et finalement l'un des visages des gens, nous savons maintenant comment installer le plug-in, comment les utiliser. Voyons donc comment désinstaller les plugins. Cliquez avec le bouton droit de la souris dessus et accédez à nouveau aux plug-ins et cliquez sur Gérer le plugin. Et vous pouvez voir que nous avons actuellement infecté ces deux plug-ins lorsque vous êtes premier à focaliser les lobes et les segments. Il suffit donc de cliquer sur ces trois. Et cela vous donnera des options comme les pénuries et la désinstallation. Cliquons donc sur la désinstallation. Et notre plugin est désinstallé. Et à partir de là, vous pouvez également parcourir les différents plugins. L'année prochaine, je vais vous annoncer cinq meilleurs plugins à utiliser dans vos projets. C'est donc votre eau. Et je vous verrai dans le prochain. 22. 5 IL DOIT AVOIR des Plugins pour les concepteurs de Figma Créateurs !: Bienvenue de retour. Dans cette vidéo, je vais vous dire les cinq meilleurs plugins pour gagner du temps. Par conséquent, en principe, nous apprenons comment installer le plug-in, le plug-in désinstallé et comment les utiliser. J'apprends donc maintenant comment accéder au plug-in, cliquer avec le bouton droit sur votre cadre, aller dans Plugins. Et vous pouvez voir dans les plug-ins infrarouges ici, l' une de mes photos préférées de plug-ins que j'utilise beaucoup depuis des jours, un de mes amis a recommandé ce plugin Unsplash est également génial et c'est en quelque sorte, le l'interface est en quelque sorte la même. Nous obtenons toutes les catégories comme technologie ou l'abstrait et tous apprennent. Dans cet éditorial, nous avons beaucoup de photos, de conserves. Et si vous souhaitez effectuer une recherche dans un dossier spécifique, vous pouvez effectuer une recherche ici. Lieu annoncé. Nous avons également cette option aléatoire, comme des photos. Disons que vous rendez un champ Instagram libéré. Et en cela, vous devez ajouter plusieurs photos. Vous pouvez donc simplement l'ajouter localement, mais cela prendra beaucoup de temps. Vous pouvez donc tous les sélectionner, tout ce rectangle et simplement cliquer sur l'insertion aléatoire. Et il va finalement ajouter toutes ces photos sous ces formes. Vous pouvez donc voir que le 34 plus est ajouté dans notre forme comme celle-ci une fois. Parlons du prochain plugin. C'est du blush. Supposons que votre client veuille ajouter une institution à ses projets. Vous pouvez donc utiliser ce plug-in appelé blush. Et à partir de moins, vous pouvez voir que nous obtenons beaucoup d'illustration. Nous apprenons également à connaître nos créateurs et le type d'illustration que nous avons. J'aime bien cette intrusion appelée Doodles ouverts. Donc, ce que nous devons faire, c'est que vous vouliez créer une application de méditation. Il suffit donc de cliquer sur cette illustration de méditation. Et il va automatiquement ajouter cette image sur votre cadre. Vous pouvez le redimensionner ainsi, et vous pouvez ajouter du texte ici. Dans cette illustration, nous n'avons pas la possibilité de changer la couleur car vous pouvez voir si je clique sur cette icône de couleur, nous avons besoin d'un agent professionnel. Cela dépend donc totalement de l' approche que vous voulez acheter et vous pouvez l'acheter. Mais il y a d'autres administrations, elles sont totalement gratuites et vous pouvez aussi changer un peu la couleur. Je pense que ce pouvoir se déplace. Faisons-le, celui-là. Et disons que j'ai une image de cela. Vous pouvez voir que nous obtenons des options comme la couleur de peau. Contient la roue de couleur de la peau à partir de là, vous pouvez choisir l'outil pipette à la couleur différente. Vous pouvez également changer le guerrier le plus proche comme le bas, haut de la tête et tout cela. Un peu comme Bitmoji, Snapchat. Nous obtenons, nous avons beaucoup d'options pour changer nos vêtements face à la phase de l'expéditeur et à la sortie. Disons donc que nous voulons 10 plus bas dans cette fleur est plus courte. Si je clique dessus, vous pouvez voir la chaîne latérale proche maintenant. Vous pouvez déterminer le sexe du tonus musculaire comme celui-ci. C'est ainsi que vous pouvez utiliser le fard à joues. Parlons du troisième plug-in qui est le studio de maquettes. Et c'est aussi l'une des choses similaires. Mon plug-in. Il est jumelé mais vous pouvez utiliser un modèle gratuit. Vous pouvez donc voir cet iPhone et iPad. Utilisons ce cadre est cadre. Et il suffit de cliquer sur cette maquette. Et vous pouvez voir que notre interface est à l'écran comme celle-ci. Par conséquent, si vous souhaitez exporter, vous pouvez simplement cliquer sur Exporter en tant que fichier ou en tant que document. Donc le document linguistique actuel. Et il vous sauvegardera dans vos fichiers locaux comme bureau ou dans votre lecteur C. Vous pouvez l'enregistrer où vous le souhaitez. Vous pouvez donc voir une maquette est notre histoire dans mon fichier local, dans le dossier de téléchargement. Je peux donc l'ouvrir à partir de ce qui suit. Donc, la maquette ressemble un peu à ça. Vous pouvez le partager avec vos amis ou vos collègues afin que nous sachions à quoi ressemble votre application. Le dernier plugin est que j'utilise beaucoup qui s'appelle filaire. Ainsi, dans ce plugin, vous obtiendrez beaucoup d' options comme si vous créez un site Web, vous pouvez choisir filaire pour le web, Oliver making, créer une application. Vous pouvez choisir un diaphragme mobile ou nous pouvons obtenir de nombreuses options ici, comme différents enfants, comme kit filaire à 360 degrés pour le web et le mobile. Si je clique sur ce kit filaire à 360 degrés pour mobile, j'obtiendrais différentes options ici. Disons que je veux utiliser celui-ci. Je vais juste le faire glisser sur mon cadre. Donc ça va vraiment s'ajouter à mon cadre. Je peux ajouter juste des tirs comme ça, comme ça. Vous pouvez également l'étirer. Avant ce plug-in, notre vie consiste à créer manuellement tous les éléments pour filaire en utilisant des formes. Et après avoir créé cette forme, je souhaite les regrouper et entrer dans les composants. J'utilise ces composants dans le filaire. Mais en gérant ce plugin, nous pouvons encore beaucoup de temps comme une liste, dire que je veux créer une application de lecteur de musique. Je peux donc simplement faire une recherche ici, ou je peux simplement faire défiler cette fenêtre et vous pouvez les voir dans un élément de cadre filaire. Je peux juste le placer ici. Et nous pouvons ajouter comme celui-ci. Et ajoutons juste un peu. Vous pouvez donc voir en moins d'une minute que nous avons créé une image filaire pour notre application de lecteur de musique. Donc, cette image est une sorte de liste noire et le fait valoir. J'aimerais bien parce que dans le cadre métallique, nous n' utilisons que des vélos comme ceux-ci. Il s'agit donc du filaire de notre couche d'applications musicales. En utilisant cela, vous pouvez gagner beaucoup de temps. Je pense que j'ai oublié de dire que notre plugin appelait les icônes. Dans nos projets de R&D. J'utilise ce pack d'icônes, mais de manière différente. J'avais l'habitude d'aller dans l'acide, dans la bibliothèque Tim. Et à partir de là, j'ai utilisé les icônes. Et à partir de là, j'utilise des icônes. Mais en utilisant ce plugin, je peux simplement cliquer sur, disons que je veux utiliser ce bouton sur mon application. Je peux simplement cliquer dessus, puis ajouter juste une dimension ici. Et ça, ici. Avec ce plugin, vous pouvez gagner beaucoup de temps. Vous pouvez voir ici. Ce sont donc nos cinq plugins à utiliser dans un projet pour dire beaucoup de temps. C'est donc tout pour la relativité. Et je vous verrai dans le prochain. 23. Qu': Bienvenue sur une autre vidéo. Dans cette vidéo, nous allons découvrir ce qu'est types de filaires filaires et le meilleur spot de spectre chez les femmes. Donc, où que vous le sachiez, le site Web est la résolution simplifiée de la structure de base, ou peut-être que nous pourrions l'appeler le squelette AAP, le site Web ou l'application. Filaires de dévotion. Quelque chose qui donne une image claire de la convivialité. Le style est très important, mais au début du design, il peut être un peu distrayant. Il peut donc passer de la fonctionnalité à quelque chose de fantaisie comme la couleur ou le pichet. Parce que les filaires sont si simples, ils se concentrent sur des questions importantes telles que la fonctionnalité du site Web la convivialité et l'expérience utilisateur. Il existe considérablement deux couches de cadrage filaire. La chance est le câblage de faible fidélité, et le second est le câblage haute fidélité. Dans le cadre filaire basse fidélité, les développements sont présentés avec des formes grises telles qu'un rectangle et un cercle, ou simplement des lignes. Et dans un niveau de haute fidélité, l'interface utilisateur devine un peu plus de détails, comme le logo de la marque, la texture du texte réel ou l'ombre également. Et donc, dans le cas de la texture et de la dette, essayez toujours d'être du contenu réel, qui sera enfin sur le site principal au lieu de mai. Peut-être que vous pouvez avoir une réelle perspective du design. Parlons maintenant des meilleures pratiques à partir de. La première règle ici concerne donc l'esthétique. Et c'est pour rester simple. Je veux dire, vraiment simple. Émis, n'utilisez aucune couleur plutôt que le blanc, noir et le gris utilise au plus deux formes sur tout le dessin. Et bien sûr, utilisez une police simple comme Roboto ou Plateau. Rien de fantaisiste. Ils représentaient des graphiques et des boîtes d'images. filaire est l'étape où vous considérez les écrans filaires toute la version de la conception pour différents types d'appareils, ce soit pour ordinateur de bureau, mobile ou tablette. Vous devez également prendre en compte l'orientation de ce modèle. Appareils tels que téléphones ou tablettes. Vous devez également garder à l'esprit le contexte de l'utilisateur de l'appareil en question. À la fin, quelle que soit la technologie ou le logiciel que vous utilisez, il y a beaucoup mieux qu'un simple stylo et du papier. Si vous voulez concevoir un modal d'interface utilisateur à l'origine, je commencerai sur le bon vieux papier avec un crayon. Alors, tu y vas. C'est donc tout ce qui concerne le câblage. Comme ce qu'est le filtrage Pi. Donc, le câblage et les meilleures pratiques pour la santé. C'est donc une photorésistance, et je vous verrai dans le prochain. 24. WireFraming avec Figma: Bienvenue de retour. Dans cette vidéo, nous allons apprendre comment réaliser des filaires. Mais ouvrons un nouveau fichier. Vous pouvez cliquer sur ce bouton Plus et cliquer sur Design. Très bien. Ok, renommons ce fichier. Nous allons donc choisir un cadre. Je vais littéralement, quel est le filaire ? Dans cette vidéo, nous allons donc réduire les possibilités en la recadrant comme support en tant que filaire à faible coût. Disons que nous sommes en train de créer un site Web de portefeuille simple. Et nous voulons simplement y ajouter des informations, comme la navigation, les boutons, les images, texte et le logo. Commençons donc par le logo. Pour logos. Il y a un cercle. OK, créons des boutons de navigation comme le contact à domicile et à propos. Glissez donc le menu texte et cliquez sur l'écran. Le premier est à la maison. Augmentons la taille de la police jusqu'à 24. OK ? Texte du syllabi et maintenez la touche Alt et cliquez sur. OK ? Et le dernier à peu près comme ça, c'est le contact. Et le dernier est à peu près, nous avons donc fait un doute raisonnable. Nous allons donc les aligner ensemble. Maintenez la touche Maj enfoncée, sélectionnez Contact et sélectionnez À propos des forêts aléatoires en bas. Après cela, Alan les ensemble verticalement et moins Alan les répartissent l'espacement horizontal. Bon, ce bouton de navigation est maintenant aligné ensemble. Et ajoutons quelques pichets. Pas vraiment des pichets. Il vous dira donc que je l'ai fait, nous devons mettre l'image ici. Et pour cela, nous pouvons y ajouter quelques lignes. Vous êtes durable, vous le saurez. Cet espace est donc réservé à l'image. OK ? Comme ça. Et créons des cases pour le texte. Tout d'abord, sélectionnez le rectangle. Et cela pourrait être notre boîte de titre principale, donc il pourrait s'agir de votre nom. Ensuite, sélectionnez un autre rectangle. Et dans ce rectangle plus petit, nous pouvons récupérer ces informations vous concernant. Que faites-vous, quel genre de travail faites-vous ? Et je vais le laisser, et disons que vous voulez ajouter un lien. Et nommons les un par un. Cela pourrait donc être intitulé. C'est donc le paragraphe. Il s'agit du bouton Joindre. Donc, après avoir créé un filaire, vous pouvez aimer faire un projet comme celui-ci que j'ai fait ici. Vous pouvez voir ce projet. Vous pouvez donc voir cette première page. C'est exactement comme notre filaire. C'est pour le logo, pour les boutons de navigation à somme inférieure. Et cet espace est destiné à une image. Vous pouvez voir que c'est l'image et la désespérer. Et le dernier est le bouton Join Now. C'est ainsi que vous pouvez créer un filaire en femelle. Faisons un simple bouton filaire sur le bouton de connexion. Nous allons choisir un téléphone. Il y a un cercle de dessin. Faisons un rectangle. Entrée de connexion ou saisie de texte. Faisons un autre rectangle ou vous pouvez simplement sélectionner cette case et cet Alt et le faire glisser vers le bas. Et changeons la couleur là-dessus. Donc, l'utilisateur ne le fera pas. Donc, dans cette boîte, nous devons remplir notre inventaire et aimer la connexion, et mettons un nom d'utilisateur texte. Diminuons donc la taille de la police sera des utilitaires. Comprenons le 14 O K. Comme ça. Des scientifiques, comme ça. s'agit du bouton de connexion, alors ajoutons du texte ici. Augmentons la taille de la police. Sélectionnez la liste actuelle est 14 pour que le reflet soit déplacé dans Miller. Et nous pouvons faire comme le bouton « Transférer le mot de passe » ici. Faisons en sorte que cela soit un peu petit. Comme dix. Bon, comme ça. Et on peut faire des boîtes. Ou ici, supposons que l'utilisateur veuille se connecter via Google, Facebook, sur Twitter. Pour qu'il puisse le faire. Nous allons choisir un rectangle comme celui-ci. Faites glisser, faites glisser. Et dans cette boîte, ajoutons, c'est pour Facebook. Cela inclut les formulaires. Et c'est pour Google. Actuellement, je les aligne manuellement, mais vous pouvez utiliser ce fardeau, comment les utiliser. Le prochain dernier est Twitter. Je serai comme ça. Allons-les donc. Ces boutons sont maintenant alignés ensemble. Et vous pouvez voir que nos pages de connexion se créent ainsi. Et vous pouvez ajouter une autre option comme le bouton d'inscription ici. Alors choisissons un autre triangle, ou vous pouvez simplement sélectionner cette case. Et ce calcul, comme ça. Le texte peut être inscrit. Il s'agit donc de la connexion téléphonique filaire. Il s'agit donc du filaire de notre page de connexion à la page d'inscription. Vous pouvez donc voir que j'ai fait un projet selon lequel j'utilise ce biofilm comme référence pour créer un projet. Vous pouvez donc voir que c'est notre page de connexion. Vous pouvez donc voir qu'il s'agit de la page de connexion et de la page d'inscription. Mais ce filaire, j'ai fait deux choses en un seul endroit comme la connexion, page d'inscription bayésienne en une seule page. Donc, si vous le souhaitez, vous pouvez le faire comme cela ou vous pouvez créer des pages de connexion comme celle-ci, exemple séparées pour la page de connexion et la page de connexion distincte de l'organisation et l'audit comme Google, le bouton Facebook. En bas, ici. Vous pouvez voir dans le logo filaire comme Facebook, Google et Twitter, alors c'est notre logo. Donc, dans ce projet, ce que je veux supprimer, j'ai agrandi ce logo et j'ai ajouté une image également en arrière-plan. Certains effets et tous apprennent. Il s'agit donc du filaire à bas prix. Donc dans ce filaire, donc de cette façon de Vienne, choses importantes comme virtuel sont notre logo, qui sera notre version de boîte de connexion de notre inscription et le nom d'utilisateur, le passe et tout cela. C'est ainsi que vous pouvez faire filaire dans Figma. Donc V a fait une simple page Web ici, et donc aussi le smartphone. Ok, vous pouvez vous voir dans la vidéo suivante. Je vais vous montrer comment faire du filaire dans lequel j'ai appelé « wireframe dot cc ». Alors restez à l'écoute pour ça. Voilà donc quelle religion. Et je vous verrai dans le prochain. 25. Comment créer de Wireframe dans wireframe: Bienvenue de retour. Dans cette vidéo, nous allons apprendre comment faire des points filaires, filaires. Par conséquent, provisoirement, nous apprendrons comment créer des images filaires dans Figma. À partir de là, j'ai également créé quelques projets. Vous pouvez voir cette page Web et cette page de connexion et vous inscrire. Faisons donc un filaire dans ce site Web appelé Wireframe CC. C'est l'un des moyens les plus simples créer des images filaires pour vos projets. Allez sur ce site Web, vous pouvez voir le lien ou ici. Lorsque vous le souhaitez, allez sur ce site Web, il vous demandera une inscription comme. Donc, si vous le souhaitez, vous pouvez vous inscrire, mais je vous suggérerai d'ignorer ce processus. Et après avoir sauté ce possédé, l'interface va ressembler à ça. Vous pouvez donc voir sur le côté gauche, nous avons des options comme d'ici nous pouvons choisir différents appareils, comme pour le bureau ou le logiciel. Nous pouvons utiliser ce modèle ou V si vous voulez aimer, créer des applications pour votre tablette, vous pouvez choisir ce format. Et c'est aussi pour le smartphone. Vous pouvez choisir celle-ci, mais j' aime bien choisir celle-ci, la quatrième. Nous allons donc créer une page de connexion simple pour notre smartphone. Donc, après avoir relâché la souris, vous pouvez voir que j'ai cette option. Je veux donc que cette partie soit une boîte. Je vais donc choisir cette boîte et la boîte maintenant. Vous pouvez donc, si vous voulez, vous pouvez regarder comme si je n'aime pas ça. Par conséquent, disons que je veux ajouter dans cette section. Et vous pouvez voir ce bouton d'image. À partir de cette heure, il s'agit de la section image. Nous devons mettre l'image ici. Et nous pouvons créer une icône de logo simple ici comme ceci. Si vous le souhaitez, vous pouvez le placer au niveau moyen, à gauche ou à droite. Pour l'instant, mettons 0 ici. Créons des boîtes pour notre page de connexion. paille. Une boîte si simple. C'est donc la boîte pour notre UserInput. Dessinez une autre boîte et nous pouvons simplement sélectionner cette case et copier le collage comme Figma en sélectionnant la case et maintenez Alt enfoncée et faites glisser Donald comme ceci. Et si vous double-cliquez dessus, nous obtiendrons une palette de couleurs. À partir d'ici. Vous pouvez choisir différentes couleurs. s'agit donc des boutons de connexion, donc nous allons choisir cette couleur. Nous allons donc y ajouter du texte. Il s'agit donc du bouton de texte. Donc, et c'est le bouton de connexion, moins l'adresse 200 ici. Et puis changeons les op-eds de couleur. Vous pouvez également rendre cette connexion en gras ou en italique. Et si vous le souhaitez, vous pouvez souligner ce texte comme celui-ci. Et moins la couleur du texte change ici. Actuellement, il est vert, alors rendons-le blanc, comme ça, et augmentons la taille de la police. s'agit de notre bouton de connexion, et il s'agit du champ de texte du nom d'utilisateur. Nous allons rendre possible une autre texture ou avancer. Maintenez-le et faites-le glisser vers le bas. Changeons cette couleur en noir et respectons la taille de police, gras et en soulignant, renommez-la en mot de passe de transfert. Et nous pouvons vous connecter comme d' autres options telles que Facebook, Google et Twitter. Nous pouvons donc ajouter ces boîtes ici également. Alors ajoutons-les. Et si vous voulez les mélanger ensemble, vous pouvez également le faire. Sélectionnez la case ou obtenue. Configuration. La deuxième, la troisième boîte. Et vous pouvez voir que nous avons, nous avons ce bouton Element. Cliquez dessus. Et vous pouvez vous ajuster en fonction de vos besoins. Je veux donc les aligner ensemble en bas. Je vais donc cliquer en bas. Il est donc aligné. Maintenant, ajoutons du texte. Il s'agit donc du bouton Facebook ou Google. Et nous pouvons aimer macos, texte simple. Par ici. Sélectionnez ce texte, maintenez la touche Alt enfoncée et faites glisser ces outils vers le bas. Et nous pouvons ajouter une largeur de texte comme la connexion. L'utilisateur saura que nous pouvons nous connecter avec Facebook, Google et Twitter de cette façon. C'est donc le simple filaire avec Katelyn, ce fil de votre FCC. Et si vous cliquez sur le bouton Enregistrer, il sera sauvegardé pour vous. Et vous pouvez simplement, si vous aimez travailler avec votre projet, comme celui-ci. Vous pouvez donc en tirer une référence. Comme où devrait être le logo, où il devrait être image, boîte, où devrions-nous ouvrir le bouton et le bouton postural avant et tout ça. C'est ainsi que vous pouvez utiliser des filaires ou des sites Web CC pour créer des filaires simples et magnifiques. Je pense que c'est plus simple que Figma. Ou vous pouvez voir que nous avons créé dans Figma quelques filaires. Mais je pense que c'est tout à fait comme nous, une expérience similaire, mais j'aime utiliser ce site Web appelé Y de North Jersey car il est vraiment simple à utiliser. C'est pourquoi je préfère utiliser ce site Web. Cela dépend donc totalement de vous. Si vous ne l'utilisez pas, vous pouvez même utiliser Figma ou si vous allez utiliser ce site Web. C'est ainsi que vous pouvez créer un système de porte filaire. C'est tout pour la vidéo d'aujourd'hui et je vous verrai dans la prochaine. 26. Configuration d'équipe: Bienvenue de retour. Dans cette vidéo, nous allons apprendre comment créer une nouvelle équipe. Comme vous pouvez le constater, nous avons ici une option appelée créer un nouveau tombeau. Cliquez donc dessus. Et vous pouvez le nommer comme vous voulez. Appelons-le Test et cliquons sur Créer une équipe. D'accord, vous pouvez maintenant ajouter des membres de votre équipe et vous pouvez les ajouter à l'aide de l'identifiant e-mail. Actuellement, je travaille en solo, donc je ne vais pas ajouter d'identifiant d'image. Je vais donc sauter pour l'instant. Je vais donc laisser ça comme venant, choisir un plan. Nous avons donc des options telles que l'organisation professionnelle des startups. Je travaille donc en solo, donc je vais choisir celui qui est gratuit. Ainsi, comme vous pouvez le voir, des fichiers d'alignement bizarres dans les fichiers Figma dans l'équipe, fichier gemme fixe ultime et le projet d'équipe unique. Alors choisissons celui qui est gratuit. Vous pouvez donc voir que notre équipe est créée, c'est-à-dire un test. Créons donc un projet. Vous pouvez cliquer sur ce bouton plus et ajouter des fichiers comme ce fichier m. Si vous avez corrigé le fichier gem, vous pouvez, si vous avez un fichier, vous pouvez également l'importer. Vous pouvez également parcourir le modèle et ajouter à votre projet. Jusqu'à présent, je vais choisir le fichier de conception. Nous allons d'abord le renommer. Apk. Ok, si je reviens dans un projet comme, dans le projet d'équipe, vous pouvez voir comment le goût épique est créé. Par conséquent, dans Teams, nous pouvons ajouter autant de fichiers que nous voulons. Par exemple, disons que je souhaite créer un objet simple mais sous forme de site Web. Je vais donc cliquer sur ce fichier Nouveau et design. Et nous allons le renommer en Taste. Désolé d'avoir mal orthographié. Ceci. Rentrez chez vous. Et vous pouvez voir que nous avons test web et test. Il y a donc l'avantage d'utiliser Teams. Bon, allons faire partie de cette équipe. Et à partir de là, vous pouvez également ajouter, quoi consiste le projet si vous construisez comme de la nourriture livrée m, vous pouvez y ajouter une description. Et si vous souhaitez inviter un membre, vous pouvez également l'inviter à partir d'ici. Et de là, vous verrez qui a l'axe de ce projet. Comme je travaille actuellement. Je suis le seul à avoir accès à ce projet. Et vous pouvez également avoir ces paramètres comme si nous voulons changer le nom. Vous pouvez également le modifier à partir d'ici, icône, poignée de profil. Et si vous voulez le faire cette fois-ci, vous pouvez également le supprimer. Et si vous souhaitez activer certaines bibliothèques, vous pouvez également le faire à partir d'ici. Il s'agit donc d'un plan et la facturation est destinée aux professionnels. Vous pouvez l'acheter à partir d'ici. Allons donc dans le projet maintenant. Si vous le souhaitez, vous pouvez également marquer ce projet comme projet favori en cliquant sur le bouton Démarrer. Vous pouvez également partager votre projet en utilisant la molarité. Vous pouvez ajouter plusieurs identifiants de messagerie à partir de cette page. Vous pouvez également copier ce lien et le coller sur votre groupe WhatsApp ou sur Gmail. Supposons que vous vouliez supprimer cette équipe, vous pouvez simplement aller cette équipe qui a du goût et cliquer dessus avec le bouton droit de la souris. Et nous avons des options telles que renommé, changement, icône et suppression. Nous allons donc supprimer. Et nous devons ajouter ce nom d'équipe. C'est des tests. Et cliquez sur Supprimer l'équipe. C'est ainsi que vous pouvez utiliser les équipes pour créer, projeter plusieurs fichiers, applications, sites Web, etc. C'est donc important pour Julia et je vous verrai dans le prochain. 27. Collaborer en temps réel: Bon retour, améliore l'inquiétude. Nous apprendrons comment créer une équipe. Ainsi, nous pouvons utiliser la puissance de l'équipe. Ce que je veux dire par puissance, c'est que fema est une plateforme où l'équipe conçoit ensemble. Il réunit tout le monde dans votre processus de requête. Il donne vie à votre idée. Supposons que vos coéquipiers partent de l'autre bout du globe. Il peut travailler avec vous même temps sur le même projet. Il y a donc l'équipe poudreuse à Figma. Je vais vous montrer comment faire ça. Cliquez donc sur le nom de votre équipe. Disons que je vais maintenant choisir cette équipe de programmeurs imaginaires. Et vous pouvez voir que nous avons une option appelée membres et moins d'inviter certains de nos coéquipiers. De là, vous pouvez également partager un lien avec eux depuis le gmane ou partager sur le groupe WhatsApp. Et vous pouvez définir certains paramètres pour eux. Par exemple, disons que si vous souhaitez partager ce projet avec le client et que vous pouvez définir le paramètre comme il peut simplement afficher comme ceci et que vous pouvez partager le lien. Et vous souhaitez partager ce lien avec la demande DVR que vous pouvez choisir, que vous pouvez modifier. Et si vous souhaitez ajouter une mélodie, vous pouvez également l'ajouter à partir d'ici. Ajoutons une image unique de mon coéquipier. Vous pouvez appuyer sur Entrée ou appuyer sur une virgule. Une virgule et vous pouvez voir que vous pouvez ajouter un autre identifiant de messagerie à partir d'ici. Et vous pouvez également définir certains paramètres pour eux, comme vous pouvez les faire signifier par défaut qu'ils peuvent être modifiés. Et si vous voulez partager cette tendance au détail, vous pouvez choisir, peut être moins abandonner l'admission de l' aviateur et envoyer l'intérieur. Vous pouvez voir que le bruit est envoyé. Maintenant, fermez celui-ci sur son ordinateur portable ou son PC, il recevra une notification pour l'invitation. Il peut donc accepter notre invitation. Donc vous pouvez voir sur son occupé qu'il a eu notre équipe. Il peut voir tous les projets. Supposons que nous voulions modifier ce projet ensemble. Vous pouvez donc le voir apparaître à l'écran. Et vous pouvez également voir que c'est notre guerrier total. Si je clique sur ce externe et que vous pouvez voir ce qu'il fait et quelle est la mise à jour sur quel panneau il travaille actuellement ? Supposons que vous ayez 20 ou 30 images et que vous ne savez pas avec qui il interagit en cliquant sur son aberrante. Nous allons savoir dans quelle pièce il travaille. Nous devons donc réparer ce projet comme un bouton disjoint maintenant. Et je souhaite également ajouter une image. Je vais donc ajouter la similitude. Nous réparons donc ce projet. C'est ainsi que vous pouvez collaborer avec vos coéquipiers. C'est ainsi que vous pouvez collaborer avec vos coéquipiers est l'une des meilleures fonctionnalités de Figma. Il peut accéder à votre projet. Pouvez-vous obtenir que vous pouvez vous voir quand il perd de l'autre côté du globe. Il peut faire dix jours pour travailler sur des projets en même temps. C'est donc le point de vue de la préconnaissance, et je vous verrai dans le prochain. 28. WireFraming For LattoFatto: Bienvenue de retour. Dans cette vidéo, nous allons créer des images filaires pour notre projet, c'est-à-dire à l'application de commande complète en ligne. Vous pouvez donc voir que l'application ressemble à ceci. Est-ce le projet final ? Créons donc une image filaire pour cela. Cela crée une nouvelle page. Cliquez sur l'icône Plus. Concevez un fichier. Nous allons donc le renommer. Donc, tout d'abord, nous allons avoir besoin d'un cadre. Vous pouvez appuyer sur F ou vous pouvez aller dans cette section et choisir le cadre. Et sélectionnons le cadre iPhone 11 Pro Max. Ainsi, dans la première image, nous ne voulons montrer le nom de la marque qui est dirigé sur deux. Nous allons donc créer des composants pour cela. Tout d'abord, créons d'autres cadres. Ok, nos cinq cadres sont créés maintenant. Le premier cadre sera donc notre page de nom de marque. Et le second est le LAN de la page de connexion, troisième est la page d'inscription. Et en plein cadre, nous voulons ajouter comme des imbéciles, nous pouvons commander via cette application comme pizzas burgers et du poulet frit et tout ça. Donc je pense que nous n'avons pas besoin de la cinquième jante, alors faisons-le. Retournez le cadre M. sur votre clavier. Le cadre est désormais numérique. Nous avons donc quatre cadres maintenant, fabriquons quelques composants. Sélectionnez le rectangle, dessinez le rectangle comme ceci, ajoutez notre texte. Ce sera donc notre nom de marque. La police est trop petite. Police. Accédez à ce panneau de fin et augmentez la police jusqu'à 36. Bon, passons juste la police et le centre. Il s'agit donc de notre premier volet. Sélectionnez donc le rectangle et le texte pour sélectionner plusieurs éléments. Vous savez que nous devons maintenir la touche Maj enfoncée et appuyer sur le texte et le rectangle sélectionnés maintenant et vous devez appuyer sur Contrôle G pour créer un groupe. Donc, si je bouge comme ça , les deux choses bougent ensemble. Supposons que vous ne faisiez pas de groupe avant tout, je dois le dissocier. D'accord ? Donc, si je déplace cela, vous pouvez voir que le nom de la marque ne vient pas avec ce rectangle. Faisons cinq V, regroupez-les. Jusqu'à présent, regroupez, sélectionnez la forme rectangulaire, maintenez la touche Maj enfoncée, sélectionnez le texte et appuyez sur Ctrl G. Il s'agit maintenant d'un groupe. Donc, si je bouge comme ça à l'écran, vous pouvez voir que les deux choses bougent pour les faire moins faire des courbes. Je vous ai donc déjà dit comment fabriquer des composants. Sélectionnez votre élément et accédez au menu de la barre supérieure et sélectionnez ce bouton diamant. Et maintenant, il s'agit de votre composant, vous pouvez donc les utiliser plusieurs fois dans votre projet. Vous pouvez également y accéder via ce panneau de ressources. Vous pouvez voir le nom de la marque. Faisons un deuxième gouverneur. Cela va être notre image. Nous allons choisir un rectangle. Le raccourci est r. Et faisons un carré parfait. Maintenez le quart de travail comme ça. Et ajoutons-en quelques-uns. Vous êtes sur le bord ? Vous pouvez voir le polygone de couleurs et le carré est un arbre Nous devons donc modifier la couleur du polygone. Pour ce faire, sélectionnez le polygone, allez dans le panneau de conception, cliquez sur le remplissage et déplacons ces outils de curseur en blanc comme ceci. Le plus petit comme celui-ci. Ok, nous allons dupliquer celle-ci. OK. Faisons-en, il y a les montagnes et faisons une petite somme comme celle-ci. Nous devons, car nous changeons la couleur de ce soleil en blanc, comme ça. D'accord ? C'est donc notre image. Et sélectionnez toutes les choses et appuyez sur Contrôle G. Donc, cette chose est maintenant groupée. Et transformons cet élément en composant. Il s'agit donc de notre deuxième composante. Nous allons donc créer un composant d'image de profil. Nous allons utiliser des cercles. Vous pouvez donc appuyer sur O ou nous pouvons choisir ce bouton d'ellipse. Ajoutons cette image dedans. Tout d'abord, il faut le rendre petit. Ajoutons maintenant cette image dans le cercle. Mais vous pouvez voir que l'image n'est pas visible car elle se trouve dans l'image sélectionnée. Cliquez dessus avec le bouton droit. Et vous pouvez voir l'option Bring to Front. Et maintenant, vous pouvez voir les images en face de cette façon. Sélectionnez tous les éléments et appuyez sur Control G pour les regrouper. Il est maintenant regroupé et créons un composant. Bon, celui-ci est maintenant un composant. Donc, cet élément est pour le profil, qui sont, Faisons la barre de connexion et d'inscription, barre de navigation. Pour cela, nous allons avoir besoin d'un rectangle. Faisons en sorte qu'il soit juste avec notre cadre, afin qu'il corresponde parfaitement à notre écran. Je pense que nous avons dû diminuer un peu. Ajoutons maintenant une image texte. Tout d'abord, c'est la connexion. Et le second est l'inscription. Nous allons donc les aligner ensemble. Définissez toutes les choses. Tout d'abord, la connexion, de sorte que le rectangle sélectionne maintenant le bouton S'inscrire. Maintenant, allez au panneau de conception et moindre faute Alan en bas. Alignons maintenant les verticalement. Bon, c'est en ligne maintenant. La prochaine chose que nous devons faire est ce bouton de connexion et le bouton d'inscription. Donc nécessairement discrétisé, dupliquez-le en appuyant sur Alt. Et photon va être notre identifiant. J'ai oublié de transformer cette barre de navigation en composant. Sélectionnez toutes les choses, Control G, puis sélectionnez ce bouton LeBron. Donc, cette chose est maintenant une composante. Faisons de cette page un composant. Dupliquez ce fardeau. Et nous allons le renommer pour vous inscrire. C'est donc notre dernier composant, et nous allons avoir besoin boutons de menu comme hamburger, quelques icônes comme Facebook, Google et Twitter. Dans la vidéo de la bibliothèque Tim, je vous ai vraiment montré. Nous avons commencé quelques paquets d'icônes pour pouvoir les utiliser les utiliser dans ce projet. Pour accéder à ces éléments, accédez à la ressource et cliquez sur l'icône de ce livre. Vous pouvez voir pour l'icône plus un supplément, cliquez sur ce bouton à bascule. Vous pouvez voir que nous pouvons utiliser ces icônes. Nous avons donc besoin de cette humble icône amino. Alors, déplacons celui-ci. Et vous pouvez également rechercher comme premier, deuxième, troisième 1 est Google, mais il n'est pas disponible. Nous pouvons donc utiliser d'autres icônes comme OK, ce globe, d'accord, nous avons maintenant ces quatre icônes. Faisons notre filaire. Nous avons donc créé tous les composants, donc nous allons les utiliser dans notre biofilm. Donc, en première page UP, comment ajouter un nom de marque. Je vais donc écrire ceci comme ça. Et abordons cela verticalement. Ok, c'est le cas, je viens de le renommer en une marque. Et le second recadrage va être signé. Et la troisième est notre page d'inscription. Et la dernière est minimale. Bon, donc nous avons quatre pages maintenant, la première est terminée. Dans le second Prim, ce que je veux faire, c'est que je veux ajouter une image en haut. Nous allons donc l'étirer comme ça. Et je veux aussi mettre un nom de marque, cette image. Faites-le glisser et ajoutons un nom aléatoire. Ainsi, notre développeur d'interface utilisateur le saura. Il s'agit donc d'une image et c'est le nom de la marque. Je pense que la couleur est la même, il faut donc changer la couleur de la marque. Nous allons donc sélectionner le composant principal. Allons le rendre plus sombre comme ça. Et créons une page de connexion. Nous allons donc avoir besoin de ce bouton de navigation. Ensuite, nous voulons aimer le nom d'utilisateur. Nous allons donc tracer une ligne. Nous avons donc besoin de deux lignes. Le premier concerne le nom d'utilisateur et le second est pour mot de passe. Et nous devons ajouter un bouton de connexion. Tenez vers le deuxième cadre, comme ça. Et ajoutons notre identifiant avec des boutons. Il s'agit de Facebook, Google et Twitter. Alors alignez-les pour se lever en premier. Alors, allons les agrandir. Quatrièmement, c'est un sur Facebook. Le deuxième sera Google. Nous allons donc les aligner ensemble. Sélectionnez Facebook, maintenez la touche Maj enfoncée, sélectionnez et sélectionnez Twitter. abord, nous devons aborder le bas et moins les aborder verticalement. D'accord ? Et ajoutons un peu d'espacement horizontal. D'accord ? Ces choses sont donc Alana. Dans ce cas, nous avons donc un problème. Donc notre u je ne sais pas que c'est la page d' inscription parce que tout est identique. Ce que nous pouvons faire, c'est que nous pouvons faire le petit boulon de signalisation. La connectivité est donc régulière. Faisons en sorte que ça soit audacieux. Ok, maintenant nos données par appartenance, c'est la page de connexion. Donc, à la page suivante, nous devons faire certaines choses. est comme ce nom de marque. Nous devons également utiliser ces images. Je vais donc copier ça, les deux choses. Nous avons presque fini. Il ne reste plus qu'à faire. Ainsi, les utilisateurs se connectent maintenant. C'est donc l'icône Profil. Ajouter un hamburger, c'est comme ça. Nous allons donc sélectionner le bouton Plus et appelons. Cela fait partie de certaines catégories. Nous allons donc ajouter une image pour vous. Allons le rendre plus petit. Et nous allons les aligner ensemble. Maintenez la touche Maj enfoncée pour sélectionner la deuxième et la troisième. Ajoutons le bas, puis vertical. Et ajoutons un peu d'espacement horizontal. D'accord ? Alors, voyons les bords comme ça, d'accord ? Et ajoutons-y un peu de texture. Sélectionnez des catégories, maintenez la touche Alt. Et disons une image en bidon. Diminuons la taille de la police. Maintenez Alt enfoncée, faites glisser vers la deuxième catégorie. Et nous allons le renommer en pizza et en terminus. Nous allons donc aligner la police ensemble. Maintenant, il est aligné ensemble. Lissez-les vers le haut, donc d'accord, c'est parfait. Et donc actuellement, nous sommes sur comme disons, nous sommes actuellement sur le bugger Minow. Faisons donc de cette image un peu bleue. Actuellement, à Bogle, nous sommes actuellement en gros dans une section. Et disons que nous n'avons que deux options pour le bidon dans la première page. Il suffit d'en faire un autre comme ça. Et agrandissons cette image. Parce que l'utilisateur dont le nom est connu, nous avons sélectionné ce taureau. Et nous pouvons également faire de ce texte un bol. Notre développeur saura donc le client est actuellement sur la section bidon. Et nous pouvons y ajouter quelques prix. Supposons que ce Burger coûte 15$. Écoutez, donnez les sites de polices. Pour les 15,1$. Allons jusqu'à 244 secondes. Imaginons ça pour aimer, je sais que c'est assez cher. Cela, rendons ça normal. Parce qu'il a été ou est sélectionné le premier hamburger. Et cela entre dans le texte vers le haut comme ceci. Bon, alors ajoutons un cercle de section. Notre utilisateur saura donc que nous avons plus d'options. Et sélectionnez le premier cercle. Changeons la couleur pour cela. Ainsi, nos données pouvons-nous savoir que notre client appartiendra actuellement à la première page. Donc s'il glisse, alors il sera sur la deuxième page comme cette section. C'est donc le filaire de notre premier projet. Il s'agit d'un projet photo plus léger. Vous pouvez voir notre projet final. C'est le nom de notre marque. Vous pouvez voir le nom de la marque ainsi que l'image, la connexion, inscription, le nom d'utilisateur, la connexion par mot de passe et la connexion avec des boutons comme se débarrasser de Facebook et Google. Même chose pour ici. Vous pouvez voir que nous avons également créé cette connexion en couleur rose car notre utilisateur saura actuellement qu'il est sur la page de connexion. Et sur cette page, vous apprendrez qu'il est sur la page d'inscription. Et nous pouvons voir les catégories distinguer Bogle le poulet. Et vous pouvez voir que nous avons mis en valeur ce hamburger. Ainsi, l'utilisateur avec long est actuellement dans la catégorie bulle et il a sélectionné ce logo. Le premier est audible en pré-impression. Et vous pouvez voir que j'ai aussi ajouté la carte pour qu'il puisse voir la photo de profil et Hambourg Amino. Et nous pouvons également ajouter la barre de recherche. C'est donc le filaire de notre premier projet. Dans la vidéo suivante, nous allons intégrer ce filaire dans ce projet. Je sais que c'est le très bas de la vidéo, mais il suffit de glisser-déposer des choses. Et j'ai fait la position de somme de l'élément comme ça. Ainsi, une fois que vous avez créé votre image filaire, vous pouvez accélérer votre projet. Je vais donc diviser chaque vidéo dans la partie séparée, comme dans la première vidéo, j'ajouterai cette page de connexion plus 2 et n à la première ligne. Et la deuxième vidéo, j'ajouterai une vidéo de page d'inscription. Et à mon tour, j'ajouterai que cette lisibilité de la page Meno devienne plus courte. Et ce sera aussi facile à comprendre pour que vous puissiez le faire littéralement, et je vous verrai dans le prochain. 29. Page de marque pour la présentation de LattoFatto: Bienvenue de retour. Dans le passé, nous aurions fait ce filaire. Créons maintenant une interface utilisateur pour notre application. Alors allez à Home, créez une nouvelle équipe. Allons le nommer. Vous pouvez le nommer comme vous voulez. Donc actuellement je nomme ça l'a amenée à l'application projet un, à créer une équipe. Je travaille actuellement, donc je vais sauter maintenant. J'utilise donc actuellement une version gratuite. C'est pourquoi je vais choisir, choisir les données. Si vous avez l'interdiction des plantes vous pouvez les choisir. Cliquons donc pour démarrer. Vous pouvez donc voir le nom de notre équipe et la couleur de notre équipe. Passons au filaire. Et passons ce filaire à notre équipe. Vous pouvez voir dans la couleur de notre équipe et du projet d'équipe. Ok, notre dossier est un clic sur les projets d'équipe. Vous pouvez voir notre filaire. Je pense que nous avons vu le supprimer et cliquer sur Team Project et cliquer sur le bouton Plus et créer un fichier de conception. Vous ne penserez donc pas que le filaire est différent parce que j'ai accidentellement supprimé ce biofilm précédent. C'est pourquoi j'ai de nouveau créé ce filaire. C'est pourquoi il a l'air différent. Nous allons donc le renommer. Nous allons choisir un cadre. Appuyez sur F, choisissez iPhone 11 Pro Max. Ainsi, dans le cadre métallique, vous pouvez voir la première page correspond au nom de notre marque. Donc, cela conduit à des gros. Créons donc cette première image et renommons celle-ci. Ok, tu peux le nommer comme on veut. Nous allons donc choisir un texte. Ok, augmentons la taille de police de ce texte jusqu'à quatre. D'accord ? Et choisissons la police pour sensibiliser explicitement au milieu. Ok, alignons cette police pour le verticalement puis horizontalement. Bon, il est maintenant aligné au centre. Sélectionnez le cadre et modifions la couleur de celui-ci. Actuellement, la couleur est blanche. Je vais donc choisir le rouge, donc actuellement le solide. Faisons donc le dégradé. Choisissez donc une seconde couleur linéaire en personnes. Ou nous pouvons choisir la couleur de votre choix. Augmentons l'opacité du deuxième pilier. Bon, maintenant, ça a l'air cool. Donc, si vous le souhaitez, vous pouvez ajouter simplement votre dégradé comme ceci. Ok, ça a l'air cool. Je pense que j'ai choisi une police différente. Enregistrez donc la police. Et c'est celui dont nous avons besoin pour ce projet. D'accord ? Je dois donc les donner verticalement et horizontalement au centre. D'accord ? Maintenant, faisons-le blanc. Cela ne ressemblera donc pas mieux à ça. Ok, notre premier cadre est créé maintenant, c'est la page de marque. Vous pouvez donc voir dans le filaire, il s'agit du nom de la marque et de la page. Dans la vidéo suivante, nous allons créer cette page de connexion. Et je vous verrai dans le prochain. 30. Connecter la page pour la page LattoFatto: Bienvenue dans précédent aurait fait cette page aléatoire. Dans cette vidéo, nous allons donc créer une page de connexion. Nous allons donc choisir un cadre. iPhone 11 Pro Max. Comme ça. Renommons ça en signe de signature. Comme vous pouvez le voir dans Wireframe, nous plaçons l'image pour remplacer l'image, mais dans un format différent. Faisons donc un cercle et le raccourci est 0. Et le centroïde sur le cadre comme celui-ci, passons à 450. Je pense que je dois l'agrandir. Allons-y jusqu'à 70 ans, d'accord ? Ok, ajoutons ça, les bords pour que vous puissiez voir qu'il y a un espace. Allez vers la droite, comme ça. Ok, sélectionnez le cercle. Changeons la couleur. Faisons le dégradé vers le linéaire. Et la première couleur sera notre couleur rouge. Et la deuxième couleur va être comme ça. Fermons cet onglet. Ok, maintenant nous avons soi-disant, alors dupliquons le cercle, sélectionnons le cercle et maintenez-le enfoncé et faites-le glisser. Comme ça. Sélectionnez le cercle à la main, accédez à notre outil de forme et choisissez l'image. Et choisissons cette image ouverte et posons-la sur l'ellipse. Alors, après avoir béni l'image, sélectionnez le cercle, celui-ci. Et passons sur le cadre. Comme ce solénoïde ensemble. D'accord ? Et au centre du cercle. Diminuons donc l'opacité jusqu'à 70 à 80 %. Moins de tiques, 70 %. Ok, ça a l'air bien. Et vous pouvez voir dans Wireframe, nous bénissons le nom de la marque. Il est donc plus léger de choisir le nom de la marque. Maintenez Alt sur la deuxième image, comme ceci. D'accord ? Ok, réduisons la taille de la police jusqu'à 15. Centre de tutorat. Comme ça. Ça a l'air cool. Bon, allons maintenant créer cette barre de navigation de connexion. Je vais donc utiliser la méthode différente pour cela. Ajoutons un rectangle comme celui-ci. Je pense que je dois vous présenter un peu. D'accord, et moins d'alanine et de décentrage. Il est au centre. Maintenant, essayons une planche. Tournons donc les bords jusqu'à 35. Et maintenant, passons la couleur au blanc. Il a donc un effet comme l'ombre portée. Ajoutons quelques paramètres. Faisons flou deux. L'esprit de deux pour aller bien. Ok, maintenant, ça a l'air cool. Créons donc un bouton de connexion et d'inscription. Nous allons choisir un rectangle. J'ai lu quelques dimensions, vous pouvez voir que la largeur est 264 et la hauteur est de 45. Et les positions X et Y que vous pouvez voir ici. Faisons donc le pointu, coin en rond. Allons jusqu'à 13. Nous allons dupliquer cette forme. Faites-le pour sauter. Et changeons la couleur de celui-ci. Faisons en sorte que nous choisissons cet os et moins sur le dessus. OK. Comme ça. OK. Changeons la couleur de cela. Faisons ça blanc, grisâtre, comme ça. D'accord, ajoutons un peu d'effet. Cliquez sur Effet. Vous pouvez donc voir que l'ombre portée s'ajoute. Je pense que ça va bien, donc je vais partir tel quel. Faisons donc un texte. Le premier sera de se connecter. Ok, la police est actuellement sensible, alors modifions-la en quatre broches. Et nous allons raffermir jusqu'à, ajoutons juste une police selon cette hanche est au centre maintenant. Nous allons donc dupliquer ce texte. Faites-le s'inscrire. Donc, nous allons juste être totalement blancs. C'est pourquoi il n'est pas visible. Sélectionnez la police. Faisons le noir. Ou si vous le souhaitez, vous pouvez choisir cette couleur. Nous aurons aussi l'air cool et nous allons l'aligner. Allons-y manuellement. Au centre. Comme ça, en citant, c'est OK. Maintenant, ça a l'air cool. zoom arrière, vous pouvez voir l'interface de la page de connexion. On dirait ça. Faisons donc un mot de passe de nom d'utilisateur. Je vais donc aller dans Formes, choisir la ligne, à moins qu'elle ne soit ici. Et ajoutons simplement, transformons l'angle en 0. Alors ajoutons ça au milieu. D'accord, c'est au milieu. Et nous allons dupliquer cette même ligne. Maintenez la touche Alt enfoncée, faites glisser Ajoutons du texte, comme un e-mail. Ok, réduisons la taille de la police jusqu'à 10. Et moins le texte est bordé. Changeons la couleur de ce texte ainsi que le daltonien. suffit de le faire comme celui-là. Et changeons également la couleur de cette ligne . Va à l'AVC. Et choisissons l'outil Sélectionner. Faisons en sorte que ça ressemble à celui-ci. Sélectionnez e-mail et dossier utilisateur, faites-le glisser vers le bas, envoyez-nous un mot de passe et modifions également la couleur de cette ligne. Nous allons maintenant transférer le mot de passe, cette alerte texte de mot de passe. Placez-le ici. Ok, ajoutons comme ça. Nous allons créer un bouton de connexion. Copions cette forme. Je pense que tout va bien se passer. Allons tourner l'objet couleur. Actuellement, c'est un peu gris. Faisons en sorte que ça ressemble à cette couleur violette. Et je sélectionne cette police que vous l'alignez ensemble. Saké, mais les choses tiennent en utilisant Shift, horizontalement, d'accord, c'est au centre maintenant. Nous allons donc vérifier le type de police. Le taux actuel est régulier, alors rendons-le semi-gras. Donc, ça aura l'air plus cool, ok, comme ça. Que se passe-t-il d'autre ? Vous pouvez donc le voir dans les frais filaires fait tout. Donc seule chose sédimentaire comme ça, connectez-vous avec des boutons, ok, moins ajoutez-les à partir des fichiers locaux. Ok, importons ces fichiers SVG, accord, forcément le tuteur pour ce groupe ensemble. Alors pourquoi les regroupons-nous ? Parce que ce sont les fichiers SVG. Disons que je voulais déménager quelque part. Vous pouvez donc voir que si je sélectionne sur cette icône, vous pouvez voir le vecteur que nous avons sélectionné. Il va donc y avoir une inadéquation avec notre projet. C'est pourquoi nous nous regroupons avec elle. Si je disais si tout cela et les regrouper en utilisant Control G pour regrouper maintenant. Et si je clique dessus, vous pouvez voir que je peux le déplacer où je veux. Alors, faisons-le. Moins s'adresser à la hauteur de tous les logos sur Twitter et Facebook. Je souhaite 15 tailles et poids. Également pour Facebook et Google. Nous réglons donc la largeur et la hauteur, de sorte que ce sont les bords. Maintenant, l'un des miens, La seule chose qui reste, c'est que nous devons ajouter ou texter, c' est-à-dire R. Choisissons ce texte et maintenons Alt et déplacez-le au centre. Et faisons en sorte qu'il soit moins important de s'adresser au centre. La Figma est vraiment intelligente. Il vous indiquera automatiquement où se trouve le centre de celui-ci et aussi l'espacement entre les deux. Pensez à augmenter la taille de la police jusqu'à 12. Ok, notre page de connexion est maintenant prête. Dans la vidéo suivante, nous allons donc créer une page d'inscription. C'est donc votre portefeuille et je vous verrai dans le prochain. 31. Inscription à la page de LattoFatto: Dans les vidéos précédentes, nous avons créé la page de connexion. Dans cette vidéo, nous allons donc créer une page de connexion. Nous allons donc sélectionner cette page de connexion au cadre, et commençons à parler comme ceci. Et nous allons le renommer en signataire. Par conséquent, dans la page d'inscription, nous devons changer quelques choses. Vous pouvez cependant voir dans le filaire, des choses comme nous devons changer le bouton d'inscription. Nous allons ajouter des lignes supplémentaires comme confirmer le mot de passe, et nous devons également modifier l'inscription. Apportons donc ces changements. D'abord, changeons la couleur de cette police. Actuellement, c'est une sorte de nébuleuse au citron. Faisons donc le blanc. Et déplacons ce rectangle sur le côté droit. D'accord ? Maintenant, nous allons donc changer la couleur de la connexion. Actuellement, il est blanc. L'érudit. D'accord ? Bon, maintenant ce que nous devons faire, c'est que nous devons ajouter une ligne de plus. Ce sera notre mot de passe de confirmation. Faisons donc avancer ce mot de passe qui serait vers le bas comme ça. Et nous allons copier cette ligne. Copions ce mot de passe et cette ligne. Maintenez la touche Alt, faites-le glisser vers le bas Bon, je vais confirmer que le mot de passe est plus grand maintenant. Bon, alignons-les ensemble. Sélectionnez-le et maintenez Shift. Sélectionnez tous les éléments du mot de passe, du mot de passe et de la ligne oblique , puis accédez au paramètre Aligner cliquez sur Plus d'options et choisissez. Vous devriez avoir un espacement vertical. Bon, il est aligné maintenant. Vous pouvez le voir ici. Déplacons donc ce mot de passe vers haut, comme ça. Nous sommes donc actuellement sur une page de connexion. Passons à l'inscription. Alignons-le horizontalement. Nous pouvons voir qu'il est aligné au centre maintenant. Une chose est donc que certaines icônes, comme vous pourriez voir certaines applications où vous avez la zone de symbole oculaire. Bon, ajoutons-les. Eisenberg. Allez sur S8, cliquez sur cette bibliothèque d'équipe et basculez ces icônes de plumes et recherchez I. Ok, vous pouvez voir le symbole de l'œil. Nous allons donc utiliser celui-ci. Diminuons donc la taille de celui-ci jusqu'à ce Q. Changeons donc la couleur de celui-ci. Actuellement, il est noir. Nous allons donc choisir cette couleur. Même soin de ce mot de passe. Et sélectionnez Alt enfoncée, faites-le glisser sur la page d'inscription. Confirmez uniquement le mot de passe. ne reste donc que la dernière chose, c'est la page principale. Vous pouvez voir le filaire de celui-ci. Dans la vidéo suivante, nous allons créer cette page de menu. C'est donc votre photo. Et je vous verrai dans le prochain. 32. Page de menu pour LattoFatto: Bienvenue de retour. L'année précédente, nous avons créé la page d'inscription. Dans cette vidéo, nous allons donc créer cette page principale pour que vous puissiez voir le filaire correspondant. Nous allons choisir un cadre. iPhone 11 Pro Max. Bon, allons créer cette page. Parce que nous allons ajouter des éléments tels que la barre de recherche et les anciens. La barre latérale va donc être blanche, donc elle ne sera pas visible en arrière-plan comme ça. Notre page Meno sera donc plus visible. Ainsi, pour ce salaire minimum, vous pouvez voir dans le filaire que nous avons besoin de cette icône de menu hamburger, l'icône de profil, du texte et de quelques images. Faisons donc ces choses. Donc, dans mon dossier, j'ai toutes les ressources. Alors, déplacons-les dans un figma tourbillon. Ok, les images sont comme si elles étaient tenues pour y répondre. Nous avons donc toutes les ressources comme cette icône de menu de hamburger, l'humble, l'image de profil et quelques éléments comme cela faisable. Nous allons donc utiliser un par un. Parlons donc. Donc, à moins de questions. Et la deuxième chose est de fournir des retours. Faisons donc ce profil. Pour cela, nous allons avoir besoin d'ellipse et de maintenir touche Maj et d'aller à l'outil Forme et celui-ci, vous pouvez également choisir votre propre image. Et je vais le coller sur ce cercle. Vous pouvez voir qu'il est placé. Mais vous pouvez voir que la photo est un peu sur le côté droit et aller au panneau de conception. Et vous pouvez voir dans l'option de terrain, nous avons cette image, cliquez dessus. Et choisissons la culture. L'image comme celle-ci. D'accord ? Nous allons donc y ajouter un trait. Cliquez sur le trait. Allons en faire deux. Et changeons la couleur du trait en blanc. Et nous allons le redimensionner. Comme Okay, alors ajoutons du texte qui est C et Control V. vous puissiez voir que j'ai utilisé la police Poppins. Pour cela. J'utilise l'extrémité normale de N Pour ce jaune froid, j'ai utilisé le semi-gras. Allons-y en fonction de cette icône de hamburger, comme ceci. Alors, quelle est la prochaine chose que nous devons faire ? Nous pouvons donc ajouter des catégories comme celle-ci. Vous pouvez faire ce travail. Ajoutons une barre de recherche pour que l'utilisateur puisse trouver ses objets. Sélectionnez donc le rectangle. Nous pouvons simplement copier cette forme. La forme, maintenez Alt enfoncée et faites-la glisser au printemps. Ok, changeons donc la couleur de celui-ci. Et vous pouvez voir que nous avons déjà une ombre portée. Nous pouvons donc le voir. Je vais partir tel quel. Nous allons donc ajouter un texte. Nous allons donc sélectionner ce texte et cette imagerie à rechercher. Une icône de recherche. Actuellement, il est noir. Je vais donc choisir. Donc du texte comme celui-ci et réduisez simplement la taille dont il est aligné maintenant. Et agrandissons la barre de recherche un peu plus grande. Mettons-le au centre. Et le scientifique est la recherche et l'icône. La prochaine chose à faire est d'ajouter des catégories. Nous allons donc ajouter quelques catégories. Bon, ajoutons quelques catégories. Alors choisissez un rectangle et dessinez-le comme ceci. Mettons-le à aimer avec jusqu'à 110, 1, 1, 0 et une hauteur de 70. Quelques bords. Réinventons-le pour codifier à nouveau celle-ci. Nous allons donc les aligner ensemble. Alors, faisons-le blanc. Si vous voulez. Vous pouvez également y ajouter une ombre portée. Retournons la couleur de cet arrière-plan. Actuellement, le blanc est visible, LACMA, cette icône. Ok, c'est le fichier SVG, donc Control G. Second est hors de contrôle. Et contrôlez G. Donc, quand nous travaillons avec l'inadéquation, d' accord, le premier sera Bogle, ajoutez le burger. Et la première section porte sur la dimension genre de celle-ci. Jusqu'à 45 ans et au centre. OK. C'est bon. Que reste-t-il ? Nous devons donc le nommer comme un logo design. Alors, livrons-les. Alors, appelons-le le premier. Je vais donc copier ce texte. Cliquez donc sur le hamburger. Et de la pizza. Permettez de les aligner verticalement comme ceci. Nous devons donc changer la couleur de cette bulle car nous sommes actuellement la section débogueur. Nous pouvons donc changer un peu la couleur. Donc, soit nous le savons, se trouve dans la section. Déplacons donc ces catégories. Cette section, qui sera, bien sûr, actuellement dans la section Boulder, nous allons donc ajouter des bolus. Alors choisissons un rectangle et dessinons un rectangle comme celui-ci. Donnons la dimension de la jambe et hauteur de 2, 1, 0. Ajoutons des bords arrondis. Additionnons jusqu'à 35. D'accord ? Celui-ci va donc être notre premier logo. Celui-là. Je vais donc augmenter la hauteur car actuellement l'utilisateur sélectionné est Bogle. Faisons donc un 199. Comme ça, et changeons la couleur. Passons à la deuxième couleur. Et vous pouvez le placer où nous le voulons selon vos besoins. Donc, je mets tout ça comme ça. Bon, ajoutons maintenant l'image de ce livre. Il s'agit donc actuellement du premier logo et de le nommer. Donc le premier, je ne sais pas quel est le nom de l'embole pour que nous puissions le nommer comme vous voulez ou vous pouvez rechercher sur Google je peux y faire face ici. Changeons donc la couleur de cette police. Il est noir, faisons-le blanc. Il sera donc plus beau. Sites. Faisons de cela un symbole. Et mettons fin au prix d'un signe de dollar. Allons-y jusqu'à 20 ans. Donc, si vous le souhaitez, vous pouvez également l'ajouter. Donc, à moins de cette note, je pense que j'ai introduit. Laissez-moi vérifier. OK. J'ai ce projet. Ok, vous pouvez voir sa couleur. Comme ça. Le client précédent avait une bonne expérience avec ce logo, les vendant ensemble. Alors nommons ce logo actuellement à l'échelle du district, donc il n'y a pas de combat visible, alors rendons-le noir. Ou diminuez la taille de la police. Copions celui-ci. Et modifions la valeur de chacun. Alors, que reste-t-il ? Tout est fait. Je pense donc à des sédiments distincts. Nous allons donc ajouter ces choses. Choisissez des cercles d'ellipse. Faisons comme « Sauver le premier point ». Et nous y arriverons. Ou nous pouvons choisir cette couleur. Allons le rendre un peu plus grand. L'utilisateur va donc tamponner comme ça. Je pense que nous devons l'aligner ensemble. Et je pense qu'une chose est d'ajouter une carte. Alors choisissons l'Ellipse et passons à court terme dans l'acide pour l'amour que nous avons. Vous pouvez voir. Ajoutons donc ce sac à provisions et le centre. Faisons en sorte que le centre soit blanc, d'accord, donc tout est fait. Notre session Meno est donc terminée maintenant. ne reste donc plus qu'à faire du prototypage dans ce projet. Dans la vidéo suivante, nous allons donc faire du prototypage. Et je vous verrai dans le prochain. 33. Prototypage pour Lattofatto: Bienvenue en privilège ou un film a fait de ce menu un animal de compagnie. Une chose est donc que le reste pour ce projet est fait pour faire du prototypage. Donc, je vous ai déjà montré comment faire du prototypage. Vous pouvez donc mettre en pause la vidéo et le faire seul ou si vous ne savez pas comment le faire, vous pouvez continuer la vidéo. Je suppose donc que vous avez fait cette partie. Faisons donc la prédominance de ce projet. Passons au panneau prototype. Et vous pouvez voir ce point blanc. Et quand je le survole, ça devient une icône plus. Cliquez dessus et faites-le glisser sur la page de connexion. Vous pouvez donc voir que ce menu apparaîtra. Il s'agit donc du panneau de détails de l'interaction. Vous pouvez donc voir que nous avons des options comme R-type. Donc, actuellement moins de le paramétrer sur le robinet et de naviguer vers la page de connexion. Nous allons donc de la page de fans à la page de connexion. C'est le cas, c'est bon. Donc, si vous le souhaitez, vous pouvez y ajouter notre animation. Alors, en ce moment, passons avec un désert instantané et caché. Cliquez maintenant sur la page de connexion. Vous pouvez donc voir que nous avons des options telles que la connexion et l'inscription. Disons que l'utilisateur est installé cette application appelée première fois. Il a donc voulu accéder à la page d'inscription pour pouvoir cliquer sur le bouton Se connecter. Faisons donc cela interaction. Nous pouvons donc voir dans les détails de l'intégration l' onglet accéder à la page d'inscription. Et l'animation est terminée. Et disons que l'utilisateur est comme un toucher accidentellement sur le bouton S'inscrire. Il voulait donc revenir sur la page de connexion ou la page de connexion. Il peut donc revenir en arrière en utilisant ce bouton de connexion. Donnons donc une introduction et accédons à la page de connexion. Toutes les choses seront les mêmes pour cela, donc nous n'avons pas à changer quoi que ce soit ou ici. Supposons ensuite que l'utilisateur ait mis son identifiant e-mail et le mot de passe et qu'il voulait aller sur la page du menu principal. Donnons donc l'introduction à ce bouton. Ok, de Logan BIG va aller sur la page principale. Et de même, le bouton d'inscription de l'inscription et accédera à la page de menu en s'appropriant tous les légitimes comme un nom d'utilisateur, un passe et un mot de passe de confirmation. Je pense que c'est fini ici. Lorsque je clique sur cet espace vide nous obtiendrons ces options. Donc, à partir d'ici, si vous voulez changer le contingent de l'appareil à partir d'ici. Donc, actuellement, je choisis cet iPhone 11 Pro Max. Alors, sélectionnez celui-ci. Et si vous souhaitez entraîner le modèle, ou vous pouvez le faire à partir de votre objectif actuel. Vous pouvez choisir l'espace argenté, gris, le vert minuit, comme ceci. Et il affichera l'aperçu. Et si vous souhaitez modifier la propriété de couleur d'arrière-plan, nous pouvons le faire à partir d'ici. Donc, actuellement ce noir, nous pouvons lui donner n'importe quelle couleur que vous voulez comme celle-ci. Allons donc avec le blanc. Donc, ça n'a pas d'importance. Vous pouvez choisir n'importe quelle couleur. Vous pouvez donc voir ici que nous avons orientation horizontale ou verticale si vous voulez le transformer en contingent horizontal comme celui-ci, notre portrait. Passons donc à un portrait et cliquons sur ce bouton Présent. Vous pouvez voir que notre application est présente et l' icône présente ici dans la barre supérieure. D'accord, vous pouvez voir la première page de nom de marque. Si je clique dessus, nous accéderons à la page de connexion. Après ça. Si je clique sur cet espace vide, vous pouvez voir que nous arrivons aux raccourcis clavier. Ce sont comme la page d'inscription et la page de connexion. Supposons que je sois un nouvel utilisateur et que je souhaite m'inscrire. Je vais donc taper le bouton d'inscription et je peux mettre mes coordonnées comme le nom d'utilisateur, passe et confirmer mon mot de passe. Et après ça, je peux m'inscrire. Je peux donc également revenir sur la page de connexion si je le veux. Et cliquons sur Login. Nous sommes donc sur la page Meno. Je peux donc commander ces bogues ici si vous le souhaitez. Vous pouvez ajouter une animation à ces pages. Si nous cliquons sur l'inscription, vous souhaitez donner des animations comme s'installer, sortir ou pousser. Nous pouvons donc le faire à partir d'ici. Nous allons choisir un film. Et vous verrez la petite indirection ici. Et vous pouvez également la dysphorie de genre. Actuellement, ce 300 millisecondes et l'animation est au format exact. Bon, nous allons présenter celui-ci. Vous pouvez appuyer sur R jusqu'au début, cette application dès le début. Je vais donc appuyer sur R sur le clavier. Vous pouvez donc voir notre page de nom de marque. Bon, alors cliquons sur « S'inscrire ». Vous pouvez voir cet effet de mouvement audio. Laissez-moi vous montrer une chose cool. Allons donc à la page de marque, à la page aléatoire. Cliquez sur cette flèche, prototype de flèche. Et actuellement, nous sommes sur l'onglet. Donnons donc une animation intelligente ici. Et essayons d'aimer les millisecondes de genre. Et nous pouvons le changer comme argumenter et adduction comme sur Taïwan et traîner tout en tenant et tout ça. Choisissons comme un entrée de souris en survol. Et mettons-le dans la presse R pour redémarrer. Et si je passe la souris sur cette application, vous pouvez voir cette animation. Laissez-moi le refaire. Vous pouvez voir cette animation. Changeons donc un peu comme notre profondeur. Incluons le nom jusqu'à 50 millisecondes. À moins d'être présenté à nouveau. Pour redémarrer. Et sur l'onglet, vous pouvez voir l'animation devenir lente de la base de données. Comme ça. Grâce à cet art intelligent et à mesure, nous obtenons cet effet cool. Je vais donc vous plaire à notre guise en planant. Et passons à 100. Ça a l'air vraiment cool. Et allons nous présenter. Quand j'aime NDA, ma souris sur la liste basée sur la marque, vous pouvez voir l'indirection. Le nom de la marque figure en haut. Et si je vis cette application, vous pouvez le voir à nouveau sur la page du nom de la marque. Et je peux faire en direction ici, comme m'inscrire. Vous pouvez voir cet effet de déplacement et vous pouvez accéder à leur page d'inscription. Si vous le souhaitez, vous pouvez ajouter l'animation à cette page principale et créer des images sur le mini-lot. Cliquez donc sur la page d'inscription, sélectionnez cette flèche. Et disons mon animation. Essayons donc ce trouble, l'esprit et celui-ci. Passons à notre identifiant. D'accord. Sodium a atteint notre page d'inscription et depuis la page v d'inscription, compte tenu de cet effet. D'accord. Il a l'air vraiment cool. Il a peur. Je pense que c'est assez en vigueur, cela vous donne cette animation aux boutons de connexion. Allons donc sur notre longue plage. Vous pouvez le voir dissous si vous n'y êtes allé que vous utilisez d'autres animations telles que Smart et Emission. Nous allons donc choisir une animation intelligente et présentons l'écran. Frappez notre journalisation. Vous pouvez voir cette animation cool, son, animation intelligente. Regardons l'école. Vous pouvez donc dire, n'importe quelle animation que vous voulez. Cela dépend donc de vous et cela dépend également de votre projet. C'est donc ici que nous terminons notre projet, disons si vous êtes aux prises avec ce projet, si vous devez regarder une vidéo encore et encore pour réaliser ce projet. Donc, si vous avez réalisé ce projet, nous pouvons partager ce projet sur Instagram ou Twitter, et vous pouvez également me marquer ou là. Dans le prochain projet, nous allons donc créer un site web de films. Vous pouvez également dire comme une application de service de streaming comme Netflix, Amazon Prime. Donc ça veut dire que je connaissais OFF. Merci d'avoir regardé et je vous verrai dans le prochain. 34. WireFraming pour la plateforme de streaming OTT: De même, pour pouvoir revenir une autre vidéo de cet appareil, nous allons créer une plateforme filaire pour OTT telle que Netflix et Amazon Prime. Créons donc une nouvelle équipe et appelons-la. Plus grande équipe, sautez pour le moment pour commencer. Ok, notre équipe est plus grande. Vous pouvez voir le fichier L0 optimistes de couleur et le fichier de conception discret . Ok, nous allons le renommer. Je vous montre donc déjà un suivi que nous devons effacer certains éléments. Créons donc des composants, ou vous pouvez simplement copier des composants de collage de vos projets précédents qui ont conduit à une application fertile. Vous pouvez copier ces composés comme cette image, cette connexion et ce signe, les vétérans et le numéro de marque, tourner le hamburger Meno et tout ça. Jusqu'à présent, cette image filaire , je vais avoir besoin de cette image , donc je vais le sélectionner. Cliquez avec le bouton droit de la souris dessus et vous pouvez le voir ici, donc nous sommes une copie facultative. Vous pouvez donc également utiliser le raccourci Control C. Donc je vais copier celui-ci et faisons-le pour l'aider MCU. OK, maintenant, appuyez sur Control V pour coller cette image sur notre filaire. Nous faisons donc jouer Audrey. Nous allons donc en créer un autre. Et l'image à l'écran. Vous pouvez le nommer comme vous voulez. Et 31 est l'une des séries télévisées. D'accord, ajoutons un nom de marque. Et ajoutons du texte. Augmentons la taille du texte. Groupez, contrôlez G pour les regrouper. Donc, dans le cadre du film, nous avons besoin de cette image ici. Et allons-le plus gros. Donc, dans cette partie, nous sommes sur un écran, l'image du film. Et créons des boutons comme le pinup. liste diminue le texte jusqu'à « like », disons 24. Et nous allons nous en occuper ou vous inscrivez. Et créons du texte pour le film. Martin. Et le dernier, c'est pour les tournages télévisés. Nous sommes donc en mouvement, donc nous allons faire en sorte que ces films en prennent deux dans Bolt. L'utilisateur va donc savoir, ou notre développeur d'interface utilisateur sans aucun, il est actuellement dans l'action de ces films. Et si vous le souhaitez, vous pouvez ajouter un sous-jacent à ce texte. Nous allons donc ajouter un film nim. Tout d'abord, nous sommes sur un rectangle requis. Donc, plus r. Alors, sélectionnez Texte, et ajoutons du texte ici. C'est le rendre plus grand. Disons jusqu'au tutoriel Lycos 48. Et après cela, nous devons créer une description pour notre film. Créons donc à nouveau un rectangle. Voici maintenant notre description pour notre lune. Nous allons donc ajouter du texte ici. D'accord, et après ça, nous allons créer un bouton de lecture. Et devant cela, nous allons ajouter, je pense que j'ai fait plus de description. Je vais dans l'industrie. Déplacons cette taupe, des choses comme le bouton anti-log Play now film. Bon, créons une barre où tout le film va être changé, la couleur opposée. Nous allons donc y ajouter plus de rectangle. La couleur de ces rectangulaires va donc être la même. Il faut donc changer la couleur de ce rectangle. Nous allons donc choisir un rectangle. Ce dîner pour nos largeurs pour agrandir celui-ci, nous allons tenir Alt et le faire glisser. Faites-le glisser. Je pense que quatre vont suffire. Alors maintenant, alignons-les ensemble. Maintenez la touche Maj enfoncée, sélectionnez tous Et le mortier se déplace verticalement. Alors, où il y a un peu d'espacement ici. Disons que l'utilisateur est actuellement sur le deuxième film, donc, il saura actuellement qu'il est sur un deuxième film, donc nous devons apporter quelques changements. Agrandissons donc cette région rectangulaire un peu plus grande, comme ça. Et ajoutons un trait. Effet d'ondulation. Il ne reste que ces deux choses à faire, c'est la publicité que nous avons dû créer. Nous devons donc ajouter un bouton de recherche et un bouton icône de cloche. Allez donc dans la bibliothèque Teams et doublez ce bouton d'icône de plume. Et cherchons une intervention chirurgicale. Et faites-le glisser sur cette page. Et la même chose pour l'icône de cloche. Nous allons le faire. Alors, faisons-le glisser comme ça. D'accord ? Nous allons donc les aligner ensemble. Sélectionnez toutes les choses alignées et inférieures et alignez-les verticalement. Bon, ils sont alignés maintenant. Et le hasard va être surutilisé. Nous allons donc ajouter un nom de marque, sélectionner un rectangle. Il peut donc s'agir d'une image de marque ou de logos. Comme ça. Au centre, pas comme ça. Il s'agit donc du filaire de la section vidéo de l'heure. Et c'est exactement la même chose pour notre section d'émissions télévisées. Nous devons donc apporter des changements comme si nous devions faire de cela une série régulière et faire des émissions télévisées dans Bolt. Et renommons cette image en série télévisée. Et tout va être pareil. Comme ce nom de film et tout ce que nous pouvons entrer comme une émission de télévision. Nous allons donc copier ceci et renommons cette émission de télévision. Et ici, faites également une description visuelle. Il s'agit donc du filaire, donc nous allons y faire référence et nous allons créer notre projet final. Notre projet final va donc ressembler à ceci. Vous pouvez voir la page du nom de la marque, la section film et la section TV. Donc, le nom de la description du film, le bouton Plan Maintenant, le bouton de la bande-annonce. Et j'ai également ajouté ces évaluations ici. Vous pouvez donc voir ce film de fiction. À partir de là, l'utilisateur va choisir ce qu'il faut regarder. Même chose pour la section des émissions télévisées. Et je vous verrai dans le prochain. 35. Plateforme de streaming OTT: Bienvenue de retour. Auparavant, lorsque nous avons créé ce filaire pour notre MCU ou pour le projet. Dans cette vidéo, nous allons donc créer le projet réel. Passons donc à l'équipe MCO 2D et créons un nouveau fichier, le fichier de conception. Il s'agit donc d'une image. Vous pouvez le renommer comme vous le souhaitez. Donc, pour l'instant, je vais le renommer. Bon, créons un cadre. Un ordinateur de bureau. Vous savez déjà que le bureau sera notre page aléatoire. Maintenant, sélectionnez le cadre et changeons la couleur du pigeon pour lire ainsi. Et ce texte ajouté au centre. Cela va être trop petit. Faisons donc plus grand, jusqu'à 60 ans. Ajoutons la décision au centre. Et modifions la police. Type. Une recherche sur la police Google de type 48 ressemble à Effect Pro quelque chose, mais je ne suis pas en mesure de la télécharger. Je vais donc utiliser la police appelée impact. C'est donc similaire à cette police. La taille de la police est trop petite, donc prenons 96, ou faisons-la jusqu'à 120. D'accord ? Comme ça. Ajoutons ça au centre. Un autre texte qui va être notre univers cinématographique. Jusqu'à présent, j'utilise la nouvelle police de Baba. Et c'est normal et la taille de la police est de 45. Ça, et il suffit de frapper vers le bas comme ça. Si vous le souhaitez, vous pouvez ajouter un rectangle à l'extérieur de ce texte. Mais pour l'instant, je vais le laisser tel quel car il a l'air cool. Notre deuxième page va donc être déplacée. Faisons donc en sorte que cette page de film diffuse une image dans des films. Examinons donc notre filaire. Pour pH. Ainsi, la section MouseX et Juif, le nom de la marque, l'icône de recherche, icône de la cloche, le bouton d'inscription. Nous devons donc créer ces choses. Commençons par créer un rectangle. Parce que lorsque nous allons ajouter cette image , le test ne sera pas visible. Nous allons donc placer notre texte sur ce rectangle. Et changeons le type de genre de ce rectangle, colorions le courant, il est solide donc je vais le faire jusqu'à ce qu'il soit linéaire, comme ça. Donc, notre équipe pour ce projet est un peu folle. Je vais donc faire ça comme un rouge. Et une couleur secondaire va ressembler à celle-ci. Et cette arête correspond à la longueur du rectangle. Comme ça. Je pense que la deuxième couleur est comme devenir trop sombre. Faisons donc ça comme ça. Bon, ajoutons maintenant de la texture ici. Donc, tout d'abord, ce sera des films. Donc, actuellement, la meilleure nouveauté. Je vais donc le transformer en comme nous qui a fait grandir celui-ci. Je pense donc que cette police n'est pas disponible dans le cinquième plus grand nombre d'opérateurs. Vous pouvez donc télécharger cette police de l'extérieur, à partir de Google. Vous pouvez télécharger ces polices et les installer sur votre PC. Le problème avec cette police est que nous ne pouvons pas la rendre audacieuse. J'ai donc une astuce pour ça. Donc, ce que vous pouvez faire, c'est que vous pouvez ajouter un trait et qu'il deviendra un boulon comme celui-ci. Diminuons donc la taille de la police. Actuellement, il est 45 ans. Allons jusqu'à 30. Bon, comme ça. Et la seconde, c'est notre émission de télévision. Cela va donc être normal. Supprimons donc ce choc comme celui-ci et ajoutons le nom de la marque. Je vais donc copier celui-ci et le faire glisser vers cette page. Diminuons donc la taille de la police jusqu'à ce qu'elle soit similaire, par exemple 80 degrés de la taille de police jusqu'à 30. Donc, si vous voulez en contenir la couleur, faisons-le rouge. Comme ça, ou même comme vous pouvez choisir la couleur de votre choix. Je vais donc faire de ça le rouge. Ensuite, nous devons ajouter que l'icône de recherche et l'icône de notification de cloche. Allez donc à la S8. C'est tellement bon aujourd'hui, en février. Et basculez cette icône supplémentaire. Et cherchons l'icône de recherche et faites-la glisser ici. Et nous avons également besoin d'une icône de cloche. Et le dernier sera notre inscription. Nous allons donc les aligner abord ensemble, puis en bas et verticalement. Ils sont donc alignés maintenant. Nous pouvons donc ajouter une autre chose. Nous pouvons ajouter du soulignement à ce film. Nous pouvons donc ajouter un soulignement à ce texte vidéo. L'utilisateur va donc une longue section maintenant. Nous allons donc choisir un rectangle. Créons une barre simple comme celle-ci. Comme ça, et changeons la couleur des fosses. Vous pouvez aimer le rendre blanc ou rouge. Je pense donc que le blanc va être plus beau. Je vais donc choisir un blanc comme celui-ci. Faites-le glisser un peu vers le haut. Disons donc si vous voulez déplacer quelque chose un peu vers le haut pour pouvoir le modifier à partir d'ici, ou vous pouvez appuyer sur le bouton vers le haut de votre clavier comme ceci. D'accord ? Bon, notre fabrication est créée, alors ajoutons une image dans cette page ou dans ce cadre. J'ai cette image d'Avengers Endgame. Faites-le glisser dans Figma et collez-le ici. Nous allons donc y remédier comme ça. Cliquez avec le bouton droit de la souris sur cette image et envoyez cette image en noir. Et un peu mieux, le problème avec les images que vous pouvez voir, c'est un peu de texte. On peut donc juste aimer Zoom comme ça. Et nous allons y remédier comme ça. Maintenant, c'est parfait. Bon, ajoutons maintenant des textes tels que le nom du film, la description du film, le travail effectué et tout ce que vous pouvez voir dans le filaire. Nous devons donc ajouter le nom ou la description du film, le bouton Lire maintenant et ce film. Je pense donc que pour ce faire, je veux créer cette barre de films. Créons donc un film Parts. Choisissez un rectangle. Faisons donc de ce rectangle une transparence. Choisissez donc linéaire. Vous pouvez donc voir qu'il devient transparent comme ça. Notre nouvelle barre de section est donc plus grande. Nous allons donc ajouter des films. Choisissons un rectangle et créons simplement un rectangle comme celui-ci. Nous allons donc les aligner ensemble. Je vais sélectionner toutes les images, ainsi que le rectangle L et M en bas et je les prête politiquement. D'accord, ajoutons ceci, l'espacement entre eux. Disons donc que l'utilisateur est actuellement sur ce film. Alors, allons-le plus gros. Ajoutons donc une flèche. Nous allons donc créer la flèche en utilisant un carré comme celui-ci. Sélectionnez donc ce rectangle et tournons à peu près comme moins 45. Comme ça. Double-cliquez dessus et vous pouvez voir les points ici. Cliquez donc dessus et appuyez sur Entrée sur votre clavier. Nous n'avons donc que deux parties de cette place. Nous allons donc ajouter un trait. Il en compte huit. Nous pouvons donc le rendre un peu plus grand pour qu'il soit plus naturel. Nous allons donc ajouter 10. Le 10, la couleur au blanc. Cliquez maintenant sur Terminé. Mettons-le donc dans ce cadre. Et à moins que n répartisse la courbe sur ces arêtes, il faut ajouter plus de tracé. Actuellement, il est 10. Additionnons comme un retournement. OK, et allons le réduire ou en ramasser 50. Bon, ajoutons cet agent au centre. Notre premier par tout juste créé. Nous allons donc dupliquer cette page pour une émission de télévision. Et renommons l'imagerie en séries TV. Et lissez ces outils sous-jacents, émission de télévision. Et enlevons le trait de celui-ci. Et ajoutons l'AVC dans les tissus. Et nous devons également en modifier l'image. Enregistrez donc ce cadre et double-cliquez sur besoin. Nous devons donc changer l'image. Vous obtiendrez donc ce menu d'image et cliquez sur ce bouton. Et rempli d'air. Accédez ensuite à l'outil Forme et placez l'image. Et ajoutons cette image. Disons deux ici, comme ça. Et ajoutons cette image. Bon, et maintenant ajoutons l'image sur ces tuiles. Maintenez la touche Maj enfoncée, sélectionnez toutes les sections. Accédez à l'outil Shape et image. Ce sont donc les films aussi. Je vais placer cette image sur ces carreaux. La première image sera donc Endgame. Et le second sera, disons, merci. Et Black Widow et Spiderman. On ne rentre pas chez toi. Sélectionnez Ouvrir. Je vais donc placer l'image de fin de jeu sur cette tuile. Le second va être, je pense, guerrier et les inspirer et va être sur le quatrième style. Et la veuve noire va être dans le style de vie. Ajoutons donc un trait à cette image pour qu'elle soit plus fraîche. Prenons donc qu'un peu de numérique peut être blanc. Vous pouvez également souhaiter lire un agent de changement. Cela, faites un coup jusqu'à cinq. Ou vous pouvez le rendre un peu plus gros comme une protéine. Cela dépend donc totalement du trait de virgule que vous voulez. Ajoutons donc une image à cette section TV. Sélectionnez le style, maintenez la touche Maj enfoncée, sélectionnez-les tous. Accédez à l'outil Shape. Imaginons. Je vais donc d'abord placer cette image à partir du motif. Et le second va être l'espoir. Le troisième sera chanceux. Et le dernier vient d'une seule division. Donc pour écrire le photon est loopy, donc je vais ajouter des loci ou ici en premier dans la troisième division. Ajoutons donc le nom et la description du film. Nous allons donc dupliquer celle-ci. Et faisons-le pivoter de 90 degrés. Et il suffit de l'ajuster ici. Et nous allons l'agrandir comme ça. Et allez dans Effets. Ajoutez leur groupe. Et faisons en sorte que ce calque soit flou jusqu'à 80. Cela dépend donc totalement de la quantité de flou que vous souhaitez ajouter. Donc, dans ce cas, il sera parfait pour moi, donc je vais ajouter ça. Ajoutons donc le nom du film. Sélectionnez donc le texte. Donc le nom du film, Il organise Endgame. Et vous pouvez voir que la police est Oswald, et elle est régulière. Et la taille de la police est de 11 Pi. Allons donc anticiper ici. Comme ça. Ajoutons une autre texture. Et ce sera n'importe quel jeu. Et ajoutons une description de film. Donc, la description de la formule, vous pouvez aller MDB et copier cette description et ce texte MO . Créons un rectangle. Et c'est au contrôle V de synthèse vocale, comme ça. Pour cela, je choisis une police appelée Sofia pro, et la taille de la police est 22. Désactivez donc ce bouton Lecture. Allez dans le rectangle. Créez un rectangle comme celui-ci. Et ajoutons. Faisons donc ce rectangle en rond comme ça, ou ici. Passons donc la couleur un peu bleue au rouge. Et ajoutons le texte. L'objet va être joué maintenant. Actuellement, la police est Sofia pro. La couleur de police va donc être blanche. Et ajoutons un trait et une couleur de genre du trait en blanc. Comme ça. Augmentons la taille de la police jusqu'à 40. Comme ce NTC sans fin ici. Et nous devons créer ce bouton Lecture. Accédez à l'outil Forme, choisissez ce polygone. Trongez un triangle parfait avec Shift. Et tournons cela en moins 92. D'accord, et ajoutons quelques coins arrondis. Je pense donc que nous pouvons rendre cela un peu plus grand, en faire 15. Je pense donc que l'affichage moins lisse a fonctionné pour eux. Ok, et ajoutons cet affichage maintenant. Ok, ça a l'air cool. Changeons maintenant la couleur de la pièce en blanc. Faisons donc en sorte que nous puissions l'utiliser sur la page de l'émission télévisée. Toutes les choses utilisent Shift et appuyez sur Control G pour les regrouper. Maintenant, sélectionnez le plan, notre bouton, maintenez la touche Alt et faites-le glisser vers l'émission TV. Bon, nous allons créer ce bouton de bande-annonce. Nous allons donc dupliquer celle-ci. Sélectionnez Display (Afficher). Maintenant, tenez cette remorque. Et ajoutons un tweet de soulignement, comme ce bouton de film. Ok, retournons la couleur de ce qui est souligné en rouge ici. Ces boutons sont donc créés. Nous allons donc ajouter la lecture ici. faut donc d'abord aimer ça vers le bas, comme ça. Allez donc dans l' outil Forme et maintenez la touche Maj enfoncée pour créer une étoile parfaite. Nous allons dupliquer cette tâche en temps phi. Allons les aligner. Nous allons maintenir la touche Maj pour les sélectionner tous. D'abord Allen, en bas, puis à la verticale. Et l'espacement des distributions horizontales. Je vais changer le sélecteur de couleurs. Disons que l'on ressemble à ça. Sélectionnez la dernière étoile, retirez-en le remplissage et ajoutez un trait comme celui-ci. Si vous le souhaitez, vous pouvez modifier sa couleur. Vous pouvez le rendre blanc comme ça. Et il reste une chose à faire est que la courbe AD dedans. Ajoutons un rayon d'angle jusqu'à 200. allons donc les regrouper pour que nous puissions utiliser dans une autre image, les sélectionner toutes et contrôler G pour les regrouper. Vous pouvez donc voir les films, les séries télévisées, l'inscription, l'icône de recherche et l'icône de la cloche, la couleur est noire et elle ne perd pas cela. Super. Faisons donc le blanc. Changez également la couleur du trait en blanc, comme ceci. Même icône de recherche visuelle 40. Et le dernier est de s'inscrire. Nous en avons donc fini avec nos projets. reste donc une chose à ajouter du prototypage. Nous allons donc commencer par le faire. C'est tout pour la vidéo d'aujourd'hui, et je vous verrai dans la prochaine. 36. Prototypage pour la plateforme de streaming OTT: Bienvenue, bienvenue, bienvenue. Dans cette vidéo, nous allons donc ajouter un type de rôle à ce projet. Sélectionnez donc la première page, allez au prototype. Vous pouvez voir pourquoi ces points blancs. Cliquez dessus et faites-le glisser sur la page du film. Et actuellement, il navigue vers les films. Il s'agit donc d'un instrument onclick puis d'imagerie. Ainsi, dans le projet précédent, nous choisissons cette petite école d'animation intelligente avec une dynamique intelligente et divulguons celle-ci. Deuxièmement, ce sera notre émission de télévision. Donc, lorsque l'utilisateur clique sur l'émission télévisée, il va donc rediriger vers cette page d'émission télévisée. Vous pouvez donc voir toutes les choses comme onclick. Et nous avons dit l'animation en animation intelligente. Et depuis la page de l'émission télévisée, l'utilisateur veut aller sur la page du film afin que nous puissions accéder à la page Moodle comme celle-ci. Ainsi, les choses seront identiques comme onclick, naviguez vers des films et des animations intelligentes. Bon, maintenant, allons le présenter. Cliquez sur ce bouton pour présenter la présentation. Ok, donc vous pouvez voir nos bases ressembler à ceci, mais actuellement cela correspond à mon écran. Donc je dois le faire, vous pouvez le voir, malgré la taille réelle. Je vais donc choisir une mise à l'échelle réduite pour s'adapter. Nous pouvons donc voir toutes les choses. Appuyez sur R pour redémarrer. Et je veux cliquer sur celui-là. Vous pouvez voir cette animation cool, cette animation intelligente. Donc, si je clique sur cette page de film, vous pouvez voir que les raccourcis clavier sont une émission de télévision. Nous allons donc cliquer dessus. Et vous pouvez voir l'effet d'animation ici. Vous pouvez donc voir cet effet d'animation intelligent sur ce film. Donc, si je clique à nouveau sur l'émission de télévision, vous pouvez voir l'effet de changement comme celui-ci. Et aussi le même défaut intelligent sur cette émission de télévision. C'est ainsi que vous pouvez prototyper votre projet. Et c'est notre dernier projet. Je suis donc un grand fan de pouvoir. Donc et c'est pourquoi je chéris cette page, disons que si vous êtes un fan de Tau of n, un fan de Star Trek, vous pouvez créer ce genre de projet pour eux comme ça. Ainsi, après avoir créé ce projet, vous pouvez télécharger ce projet sur Instagram. Et vous pouvez tout me marquer pour voir mon identifiant d'instrument ici. Donc je le saurai ou vous êtes fan de marijuana ou de DC, de Star Trek ou de Star Wars. C'est donc la Réserve fédérale. Et je vous verrai dans le prochain. 37. Concevoir votre application de musique: Bienvenue avec une autre vidéo. Jusqu'à présent, nous avons créé des projets comme celui-ci, ou avez-vous réalisé des logiciels malveillants ? Et le premier est notre mot, l'application de livraison de nourriture. Donc, pour ce projet, j'ai entendu la tâche pour vous ou vous pouvez dire ou goûter. Donc, dans ce test, ce que vous devez faire, c'est ça, donc j'ai cette image filaire. C'est donc le filaire d'un lecteur de musique. Pour qu'ils puissent le transformer et créer votre propre lecteur de musique à l'aide de ces filaires, vous pouvez le nommer comme vous voulez. Vous pouvez placer vos troisième morceaux au-dessus de la colline et vous inspirer de Spotify ou de la musique YT. Et vous pouvez utiliser n'importe quelle couleur que vous voulez, ou si vous souhaitez créer un clone de Spotify, vous pouvez également le faire. Cela dépend donc totalement de vous. Si l'on suppose que nous ne sommes pas en mesure de le faire, je vais également créer ce projet après cette vidéo. Alors restez à l'écoute pour ça. Donc, si vous êtes confiant, allez-y et faites ce projet. C'est donc ce que la religion et moi ferons comme dans la prochaine. 38. UI Musify App: Donc, dans la vidéo précédente, je vous ai donné ce filaire. Je sais que certains offshore pourraient réaliser ce projet. Donc, si vous avez fait ce projet, vous pouvez partager ce projet sur votre histoire sur Instagram et vous pouvez me marquer, oh mon cher, vous pouvez également voir mon identifiant Instagram. Vous pouvez également partager leurs projets sur notre serveur Discord. Ensuite, l'aldostérone peut s'inspirer de votre projet. s'agira pas de projets dirigés, alors créons un projet pour eux. Créons donc un nouveau fichier. Donc je vais lire si ça ressemble à Spotify. Je sais que ça ressemble à Spotify parce que je paie pour l'inspiration pour 45 ans. Je vous ai déjà dit qu'il pouvait s'inspirer de Spotify, musique d'identification automatique ou de n'importe quelle huile ou autre, votre lecteur de musique préféré. Nous allons donc choisir un cadre. Actuellement, nous avons iPhone 13 max, donc nous allons choisir celui-ci. Regardons notre filaire. Nous avons donc des choses comme le profil, photo, le logo, le minimum de hamburger et une certaine insomnie Picchu. Alors cela créera-t-il ces choses ? Bon, créons maintenant un logo pour notre lecteur de musique. Maintenant, ce que nous devons faire, c'est faire glisser pour créer cette section pour notre image ainsi que pour le nom de notre chanson. Nous allons donc choisir un rectangle. Ensuite, nous devons l'utiliser pour ajouter ces icônes comme une icône de cœur, une icône aversion, un bouton de travail et de pause et un bouton avant et arrière. Créons donc ces boutons. Maintenant, quel est le mode sombre est vraiment célèbre et beaucoup de gens les utilisent. Je suis aussi l'un d'entre eux. Créons donc ce mode sombre avant de créer le nœud supérieur. Changeons donc la couleur de ces boutons. Comme si j'applique le mode sombre sur le prim, tout va donc être noir. Notre livre ressemble donc au bouton chaud Les Paul Bourdon et la dyslipidémie ne sera pas visible. Les listes apportent donc des changements ici. Si vous le souhaitez, vous pouvez simplement sélectionner ces trois éléments comme le bouton Lecture, Pause et Avancer et Retour. Et vous pouvez modifier la couleur du bouton cœur et de ce bouton Dislike. Vous pouvez les rendre blancs et ces trois choses seront bleues. Cela dépend donc totalement la couleur du hamburger et aussi de la couleur de ceux-ci. Low me dit. Maintenant, nous pouvons voir notre logo sur l' icône du hamburger icône et l'espagnol était terminé. Et ça. Faisons donc ces choses. Donc V C'est la musique. De la musique. Alors, créons les chansons. Celui-là. Donc, le prochain. On dirait donc dirait le prochain. 39. Prototypage de Musify: Bienvenue de retour. Dans cette vidéo, nous allons faire pour notre application musicale. Commençons donc le prototypage. Comme vous pouvez le constater, j'ai quatre images sur mon écran. Commençons par le premier flux. Sélectionnez donc le cadre qui va au panneau de prototype. Je vais donc rejoindre le deuxième cadre du premier principe. Et ajoutons un son d'animation intelligent. Accédez à notre onglet, accédez à l'iPhone 12 Pro Max 1. Et une émission est un instrument. Nous allons donc choisir Smart Dimension. Ok, maintenant à la deuxième image, supposons que l'utilisateur veuille changer la chanson. Donc, si vous cliquez sur ce bouton pour un fardeau la chanson va changer et la firme sera cette troisième jante. Alors choisissons Normal. Et à partir de la troisième image, l'utilisateur peut aller sur la deuxième image comme celle-ci. Et tous les paramètres seront identiques pour cela. Et à partir de là, la liste de lecture va s'ouvrir. Nous allons choisir la mission Martin ici. Je pense que nous en avons fini avec notre mélange de produits, alors respirons. Nous allons donc utiliser cette application. Donc, sur l'admission intelligente, vous pouvez voir, vous pouvez voir que le logo est en haut maintenant. Et je ne prétends pas la chanson. Je vais donc cliquer sur ce qui est interdit. C'est la deuxième chanson. Et à partir de là, je peux revenir à ma première chanson. À partir de ce bouton de liste de lecture. Je peux accéder à une liste de lecture comme celle-ci. Vous pouvez voir cette animation géniale, mais je ne peux pas revenir en arrière car je n'ai pas dit de prototypage pour cette playlist. Alors, faisons-le d'abord. Donc, à partir de là, il faut aller sur le deuxième cadre et moins intelligent et émission. Maintenant, jouons à nouveau. Si je clique sur ce bouton et que vous pouvez voir que la liste de lecture descend et l'ouvre à nouveau, fermez. Et vous pouvez également voir l'effet d'animation Oreo. Ça a l'air vraiment cool. C'est donc la protéine de notre application de lecteur de musique. C'est donc votre dérivé. Et je vous verrai dans la prochaine vidéo ou la semaine prochaine. 40. WireFraming pour la page Web de réseaux sociaux: Bienvenue. Donc, en anglais, je dirais la tâche de créer une application de médias sociaux. Je connais donc certains de mes concurrents qui s'occupent de cette tâche. Donc, dans cette vidéo, je vais créer mon mot pour cela. Créons un nouveau fichier de conception. Ok, nous allons le renommer. Donc, dans Bruce, faites vraiment allusion à plus tôt, vous pouvez utiliser comme cadre iPhone. Ou si vous souhaitez créer une application Web, vous pouvez le faire. Donc, pour ce projet, je vais le déplacer. Nous allons donc d'abord créer une image filaire pour cela. Dans cette section, nous allons donc avoir un groupe comme ça comme ça. Supposons que l'utilisateur se trouve actuellement dans la section des graphiques. Ainsi, l'utilisateur saura à partir de cette bouteille l'utilisateur saura qu'il est responsable de la section. D'accord ? Ce sera donc nos groupes. Ajoutons donc de la texture. Dans cette section, nous allons ajouter un groupe. Nous allons donc modifier le texte ici. Et dans cette section nous allons recevoir un message de la part des personnels. Et ici, nous allons avoir un message d'un groupe ou d'un personnel. Ajoutez un bouton Appel ici. Ajoutons également un bouton d'appel vidéo. Et créons cette boîte de discussion. Ici, nous allons ajouter un microphone. Et dans cette section, nous allons avoir quelques discussions. Ok, donc éliminer un léger fer à Berkeley. Donc, dans les groupes, nous allons en enfer, comme certains groupes, groupes scolaires d'amis. Et aussi dans le message personnel de vos amis votre professeur ou de vos collègues comme cela. Ce sera donc notre filaire pour ce projet. Voici donc à quoi va ressembler ma version. Je sais donc que vous avez peut-être fini différemment. Je me suis donc inspiré de la pire discorde apparente. Dans la vidéo suivante, je vais donc concevoir une interface utilisateur pour notre application de médias sociaux. est donc moi qui signe. Merci d'avoir regardé et je vous verrai dans le prochain. 41. Conception de sites sociaux: Bienvenue de retour. Ainsi, chez Bruce, nous avons créé ce filaire pour notre application de médias sociaux. Donc, dans cette vidéo, nous allons créer l'interface utilisateur réelle pour cela. Je pense que je dois m'en souvenir dans ce filaire. Filaire, choisissons un rectangle de cadre. Et juste au centre. Et c'est amusant. D'accord ? Ainsi, vous pouvez voir que les colons sont pointus, alors faisons-les tenir en main et sélectionnez-les tous. Faisons jusqu'à 20. Utilisez accidentellement ce relationnel pour que je dois utiliser le rayon d'angle afin que la couleur d'arrière-plan soit grise. Faisons une couleur blanche comme celle-ci, et ajoutons une ombre portée. Cela dépend donc vraiment de la couleur que vous souhaitez utiliser. Disons donc que pour travailler sur une application et que vous ne savez pas quelle couleur utiliser, vous pouvez utiliser ce site Web appelé Color Hunt. Et sur ce site, vous trouverez de nombreuses palettes de couleurs comme celle-ci. Donc, pour ce projet, je vais utiliser cette palette de couleurs. Je l'ai déjà téléchargé, donc je vais simplement le faire glisser sur mon projet Figma. Celui-là, ou celui-là. Pour cette section, je vais choisir cette couleur. Tu aimes bien, la lingette Discord. Et ajoutons un logo ici. Ok, maintenant il est temps d'ajouter nos icônes, comme dans notre icône supplémentaire, nous en obtenons deux, comme ce carré D normal aléatoire pour ce projet, celui-ci. Donc ça dépend totalement de son réglage. Pour l'instant, je suis important pour ces icônes, alors ajoutons-les une par une. Donc, tout d'abord, allons les agrandir un peu. J'utilise donc 35. Faisons donc 40 ans. Il aura donc l'air plus métallique ou cool. Je pense que je vais le rendre blanc. Pourquoi leur faire ? Il ne s'agit pas d'une sélection. D'accord, nous allons les entrer un par un. Le Cloud va être ici. Ça va être réglé. D'accord, nous allons les entrer. Maintenez la touche Maj enfoncée, sélectionnez tous Et le centre aligne l'espacement horizontal. J'ai donc lu aussi l'espacement. Bon, ajoutons un profil maintenant. Cliquez dessus. Accédez à l'outil Shape. Mettons-le donc sur ce logo. Vous pouvez le voir ici maintenant. Et c'est aussi parfait. AVC. Cela dépend donc totalement de si vous voulez ajouter un trait, vous pouvez ajouter. Vous pouvez partir comme ça. Nous sommes donc actuellement dans la section de chaise, donc rectangle. Je vais m'en servir. Regardez celui-là. Celui-là. Mettons ça au premier plan. Ou cliquez dessus et mettez-le à l'avant ou utilisez même le support carré droit pour pousser vers le haut. Bien. Vous pouvez voir à quoi ça ressemble. Bon, donc actuellement, c'est comme ça. Bon, on va donc former un groupe. Je veux le faire. Changeons donc la police, la couleur de la police. Faisons en sorte que ça ressemble davantage à ça. Groupes Edge. Bon, ajoutons un groupe de vos collègues. Faisons une ligne régulière. Comme ça. 1909, je vais un peu comme ça, comme celui-là. Disons donc que quelqu'un a laissé tomber un message ou quelque chose comme ça, la taille de l'entreprise, comme ça. D'accord, à moins d'un moment. L'utilisateur saura donc quand ce message est livré. King cite quelqu'un, disons 38, 130, enregistre un message de ce groupe. Bon, faisons-en un 10. Je pense que j'ai inventé dix ans. Bon, allons en faire un groupe. Parce que nous allons utiliser cette chose plusieurs fois. Appuyez sur Control G pour en faire un groupe. Et copions une phrase comme celle-ci. Sélectionnez-les tous vers le haut, comme ceci. Et vous pouvez tourner cette heure OB. Et aussi, le nom de ce groupe est comme 21. Nous allons donc copier exactement la même chose dans notre section de première classe, comme celle-ci. D'accord, donc tout d'abord, moins que le nom du groupe. Disons que vous avez des K-Mers dans ce groupe. Ajoutons donc une image dans cette section de groupe. D'accord, la première est la première image est notre console. Je vais donc ajouter que ce deuxième est celui des étudiants. Supposons que les étudiants imaginaires soient programmeurs. Je vais donc ajouter un mot ici. Cela n'a pas de sens pour cette image, donc je vais choisir une autre image. Disons que nos rumeurs sortent du dossier. Je vais donc ajouter cette image comme des loci. Ajoutons donc le chorion leucémique. Bon, comme ça. Supposons que vous modifiiez l'image, mais que l'image est très bien, vous pouvez donc double-cliquer dessus, aller dans Remplir, sélectionner l'image. Et vous pouvez choisir un recadrage, cette image. Ou vous pouvez aimer Moody's et ça, annuler celui-ci. Je vais maintenant ajouter quelques images. Je pense que dans Windows, le raccourci est pour Windows plus ou touche point. Cela ouvrira donc le public du panel emoji. Vous pouvez donc ajouter des images comme celle-ci. Ok, cette somme est en train de dire merci. Par ici, comme ça. Cela dépend donc totalement de qui vous pouvez ajouter ce que vous voulez. Nous en avons donc fini avec notre groupe. Disons donc que le nom de cette fille est rituel. Comme si je suis un grand fan d'amis comme des amis. Ainsi, Nemo est écrit. Vous pouvez donc ajouter ce que vous voulez. Même l'arité exécute le nom GF, audio prend le nom, la délivrance DO sur vous. Et le dernier sera Chandler. Merci. Ajoutons une diction aléatoire. D'accord, j'ai entendu des textos aléatoires ici. J'ai conservé ce temps. Également le message de Rachel, acteur 46. Ajoutons donc une image ou des images plus maintenant. Donc, dans cette section, nous allons copier celle-ci. D'accord, dans la section des tests. Vous pouvez donc voir le problème ici. J'ai donc copié ce groupe, mais le groupe n'est pas visible, je dois donc ajouter un texte. Une fois encore. Ajoutons un rectangle simple. Ici, ça va avoir 20 ans. Nous allons donc le rendre un peu plus gros. Ajoutons donc que si je le fais glisser ici, il va être ajouté. Nous devons donc le mettre en avant ou cliquer dessus et choisir Bring to Front. Et maintenant, nous allons le placer ici comme ça, donc nous devons apporter quelques modifications ou ajouter un trait. Faisons le blanc. Il va être blanc et augmenter la taille de la police. Et actuellement, elle est en ligne. Et nous devons supprimer celui-ci. Nous avons donc quelques icônes qui vont être le calque inférieur, faites-le glisser ici. Et la couleur de ce fond est blanche et la couleur de ce Taïwan est blanche. Il n'est donc pas visible. Mettons-le devant. Amenez à l'avant ou 40. Et explicite ici. Alors, piste, icône vidéo. Ok, amenez devant. Alignons cet appel et cet appel. C'est donc Lambda. Vous pouvez sembler que trois icônes .me, nous n'avons pas ce Minnesota, nous devons la créer manuellement en utilisant trois ellipses. Une ellipse comme celle-ci. Je pense qu'il faut le rendre un peu plus petit. Alors peut-être que ça va bien, alors c'est fait. Maintenant, passons ça ici. Il est plus facile de se déplacer d'un endroit à un autre. Donc, des chats. Nous allons donc copier celle-ci. Sur la palette de couleurs. Il n'y a pas de couleur dans la palette de couleurs. Allons le rendre plus petit. Créons donc comme ça. Importons mon proton ici. La caméra. D'accord ? Tout d'abord, allons le rendre plus grand. Disons que nous allons faire ça comme ça. Ce chapitre va être ici. Je pense, c'est pourquoi ce film est ici. D'accord. Allons aligner ces choses. Ces choses sont maintenant alignées. J'aime taper votre message. Je pense qu'il est 14 ans, ça va aller. Comme ça. Donc, les choses se passent, c'est seulement le chat ou quoi que ce soit ? Je vais donc ajouter une chance aléatoire pour vous. Disons que j'ai recommandé un jeu à Rachel. Donnons au polygone de 20 coins. D'accord ? Donc, ressemblons un peu à ça. Faisons donc un groupe d'entre eux afin que nous puissions l'utiliser plusieurs fois ou Maj pour sélectionner cette flèche ici, ce texte d'édition. Alors, allons y arriver. Et vous pouvez utiliser votre police préférée comme celle-ci. Nous allons donc le rendre plus petit. sites, un peu plus petits, comme ça. Et nous allons finir à temps. Je vais donc copier celui-ci, faire glisser ici. Créons donc une autre section. Je peux copier celui-ci, mais je veux que ce polygone soit à gauche. Je dois donc créer le nouveau. C'est pourquoi je dois en créer un nouveau. Ou vous pouvez utiliser le même. Je vais donc décrire ce polygone. C'est donc ici que je finis mon projet d'application de médias sociaux. Je sais donc que vous pouvez utiliser une autre façon ou vous vous êtes inspiré de différentes applications comme Facebook ou Instagram. Cela dépend donc totalement de vous. Ça peut paraître différent ou mieux que moi. Il s'agit donc de l'application d'une seule page, donc nous n'allons pas utiliser le prototype. Donc, si nous avions plusieurs pages comme l'application musicale, donc dans ces pages photo. C'est pourquoi nous avons connecté ces projets. Il s'agit donc de la page unique. Voici donc à quoi ressemble mon application de médias sociaux. Donc, je vous verrai dans le prochain projet. 42. Projet 5(Test de vos compétences UIUX): Bienvenue, bienvenue, bienvenue. Dans celui-ci, je vais vous parler du dossier de projet. Pour ce projet, je ne vais pas faire de filaire ou d'idée. Vous devez le faire seul. C'est un peu votre test. Vous pensez peut-être à ce que nous devons construire ou concevoir. Le début est tout ce que vous pouvez concevoir, appliquer ou page Web. Cela dépend totalement de vous. Imaginons que vous deviez construire notre argumentaire pour certaines marques comme Nike, Puma. Ensuite, vous pouvez vous inspirer de Nike ou de puma. Ou vous pouvez simplement effectuer une recherche sur Google, ou vous pouvez également effectuer une recherche sur Dribbble et essayer de réaliser ce projet. Et souvenez-vous d'une chose, elle devrait être unique. Et il faut être créatif. Et une partie de votre propre créativité. Il y a quelques étapes à suivre. Comme la première étape est inspirée. Le second est de faire un filaire. troisième étape est l'application de conception ou la page Web. Le pas en avant est franchi dans cette application de trois pages sur une page Web et un prototype de fines rigides. Et la dernière étape est de partager votre projet avec moi et avec vos amis. donc les étapes que vous devez suivre pour réaliser ce projet. Je sais que vous pouvez le faire. est donc moi qui signe. Merci d'avoir regardé et je vous verrai dans le prochain. 43. Systèmes de grille dans la conception de Web et UI: Bienvenue de retour. Dans cette unité, nous allons apprendre ce qu'est la grille. La grille est le squelette de la conception l'alignement déclaré vous aide à créer, commander et organiser le contenu que vous concevez. Que vous créiez une mise en page pour impression comme un magazine ou que vous combiez des images et des textes pour créer une page de destination, vous utiliserez une grille pour vous aider à prendre décisions de conception et à créer une bonne expérience pour le utilisateur. Utilisation d'éléments de grille, prise de décision aléatoire. Au lieu de placer des éléments dans des endroits aléatoires. En utilisant real correctement, vous saurez exactement où placer des éléments tels que le logo, les éléments menu, les titres, la copie du corps, l'image et le mode. Cela vous aidera à accélérer votre processus de conception. Pourquoi les poignées sont-elles importantes dans le design numérique ? Les grils aident à façonner et à hériter le design numérique. Sans eux, vous n'aurez aucune idée de l'endroit où placer les éléments. Nous en avons besoin pour créer une bonne expérience utilisateur. Ainsi, l'utilisateur sait comment naviguer sur un site Web et trouver ce dont il aurait besoin. Les grilles aident également ce qu'il s'agit d'une conception réactive. Bien que l'expérience de bureau de la page de destination puisse utiliser plusieurs colonnes pour passer du texte et de l'image. La conception doit être suffisamment flexible pour se condenser à deux à trois colonnes sur la table et à une colonne sur l'appareil mobile. Remarquez comment le Greer mobile devient une pile comme une colonne ou une petite grille dans l'exemple. Il existe cinq principaux types de grilles. Certains sont meilleurs que d'autres pour la conception Web. Mais avez-vous probablement utilisé tous les phi à 1 dans votre carrière de design ? Le premier est une grille de référence, la seconde est une grille manuscrite. Colonne, la troisième est la grille de colonnes. Photon est une grille modulaire, et pour la dernière est hérétique. Créer ces cinq groupes est vraiment important, mais je pense que la grille de colonnes est vraiment importante pour nous. Columbia aide à diviser le texte des publications et des illustrations. Pour les sites Web, vous pouvez avoir n'importe où de Goodwill ou même de 16 colonnes. Passons la vertèbre, la page de prêt. Vous pouvez utiliser du texte et de l'image dans une seule colonne, ou ils peuvent s'étendre sur plusieurs colonnes. L'espace entre les colonnes est appelé poutres. Ils doivent avoir la même taille sur tous les cheveux, pas toutes les colonnes de grille pour être symétriques. Par exemple, vous pouvez utiliser une grille de colonnes d'assimilateur où certaines sont plus minces alors que d'autres sont plus larges, ce qui peut être utile en fonction de l'héritage de votre dessin. Une grille de colonnes de cimetière est couramment utilisée sur les blogs, les sites Web où vous avez le contenu principal agrandi font le troisième conteneur de la mise en page. Alors que le plus petit terme peut être la barre latérale qui intéresse des informations sur le blog et l'auteur. Après avoir effectué vos recherches, vous voudrez peut-être explorer des images filaires de faible fidélité sur papier. Créer un Greer pour votre page de destination est l'une des étapes les plus simples. Une fois que vous l'aurez créé, vous n'aurez plus à réfléchir à toutes les pages de destination suivantes. Avant de commencer, est-ce que quelque chose couvre d' abord la grille plutôt que de la laisser jusqu'à la fin et d'essayer de faire en sorte que votre dessin s'intègre dans une grille. nouveau designer peut se sentir confiné par l'idée d'utiliser un groupe, mais vous ne devriez pas le faire. Une fois que vous avez créé une grille, il est possible de la casser. Mais au moins, vous le faites intentionnellement et ils sont écrits pour une décision de conception. Plus vous utilisez la grille, plus vous réalisez comment est guide et cela vous aidera à concevoir mieux et plus rapidement. Ce sont donc toutes les choses de nos groupes. Donc, ça veut dire signer. Merci d'avoir regardé, et je vous verrai dans le prochain. 44. 15 choses qui font votre conception de UI Design design !!: Et les jurys seront tous animés par fructification plus dense ou un écran d'application. Certains d'entre eux sont simples, certains le sont seulement, mais quelques-uns d'entre eux sont allumés. Ça pourrait décerner le plomb. Je veux dire que l'interface utilisateur semble attrayante comme l'utilisateur le souhaite et l'interface utilisateur qui écoute son utilisateur. Par la suite, une impression qui vous fait vivre. Si vous apprenez toutes ces choses, vous apprendrez avec succès à créer une interface utilisateur qui l'écoute. L'utilisateur a l'air attrayant et charmant pour l'utilisateur. Apprenons donc ces choses une par une, en commençant par la typographie. Chaque interface utilisateur avec tampon WTP est allumée car plus de 60 % de l'application est soit textuelle, soit entièrement dépendante de textes. Par exemple, une application d'article, tout comme Medium, a plus de 60 % de son application avec détection. Et d'autre part, dans une application qui possède la case à cocher bouton, Dropbox ne peut pas être efficace sans texte, car l'utilisateur peut ne pas comprendre quel bouton pour l'inscription connexion a lieu comme rôle important dans la conception de l'interface utilisateur des applications. Il est donc essentiel de l'utiliser correctement et d'utiliser correctement le texte. Il faut le coiffer avec précision. couleurs. Les couleurs sont la partie la plus importante et la plus charmante du design. Tout comme l'artiste, rien sans couleurs, l'interface utilisateur n'est rien sans couleurs. Par conséquent, il est important de placer des couleurs dans la conception de l'interface utilisateur. Les couleurs de la conception de l'interface utilisateur procurent une attraction et utilisent un revers. En utilisant des couleurs, le designer peut donner vie à son design, mais aussi agir comme un déclencheur psychologique pour les humains. Par conséquent, pour une meilleure expérience et une meilleure conception de l'interface d'application, vous devez utiliser la couleur à l'intérieur de votre conception. Mais parfois, si nous avions fait une erreur en utilisant des couleurs sorte que nos icônes, les icônes de l'un des éléments les plus fréquemment utilisés. Maintenant qu'un concepteur utilise le parce que l'utilisateur le comprend rapidement plutôt que de lire le texte. Comme les humains comprennent facilement le visuel, ou la meilleure façon de les utiliser à votre avantage lors de la conception d'une interface utilisateur, je peux commencer les nouvelles choses en tant que nos ancêtres pour les utiliser pour définir leur royaume et leurs zones. Le royaume où vous trouvez une ligne de drapeau avec un symbole linéaire. Illustration. illustrations sont l'un des meilleurs moyens d'ajouter un visuel attrayant que vous pouvez également personnaliser en conséquence. Habituellement, l'illustration est bien meilleure que l'utilisation simple pour illustration sont de petite taille et n' ont jamais semblé floue dans aucune taille d'écran d'application. Si vous utilisez l'illustration SVG, illustration pour rendre le contenu plus compréhensible pour l'utilisateur. L'image est l'un des visuels les plus populaires et les plus anciens à l'intérieur du design blanc. Les images sont toutes, mais elles sont appelées comme d'habitude des locataires d'œuvres, mais à ce moment-là le texte brut. Comme les humains sont des créatures visuelles, la charge de voir des images. Les images montrent de l'émotion face aux sentiments attaqués de l'utilisateur. Et cela a vraiment aidé à attaquer et à rendre l'utilisateur client. Si elle n'est pas utilisée correctement, peut vous causer de gros problèmes. Et l'émission, l'émission est la chose la plus utilisée à l'intérieur du blanc, conçue pour stimuler interaction de l' utilisateur, car lorsque l'utilisateur regarde certaines des animations sympas, il se sent bien et aime interagir avec le logiciel d'application ou site Web. Et l'émission est également utilisée pour fournir des commentaires lorsque les utilisateurs cliquent sur quelque chose ou pour obtenir quelque chose. Par exemple, en tant que message de traitement réussi lorsque vous transférez votre argent vers un autre compte. direction des migrants indique une animation simple à l'aide de l'application qui fait en sorte que la fonction normale semble être attaquée par Anna en surbrillance, exemple, appuyez deux fois sur l'image pour aimer Migrant Protection dans Instagram. Cette animation simple, comment utiliser des listes parfaites lors de la commande d'animation, fait que l'utilisateur se sent ennuyé par votre animation. Personnalisation. La personnalisation consiste à recommander le contenu lié au choix de l'utilisateur effectué précédemment à l'aide de l'application. En stockant les données et son équipe corresponde à l'autorisation de l'utilisateur, vous pouvez facilement personnaliser votre application. L'utilisateur adore voir quelque chose de plus personnalisé car il se sent important et rendre l'application plus interactive. Par exemple, si l'utilisateur charge des vidéos dans le panier, il aimerait voir votre autre CAO. Pourquoi utiliserons-nous dans cette recommandation YouTube plutôt qu'une projection, un balayage vidéo, une navigation, une alimentation. Et l'une des fonctionnalités importantes de l'application sans laquelle l'utilisateur ne peut pas utiliser l'application. Par conséquent, il est préférable de rendre le cuiseur de navigation plus intelligent. Flex 45, YouTube, Amazon utilise des barres de navigation, des menus et d'autres boutons pour faciliter la navigation de l'utilisateur sur l'écran d'accueil de l'application. Eunice, qui fait de l'interface utilisateur, est l'une des tâches les plus importantes et les concepteurs d' interface devraient faire en 2021. Et pour la réactivité votre conception d'interface utilisateur peut se fixer à l'intérieur du plus grand nombre d'écrans possible. Parce que nous sommes maintenant à l'ère des jauges où 70 % des gens ont encore plus d'un gars possédé ou utilisé. Quelle demande pourquoi concevoir ? Le minimalisme ? La conception principale de l'interface utilisateur est axée sur le minimalisme. L'utilisation du minimalisme consiste essentiellement à soustraire les éléments moins utilisés de interface utilisateur et à placer l'élément le plus important à l'écran. Minimiser ne signifie pas supprimer boutons utiles uniquement pour les boutons utiles uniquement pour nettoyer l'écran de l'application. Tout est question de style et d'espacement. Parité. Vous pourquoi est formé avec l'héirarchie de l'élément, ce qui signifie que les choses les plus importantes doivent être au sommet de la conception de l'interface utilisateur et que le reste des choses est arrangé en conséquence. L'hétérotrophie est vraiment importante dans la conception de l'interface utilisateur, car elle se concentre sur l'importance de la paroisse et moins importante, et l'aide aux concepteurs à les organiser d'une manière particulière qui vous aide à naviguer facilement dans l'application. La cohérence et le maintien la cohérence sont les plus importants. Cela signifie utiliser le même style que l'élément dans toute l'application. Si vous utilisez différents styles d'éléments ou de dilemmes, votre travail Lord High et la qualité de votre application sont faibles. Utiliser un bit de circonscription basique mais crucial. Certains éléments de l'application peuvent être les mêmes dans la fonction, mais différents dans les couleurs, le schéma et le test les ont identifiés et les modifient par votre APTT lui comme pièce a. Distribué essentiellement signifie la conception la conception pour des personnes différentes de la normale. Ils peuvent inclure des gauchers, des personnes handicapées sont des personnes handicapées. Plus loin en arrière. chose la plus critique qui diffère de la fuite est plutôt mauvaise. La créatrice qui sait utiliser son dos est la créatrice qui connaît notre design. Une interface utilisateur réelle. Car les défauts sont les choses les plus critiques car certains utilisateurs pour vous de retour avec de bonnes critiques et d'autres avec la banque, ont juste essayé de comprendre leurs problèmes, puis de les résoudre. Et des ressources. Plus vous disposez d'outils et de ressources, plus votre application s'améliorera. Comme si vous aviez de meilleures ressources d'icônes, cette interface utilisateur MCU semble plus attrayante et conception d'outils compte également dans une certaine mesure. L'outil de conception de u1 doit être de haute performance. Have Plugin Support prend également en charge exigences des entreprises et comment toutes les choses de base requises pour vous Je conçois des résistances sont la collection des choses que les concepteurs utilisent pour une meilleure création d'interface utilisateur, comme le succès des icônes, ressources d' illustration, les ressources d'image et l'humeur. Nous arrivons donc à la fin de ma liste, filtrant les choses qui font vivre l'interface utilisateur. Mais parce que vous êtes resté avec moi, un bonus pour vous. Les bonus suivent la tendance. Vous en faites partie. Si vous transférez de la valeur à votre utilisateur ou améliorez simplement la qualité de la conception de votre interface utilisateur. Les concepteurs principaux savent où ils sont, comment utiliser les tendus et nous ne le sommes pas. Et vous pouvez en apprendre davantage à ce sujet en lisant et en comprenant les tendances. Parfois, le morphisme des nouilles unique et ne peut pas être utilisé, mais parfois comme un rocher peut être utilisé dans n'importe quelle partie du chemin avec des fonctionnalités de base. Voilà donc tout ce que vous devez savoir en tant que développeur UI UX. C'est donc tout pour aujourd'hui. Et je vous verrai dans le prochain. 45. 5 SITES WEB DONT vous devez vous voir ! Inspiration de la conception de Web: Bienvenue de retour. Dans cette vidéo, je vais vous raconter les cinq meilleurs sites Web dont vous pouvez vous inspirer. La première est, et aussi mon préféré que le Drupal de Gribble, vous pouvez vous inspirer beaucoup. Vous pouvez voir beaucoup de gens télécharger leur travail en type d'inspiration, nous avons toutes les options telles que l'animation de page Web, l'image de marque, illustration, le mobile, l'impression, la page Web, topographie, la conception de produits, etc. Nous allons donc choisir la conception Web pour que vous puissiez voir toutes les pages Web. Supposons que votre client veuille créer un site Web pour la crypto-monnaie, alors vous pouvez jeter un coup d'œil à ces sites Web. Vous pouvez voir toutes les choses comme la couleur de blé qu'il a utilisées sur ce site. Vous pouvez également les suivre à partir d'ici. Vous pouvez également commenter ces pages. Je peux aussi les aimer. Et vous pouvez également voir les pages Web similaires pour les cryptomonnaies. Et si vous souhaitez filtrer une page Web ou une application spécifique, vous pouvez cliquer sur ce bouton de filtre. Vous pouvez également ajouter des balises. Imaginons que vous souhaitiez créer une application de textos semblable à celle de la santé. Vous pouvez taper ici un suivi de tête. Vous pouvez également sélectionner une couleur. Et il vous recommandera tous les sites Web qui ont cette couleur sont de couleur rose. Et vous pouvez voir l'option, nous avons des options comme figma ou une base échappée sur la chair et notre jambe. Et dès le téléchargement, vous pouvez télécharger pour nos différents logiciels comme Figma ou une grande ville pour un magasin que je connais jambe. Et vous pouvez également télécharger votre propre design à partir d'ici. Nous devons d'abord nous inscrire pour cela. Bon, donc le prochain site est Behance. C'est donc un peu similaire. À partir de là, du domaine créatif, vous obtiendrez toutes les options. Ou si vous voulez savoir quelle langue vous lisez, commandez, créez une affiche, alors ce site Web vous aidera beaucoup. Vous pouvez voir : Sommes-nous de bonnes options comme directeur artistique, image de marque, illustration et alerte ? Et aussi. Nous sommes donc intéressés par les ondes d'interface utilisateur jamais conçues. Donc, j'obtiens ces choses. Vous pouvez également cliquer sur cette page Web pour en savoir plus. Comme si c'était en train de construire l'obésité. Vous pouvez suivre le Créateur. Vous pouvez voir comment la description correspondante. Si vous souhaitez filtrer quelque chose, vous pouvez également le faire. Disons que si vous voulez rechercher uniquement Figma, vous pouvez également le choisir chez moi ou vous pouvez le remplacer ici. Il n'affichera donc que les fichiers Figma. Comme celui-ci est un fichier Figma. Vous pouvez cliquer dessus et vous pouvez voir toute la description de cette application. Comme Dribble, vous pouvez également choisir une couleur. Et il vous montrera tout le site Web qui a cette couleur. Vous pouvez également filtrer en fonction votre emplacement comme cool et tout ça. Et vous pouvez voir dans la barre latérale que nous avons des options telles qu'un groupe, images de projet, des prototypes, des personnes et des moodboards. Supposons que vous vouliez photographier, disons que vous voulez voir certains produits, vous pouvez cliquer dessus. Et il montrera tous les prototypes. Et je vais vous permettre de télécharger votre propre page Web ou application sur ce site Web, mais vous devez vous y inscrire. Le troisième est le Groenland. Sur ce site, vous obtiendrez tout comme vous pouvez voir les catégories telles que comme vous pouvez voir les catégories telles que le commerce électronique organisé et je vous laisse également cliquer sur Afficher plus pour voir l'audit, comme le fitness, la notation musicale et tout ça. Ce n'est donc pas pour l'application. Vous pouvez voir Est-ce que nous obtenons des options telles que les pages de destination et les flux d'utilisateurs. Si nous cliquons dessus, je redirigerai vers la section page Web. Vous pouvez donc voir que nous obtenons toutes ces pages Web à partir d'ici. Vous pouvez également filtrer à partir d'ici. aimez quel type de site Web voulez-vous ? Supposons que vous souhaitiez créer un site Web pour le commerce électronique, vous pouvez sélectionner cette option appelée e-commerce est également un très bon site Web pour s'inspirer. Le quatrième est côté c. C'est aussi le même site que Dribble Behance. Donc, si vous voulez faire une recherche, vous pouvez le rechercher ici. Et vous pouvez également filtrer le nœud à partir d'ici. Par exemple, quel type de couleur voulez-vous ? Supposons que vous souhaitiez un site Web dans le programme d'études. Et on peut choisir le gris. Et cela vous montrera à quel point a une unité curriculaire déséquilibrée. Et vous pouvez également en filtrer certains comme si vous souhaitez créer un blog, choisir un blog, un e-commerce et une alerte. Il y a donc des mentions honorables comme des feuillets, ça s'appelle heures par semaine. Trois W's. Donc, dans ce chapitre, nous avons tous nos complexes gagnants comme celui-ci. Trois sont, je pense que nos modèles gagnants guerriers. Vous pouvez également soumettre votre propre audio de conception Web. Et dans ce menu de hamburgers, vous pouvez voir les fenêtres, les nominés et la collection. C'est aussi génial à observer, à s'inspirer. Le prochain site web honorable est donc inspiré de la vue. Cette absurde, surtout une volonté d'inspiration. De là, vous pouvez également filtrer comme Behance jubilant, comme les types de titres, comme les types de titres que vous voulez. Supposons que vous souhaitiez créer un site Web pour l'agence et le conseil, vous pouvez choisir cette option. Vous pouvez également voir toutes les options ici. Nous obtenons également une option appelée sujet. À partir de là, nous pouvons choisir différents sujets. Aussi la plate-forme et le corps de surtension. Dans la barre de recherche, vous pouvez rechercher un site Web spécifique, comme le commerce électronique. Et la dernière mention honorable a besoin d'une page. Supposons que vous soyez client. Certainement. Nous devons créer quelque chose comme une application d'une page. Et vous pouvez jeter un coup d'œil à ce site Web appelé « one-page low ». Donc, sur ce site, nous n'avons qu'une seule page, page Web comme celle-ci. Vous pouvez voir, ça a l'air vraiment cool. Guerrier. Je sais que vous devez être l'application d'une seule page. J'ai également appris à connaître l'un de mes amis. Il est également concepteur UX. Il m'a donc parlé de YouTube est une application d'une seule page. Ce sont donc tous les sites Web dont il faut s'inspirer. Supposons que vous vouliez construire quelque chose, mais que vous ne savez pas comment le construire. Vous pouvez jeter un coup d'œil à l'ensemble de ce site Web pour vous inspirer. C'est donc un portrait. Et je le ferai dans le prochain. 46. Outil et ressources gratuits pour créer des interfaces utilisateur géniales: Bienvenue de retour. Dans cette vidéo, je vais vous dire des ressources gratuites à utiliser pour vos projets. Cet article est disponible sur le numéro 2. Ce site Web est très utile si vous êtes programmeur ou développeur Web. Mais il ferait des choses comme nos choses littéraires technologiques, puis ce site Web, ça aidera beaucoup. Donc, sur ce site, j'ai acheté l'article. Dans cet article, nous avons plus de 50 outils ou ressources gratuits à utiliser pour nos projets, tels que photos et vidéos, palette d'électriciens, topographie et effet d'émission, iconographie en formes de motifs et mutilation. Vous pouvez voir que j'utilise site Web du DOE appelé pixels pour mes projets. C'est donc un site Web très utile pour utiliser des vidéos et des photos de stock. J'utilise également beaucoup ce site Web pour réaliser mes vidéos. Et vous pouvez voir d'autres options comme charbon et pour le théâtre et tout ça. Vous pouvez également consulter d'autres sites Web à partir d'ici. Et si vous le souhaitez, mais si vous avez une page similaire ou une image de personne et que vous voulez en supprimer l'arrière-plan. Vous pouvez utiliser ce site Web appelé à l'écran ainsi que cette carte absurde, grand round à distance. Parfois, les clients fournissent des images , mais nous n'avons besoin que de l'image de cette personne. J'utilise cette absurde Remove BG. Donc, ça m'aide beaucoup. Cette absurde est donc aussi vraiment cool. Il s'agit du site Web basé sur les droits de l'homme. Donc, quel site Web il fait, c'est qu'il va créer un visage aléatoire des gens. Donc, si vous voulez utiliser, exemple, supposons que vous construisiez une application de médias sociaux. Et cette application, vous avez une section histoire. Et vous voulez mettre des images de gens, puis vous pouvez utiliser cette absurde appelée genre. Laissez-moi vous dire une chose. Ce ne sont pas les vraies personnes. Ces images sont créées par AI. Il est donc très utile d'utiliser ces images. La prochaine ressource gratuite, c'est l'illustration. Je n'utilise donc pas le lot d'illustrations. Je n'ai utilisé que l'illustration dans mon projet, je pense, je vais vous montrer mon projet. Je n'utilise donc que l'illustration sur ce site Web. Vous pouvez voir l'illustration ici sur la deuxième page et sur cette troisième page. Pour cela, vous pouvez regarder cette carte absurde, papier ouvert, l'illustration smash de l'illustration sont libres de l'utiliser. Nous obtiendrons des options telles que SVG, SVG et PNG. Vous pouvez le télécharger dans ce format. Et aussi la nutrition de contrôle. J'ai utilisé ces images de ce site Web, à partir de cette illustration de contrôle. Nous avons également d'autres sites Web comme ouch et les produits automatiquement générés. Donc, le prochain libre contre dit, c'est les pellets, ceux-là. Donc, si vous souhaitez créer un site Web et votre client ne produit aucune palette de couleurs. Vous pouvez donc vous rendre sur ce site Web pour choisir une couleur. Vous pouvez créer votre propre couleur. Et j'aime bien un site Web appelé Color Hunt, alors je vous ai dit notre site Web, donc vous pouvez également le faire. J'utilise exactement la même palette de couleurs dans notre projet d'application de médias sociaux. Vous pouvez consulter tous les sites Web tels que l'espace colorimétrique, l'application valide, le colorable et le point de vente, et le lendemain. Donc cette tomographie, disons que votre client dit, je ne veux que la police spécifique. Ensuite, vous pouvez aller ce côté et rechercher cette police. Et vous pouvez le télécharger et l'utiliser dans vos projets. Et nous pouvons obtenir d'autres options comme Fonda, Arianna, être polices, fontes fille, profiter, échelle de temps et comment LED. Ensuite, les ressources pour les usages, l'iconographie. Vous pouvez donc télécharger une icône spécifique à votre projet à partir de ces sites Web . Imaginons que vous développiez une application de médias sociaux. Vous pouvez ensuite accéder à ce site Web et télécharger toutes les icônes à partir d'ici. Et toutes ces icônes sont gratuites, alors vous pouvez les utiliser dans votre projet. Nous avons donc des options comme icône stole, CSS, icône, icône, générateur de traduction, icône fatiguée. Vous pouvez voir ici les adoptions. prochaines ressources sont donc les brevets sur les navires. Donc, vous postulez à 12 comme un bouton spécifique sur votre page Web ou application, vous pouvez accéder à ces sites Web comme CSS Baton, passerelle contre la perturbation. Vous pouvez également créer un fichier personnalisable. Vous pouvez voir que j'ai utilisé des vagues comme cette page Web et BS1. Mais je l'ai créé en utilisant Figma. Mais si vous souhaitez créer un client, vous pouvez accéder à ce site Web appelé ghettos. Et si vous souhaitez créer un lui personnalisé, vous pouvez également utiliser ce site Web appelé vol La Mecque. Ok, c'est un site Web vraiment cool appelé Red Lines. Vous pouvez effacer les brevets vraiment cool de ce site Web. Il s'agit donc de ressources gratuites à utiliser. Je vais donc vous donner le lien de ce site Web dans les ressources, vous pouvez le consulter à partir de là. Ce sont donc toutes les ressources gratuites à utiliser pour vos projets. C'est tout pour la vidéo d'aujourd'hui, et je vous verrai dans la prochaine.