Apprendre Figma pour les débutants absolus 2022 | Shehar Yar | Skillshare
Menu
Recherche

Vitesse de lecture


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

Apprendre Figma pour les débutants absolus 2022

teacher avatar Shehar Yar, UI/Ux Designer

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

      1:04

    • 2.

      Utiliser les fichiers d'exercice

      0:44

    • 3.

      Qu'est-ce que Figma ?

      1:29

    • 4.

      Se inscrire à Figma

      1:20

    • 5.

      Configurer des polices dans figma

      1:49

    • 6.

      Comprendre l'espace de travail

      2:03

    • 7.

      Configurer le premier fichier dans figma

      1:10

    • 8.

      Travailler avec des cadres

      1:24

    • 9.

      Travailler avec des formes

      4:03

    • 10.

      Travailler avec l'outil Plume

      2:57

    • 11.

      Travailler avec le masquage

      3:58

    • 12.

      Travailler avec du texte et des polices

      2:58

    • 13.

      Travailler avec des composants

      2:47

    • 14.

      Travailler avec des contraintes

      1:54

    • 15.

      Versioning

      2:05

    • 16.

      Comprendre et créer des lignes directrices pour iOS

      2:22

    • 17.

      Aperçu de l'application

      0:28

    • 18.

      Écran d'éclaboussure d'interface utilisateur

      3:20

    • 19.

      Écran de connexion à l'interface utilisateur

      6:12

    • 20.

      Écran de récupération de compte

      1:08

    • 21.

      Réinitialiser l'écran

      1:15

    • 22.

      Écran d'inscription

      2:12

    • 23.

      Écran d'accueil 1

      6:56

    • 24.

      Écran de profil 1

      3:51

    • 25.

      Écran d'accueil 2

      0:52

    • 26.

      Écran de liste de produits

      1:01

    • 27.

      Écran de détail du produit

      6:00

    • 28.

      Écran de panier

      4:55

    • 29.

      Écran de paiement

      3:35

    • 30.

      Écran de commande

      4:09

    • 31.

      Écran de recherche

      2:45

    • 32.

      Écran préféré

      2:17

    • 33.

      Écran de profil 2

      3:37

    • 34.

      Modifier l'écran du profil

      3:10

    • 35.

      Écran de mes commandes

      2:56

    • 36.

      Écran de mes cartes

      1:30

    • 37.

      Ajouter l'écran de la carte

      2:11

    • 38.

      Mon écran d'adresse

      2:25

    • 39.

      Écran du centre d'aide

      2:27

    • 40.

      Prototypage

      10:30

  • --
  • 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.

527

apprenants

--

À propos de ce cours

Figma est l'un des outils de conception de l'industrie les plus étonnants et les plus importants utilisés pour l'interface utilisateur et le prototypage pour les applications Web et mobiles.

Dans ce cours, l'instructeur Shaher Yar vous apprendra à utiliser Figma et à concevoir une application Nike Shopping ainsi que à apprendre toutes les nouvelles fonctionnalités de Figma en démontrant un flux de travail complet de conception d'applications. En utilisant les ressources et les couleurs du fichier d'exercice, vous serez en mesure de configurer l'espace de travail et de commencer par créer plus de 15 écrans de l'application Nike Shopping App. Vous serez en mesure de créer une interface utilisateur impressionnante en appliquant des compétences artistiques qui amélioreront l'expérience utilisateur de l'application.

Dans la dernière étape, vous apprendrez à prototyper votre application en créant des connexions entre les cadres qui donneront vie à votre application, puis vous pourrez partager votre prototype avec vos amis, développeurs, clients et autres parties prenantes.

À la fin de ce cours, vous serez en mesure de créer des designs d'applications mobiles efficaces avec Figma.

Rencontrez votre enseignant·e

Teacher Profile Image

Shehar Yar

UI/Ux Designer

Enseignant·e

Hello, I'm Shehar.

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: Bonjour. Dans ce cours, nous allons construire une application du monde réel avec prototype en montage avec des fonctionnalités et une esthétique conçue. Je m'appelle Maria et je suis un designer UI UX. J' ai plus de cinq ans d'expérience dans l'industrie du design. Grâce à ce cours, je vais vous guider sur la façon de créer une application de shopping Nike dans FISMA avec le dernier principe de conception et l'esthétique du design. Scores est divisé en trois sections, en deux sessions FISMA, UI, UX section et Prototype. Dans l'intersection, nous verrons ce qui est sigma et comment utiliser ses caractéristiques. Dans la section UI UX, nous allons commencer à créer et structurer, bien que l'application Nike. Et à la fin, nous allons relier toutes les empreintes ensemble. Donc, il semble que le chevauchement. Et enfin, nous verrons comment partager avec d'autres membres de l'équipe sont des parties prenantes. Je n'ai pas à te montrer. Donc, sans plus tarder, commençons. 2. Utiliser les fichiers d'exercice: Dans cette vidéo, je vais vous montrer comment vous pouvez commencer avec des fichiers d'exercice. Les fichiers d'exercices de ce cours sont inclus dans cette conférence. Le fichier d'exercice que j'ai téléchargé contient un sigma s, C'est le fichier. Il contient tous les S qu'il est utilisé dans ce cours. Veuillez télécharger ce fichier afin que nous puissions continuer notre voyage en créant une application du monde réel dans sigma. Ce fichier d'exercice ne contient pas de fichier figure. Donc, pour cela, suivez simplement avec moi à travers cette clause. Donc vous savez comment vous pouvez créer votre propre projet Fichman. C' est tout pour cette vidéo. voit dans la prochaine vidéo. 3. C'est quoi Figma ?: Sigma est une application de conception d'interface utilisateur et UX basée sur un navigateur et principalement un outil de prototypage Web avec fonctionnalités hors ligne supplémentaires activées par les applications de bureau pour Mac OS et Windows est actuellement le principal outil de conception d'interface dans le industrie. Voilà la question. Y a-t-il beaucoup d'autres outils comme Adobe XD, sketch, Marvel, et bien d'autres que la raison pour laquelle nous utilisons sigma, la réponse est que les autres licences logicielles sont coûteuses par rapport à sigma. Parce que sigma est disponible gratuitement, vous pouvez simplement aller sur le site de démonstration, vous inscrire, et maintenant vous pouvez facilement utiliser sigma n'importe où et n'importe quand car il s'agit d'une application Web, bien que sa version de bureau soit également disponible, mais cela dépend du choix. Et aussi sigma est très facile à apprendre. Et si vous essayez, vous pouvez apprendre Friedman dans les sept à dix jours, vous pouvez maîtriser FISMA. La meilleure chose à propos de FDMA est de supposer que vous voyagez dans un autre pays et que vous n'avez pas votre ordinateur portable, vous pouvez facilement accéder à vos fichiers en vous connectant au portail Web via un autre ordinateur portable et accéder facilement à tous vos fichiers. Je pense que vous avez des connaissances sur le FDMA. A vous voir dans la prochaine vidéo, nous allons voir comment créer un compte sigma en ligne. 4. Inscription pour Figma: Pour vous inscrire à fema, il suffit d'aller sur www.sigma.com et de cliquer sur S'inscrire. Ici. Il suffit d'entrer votre adresse e-mail et mot de passe et de cliquer sur Créer un compte. Vous pouvez également vous inscrire avec vos informations d'identification Google. Après avoir cliqué sur l'inscription, il s'interroge sur mon nom et mon travail. Entrez quelques données. Et si vous voulez rejoindre la liste de diffusion de sigma, vous pouvez cocher cette case pour le moment, je le vis. Et après cela, appuyez sur Créer un compte. Maintenant, notre compte libéré est créé. Il est temps d'éditer l'équipe à mon Fichman. Je vais vous écrire membre de l'équipe d'essieux. Une équipe compte de nombreux membres. Vous pouvez facilement collaborer avec eux. Nous en discuterons plus tard. Maintenant, appuyez sur Suivant. Vous pouvez aussi le faire plus tard. En ce moment, il y a deux plans pour Pittman. Choisissez le plan, c'est SU deux. Mais si vous êtes un débutant, je vous suggère de choisir le plan de démarrage. Et maintenant, un compte fema est configuré avec succès. C' est tout pour cette vidéo. Rendez-vous dans la prochaine vidéo où nous allons comprendre l'espace de travail FISMA. 5. Configurer des polices dans figma: Dans cette vidéo, nous allons activer les téléphones locaux dans notre monstre MOM. Sinon, si vous voulez travailler avec des polices, vous n'aurez pas une grande sélection. De plus, si vous importez des éléments tels que des fichiers d'esquisse, ce texte peut ne pas fonctionner. Il peut ne pas avoir l'air droit dans Sigma. Lorsque vous êtes sur sigma.com, sur le site web, vous êtes déjà connecté. Venez dans le coin supérieur gauche ici avec un menu est, et venez aux paramètres du compte. Ici, vous allez voir beaucoup de choses que nous pouvons faire, y compris des choses comme travailler avec l'API, que vous pouvez développer. Fisma, faites toutes sortes de choses, applications connectées, et cetera. Ici, vous allez voir que nous avons tribunaux locaux ne sont actuellement pas activés par défaut. Cliquez sur Télécharger le programme d'installation pour activer un formulaire local. Il va le télécharger en fonction de votre système d'exploitation, qui ne peut pas télécharger un petit fichier. Et ce que tu vas faire, c'est que tu vas essentiellement l'ouvrir et l'installer. Je peux voir que j'ai le paquet juste là. Je vais juste cliquer dessus. Vous devez cliquer sur Continuer, aller et installer cela. Assurez-vous qu'il est installé. Je n'ai plus besoin de l'installateur. Et vous verrez maintenant que les polices locales sont activées. J' ai autant de forces disponibles à Pima. Sinon, vous travaillerez avec moins de téléphones. Il y a quelque chose que je veux m'assurer qu'on l'a fait avant de sauter ici. Maintenant, vous pouvez revenir aux derniers et voir tous les fichiers. L' étape suivante est que nous allons comprendre l'espace de travail FISMA. Alors à vous voir dans la prochaine vidéo. 6. Comprendre l'espace de travail: Bienvenue de retour. Dans cette vidéo, nous allons comprendre l'espace de travail ou Fichman. C' est notre page d'accueil. Par défaut, pigment nous donne trois projets. Vous pouvez le garder sont supprimés. C' est entièrement basé sur votre choix. Ensuite, en haut à droite, nous avons deux options. Cette option d'importation est utilisée pour importer différents projets fema directement pour adapter ma. Vous pouvez également importer vos fichiers d'esquisse en cliquant sur cet élément d'importation. Et à droite, nous avons un plus. Je peux simplement cliquer sur cette icône pour créer un nouveau fichier. Ici, en haut à gauche, nous avons une barre d'outils. Il contient des outils comme Rectangle, Ellipse, Stylo outil. Vous pouvez dessiner différentes formes à l'aide de ces outils. En dessous, il y a l'onglet superposé. Ici, vous pouvez voir toutes vos couches. L' étape suivante est l'étape de l'actif. Hé, vous pouvez stocker tous vos actifs que vous utilisez tout au long du projet. Et plus tard, ombragez avec les membres de votre équipe. Au centre, nous avons notre toile où nous pouvons créer et travailler avec nos sorties. Rappelez-vous, nos aéroports sont maintenant appelés cadres à Fichman. Donc, dans les leçons à venir, chaque fois que je dis cadre, cela signifie que je parle de citations d'art après cela. Mais le côté droit, nous avons un panneau Propriétés. Vous pouvez modifier les propriétés de différents éléments. Actuellement, il ne montre rien. Mais quand je dessine sur la toile, vous voyez toutes les propriétés sont maintenant visibles. Nous en discuterons dans les prochaines vidéos. Ensuite, en haut à droite, nous avons un bouton Partager pour partager ce projet avec d'autres membres de l'équipe, une partie avec les clients. Nous avons également un bouton de lecture pour prévisualiser ou un design et un bouton de zoom pour zoomer ou zoomer sur le cadre. Et cela nous amène à la fin de cette vidéo. voit dans la prochaine vidéo. Nous allons voir comment configurer notre premier fichier dans FISMA. 7. Configurer le premier fichier dans figma: Bienvenue de retour. Dans cette vidéo, nous allons configurer notre premier fichier en pragma pour configurer un fichier. Tout d'abord, a fait un nouveau dossier. Et ici, dans le haut du centre renommez le premier projet à votre projet d'équipe. Après cela, renommez ce fichier d'autorisation à l'application Nike en cliquant dessus. Les projets Sigma sont créés dans des cadres. Donc, pour créer un cadre, appuyez simplement sur la touche f de votre clavier, ou cliquez ici en haut à gauche. Après cela, ici sur le côté droit, nous avons beaucoup d'options pour les cadres. Nous pouvons également créer différentes applications pour téléphones, tablettes, Web et messages sur les médias sociaux. Mais pour ce cours, nous allons travailler avec des applications iOS. Donc, nous devons choisir iPhone 11 cadre pro max suggère de cliquer dessus. Et maintenant, un cadre est créé et testez comment vous configurez un fichier dans Fichman. Je te vois dans la vidéo suivante. Nous allons voir comment travailler avec les pages. 8. Travailler avec des cadres: Bienvenue de retour. Dans cette vidéo, nous allons voir comment travailler avec les cadres sont des pages. Fondamentalement, les cadres sont des écrans pour votre application ou site Web. Vous pouvez ajouter autant d'images que vous en avez besoin dans un projet. Alors juste après la touche F. Et voici beaucoup d'options pour vos amis. Suggérez que l'iPhone 11 pro max cadre à une autre image. Et maintenant, si nous voyons dans notre panneau Calques, les calques des cadres sont empilés. Si nous survolons ces couches, nous voyons que nous avons deux options. On peut enfermer en lui ou monter le cadre. En verrouillant le cadre signifie que vous ne pouvez pas le déplacer. Maintenant, pour renommer un cadre, suffit de double-cliquer sur les calques et de le renommer comme vous le souhaitez. En nommant le cadre, il est facile pour nous de trouver la sortie spécifique. Maintenant, si je clique sur le cadre, nous verrons toutes les propriétés de ce cadre. À partir du haut, nous avons des options d'alignement. Ensuite, nous avons l'option de coordonnées x et y. Voici les options de rotation et de rayon d'angle. Ensuite, nous avons des options de grille de mise en page , de remplissage et d'effet ainsi. Nous découvrirons toutes ces options au fur et à mesure que nous avancerons dans ce cours. voit dans la prochaine vidéo. Nous allons travailler avec différentes formes en sigma. 9. Travailler avec des formes: Bienvenue de retour. Dans cette vidéo, nous allons voir comment travailler avec différentes formes fournies dans sigma. Vous pouvez utiliser des formes pour créer différents éléments d'une conception. Donc, d'abord, dessinez le rectangle sur ce premier cadre. Vous pouvez modifier le rayon de bordure de ce rectangle en ajoutant une valeur dans l'onglet rayon d'angle. Vous pouvez également changer le coin des sites indépendants en cliquant ici et en entrant une valeur ici. Nous allons annuler cela en appuyant sur le contrôle C. Et maintenant, à partir de la fenêtre Propriétés, vous pouvez changer sa couleur ici et beaucoup d'options de couleur. Dans cette liste déroulante, vous pouvez ajouter une couleur linéaire, une couleur dégradée, des couleurs angulaires. Mais pour l'instant, nous allons nous en tenir aux couleurs unies. Ici vous pouvez ajouter une couleur hex en copiant Xcode. Ou si vous voulez travailler avec la couleur RVB, vous pouvez également le choisir en cliquant ici. C' est un 100% est l'opacité de la couleur. Si je change cela, vous pouvez voir que l'opacité de notre rectangle change également. Et ici, en bas, nous avons nos couleurs locales que nous avons utilisées dans ce fichier. Maintenant, si nous fermons ceci, nous pouvons ajouter plus rempli à ce rectangle en cliquant sur cette icône plus. Après cela, passons à l'AVC. Ici, vous pouvez ajouter un trait au rectangle. Vous pouvez augmenter la taille du trait et modifier son orientation à l'intérieur, à l'extérieur ou au centre. Si nous cliquons sur ces trois points, vous pouvez changer les majuscules, enchaîner le sanctuaire dans la bordure ou ajouter des tirets à cette bordure. Il ne suffit pas d'allumer le trait en cliquant sur cette icône. Après cela, travaillons avec des ellipses. Donc pour ça, dessinez juste des ellipses ici. Et si vous n'appuyez pas sur la touche Maj, vous ne pouvez pas dessiner un cercle parfait. Appuyez donc sur la touche Maj ou vesta art et maj enfoncée ensemble pour maintenir cette proportion de ces lèvres. Maintenant, si nous sélectionnons cette ellipse, vous voyez ce cercle blanc. Vous pouvez le déplacer vers la gauche pour dessiner des graphiques et saisir ce point central et le déplacer vers le bas pour dessiner une forme parfaite. Par graphiques. Après cela, dessinez un polygone. Et, et ici, dans ce polygone, vous pouvez changer le rayon d'angle de ce polygone en saisissant du haut et en le déplaçant vers le centre. Et si vous voulez augmenter ou diminuer ses coins, vous pouvez simplement l'attraper de ce coin droit et le déplacer vers le haut pour changer de coin. Vous pouvez également le faire en ajoutant une valeur ici dans le panneau des propriétés. Ensuite, c'est la star. Alors il suffit de choisir et de dessiner une étoile sur ce cadre. Maintenant, il y a trois cercles blancs sur l'étoile. Si vous tenez sur ces cercles, vous apprendrez d'abord à connaître leur but. Le premier est le rayon du coin. Le second est le ratio. Et le troisième est pour augmenter le nombre dans l'étoile. Remplissons ceci avec un peu de couleur. Et ça a l'air sympa. Et testez comment vous pouvez jouer avec des formes et enseigné différentes choses pour votre design. Dans la vidéo suivante, nous verrons comment l'outil stylo est utilisé dans Fichman. Alors on se voit dans la prochaine vidéo. 10. Travailler avec l'outil Pen: Bienvenue de retour. Dans cette vidéo, nous allons voir comment travailler avec l'outil stylo. L' outil plume est l'outil le plus important dans les graphiques. En utilisant l'outil stylo, nous pouvons concevoir des graphiques, créer des formes et des icônes, et bien d'autres choses aussi. Donc, tout d'abord, tout comme cet outil de stylo sur le dessus sont passés pic à partir de votre clavier. Et vous voyez que nous avons un stylo comme le sinus. Il bouge librement. Mais si vous appuyez sur la touche Maj, elle se déplacera en proportion. Maintenant, lorsque nous cliquons dessus, il crée un chemin. Puis un autre cliquez dessus à nouveau. Excellent soutien. Et quand nous cliquons au point de départ, appuyez sur Entrée, il se refermera et le vaisseau se crée. Maintenant, en cliquant sur ce film, vous pouvez ajouter une couleur de remplissage à cette forme. Vous pouvez également augmenter ou diminuer la bordure en cliquant ici. Faisons notre conception enum en cliquant avec l'outil plume. Et ici vous voyez, vous pouvez dessiner même des formes complexes avec un outil de stylo. Maintenant, ce sont des vaisseaux phares moins de terre, comment vous pouvez dessiner des courbes avec l'outil Stylo à partir de maintenant. Veuillez regarder la vidéo attentivement car c'est l'outil le plus important, non seulement sigma, mais aussi dans Photoshop. Illustrateur, XD aussi. C' est un outil un peu difficile, pratique unitaire pour maîtriser cet outil. Alors commençons les courbes par le logo tranquille ou Nike. Donc, tout d'abord, sélectionnez l'outil Plume et ici, cliquez à nouveau, cliquez dessus en dessous, et ne relâchez pas la souris. Cliquez avec le bouton gauche et déplacez votre souris vers la droite pour lui donner une courbe. Et maintenant, c'est incurvant la pièce. Mais à partir d'ici, nous avons besoin d'un chemin droit. Revenez donc et cliquez sur ce cercle pour choisir le tracé de la courbe. Et à partir d'ici, cliquez ici et fermez sans relâcher le bouton de la souris. Et déplacez votre souris vers le haut pour dessiner un parfait swish Nike. Rappelez-vous, si vous créez accidentellement un mauvais chemin, ne paniquez pas. Vous pouvez toujours à juste le chemin en cliquant sur ces cercles blancs et obtenir les poignées et les déplacer, vous voulez qu'ils soient. C' est très simple et facile. Et une fois que vous avez obtenu la forme, appuyez sur Entrée pour la remplacer par une forme appropriée à partir d'un tracé. Et maintenant, vous pouvez jouer avec elle à un décapants de couleur. Porter lui a aussi donné une ombre. Maintenant, vous avez des connaissances sur l'outil Plume. S' il vous plaît pratiquer cet outil autant que vous le pouvez car il vous aidera à concevoir vos conceptions complexes. C' est tout pour cette vidéo. se voit dans la vidéo suivante. Nous allons voir ce qui est le masquage et comment nous l'utilisons dans notre conception. 11. Travailler avec le masquage: Bienvenue de retour. Dans cette vidéo, nous allons voir comment travailler avec le masquage. Fisma nous permet d'importer un tas de types d'images dans votre projet de design. Nous pouvons importer des PNG, JPEG, SVG, donne, et bien d'autres. Dans cette vidéo, nous allons voir comment importer des images de votre PC vers FISMA et comment masquer des images avec des puces. Donc, tout d'abord, pour placer une image sur ce second cadre, venez ici. Et à partir d'ici, choisissez l'image de lieu sous cette liste déroulante rectangle. Vous pouvez également appuyer sur le raccourci contrôle Maj et k. Et maintenant une pop-up va venir. Choisissez l'image souhaitée. Je vais choisir cette image. Et maintenant, vous voyez un curseur est changé en une icône plus. Il suffit donc de cliquer à l'endroit où vous voulez placer votre image. Maintenant, notre image est placée. Redimensionnons cette image. Pour redimensionner cette image, il vous suffit d'appuyer sur les touches ALT et Maj pour indiquer si vous êtes à partir de votre clavier et de la déplacer vers le centre pour la réduire. Maintenant, placez-le correctement. Ici. Regarde le côté droit. Lorsque nous importons une image, nous pouvons changer son mode de fusion comme nous l'avons fait dans Photoshop. Et Sigma. L' image n'est qu'une nageoire. Vous pouvez le supprimer en supprimant son déversement. Vous pouvez ajouter différents effets à cette image, comme des ombres de trait. Et si vous voulez modifier les propriétés de cette image, il suffit de cliquer sur l'image. Et à partir de là, vous pouvez ajuster le contraste d'exposition et vous pouvez également modifier son ajustement dans les propriétés. Et maintenant, nous allons ajouter quelques images. Mais avant cela, nous allons cliquer sur cette grille de mise en page et ajouter deux colonnes, pourrait-il, et changer sa marge à 16. Maintenant, nous allons placer quelques rectangles ici et ensuite placer des images sur ces rectangles. Donc, d'abord, dessinez trois à quatre rectangles ici. En saisissant l'outil Rectangle. Alignez-les correctement. Maintenant, nous allons ajouter quatre images à ces rectangles. Donc collecteur, place, outil d'image ou appuyez sur la touche de contrôle Maj à partir de votre clavier. Et à partir d'ici, sélectionnez pour les images. Et maintenant, vous pouvez simplement cliquer, cliquer, cliquer, et cliquer dans ces rectangles pour placer les images automatiquement. Et maintenant que les images sont placées, mais elles sont surdimensionnées pour les réduire. C' est la touche ALT et double-cliquez sur l'image. Maintenant, attrape-le dans les coins, rétrécit pour le placer correctement. Et maintenant, ajoutons une ellipse ici. Et après cela, placez une image ici en appuyant sur l'outil d'image haut lieu. Et maintenant cette image est placée devant cette ellipse. Il est temps de mettre cette image dans cette ellipse. Il suffit de cliquer sur ce bouton de masse en haut du centre. Et maintenant je vais montrer est placé à l'intérieur de ces lèvres. C' est ainsi que vous masquez les images dans le shell. Et si vous voulez supprimer ce masque, il suffit d'appuyer une fois de plus sur le bouton de la souris pour supprimer ce masque. Et cela nous amène à la fin de cette vidéo. A vous voir dans la prochaine vidéo, on va travailler avec le texte et les polices. 12. Travailler avec le texte et les polices: Bienvenue de retour. Dans cette vidéo, nous allons voir comment travailler avec du texte et des polices dans sigma, vous pouvez utiliser toutes les polices Google. Mais d'abord, vous devriez activer les polices locales dans sigma. Pour activer les polices locales dans FDMA, allez aider un compte. Et à partir de là, choisissez le compte et le réglage. Et maintenant faites défiler vers le bas. Et ici, activez les formulaires locaux. Après avoir activé les téléphones locaux, vous aurez accès à quatre polices plus, qui sont par défaut disponibles dans Fichman. Il est donc temps de jouer avec du texte. Tout d'abord, prenez un outil de texte et écrivez du texte ici. Dis bonjour, comment vas-tu ? Et maintenant sur la droite, vous avez toutes les propriétés de texte. De là, vous pouvez changer la police à différents téléphones fournis si je choisis mon dessous, vous pouvez changer le poids de la police et la taille de la police. Si vous cliquez sur cette zone de police, appuyez sur la touche Maj et la flèche vers le haut de votre clavier. Vous pouvez augmenter la taille de la police avec un intime de dix. Et si vous n'appuyez pas sur la touche Maj, la police augmentera d'un incrément. Après cela aura la hauteur de la ligne et l'espacement des caractères. Ensuite, nous avons l'espacement des paragraphes et différentes options d'alignement que nous verrons au fur et à mesure que nous avançons dans ce cours. Et ici vous voyez ces trois points. Si vous cliquez dessus, vous disposez de nombreuses autres options d'édition de texte. Nous allons explorer cela lorsque nous créerons notre application nike dans les prochaines vidéos, Le conseil le plus important que je vais vous donner un test relatif est que supposons que nous avons trois couches de texte ici. Lorsque je clique sur ce texte de gauche, vous voyez qu'il est aligné à droite. Alors change-le en aligné à gauche. De même, enchaînez l'alignement du texte central au centre et juste à côté de la ligne droite. Ainsi, les tests sont beaux quand vous le mettez sur un bouton qui est soit placé au centre, à droite ou à gauche. La dernière chose que je vais vous dire est à propos panneau Calques vit dans la partie la plus importante de chaque conception. Donc, ici, dans le panneau Calques, organisez toujours vos calques. Ainsi, vous pouvez facilement trouver vos couches quand vous en avez besoin. Supposons que si vous sélectionnez deux ou plus de deux calques et appuyez sur le contrôle G, Vous pouvez regrouper ces calques et les renommer comme vous le souhaitez. Disons groupe de boutons. N' oubliez pas que les couches jouent un rôle important dans l'utilisation des conceptions Web et d'applications, car elles permettent de garder votre contenu balkanisé. Et cela facilite les couches finales et les personnes qui travaillent, et c'est ainsi que vous travaillez avec du texte et des polices dans FISMA. se voit dans la vidéo suivante. On va travailler avec des composants. 13. Travailler avec des composants: Bienvenue de retour. Dans cette vidéo, nous allons voir quels sont nos composants et comment travailler avec les composants. Les éléments utilisables dans le système de conception sont appelés composants. Dans la plupart des programmes, il est également appelé symboles. Mais dans FISMA, ces éléments réutilisables sont appelés composants. Donc, dans cette vidéo, nous allons explorer comment créer un composant d'édition. Tout d'abord, faisons une barre d'état en haut et un bouton en bas de notre deuxième cadre. Après cela, sélectionnez ces barre d'état supérieure, et à partir d'ici, cliquez sur ce Créer un composant. Vous pouvez également appuyer sur le raccourci clavier Alt et K. Et maintenant, vous voyez que c'est notre composant maître ou parent. Rappelez-vous, il existe deux types de composants. Maître, notre parent et un composant enfant. Actuellement, nous avons composant maître pour créer son composant enfant, copier et coller sur le troisième cadre. Et ici, vous voyez ce composant vide, qui signifie qu'il s'agit d'un composant enfant vers le haut première barre d'état. Maintenant, la meilleure chose ici est que si je change les propriétés du composant maître, disons la couleur en rouge. Ce changement se répercutera également sur son enfant. Alors que si je change la couleur de l'enfant, cela n'affectera pas son parent. Et si vous avez un grand nombre de composants enfants et que vous voulez connaître son composant parent. Pour cela, faites un clic droit sur cet enfant et à partir d'ici, sélectionnez simplement, allez au composant principal. Donc, cela vous déplacera directement vers le parent de cet enfant. C' est aussi simple que ça. Et si vous voulez que les modifications dans le parent ne reflètent pas dans son enfant, vous pouvez détacher l'instance, qui signifie que cela ne sera pas mis à jour si nous mettons à jour l'instance maître. Donc, pour ce faire, il suffit de cliquer avec le bouton droit sur l'instance enfant et de détacher l'instance. Et maintenant, tous les changements de composant mater ne refléteront pas sur l'enfant. Distance. Les composants de sigma peuvent être très puissants simplement parce qu'ils vous permettent de réutiliser du contenu. Donc, je vais suggérer que si vous avez des choses que vous allez réutiliser encore et encore, créez des composants à partir d'eux. La prochaine chose que nous examinerons, c'est que nous examinerons quelque chose qu'on appelle les contraintes. Alors vous voyez dans la prochaine vidéo. 14. Travailler avec des contraintes: Bienvenue de retour. Dans cette vidéo, nous allons voir comment travailler avec des contraintes à 1000 d'appareils sur le marché. Chaque appareil a sa propre résolution. Concevoir pour tous ces écrans serait une tâche mouvementée. Au lieu de cela, nous voulons que notre design soit flexible et réactif afin qu'ils puissent s'adapter aux nouveaux écrans. Essayons ça. Tout d'abord, ajoutez une ellipse de 200 par 200 et placez-la au centre. Maintenant, dans le panneau des propriétés, nous avons différentes options de contraintes sur l'axe des x. Nous pouvons ajouter des contraintes à gauche, à droite, à gauche et à droite, au centre et à l'échelle. Et sur l'axe y, nous pouvons ajouter des contraintes d'échelle supérieure, inférieure et centrale. Actuellement, nos ellipses sont définies par défaut. Si on vérifie ça, on va tuer cette image. Ici, vous voyez que nous mettons à l'échelle le cri vers le haut ou l'ellipse s'étirera avec elle. Alors que si nous étirons ce cadre vers la droite ou l'ellipse ne s'étirera pas avec elle. Si nous changeons aussi la contrainte de gauche, non ? Vous voyez, il s'étire vers la droite lorsque nous commençons le cadre et il ne restera pas à gauche cette fois. Et si nous vérifions cette position fixe lors du défilement, elle fixera sa position, que nous ayons étudié ou non. Et c'est à quel point il est facile d'appliquer des contraintes. Cette fonctionnalité est très utile dans la conception de sites Web réactifs, applications et d'autres conceptions. Donc, nous travaillons avec des contraintes est génial. Si vous devez mettre du contenu sur des écrans de taille différente ou échelle sont filtrés, par exemple. Et cela nous amène à la fin de cette vidéo. A vous voir dans la prochaine vidéo, nous allons voir ce qu'est Virgin and sigma apps. 15. Version, Versioning: Bienvenue de retour. Dans cette vidéo, nous allons voir ce qui est l'histoire persane et variante dans Fichman. Sigma offre très incontrôlée dans chacun des fichiers que vous créez. Et c'est un très bon moyen de pouvoir afficher la version précédente enregistrée, restaurer une version précédente, commenter les choses. Donc, dans cette vidéo, nous allons parler du contrôle de version pour voir l'historique des versions, assurez-vous que rien n'est sélectionné. Et vous pouvez voir le nom du fichier ici, cliquez dans la flèche à droite, et vous verrez afficher l'historique des versions. Maintenant à droite, vous voyez l'historique des versions. La meilleure chose à ce sujet est que lorsque vous faites des mouvements ou des changements ou des choses comme ça, il va l'enregistrer automatiquement pour vous. Si vous regardez en arrière, vous allez voir toutes les différentes fois où vous avez fait des choses. Et si vous cliquez sur l'un de ces précédents, vous verrez va vous montrer à quoi ça va ressembler ici. Maintenant, ça nous donne juste un aperçu. Si nous voulons vraiment faire de cette version cette conversion. Si vous venez à l'ellipse ici, vous pouvez voir la restauration de cette version. Vous pouvez également le dupliquer ou le copier lien ou dispersion nommée. Disons que vous testez une nouvelle fonction dans une conception d'application et que vous avez nommé ce brillant dire, tester menu latéral. Ajoutez une description si vous le souhaitez. Et frappons sur Enregistrer. Cela permettra aux autres membres de l'équipe de voir que la charia teste le menu du site. Maintenant, vous pouvez l'ajouter cette version info. Disons que le menu hamburger est terminé. Et maintenant, vous complétez cette version info aussi. Donc, c'est juste un moyen pour nous de collaborer avec les gens et de leur dire ce que nous faisons et ce que nous regardons. Et cela nous amène à la fin de cette vidéo. Rendez-vous dans la prochaine vidéo, nous allons voir quelles nos directives iOS et comment les utiliser dans notre prochain projet d'application Nike. 16. Comprendre et créer des directives pour iOS: Bienvenue de retour. Dans cette vidéo, nous allons voir quelles sont lignes directrices et comment les utiliser dans notre prochain projet d'application Nike. Les lignes directrices sont un ensemble de recommandations sur la façon d'appliquer les principes de conception pour offrir une expérience utilisateur positive. Consignes d'utilisation des concepteurs pour créer des conceptions convaincantes et répondre et dépasser les besoins de l'utilisateur. Ce cours se concentre principalement sur les directives iOS. Donc, nous ne couvrons pas le matériel ou les lignes directrices Android dans ce cours. Commençons donc cette vidéo en créant un système de lignes directrices de conception pour notre prochain projet Nike Air. Pour créer une ligne directrice de conception. Tout d'abord, créez un cadre. Maintenant, nous allons ajouter des règles dans ce cadre. Donc, pour ajouter des règles, pester, raccourci clavier, Maj R pour activer les règles. Et maintenant, prenez deux règles de la gauche et plus une à droite et une à gauche avec un espacement égal de 16 pixels. Pour ajouter des règles précises, dessinez un rectangle ici, changez sa couleur en noir pour qu'il soit visible. Et maintenant changer sa largeur à 16 pixels et aligner les règles avec ce rectangle. De même, déplacez ce rectangle au centre supérieur et changez sa hauteur à 44 pixels. Et maintenant, plus un autre souverain ici. Déplacez ce rectangle vers le bas et ajoutez une autre règle ici. Cette première partie concerne la barre d'état de l'iPhone. Et la deuxième partie est pour le titre et le bouton retour. Déplacez maintenant cette ville rectangle et ajoutez deux règles ici, une pour l'icône de l'indicateur d'accueil et une pour le menu à onglets. Bénissez-le, avec le même espacement en bas. Et maintenant, nos directives pour iOS sont créées avec succès. J' ai fourni ce fichier avec ce cours, sorte de le télécharger et de l'utiliser. Il inclut également la police, les images, icônes et les couleurs que nous utilisons dans notre projet. Alors s'il vous plaît télécharger ce fichier et dans les prochaines vidéos, nous allons commencer à obtenir l'application Nike dans Fichman afin que vous sachiez comment obtenir une véritable accumulation dans FISMA. C' est tout pour cette vidéo. On se voit dans la vidéo suivante. 17. Aperçu de l'application: Bienvenue quelques minutes supplémentaires. A partir de cette vidéo, nous commencerons à créer notre application du monde réel dans FISMA. L' application que nous allons construire est application Nike panier d'achat d'où vous pouvez acheter différents types de chaussures. Et aussi, nous allons lier les écrans pour créer une interaction entre les écrans de l'application Nike. Donc, il ressemble à une application du monde réel. Donc, dans la prochaine vidéo, nous allons créer notre écran de démarrage de l'application. C' est tout pour cette vidéo. se voit dans la vidéo suivante. 18. Écran d'éclaboussure de UI: Bienvenue à ce sujet. Dans cette vidéo, nous allons créer l'écran de démarrage de l'application. Les fichiers d'exercice que j'ai fournis contiennent toute la police et la typographie. Donc, tout d'abord, définissons ça dans notre fichier de démonstration. Sélectionnez la couleur un par un. Et ici, sur le côté droit, cliquez sur ces points colorés Phil. Et à partir d'ici, cliquez sur cette icône plus pour créer nos styles de couleurs et lui donner un nom aussi. Disons que le hachage triple à triple à. Maintenant, cliquez sur ce bouton Créer un style. De même, encore une fois, appuyez sur le bouton plus et ajoutez les couleurs restantes à cette liste. Maintenant, nos couleurs sont placées dans les styles locaux. Ajoutons également la police au style local. De même, faites la même chose que nous l'avons fait avec les couleurs. Cette fois au nom de la police avec leur taille, nom S. Copiez le nom de la police. Cliquez sur ces portes, cliquez sur l'icône plus, et maintenant collez ce texte pour que nous sachions qu'il s'agit d'un titre de 49 points. Le même processus avec toutes les autres polices également. D' ici, j'accélère la vidéo. Et maintenant, si je sélectionne ce texte sur la droite, nous voyons tous nos styles locaux que nous allons utiliser dans l'application Nike. Et maintenant, commençons à créer l'écran de démarrage pour notre application. Tout d'abord, cadre populaire qui est fourni avec ce cours Exercice Fichiers. Et maintenant, nous allons changer ça en écran de démarrage. Tout d'abord, menez la barre de titre et le menu tapé. Après cela, double-cliquez sur le cadre dans le panneau Propriétés et renommez-le en un écran de démarrage. C' est une très bonne technique pour renommer votre cadre afin que vous puissiez travailler avec elle facilement. Maintenant, sélectionnez l'outil Rectangle et dessinez le rectangle sur ce cadre et changez sa couleur en couleur foncée. Et ici, le panneau Propriétés, déplacez ce rectangle vers le bas et changez son nom en Packer. Comment cela a-t-il changé la couleur de l'indicateur et de la barre d'état en blanc ? Donc ils ont l'air visibles. chaud qui importent le logo Nike à partir des fichiers d'exercice et le coller ici et aligner le centre horizontalement et verticalement. Maintenant, la bonté créée, il y a de l'espoir pour cette vidéo. se voit dans la vidéo suivante. 19. Écran de connexion UI: Bienvenue à l'excellence. Dans cette vidéo, nous allons créer un écran de connexion. Tout d'abord, copy configure prim et le déplace vers la droite en appuyant sur la touche all. Maintenant il suffit de copier le logo Nike et de le déplacer ici. Rétrécir à environ 78 par 28. Et maintenant Cellectis barre de titre et ce local en appuyant sur la touche Maj et aligner son centre horizontalement et verticalement. Maintenant, il suffit de supprimer ce titre par. Et après cela, faites une ellipse d'environ 220 par 220. cela, l'art et le déplacer ensemble et faire une copie de cette ellipse et rétrécir vers le bas à environ 166 par 1-6, 5-6. Maintenant il suffit de laisser les deux et de les aligner Centre. Et il suffit de changer la couleur des deux ellipses à cette troisième couleur de notre liste. Après cela, changez l'opacité de l'ellipse externe à 20%. Donc ça a l'air sympa. Et regroupez-les ensemble en sélectionnant les deux avec la touche Maj et appuyez sur la touche G. Maintenant, placez-les simplement moins 90 à la sortie et moins 80 à l'axe y. Et après cela, dans le panneau Propriétés a renommé ce groupe en Groupe Ellipse et déplacez-le vers le bas dans le panneau Propriétés. Maintenant juste pressé à Tiki et séché connexion et changer son téléphone pour connaître Nieto et sa taille à 40 demi-conseil. Et voici changer sa largeur, 23 AD2 et sa hauteur à 109, et placez-le au centre. Après cela, alignez le texte au centre. Et maintenant, déplacez-le vers le haut avec une marge supérieure de 25 pixels. Après cela, modifiez le calque de texte, à droite. Entrez votre adresse e-mail et votre mot de passe. Modifie la police, le tour, la police de l'application et sa taille à 16, semi-gras, et placez-le avec une marge supérieure de 0. Maintenant changer sa largeur à 382 et sa hauteur h2, 44, et sa couleur à la troisième forme de courbe de la bibliothèque. Après cela, ajoutons des champs de connexion pour gagner notre temps. Il suffit de copier cela à partir des fichiers d'exercice et de le coller ici. Et il suffit d'organiser ces champs correctement et de taquiner la police pour connaître l'nato et la taille de la police à 16 et de regrouper ces champs également. Après cela a changé la couleur de ce mot de passe oublier texte, couleur de thème fluide. Maintenant, il est temps d'ajouter un bouton de connexion. Alors dessinez un rectangle d'environ 350 par 44, changez son rayon de bordure à 20. Alignez son centre horizontalement, et remplissez-le d'une couleur foncée pour notre bibliothèque. Maintenant, appuyez sur Tiki et écrivez, connectez-vous sur ce fardeau et changez son téléphone à 16 ennuyé supplémentaire. Après cela, changez la couleur du texte en couleur blanche. Affiche maintenant ce bouton avec une marge supérieure de 50 pixels. Après cela, appuyez sur cette zone de texte Tiki et sombre. Et ici, n'avez pas d'inscription à un compte. Modifié la police de ce premier texte en 16, semi-gras. Et ce texte d'inscription2, 16, extra gras. Et aussi changer sa couleur et lui donner un sous-jacent, PAS seulement une ligne, tout ce texte centre verticalement et placez-le avec une marge supérieure de 20 pixels. Maintenant, faites une copie de ce texte, déplacez-le de 30 pixels vers le bas et renommez-le en largeur de connexion. Après ce point égale lignes de 116 pixels et placez une ligne à gauche et une à droite avec un espacement de 16 pixels à partir des sites. Et maintenant, sélectionnez ces lignes et ce texte et alignez-les verticalement. Et changez également la couleur du trait à cette forme de couleur C6 d'une liste. Et ici et ses éléments de médias sociaux, icônes de médias sociaux cobia des fichiers d'exercice et collé ici. Après cela, placez-les avec une marge supérieure de 30 pixels. Enfin, déplacez ce texte vers le bas et remplacez-le par skip. Maintenant, le texte, aligner le centre et et change de couleur, la couleur de la lumière bleue. Et renommez ce cadre en écran de connexion. Et cela nous amène à la fin de cette vidéo. se voit dans la vidéo suivante. 20. Écran de récupération de compte: Bienvenue quelques minutes supplémentaires. Dans cette vidéo, nous allons créer un écran de récupération de compte. Tout d'abord, copiez le cadre précédent et déplacez-le vers la droite en appuyant sur tous les Qis. Et après cela, renommez ce cadre en écran de récupération de compte. Après cela, renommez cette connexion en récupération de compte. Et ce deuxième lien X2 I reset sera envoyé sur votre email. Après cela, supprimez ce champ e-mail et ce texte de mot de passe plié, et maintenant juste renommé ce sourd pour entrer votre e-mail. Après ça, nous allons descendre. Et ici, menez tout ça sauf avec ce bouton. Et enfin, renommez ce bouton pour envoyer. Et maintenant notre écran est terminé. se voit dans la vidéo suivante. 21. Réinitialiser l'écran: Bienvenue aux étudiants. Dans cette vidéo, nous allons créer un écran de réinitialisation. Tout d'abord, copiez l'écran de connexion et déplacez-le vers la droite en appuyant sur la touche ALT et renommez-le pour réinitialiser l'écran. Après cela, renommez cette connexion pour réinitialiser et ce second texte pour entrer votre nouveau mot de passe. Et maintenant renommé ce champ e-mail pour entrer nouveau mot de passe et mot de passe Tx2 et confirmer le mot de passe. Maintenant, juste mis ces mot de passe oublié et tout cela en dessous de ce bouton passé laisser tout cela et en appuyant sur supprimer la touche de votre clavier. Enfin, renommez ce texte de bouton pour réinitialiser. Aligner son centre correctement. Et maintenant notre écran est terminé. se voit dans la vidéo suivante. 22. Écran d'inscription: Bienvenue chez les exposants. Dans cette vidéo, nous allons obtenir un écran d'inscription. Tout d'abord, copiez l'écran précédent et déplacez-le vers la droite en appuyant sur la touche ALT et renommez-le pour l'écran d'inscription. Après cela, renommez cette réinitialisation pour vous inscrire. Et ce second texte pour créer d'abord votre compte. Maintenant, nous allons ajouter deux champs supplémentaires ici. Alors déplacez ce bouton ici. Il suffit de déplacer ce deuxième champ vers le bas en passant la touche ALT et Maj ensemble et en faire deux copies. Après cela, renommez ce premier champ en nom complet, deuxième champ en adresse e-mail. Troisième champ au mot de passe. Ne change pas le quatrième. Maintenant, nous allons ajouter une icône avec ces champs de mot de passe. Alors prenez simplement l'icône des fichiers d'exercice et poussez-la ici. Et maintenant les voler correctement. Après cela, copiez cette ligne de texte à partir des connexions et du patient ici, déplacez-le sous ce bouton et changez le texte pour avoir déjà un compte. Connectez-vous. Enfin, il suffit de changer l'espacement du texte et des boutons à 20 pixels. Et déplacez ces deux-là. Et déplacez ces deux vers le haut avec une marge supérieure de 50 pixels. Et maintenant notre écran est terminé. se voit dans la vidéo suivante. 23. Écran d'accueil 1: Bienvenue de retour. Dans cette vidéo, nous allons créer un écran d'accueil. Il s'agit de l'écran d'accueil avant qu'un utilisateur ne se connecte à l'application. Donc, tout d'abord, copiez l'écran précédent et déplacez-le vers la droite en appuyant sur la touche ALT, puis renommez-le en écran d'accueil un. Après cela, il suffit de supprimer tous ces éléments à l'exception de ce logo et de la barre supérieure. Et maintenant il suffit d'appuyer sur Tiki et d'écrire des catégories. C' est 0.222 et placez-le avec une marge supérieure de 20 pixels. Maintenant, laissez cet outil particulier et dessinez un rectangle d'environ 85 par 100. Après cela, dessinez une ellipse d'environ 66 par 66. Alignez-les au centre verticalement et horizontalement. Maintenant, faites trois copies de ceci et placez-les avec un espacement égal entre eux. Maintenant, le pester Tiki et le droit Snickers. L' étain est le téléphone à 12, semi gras. Et placez-le à l'intérieur de ce premier rectangle avec une marge supérieure de dix pixels. Ensuite, faites-en quatre copies. Après cela, il est temps d'ajouter des images à ces ellipses. Sélectionnez ces quatre ellipses. Et à partir de cette barre d'outils, choisissez l'image de lieu, et dans les fichiers d'exercice, choisissez les images souhaitées. Et maintenant, cliquez sur ce cercle pour placer votre image de désir dans ce cercle. Pour adapter cette image dans ces lèvres. Appuyez dessus et double-cliquez sur cette image pour entrer dans cette image. Et à partir d'ici, correctement. Ensuite, sélectionnez ces quatre ellipses et donnez-leur un trait de couleur claire. Changez sa taille à deux. Et voici dix noms aussi. Maintenant, changez cette première ellipse et la couleur du texte en couleur de thème. Donc, il semble proéminent et l'utilisateur sait que cette catégorie est actuellement sélectionnée. Et maintenant laissez tout cela et placez-les avec une marge supérieure de 30 pixels. Après cela, masquez ces rectangles en cliquant sur l'icône dans le panneau Propriétés. Maintenant, nous allons ajouter des produits ici. Donc, tout d'abord, déplacez ce texte au-dessus vers le bas. La marge supérieure de 30 pixels et renommez-la pour drainer les chaussures. Après cela, dessiner rectangle d'environ 181, mais 211, changer son rayon de bordereau à 20. Dessinez un autre rectangle d'environ 139 par 107, placez-le avec une marge de 15 pixels et changez également son rayon de bordure. Après cela, copiez, l'icône du cœur des fichiers d'exercice. Faites-le composant apparent en cliquant sur ce bouton de composant et en faire une copie et placez-le ici. Après cela, geeky allié aux changements de nom de produit, téléphone à 16 Conseil. Bénissez-le, avec une marge gauche de dix et une marge supérieure de cinq pixels. Après cela, faites deux copies de ce texte. Maintenez-le et inscrivez le nom de la deuxième catégorie dx2. Et le troisième texte au prix. Changez également le deuxième téléphone x pour rester en gras, et changez cette première couleur de rectangle en couleur claire avec 30% d'opacité de notre liste. Après cela, nous allons ajouter un bouton de panier. Dessinez donc un rectangle d'environ 41 par 41. C' est le rayon de la frontière à cinq à partir de trois côtés, mais 20 à partir du bas à droite. Placez-le correctement. Et ça va s'en aller. Tim Keller. Ajoutez également l'icône plus sur ce bouton. Copiez l'icône des piles d'exercice et placez-la dessus. Cela l'a mis correctement structuré Israélien, faire trois copies de celui-ci et le placer sur ce cadre correctement. Ici, en bas. Ajoutons notre menu dix. Copiez cela à partir des fichiers d'exercice et collez-le ici. Enfin, nous allons ajouter des images, aller des rectangles, et enchaîner les prix et les noms des articles. C' est donc un long processus. Donc j'accélère le processus ici. Et maintenant notre écran est terminé. Décimal pour cette vidéo. se voit dans la vidéo suivante. 24. Écran de profil 1: Laissez les minutes supplémentaires. Dans cette vidéo, nous allons créer un écran de profil, un. Il s'agit de l'écran de profil avant qu'un utilisateur ne se connecte ou s'abonne à l'application. Donc, tout d'abord, copiez l'écran précédent et déplacez-le vers la droite en appuyant sur la touche ALT et renommez-le en écran de profil. Un. Après cela, menez tout cela sauf cette barre supérieure et ces onglets. Et maintenant il suffit de dessiner un rectangle d'environ 404 par 100 pour changer sa couleur à la quatrième charge avec 20% d'opacité et changer son rayon de bordure. Coins en bas à gauche et à droite à 40. Après ce sénat derrière cette barre supérieure dans le panneau des couches. Après cela, appuyez sur ce Tiki et le plug-in droit s'affrontent, créez un compte, changez son téléphone à 18 et placez-le avec une marge inférieure de 25. Maintenant en a fait deux copies, les a déplacés vers le bas. Tinder téléphone à 16, régulier et renommer les deux premiers, mes ordres. Et le deuxième centre d'aide X2. Et maintenant, nous allons ajouter des icônes ici. Donc il suffit de saisir les éléments des fichiers d'exercice. Ou peut-être que vous pouvez simplement ajouter cet appartement. Je peux brancher vos icônes fréquentes et importer à partir de là. Après avoir importé les icônes, il est temps de les placer correctement. Alors prenez juste un rectangle d'environ 33 par 29, faites-en une copie et déplacez-le vers le bas. Placez maintenant les éléments sur ces rectangles. Imprimez les icônes à l'avant et alignez-les correctement. Regroupez maintenant ces icônes avec ces rectangles et alignez correctement ce texte avec ces icônes. Et changez l'espacement interne entre le texte et les rectangles à 20 et l'espacement horizontal à 40 et moins en appuyant sur 24. Enfin, faites une copie du texte ci-dessus, Moby down, renommez-le en termes et conditions. Et ces rectangles en cliquant sur cette icône dans le panneau Propriétés. Et maintenant, changez la couleur de cet élément de profil de l'onglet inférieur en couleur de thème afin qu'un utilisateur sache que le contrôle se trouve sur l'icône Profil. Et maintenant notre écran est terminé. C' est tout pour cette vidéo. se voit dans la vidéo suivante. 25. Écran d'accueil 2: Bienvenue aux étudiants. Dans cette vidéo, nous allons également créer un écran d'accueil. Il s'agit de l'écran après que l'utilisateur se connecte à l'application. Copiez d'abord le numéro d'écran quatre et déplacez-le vers la droite en appuyant sur la touche ALT. Et maintenant renommez-le à l'écran d'accueil. À. Après cela, il suffit d'ajouter une icône de panier, copier à partir des fichiers d'exercice, et de le coller ici, de l'aligner correctement. Et maintenant, changez ces deux couleurs d'icône féroce en une couleur de thème. Et c'est notre utilisateur. Ajoutez ces éléments à sa liste préférée et notre skin est terminé. C' est tout pour cette vidéo. se voit dans la vidéo suivante. 26. Écran de liste de produits: Bienvenue de retour. Dans cette vidéo, nous allons créer un écran de liste de produits. Donc, tout d'abord, copiez l'écran précédent et déplacez-le vers la droite en appuyant sur la touche Alt, gagnez-le dans l'écran de liste des produits. Après cela, supprimez cette section de catégorie et ces étapes. Et maintenant il suffit de déplacer le reste vers le haut avec une marge supérieure de 20 pixels. Non seulement rebaptisé cette rubrique deux baskets. Et ici, il suffit de remplir cet espace vide avec ces articles ci-dessus. Enfin, il suffit d'ajouter une flèche de retour ici. Il suffit donc de copier cela à partir des fichiers d'exercice et de le coller ici et de le placer correctement. Et maintenant les écrans sont terminés. Il y a de l'espoir pour cette vidéo. se voit dans la vidéo suivante. 27. Écran complet sur le produit: Bienvenue S. supplémentaire Dans cette vidéo, nous allons créer un écran de détail du produit. Copiez d'abord l'écran précédent et déplacez vers la droite en appuyant sur la touche ALT et renommez-le à l'écran de détail du produit. Après cela, supprimez cette section Snickers, et remplissez l'arrière-plan avec la quatrième couleur d'une liste avec 20% d'opacité. Après cela, aux rectangles sur ce cadre. Sénat derrière le topper et le remplir de couleur radiale blanche. Après cela, déplacez-le de ces poignées et placez-le ici correctement. Pas seulement importer l'image de la chaussure ici. Copiez cela à partir des fichiers d'exercice et placez-le ici correctement avec une marge supérieure de 20 pixels. Pas seulement dessiner pour des ellipses de 15 sur 15. Bénissez-les avec un espacement de 15 pixels et une marge supérieure de 20 pixels. Et les regrouper et les aligner correctement Centre. Non seulement enlevé un remplissage de ces trois ellipses et leur donner la même couleur de trait. Après cela, dessinons un rectangle autour de 414 par un 5.3.2, changez sa couleur en blanc et son rayon de coin supérieur à 40. Et placez-le ici avec une marge supérieure de 30 pixels. Maintenant, nous allons ajouter quelques détails sur le produit ici. Donc, pour la dette, d'abord, écrire la taille, faire 13 copies de ce texte. Et maintenant, enchaînez le premier texte à 18. Pour. Maintenant, je vais changer ces calques de textes. C' est un long processus, nagé accélérant le processus ici. Maintenant, j'ai changé ces calques de texte. Laissez-moi vous dire que nous n'utilisons pas de couleur noire pure. Il suffit de remplacer la couleur noire par notre plat à emporter de notre liste. Et ce paragraphe texte à cette troisième courbe de notre liste. Et maintenant, nous allons arranger tout ça. Donc ça a l'air sympa. Tout d'abord, dessinez des rectangles autour de 55 par 25. Modifiez le rayon de bordure à cinq et placez-les derrière ces calques de texte. Après cela, alignez ces calques de texte avec ces rectangles. Maintenant, changez la deuxième couleur du rectangle en couleur de thème, et sa couleur de texte en blanc. Après cela, alignez ces rectangles dans un espacement interne de 20 pixels entre les rectangles et de 30 pixels. A partir de ce titre de test, une marge supérieure de 50 pixels ainsi. Et maintenant il suffit de cacher les rectangles restants. Maintenant, nous allons additionner compteur de quantité. Donc, dessinez un rectangle d'environ 150 par 35, change le rayon de port à cinq. Et il est coloré à la couleur claire. Dessinez maintenant deux rectangles d'environ 46 par 33 heures. Ce rectangle change leur rayon de bordure à cinq de tous les côtés et leur couleur à combattre. Alignez-les correctement. Maintenant fait deux copies de ce texte et les changer en moins et plus. Avec une taille de 30, régulier à ce texte central à 22 semi-bateau. Remarqué comme ce bouton entier et groupez-le comme un seul. Et après cela, alignez son centre verticalement avec ce texte et placez-le avec une marge supérieure de 20 pixels. Maintenant, j'accélère le processus ici parce que je suggère cet espacement du texte à 2030 pixels. Après cet espacement, il est temps d'ajouter des étoiles de notation et un bouton ici. Il suffit donc de copier les étoiles des fichiers d'exercice et de les coller ici. Et aussi le bouton, car il s'agit d'un bouton prédéfini fourni dans les directives iOS. Enfin, je vais copier ce bouton, le réduire à environ 160 par 44, et le placer derrière ce texte préféré. Changement. Il est de couleur à couleur claire avec 30% d'opacité. Et ajoutez une icône préférée avec elle. Copiez l'icône préférée de l'écran précédent et placez-la ici correctement. Et maintenant notre peau est terminée. Leur recherché pour cette vidéo. se voit dans la vidéo suivante. 28. Écran de panier: Bienvenue quelques minutes supplémentaires. Dans cette vidéo, nous allons créer un écran de panier. Donc, tout d'abord, copiez cet écran précédent et déplacez-le vers la droite en appuyant sur la touche ALT et renommez-le à l'écran actuel. Sur cela, supprimez tout cela, et ajoutez deux rectangles d'environ 382 par 147 et changez leur rayon de bordure à 15 et leur couleur au blanc. Après cela, copiez, le troisième rectangle de l'écran précédent, réduisez-le à environ 404 par quatre pieds cinq. Maintenant, on va placer les choses sur ces rectangles. Tout d'abord, parsemez deux rectangles d'environ 100 par 100 sur ces enchevêtrements vitaux. Et maintenant, insérez des images des produits dans ces deux. Et la mascotte avec la forme. Maintenant, il suffit de copier le produit en texte intégral à partir de l'écran précédent et de le coller ici et de l'aligner correctement. Après cela, alignez ces calques de texte à gauche avec un rythme à gauche de 20 pixels. Et ici, l'espacement est de cinq pixels à partir de la droite. De même, ajoutez un autre produit. Ici. Je suis juste en train d'accélérer le processus ici. Maintenant passons à la partie inférieure ici. Tout d'abord, pester Tiki et l'adresse de livraison droite. Placez-le avec une marge supérieure de 30 pixels. Après cela, faites neuf copies de ce texte et déplacez-les vers le bas. Maintenant, remplacons tous ces calques de texte. Donc à partir d'ici, j'accélère le processus. Donc tu ne t'ennuies pas. Maintenant, je suis de retour. Après ça. Pointez deux lignes pointillées d'environ 150 pixels ici. Et ici, dans le panneau des propriétés, cliquez sur ce trait, a changé ses tirets en, pour lui donner un joli look. En dehors de ça. Copiez le bouton Favoris du patient de l'écran précédent ici et modifiez son texte pour le modifier et l'aligner correctement au centre. Ce vaisseau. Après cette ellipse d'environ 16 par 16. Remplissez-le avec la couleur de notre équipe. De la dendrite. Modifiez la taille de police à dix, placez-la sur cette ellipse et alignez-la correctement. Regroupez-le aussi ensemble. Et ici, il suffit de placer ceci sur cette icône de panier correctement. Enfin, il suffit de copier le fardeau de l'écran précédent et de le coller ici et renommer son texte pour continuer à extraire. Et maintenant l'écran est terminé. C' est tout pour cette vidéo. se voit dans la vidéo suivante. 29. Écran de paiement: Bienvenue aux étudiants. Dans cette vidéo, nous allons obtenir un skin de paiement. Donc, tout d'abord, copiez l'écran précédent et déplacez-le vers la droite en appuyant sur la touche ALT, puis renommez-le en écran de paiement. Après cela, supprimez toute cette partie supérieure. Et maintenant il suffit de dessiner un rectangle d'environ trois par 70. Rayon frontière de Qaïda d'environ 20. Et Kavita couleur blanche. Maintenant, juste mieux à Tiki et monter méthode de paiement. Sa police doit être 22 caractères gras. Il ne suffit pas de le placer avec la marge supérieure et inférieure de 20 pixels. Après cela, faisons une copie de celui-ci en appuyant sur la touche ALT et déplacez-le vers le bas, changez sa police, et renommez-le pour graduer carte de débit slash. S' il vous plaît avec la marge gauche de dix pixels et aligner son centre verticalement. Après cela, dessinez une ellipse d'environ 44 par 44. Changez sa couleur en couleur claire avec 30% d'opacité. Après cela ajouté coche sur cette ellipse. Copiez cette coche à partir des fichiers d'exercice et placez-la ici. Changez également sa couleur à la troisième couleur de notre API de liste qui me permet de copier ces rectangles, les déplacer vers le bas avec un espacement de 20 pixels. Et maintenant, juste les couleurs et le texte de Tinder. Ici. J'accélère le processus. Maintenant, nous allons en bas. Tout d'abord, bip cette partie de l'adresse d'expédition et changer la hauteur de ce rectangle, 2469. Ici. Déplaçons ces détails de prix avec une marge supérieure de 30 pixels. Enfin, renommez ce texte de bouton pour placer l'ordre. Et maintenant, la numérisation est terminée. Il y a de l'espoir pour cette vidéo. se voit dans la vidéo suivante. 30. Placer l'écran de commande: Bienvenue aux étudiants. Dans cette vidéo, nous allons créer un écran de commande. Donc, d'abord, copier la peau W. Et quand nous faisons le droit en appuyant sur la touche ALT , puis renommez-le pour passer l'écran de commande. Après cela, supprimez tout cela à l'exception de ce texte et d'une forme. Maintenant, modifions simplement la couleur d'arrière-plan en dipolaire et cette couleur de texte en couleur claire. Et puis déplacez-le au centre. Après cela, il suffit de supprimer l'élément de rejet et d'ajouter un rectangle d'environ 28 par 28. Modifie le rayon de bordure à dix et sa couleur à blanc. Et après cela, ajoutez une icône de brillance dessus. Copier qui brille icône à partir des fichiers d'exercice et visiteur, et aligner ces deux correctement. Maintenant, nous allons vers le bas. Et ici. Tout d'abord, dessinez une ellipse aléatoire et arrangez-les au hasard pour que la conception de l'écran soit bonne. Après cela, déplacons cette coche ici. Et maintenant copie du milieu de cette ellipse. l'échelle jusqu'à environ 104 par 74 et placez-le derrière cette ellipse. Maintenant, la première, deuxième ellipse, la couleur, la couleur du thème. Et ici change la taille de la première ellipse à 72 par 72. Maintenant, alignez-les centrés verticalement et horizontalement les uns avec les autres. Après cela, réduisez l'opacité du cercle externe à environ 20%. Donc ça a l'air sympa. Connu comme lisse vers le bas. Et ici, renommez ce dex pour l'ordre placé et placez-le pour la marge supérieure de dix pixels. Après cela, changez, cette couleur de vaisseau à cette troisième couleur. Avec une opacité de 20%. également changé toutes les couleurs d'ellipse à cette couleur. Ici, s'il vous plaît, ce rectangle avec dix pixels, marge supérieure. Enfin, renommez ce dx2. Livraison prévue pour entendre. Entendre a changé la police des premiers textes à 1870 volts et cette seconde moitié à 18 volts. Donc ça a l'air proéminent. Après ça. Alignez-le au centre avec ce rectangle correctement. Ici aussi, changez la couleur de l'indicateur d'accueil et de la barre d'état en blanc afin qu'il semble visible. Et maintenant notre écran est terminé. C' est tout pour cette vidéo. se voit dans la vidéo suivante. 31. Écran de recherche: Bienvenue aux étudiants. Dans cette vidéo, nous allons créer un écran fixe. Donc, tout d'abord copié votre écran et le déplacer vers le bas en appuyant sur la touche tout hors de cela, supprimer tout cela sauf le logo Nike et topper. Et après cela, changez la couleur du cadre à la quatrième Khaled de notre liste avec 20% d'obésité. Et maintenant il suffit de copier la barre de recherche prédéfinie à partir des fichiers d'exercice. Fondamentalement il ici avec une marge supérieure de dix pixels. Et maintenant, nous allons ajouter des recherches récentes, ainsi de suite mort, dessiner un rectangle d'environ 404 par deux H6, puis changer sa couleur en blanc et c'est border-rayon 25. Et puis placez-le avec une marge supérieure de 20 pixels. Après cela, dessinez un rectangle vertical d'environ 48 hauteur. Prof, cinq à six sections avec une ligne de séparation entre elles. Et après cela, appuyez sur ce dp et droite chaussures Nike numéros de modèle ici et ajoutez une icône de recherche récente sur le côté droit. Hobby que je peux former les fichiers d'exercice. Donc, à partir d'ici, comment accélérer le processus. Et maintenant il suffit de changer la couleur des lignes à la quatrième liste de 100 followers avec 30% d'opacité. Et notre recherche est presque terminée. La dernière chose que je vais ajouter est d'ajouter un clavier. Copiez donc le clavier à partir des fichiers d'exercice et basez-le ici avec une marge supérieure de 20 pixels. Et maintenant notre écran est terminé décimal pour cette vidéo. se voit dans la vidéo suivante. 32. L'écran préféré: Bienvenue aux étudiants. Dans cette vidéo, nous allons avoir un plein écran. Donc, d'abord, copiez le schéma numéro huit et collez-le ici. Puis renommez-le en écran de peur. Après cela, supprimez simplement cette partie inférieure, puis changez la couleur du cadre en couleur blanche. Et la couleur du produit faire la couleur claire avec 30% d'opacité. Après cela, déplacez ces rectangles vers le bas et appuyez sur que Tiki et séché favoris. Placez-le avec une marge supérieure de 20 pixels et une marge inférieure de 30 pixels. Et maintenant, passons ici. Il suffit de supprimer ces compteurs et d'ajouter au bouton de panier de l'écran d'accueil et de le redimensionner. Après cela, ajoutez une icône de panier dessus. Donc, copiez cette icône de panier et supprimez l'icône des fichiers d'exercice et visitez ici, alignez-le avec le fardeau correctement. Harbor ça. Alignez ces calques de texte probablement après cela, faites de même avec le deuxième rectangle. Donc pour ça, j'accélère le processus ici pour gagner du temps. Enfin, copiez cette barre d'onglets à partir de l'écran d'accueil et collez-la ici. Enfin, la mise au point de l'onglet favori. Et maintenant notre écran est terminé décimal pour cette vidéo semblait la vidéo suivante. 33. Écran de profil 2: Bienvenue aux étudiants. Dans cette vidéo, nous allons créer un écran de profil pour. Donc, tout d'abord, copiez l'écran de profil un et collez-le ici, puis renommez-le en écran de profil pour ensuite, dessinez une ellipse d'environ 80 par 80. Ensuite, ajoutez une image utilisateur aléatoire à ces lèvres. J' ai installé un plug-in nommé et splash. Et ici, il suffit de cliquer, juste un clic droit pour l'ouvrir. Et puis ici, cherchez des hommes. Et après cela, ajoutez une image aléatoire à cette ellipse. Masse cette image dans cette forme. Et maintenant, faisons une copie de ce texte, déplacez-le vers le bas, remplacé ces deux couches de texte. Et après ça, Jane, le premier outil de texte, ce nom d'utilisateur et le deuxième emplacement. Modifiez également la police et la couleur de ces déclarations. Notez grouper ces deux calques et les aligner sur cette image. Après cela, ajoutez un bouton d'édition ici. Il suffit donc de dessiner un rectangle d'environ 109 par 44, change border-rayon à 20. Et après cela, ajoutez un texte d'environ 16 audit régulier et alignez-le au centre, correctement. Connu sous le nom de déplacer ici. Tout d'abord, aligner ces en-têtes à gauche avec cette ellipse. Et maintenant, faites quatre copies et déplacez-les vers le bas. Je sais que je vais remplacer ces déclarations et icônes. Toutes les icônes sont dans des fichiers d'exercice. Donc à partir d'ici, j'accélère le processus. Et maintenant, il est temps d'ajouter des lignes séparées entre ces menus. Donc ça a l'air sympa. Alors tracez une ligne ici et changez sa couleur à la couleur claire avec 50% d'obésité. Et maintenant la ligne, ces lignes avec un espacement interne de 20 pixels. Et maintenant l'écran est terminé. C' est tout pour cette vidéo. se voit dans la vidéo suivante. 34. Édition de l'écran du profil: Bienvenue aux étudiants. Dans cette vidéo, nous allons créer un écran de profil d'édition. Donc, tout d'abord, copiez le numéro d'écran 12 et collez-le ici, puis renommez-le pour modifier l'écran de profil. Après cela, a mangé tous ces sauf ce texte. Et maintenant remplacer cette icône de garde par une icône de coche. Copiez le vérifier mon icône de SKY numéro dix, puis collez-le ici. Changez sa couleur en couleur foncée et placez-la ici correctement. Après cela, renommez ce texte en informations de contact. Et maintenant, nous allons ajouter des champs ici. Donc, tout d'abord, faites quelques copies de ce texte et déplacez-les vers le bas. Après cela, ajoutez deux lignes d'environ 382 ici à deux autres lignes de grain 155. Et maintenant, déplacez ce champ de texte ici. Changez sa police à 14, semi gras et sa couleur à une liste. Renommez-le en prénom. partir de cela, déplacez ce second texte vers le haut. Vert m à Alex, et change la police à 16, irrégulière. Et placez-le ici correctement. Et maintenant il suffit de faire une copie de ce champ de texte. Déplacez-le vers la droite, renommez-le également. Et maintenant il suffit de déplacer ce premier test de champ vers le bas avec cette marge de dépôt de 20 pixels et renommez-le également. Donc à partir d'ici, comment accélérer le processus. Et maintenant nos champs sont parfaitement créés. Ici, changez ces lignes, couleurs, faites cette quatrième couleur de notre liste. Et cette première ligne courbe à une couleur de thème pour en faire un champ de mise au point. Modifiez la ligne de texte ici, et changez sa couleur en couleur de thème également. Enfin, le clavier ajouté ici. Copiez cela à partir de l'écran précédent et collez-le ici correctement. Et maintenant l'écran est terminé. C' est tout pour cette vidéo. se voit dans la vidéo suivante. 35. Écran Mes commandes: Bienvenue aux étudiants. Dans cette vidéo, nous allons créer mon écran Commandes. Donc, tout d'abord, copiez l'écran sur 12 et collez-le ici. Et puis renommez-le en mon écran Commandes. Après cela, supprimez cette icône de panier et changez l'arrière-plan en quatrième couleur avec une opacité de 20%. Et ce rectangle couleurs pour mordre hors de cela, changer ces rectangles taille 2414 par 246, et le rayon de bordure à 0. Et maintenant il suffit de déplacer ces calques de texte vers le bas. Et ici, le meilleur à Tiki et écrire le numéro commandé. Après cela, fait deux copies de celui-ci, déplacez-les vers le bas, changez leur téléphone à 12, gras et leur couleur au troisième pilier. Et après cela a remplacé le premier par une place à la date et le second avec payé à la date. Et maintenant placez-les avec un espacement interne de cinq pixels. Applet qui font une copie de ce texte ci-dessus, déplacez-le vers le bas, puis remplacez-le par total. Et ajoutez notre message livré ici. Alors dessinez un rectangle d'environ 96 par 27, changez son rayon de bordure à 20, et sa couleur à notre couleur de thème. Et aussi Jane, la quantité de couleur à une couleur de thème. Après ce texte d'annonce, disons livré. Sa police doit être 14 point-virgule, puis changer sa couleur en blanc. Donc ça a l'air visible. Et puis déplacez ce texte total sous cela, livré avec un espacement interne de dix pixels. Et ici, un premier rectangle est fait. Passons à la seconde. Accélérez maintenant le processus pour gagner du temps. Et enfin, change le texte préféré à mes commandes. Et maintenant notre écran est terminé. Il y a de l'espoir pour cette vidéo. se voit dans la vidéo suivante. 36. Écran de Mes cartes: Bienvenue aux étudiants. Dans cette vidéo, nous allons créer mon écran de cartes. Donc, tout d'abord, copiez l'écran précédent et collez-le ici, puis renommez-le en écran de mes cartes. Après cela, supprimez tout cela sauf que ce texte. Et puis changez la couleur d'arrière-plan en couleur blanche. Maintenant, je viens de renommer ce texte en mes cartes. Et après cette image de dieu importante des fichiers d'exercice et collez-le ici avec une marge supérieure de 30 pixels. Et maintenant faire une copie de ce texte. Et alors que nous ne changeons pas la police à 14 demi-boulon, puis renommez-le pour ajouter un nouveau Dieu. Et maintenant il suffit d'ajouter un rectangle d'environ 25 par 25. Le changement est border-rayon à cinq et sa couleur à la couleur de notre équipe. Maintenant, ajoutez plus icône sur ce rectangle et alignez-le correctement. Copiez l'icône plus à partir des fichiers d'exercice et collé ici correctement. Et maintenant il suffit de placer ce texte et cette icône plus avec une marge supérieure de 50 pixels. Et maintenant notre écran est terminé, et c'est tout pour cette vidéo. se voit dans la vidéo suivante. 37. Ajouter un écran de carte: Bienvenue aux minutes. Dans cette vidéo, nous allons créer un écran de carte d'ajout. Donc, tout d'abord, copiez le numéro d'écran 14 et collez-le ici. Dix, renommez-le en écran de garde. Après cela, supprimez ces textes d'espaces réservés et déplacez ces faces supérieures vers le bas. Et ces deux sont des champs vers le haut et placent ce premier champ avec une marge supérieure de dix pixels et l'autre avec une marge supérieure de 40 pixels. Après cela, renommez ce titulaire de la première place en nom sur la carte. Après cela, renommez le premier champ en nom d'utilisateur. Deuxième champ au numéro de carte, change de couleur en couleur claire afin qu'un utilisateur sache que ce n'est pas le champ ciblé. Changer le troisième pour expirer IT, couleur de ligne génie. Et après cela, changez le quatrième champ en Cv. Et maintenant il suffit de copier ce texte de l'écran précédent et de le coller ici. Remplacez cette icône plus par une icône de coche et ce texte avec ma carte enregistrée et placez-la correctement. Enfin, ajoutez le bouton ici. Copiez cela de la précédente, copiez-le à partir de l'écran précédemment créé, puis collez-le ici et renommez ce texte pour qu'il s'applique. Et maintenant notre écran est terminé. C' est tout pour cette vidéo. se voit dans la vidéo suivante. 38. Mon écran d'adresse: Accueillir les étudiants. Dans cette vidéo, nous allons créer mon écran d'adresse. Donc, tout d'abord, copiez l'écran précédent et collez-le ici. Puis renommez-le à l'écran de mon éditeur. Après cela, supprimez tout cela sauf ce bouton. Et maintenant, ajoutez une carte et une icône de carte pour la marge supérieure de 20 pixels. Copiez l'icône de la carte et de la carte à partir des fichiers d'exercice et placez-la ici correctement. Après cela, appuyez sur le Tiki et écrivez, éditez votre adresse, placez-la avec une marge supérieure de 30 pixels. Et maintenant, dessinez trois rectangles ici. D' abord devrait être 382 par 80, et l'autre devrait être 382 par 50. Chaîne. Troisièmement, la couleur du rectangle à la couleur claire avec 20% d'opacité. Maintenant, alignez ces trois rectangles correctement avec un espacement interne de 20 pixels. Et maintenant passons au premier rectangle. Ici. Ajoutez un emplacement que je peux d'abord. Et après cela, ajoutez ce texte. Alignez ceci correctement ici sur le deuxième rectangle, unité de plancher. Et sur ce troisième code postal barre oblique droite. Et puis la ligne de ces textes couches avec ces rectangles. Et enfin, Change le texte du bouton à enregistrer. Et maintenant notre écran est terminé. C' est tout pour cette vidéo. se voit dans la vidéo suivante. 39. Écran de centre d'aide: Bienvenue aux étudiants. Dans cette vidéo, nous allons créer l'écran du Centre d'aide. C' est la dernière semaine de notre application Nike. Donc, tout d'abord, copiez l'écran précédent et collez-le ici, puis renommez-le pour aider les centres verts. Après cela, supprimez tout cela à l'exception de ce rectangle. Et maintenant, changez cette taille de rectangle à 382 par 580. Donnez-lui un rayon de bordure de cinq et balayé sa couleur avec la couleur de fond. Et maintenant d'abord à la télé. Et bien, comment puis-je aider à changer son téléphone à 22 or et sa couleur à notre couleur thème. Et puis placez-le avec une marge supérieure de 30 pixels et une marge de gauche de 16 pixels. Après cela, faites-en une copie. Et le menton aime 16 semi-public et érudit à la couleur foncée. Et puis renommez-le en ce texte. Et puis gent fait du texte sur un texte multiligne d'une largeur de 250. Maintenant, ajoutez une ligne d'environ 350 pixels sous elle. Et après cela, ajoutez une flèche devant ce texte. Copiez la flèche depuis le haut et collez-la ici en changeant sa position. Maintenant, il suffit de les regrouper ensemble et de faire quatre copies avec une marge supérieure de 20 pixels et de les déplacer vers le bas un par un. Et après cette chaîne, ce texte vit. Donc à partir d'ici, j'accélère le processus jusqu'au Sierra Time. Et maintenant tous ses écrans sont terminés. C' est tout pour cette vidéo. se voit dans la leçon suivante. Nous allons relier leurs amis ensemble pour faire un prototype de notre application. 40. Prototypage: Bienvenue aux étudiants. C'est la dernière vidéo de ce cours. Dans cette vidéo, nous allons jeter un oeil sur la façon dont nous pouvons relier les cadres ensemble. Elle ressemble donc à une annonce du monde réel, puis partager avec d'autres membres de l'équipe et parties prenantes. Donc, ici en haut à droite, vous voyez qu'il est divisé en trois vues. Vous concevoir, vous prototyper et vous inspecter. Cette vue prototype permet de créer des connexions entre amis et de définir les connexions entre eux par interaction. Il suffit donc de cliquer sur cette vue prototype, de zoomer et de cliquer sur la première image. Et hé, vous voyez si un joue cette icône de jeu, il considérera comme cadre de la maison. Laissez-le tel qu'il est. Parce que ce n'est pas son écran d'accueil. Et là, vous voyez cette flèche. Il suffit de le faire glisser et de le déposer sur la deuxième image. Et sur la droite, nous avons la fenêtre des propriétés. Dans la fenêtre Propriétés, il suffit de choisir. Après le retard. Ce temps devrait être de 400 milliseconde et l'animation devrait nous dissoudre et le manger devrait être de 0. Après cela, sur notre prochain écran, connectez cet envoi avec prochain rêve avec animation automatique et 400-milliseconde. Faites de même avec l'écran suivant. Et ici, protégez ce bouton de réinitialisation avec l'écran de connexion. Et maintenant passons à l'écran d'inscription. Ici. Connectez cette inscription à l'écran d'accueil après la connexion avec animation en mouvement. Et connectez cette connexion avec l'écran de connexion avec animate intelligente. Et maintenant passons à l'écran d'accueil. Il s'agit de l'écran d'accueil avant qu'un utilisateur ne se connecte ou s'abonne à l'application. Donc ici, il suffit de connecter cet onglet de recherche avec le numéro d'écran 11 et cette étape de champ avec le schéma 12 dans l'animation en mouvement. Et enfin, corrigez ce profil avec le profil Screen1. Vérifiez également cette smart de toute façon il correspondant aux couches case à cocher. Maintenant sur Powell Screen1, connectez cette connexion et créez un compte avec l'écran de connexion. Et l'animation devrait se déplacer du côté droit. Et ici, connectez ceci mes commandes avec écran d' inscription parce que notre utilisateur ne peut pas voir la commande sauf s'il s'est inscrit à l'ajout. Et cet écran d'aide avec l'aide de définir l'écran. Et après cela, connectez ces profondeurs comme nous l'avons fait sur l'écran précédent. Donc à partir d'ici, j'accélère le processus. Et maintenant, Stern nous a dit de passer à l'écran d'accueil externe de l'utilisateur de connexion à l'application. Ici. Tout d'abord, connectez cette sneaker avec l'écran suivant. Et cette quatrième chaussure avec un écran de détail. Et son animation. Devrions-nous intelligent de toute façon il ici connecter ces étapes comme nous l'avons fait sur régime pur. Mais cette fois, connectez cette Bhopal ICOM avec la peau Provost après la connexion. Écran numéro 13 avec femme à partir de l'émission du bas de gamme. Maintenant passons à l'écran numéro six ici, corrigez cette flèche arrière avec l'écran précédent. Alors il suffit de choisir ce sac de frappé. Maintenant sur l'écran numéro sept. Tout d'abord, faites une copie de cet écran, déplacez-le ici et renommez-le en sept en deux. Et après ça, dix, le premier a obtenu l'icône à l'icône de symbole. Et maintenant il suffit de connecter ces deux écrans avec smart animate. Pas d'écran numéro sept en deux. Connectez l'icône du panier, l'écran numéro huit. Et son animation doit être animée intelligente ainsi, connu sous le nom mu2 skene opérer ici, connecter cette flèche arrière avec FactoryGirl. Et après cela, connectez ces bouton de changement avec l'écran d'environ 18 avec le déplacement de l'animation à gauche. Et connectez cela continuer à bouton Checkout avec le numéro d'écran neuf, l'animation intelligente. Après ça. Sur l'écran numéro neuf, connectez cette flèche arrière avec la reine précédente et est le bouton Placez l'ordre avec la crème suivante. Maintenant passons à l'écran environ dix. Ici. Connectez cette icône de fermeture avec le numéro d'écran cinq en un, qui est l'écran d'accueil. Et son animation est intelligente de toute façon, il maintenant nous avons lié dix écrans dans notre application. Essayons en cliquant ici. Et ceux-ci fonctionnent parfaitement bien. Maintenant écran environ 11, connectez-vous mieux avec les bactéries et laissez le reste tel qu'il est. Et à l'écran. Et nous ferons la même chose avec la flèche arrière. Et maintenant il suffit de connecter ces étapes comme nous l'avons fait sur l'écran précédent. Maintenant sur l'écran de plus de 13. Tout d'abord, corrigez ce bouton d'édition et ce nom d'utilisateur avec le numéro d'écran 14. Et cette adresse avec l'écran de plus de 18, où un utilisateur peut facilement mettre à jour son adresse. Modifiez également les animations pour se déplacer à partir du côté gauche. La moitié de ça. Déménageons ici. Connectez ceci ma commande à l'écran de ma commande. Mettez-le cette ma carte avec mon écran actuel, adresse des parenthèses. Avec écran d'adresse. Laissez la notification telle qu'elle est. Et ici, connectez ce centre d'aide avec écran du centre de santé et ce logo avec l'écran d'accueil avant la connexion de l'utilisateur. Joignez également ces onglets, supprimez-les simplement et collez les onglets de l'écran précédent pour gagner du temps. Parce qu'ils sont déjà connectés à l'écran précédent, nous avons juste besoin de les copier et de les coller ici. Maintenant sur l'écran numéro 14, corrigez cette flèche arrière avec ce déclencheur. Et cette icône de coche avec l'écran de profil avec l'animation de la diapositive droite. Ici. Ne pouvait pas le reste de ces écrans, flèches arrière avec flèche arrière déclencheur et aussi ces profondeurs. Pour gagner notre temps. Après cela, passons au ski numéro 15. Ici. Ne change rien. Et maintenant cinéma 16, saisir ceci, ajouter une nouvelle carte avec l'écran au-dessus de 70 avec animation à gauche en mouvement. Et maintenant à l'écran plus de 17, connectez ce bouton Appliquer avec l'écran au-dessus de 16 avec le déplacement de la droite et l'émission. Et Nowinski numéro 18. Connectez ce bouton de sauvegarde avec le numéro d'écran huit avec animation automatique. Et maintenant létale scannable 19, dangereux. Enfin, tous nos cadres sont liés. Pour vérifier cette liaison, il suffit d'appuyer sur contrôle a. Et ici vous voyez ce réseau d'interaction. Il est temps d'exécuter notre application. Donc il suffit de cliquer sur ce bouton Pigou. Et maintenant, vous voyez que toutes nos projections sont liées. Et ça ressemble à une vraie application. Maintenant pour le partager avec d'autres membres de l'équipe. Il suffit de cliquer sur le bouton Partager. Et ici, vous pouvez le partager pour la révision de la conception, développeur de matériel et de nombreuses autres options aussi bien. Je vais juste choisir n'importe qui avec un lien peut l'ajouter. Et enfin, cliquez sur Copier le lien et partagez simplement ce lien avec les membres de votre équipe ou les parties prenantes. Vous pouvez également partager ce fichier en saisissant leurs e-mails. Et cela nous amène à la fin de ce cours. J' espère que vous avez aimé ce cours. Et si vous avez des curieux concernant ce cours, hésitez pas à me contacter. On se voit dans un autre traitement.