Prototypage d'application mobile : Concevoir des interactions personnalisées

1. Introduction: Salut. Je suis Noah, et je suis un concepteur de produit vivant actuellement à San Francisco, et cette classe porte sur des prototypes mobiles haute fidélité personnalisés utilisant Framer. Au cours des quatre dernières années et demi, j'ai dirigé l'équipe de conception de Google travaillant sur l'application Google pour iOS, et notre objectif est de construire un assistant mobile directement dans votre poche qui vous permettrait de rechercher toutes sortes d'informations à partir de la recherche Google . Si vous êtes comme moi, et que vous concevez depuis un certain temps, quand nous avons fait la transition vers le mobile, il y avait beaucoup de nouvelles choses à trouver. Non seulement les gens s'attendaient à des informations plus rapides, tâches étaient un peu plus transitoires, il y a aussi un tout nouveau niveau d'interactions, y compris le balayage, le glissement, et même la parole avec votre voix, et pourtant nous n'avions pas vraiment les outils de conception qui permettraient rattraper ce genre de conception. Heureusement, j'ai appris Framer il y a quelques années et j'ai commencé à l'utiliser dans notre processus pour commencer à définir ces types d'interactions. Cela signifie qu'en utilisant votre téléphone directement pour montrer vos idées au lieu de regarder vers le haut sur un écran, vous pourriez commencer à comprendre combien d'occasions vous avez eu de changer votre design,pour combien d'occasions vous avez eu de changer votre design, rendre les choses plus faciles à utiliser, et de rendre les choses vraiment agréables à jouer avec. Il y a trois exercices différents que nous allons suivre dans ce cours. Si vous en avez fait les trois, vous allez apprendre les bases de Framer, y compris l'animation, y compris événements comme le clic, le glissement et le balayage, et tout ce qui est du genre, et aussi inclure Sketch importation. L' une des grandes choses de Framer est que si vous avez déjà utilisé Sketch, vous pouvez en un seul clic importer vos conceptions dans votre prototype et commencer à les manipuler tout de suite. Donc, pour le premier exemple, nous allons passer en revue les bases de l'animation. Lorsque je clique sur un objet, comment puis-je l'animer ? Cela inclut des choses comme la physique. Je pense toujours plus au timing et aux courbes qui se produisent quand quelque chose se déplace à travers l'écran pour vous donner plus de détails là-bas. Pour le deuxième exercice, nous allons passer par une procédure pas à pas d'une application mobile. Fondamentalement, lorsque vous ouvrez une application pour la première fois, vous remarquerez parfois qu'il y a quelques écrans que vous balayez à travers pour obtenir l'essentiel de ce qu'est l'application. C' est un modèle mobile assez commun, et donc, nous allons passer en revue ça. Vous pouvez même utiliser vos propres exemples dans celui-ci si vous le souhaitez, mais j'ai fourni des exemples pour chacun d'entre eux pour vous. Pour la troisième, nous allons importer une application de liste de tâches à partir de Sketch et apprendre à balayer quelque chose, apprendre à faire une vue défilante. Si vous avez suivi la classe Skillshare pour Sketch, vous pouvez utiliser votre conception de ce cours et l'importer dans Framer et le faire prendre vie. Il y a trois choses principales que j'espère que tu retireras de ce cours. La première est que vous apprendrez pourquoi le prototypage est important, pourquoi il peut vous aider dans votre processus, et comment l'appliquer vraiment à votre travail quotidien en tant que concepteur ? Vous apprendrez à construire des prototypes très haute fidélité, des types personnalisés de prototypes qui permettent beaucoup plus de détails. Enfin, j'espère que vous allez réellement ramasser si vous n'avez pas codé auparavant. C' est un excellent moyen d'obtenir les bases du codage vers le bas. Ce n'est pas une exigence pour ce cours que vous avez codé pour utiliser Framer. Cela aide certainement, mais vous pouvez simplement suivre, et je pense que vous allez trouver beaucoup de nouvelles idées en cours de route. Donc, dans cette classe, pour ces trois exercices, vous pouvez soit télécharger l'un ou l'ensemble d'entre eux en fonction du nombre d'exercices que vous pouvez faire. De toute façon, s'il vous plaît aller de l'avant et essayer parce que je suis là pour obtenir des commentaires sur ceux-ci, ou des conseils , ou si vous rencontrez des problèmes, vous pouvez le mentionner là à tout moment ou même sur le groupe Facebook auquel j'ai lié dans le ressources. Donc, assurez-vous de lui donner une photo, peut-être en charger un GIF si vous le souhaitez ou une image ou une capture d'écran. Un outil GIF que j'aime utiliser s'appelle LiceCap, et je vais en mentionner plus à ce sujet dans la discussion. Mais allez certainement de l'avant et téléchargez votre projet qui inclut ces trois exemples ou encore, quoi que vous décidiez de faire. 2. Pourquoi le prototypage ?: Une question très courante à propos du prototypage est qu'il y a tellement d'outils là-bas, et comment êtes-vous censé savoir quel outil vous devriez utiliser. Je vais décomposer fondamentalement toutes les différentes options qui sont là-bas au moins un grand ensemble d'entre elles pour vous aider à avoir un cadre à l'esprit pour quand vous pourriez utiliser chacun d'eux. À une extrémité du spectre, vous avez un ensemble d'outils simples. Ce sont des choses très faciles à utiliser et rapides à ramasser, et ils vous permettent de faire des choses comme des clics, ils vous permettent de faire des animations de base, et ce sont des outils comme Envision et Flinto qui sont vraiment assez populaire parce que vous pouvez simplement commencer immédiatement à les utiliser pour mettre en place des écrans de votre interface. À l'autre extrémité du spectre, nous avons des outils qui sont plus difficiles à apprendre, mais qui vous permettent également d'en faire beaucoup plus. Ce sont des outils de fidélité plus élevée comme ceux que nous utilisons aujourd'hui, framer. Ces outils peuvent prendre un peu plus de temps, mais vous permettent en fait de définir des interactions de prochaine génération vraiment personnalisées au lieu de choses qui sont juste intégrées directement dans votre appareil. Ils vous permettent également parfois d'utiliser les fonctionnalités natives du téléphone comme l'utilisation de l'appareil photo et ainsi de suite. Entre ce spectre, il y a tout un ensemble d'outils qui ne sont pas trop difficiles à utiliser, ils sont assez décent à ramasser et en fait vous permettent de faire des choses qui sont personnalisées, et donc ils mélangent le meilleur des deux mondes de beaucoup de façons, mais cela dépend vraiment de ce que vous voulez. Donc, la prochaine question la plus courante quand il s'agit de prototypage est de savoir quand est-il réellement approprié de prototyper ? Parce qu'il s'avère que ce n'est pas toujours le bon moment pour le faire, et aussi certaines parties du processus de conception peuvent nécessiter différents outils à différents endroits. Donc, il y a vraiment cinq types de choses à penser quand vous pensez à quand devrais-je prototyper. Le premier est le processus, où en êtes-vous le long de la chronologie de votre processus de développement ? Si vous êtes sur le chemin, et que vous avez déjà une application qui fonctionne et que vous êtes vraiment juste à régler les détails, il n'a probablement pas de sens pour vous d'utiliser des outils qui vous donnent des clics de haut niveau de choses. Mais si vous êtes dans le début d'un processus, vous ne voulez probablement pas passer une tonne de temps ou trop de temps dans le code d'une manière qui pourrait entraver la capacité d' identifier vraiment le problème principal que vous essayez de résoudre. Il est préférable de vous assurer d'utiliser des outils qui sont rapides et faciles à utiliser et qui vous permettent vraiment de décider de l'espace à problème dans lequel vous devriez travailler. Le second est les contraintes. Avec des contraintes, vous voulez vraiment penser à ce que fait votre équipe de développement, que sont-elles capables de faire ? Si c'est un tas de gens qui sont nouveaux dans l'ingénierie, vous ne voudrez peut-être pas compliquer les choses ou les confondre avec interfaces clignotantes personnalisées de nouvelle génération, n'est-ce pas ? Il est probablement préférable de s'en tenir aux bases et d'utiliser les composants intégrés. Donc, vous ne voudrez peut-être pas utiliser un outil plus avancé dans ce cas. La troisième chose à garder à l'esprit, c'est le temps. Combien de temps avez-vous ? Si vous avez une tonne de temps et toutes les ressources dans le monde, alors génial ! Vous pouvez prototyper plusieurs générations de quelque chose jusqu'à ce que vous en soyez vraiment satisfait, puis sauter et concevoir. Si vous n'avez pas vraiment beaucoup de temps du tout, une astuce que vous pouvez faire est peut-être de vous appuyer sur votre équipe d'ingénierie pour ce proto-typage qui peut vous faire gagner un peu de temps dans ce cas afin que vous n'ayez pas à faire le travail redondant de le spécifier une fois sur vous-même, puis l'ingénieur le refaire de toute façon. La quatrième chose à garder à l'esprit est le contexte. Qu' est-ce que cette application a besoin d'avoir ? Doit-il être réactif ? Est-il nécessaire de travailler avec des données réelles ? Tous ces types de variables peuvent affecter l'outil que vous pouvez utiliser. Par exemple, si vous utilisez des données réelles, seuls quelques-uns des outils que nous avons mentionnés vous permettent de le faire. Habituellement ceux qui sont un peu plus difficiles à ramasser de toute façon. Si c'est peut-être quelque chose qui nécessite une interaction vocale, votre appareil photo, toutes ces choses peuvent affecter l'outil que vous utilisez. Le dernier est le confort personnel. La vérité est qu'il n'y a pas un meilleur outil de prototypage dominant. n'y a pas un seul outil que vous êtes censé utiliser pour tout. Ce n'est pas le cas. Parce que honnêtement, cela dépend un peu de vous et de ce que vous voulez utiliser, et je pense qu'il est préférable de ne pas appliquer un processus spécifique et une façon de faire quelque chose. Vous devriez juste utiliser ce que vous êtes à l'aise avec. Donc, c'est vraiment à toi de décider. 3. Prototype 1 : créer une animation: Bonjour, et bienvenue à votre premier exercice Framer. Si vous ne l'avez pas déjà fait, allez framerjs.com et téléchargez l'essai gratuit pour que nous puissions commencer. Lorsque vous avez fait cela ouvrir Framer, et vous remarquerez que vous êtes accueilli avec une fenêtre de bienvenue qui contient un ensemble d'exemples courants de composants d'interaction pour lesquels vous pouvez utiliser Framer, ainsi qu'un lien pour en savoir plus et aussi un lien vers notre communauté, qui est vraiment un endroit idéal pour poser des questions, voir des exemples, donner des commentaires, quoi qu'il en soit. Nous allons commencer par cliquer sur l'icône plus pour démarrer un nouveau document Framer. Je vous ai fourni une image de Buzz Lightyear pour cela, mais vous pouvez vraiment utiliser l'image que vous voulez sur Internet. C'est tout à fait bien. Lorsque vous avez l'image que vous souhaitez, faites glisser directement sur le téléphone, et vous remarquerez qu'il apparaît directement sur l'écran. Quand nous l'avons fait, quelques choses sont arrivées. Vous remarquerez sur le chemin à gauche, un extrait de code est apparu qui définit la largeur de Buzz Lightyear, sa hauteur et un lien vers l'image. Ceci est écrit dans quelque chose appelé CoffeeScript, qui est une version plus simple de JavaScript. Si vous n'avez pas codé auparavant, c'est très bien. Il suffit de suivre, et si vous avez des questions, vous pouvez vous sentir libre de poster à la discussion. Nous ferons de notre mieux pour y répondre. Vous remarquerez au milieu qu'il y a le panneau de calque qui a un lien vers l'endroit où l'image est affichée sur la droite, et si vous avez beaucoup de calques, il est très utile de dire où se trouve tout. Pour l'instant, nous allons commencer par renommer le calque d'image en Buzz, juste pour le rendre un peu plus facile à utiliser, et vous verrez le panneau des calques mis à jour en conséquence. Donc, la première chose que nous allons faire est d'apprendre certaines des propriétés que Framer vous permet de modifier pour vos images. Ainsi, par exemple, lorsque vous tapez buzz. autocomplete vous donne un tas d'options différentes. Il vous donne ses x et y et son flou. Il vous donne la taille et ainsi de suite, l'échelle. Pour l'instant, continuons et jouons avec l'échelle, et peut-être que nous allons le doubler. Vous pouvez voir Buzz immédiatement mises à jour sur la droite, ce qui est vraiment idéal pour des commentaires instantanés. Vous pouvez le rendre vraiment petit. Pour l'instant, nous allons aller de l'avant et faire 0,8. Nous voulons aussi changer la position de Buzz. On peut faire ça sans problème. Donc, vous pouvez voir qu'il bouge un peu. Si je vais à 500, encore plus loin. Mettons-le près du fond ici. Ça a l'air plutôt bien. Nous pourrions aussi changer sa position x. Vous pouvez le faire en changeant sa position x directement. Nous vous pouvons également utiliser quelque chose que nous appelons des méthodes pour aider à accélérer le processus, s'il y a quelque chose de spécifique que vous voulez faire, comme le centrer. Donc, ici, nous avons centré la position x de Buzz horizontalement. Vous pouvez le centrer verticalement, ou les deux. Dans ce cas, nous voulons juste le centrer horizontalement. Maintenant, ce que nous voulons faire, c'est commencer à donner vie à ça. Nous voulons commencer à faire ce qui est vraiment bon pour Framer, c' est-à-dire ajouter des événements pour cliquer ou faire glisser, et animer, et ainsi de suite. Donc, il y a tout ce qu'on peut faire. Un très amusant avec lequel j'aime commencer parfois est de rendre l'objet draggable. Tout ce que vous faites pour cela est défini draggable activé sur true, et déjà vous pouvez voler Buzz autour, ce qui est vraiment cool. Vous remarquerez qu'il a même de l'élan intégré gratuitement. C' est beaucoup de plaisir. Nous ne ferons pas grand-chose avec le glissement dans cet exemple. Nous le ferons plus dans les exemples à venir. Mais c'est vraiment amusant pour commencer, parce que c'est facile. Mais ce que nous allons commencer par ajouter un événement, sorte que lorsque je clique sur buzz quelque chose se passe. Donc, pour ce faire, nous allons taper buzz.On et regarder la série d'événements que Framer nous donne. Pour ce cas, nous allons juste aller de l'avant et d'un clic. Nous allons vouloir déplacer Buzz en l'air quand vous cliquez dessus. Pour ce faire, on peut changer sa position Y en quelque chose comme, je ne sais pas, 100. Maintenant, si vous déplacez votre curseur vers la droite, vous cliquez sur Buzz, il saute dans l'air. Mais vous remarquerez, il s'accroche, et ce n'est pas très intéressant. On veut vraiment l'animer et faire croire qu'il est en train de voler. Dans la vraie vie, les choses ne se téléportent pas seulement de A à B, être cool si elles l'ont fait, mais elles ne le font pas. Donc, nous voulons animer cela, et pour ce faire, tout ce que nous avons à faire est de taper buzz.Animate et commencer à donner quelques propriétés. Donc, par exemple, animons la même chose. Maintenant, il vole en l'air. Vous pouvez appuyer sur le bouton de rechargement ou sur la commande R pour actualiser et réessayer. Plutôt cool. Maintenant, une chose à souligner est que CoffeeScript utilise quelque chose appelé indentations pour marquer quelles lignes de code se réfèrent à quoi. Donc, dans ce cas, tout ce que j'écris ici avec ces x et y, fait référence au parent le plus proche où la ligne la plus proche derrière elle qui n'est pas indentée, qui dans ce cas est des propriétés. De même, en haut, lorsque nous avons spécifié la largeur et la hauteur de Buzz, toutes ces choses se réfèrent à la couche elle-même. Si vous avez utilisé des choses comme JavaScript, vous pouvez reconnaître des choses comme des parenthèses qui ont tendance à se produire qui bloquent les choses, en place. C' est comme ça, juste un peu plus propre. Donc, la prochaine chose que nous voulons faire est de constater que le mouvement se déroule très lentement, et qu'il se produit aussi au même rythme au fil du temps. Alors, réglons d'abord la vitesse. Vous pouvez aller de l'avant et ajouter le nombre de secondes que vous préférez pour que cette animation se produise. Donc, dans ce cas, c'est une seconde, un peu mieux. Mais je peux faire une demi-seconde ou même un quart de seconde, et voir comment cela affecte les choses. C'est amusant. Vous pouvez déjà avoir une idée de la façon dont je peux changer quelques choses et avoir une idée de ce que ça ressent jusqu'à ce que je sois heureux avec ça. Je pourrais même vouloir commencer à ajouter quelques propriétés supplémentaires comme la rotation, peut-être l'échelle. Plutôt cool. Donc, j'ai aussi mentionné que ce n'est pas seulement la vitesse que nous voulons regarder, mais la vitesse au fil du temps à laquelle il s'anime. Donc, pour cela, nous avons quelque chose qu'on appelle des courbes. Les courbes vous permettent de spécifier différents types de manières dont vous souhaitez animer votre calque. Dans ce cas, je veux avoir l'impression que c'est un vrai objet physique, il y a quelque chose, comme s'il était réellement affecté par les règles de la physique. Alors, donnons-lui un printemps, et je t'expliquerai ce que ça veut dire dans une seconde. Donc, maintenant vous remarquerez, quand je clique sur Buzz, il ressort et rebondit sur le haut de l'écran, ce qui est assez cool. Alors, qu'est-ce que c'est, et comment le faire ? Vous remarquerez qu'il y a trois valeurs là-bas. Allons de l'avant et passez sur le site Web Framer pour jeter un coup d'œil à ce qu'ils font. Il y a un excellent petit outil qui vous permet de changer ces différentes variables, et de voir comment elles affectent l'animation, ce qui est un moyen vraiment amusant et rapide de décider comment vous voulez que votre animation se sent. Alors, quand je change ça, les choses deviennent plus rebondissantes ou moins rebondissantes. Si vous voulez en savoir un peu plus sur la raison, une façon dont j'aime y penser est de les considérer comme des objets réels, et de réfléchir à la façon dont ces objets se déplaceraient s'ils avaient été réels. Donc, par exemple, si je lance une balle contre le mur, elle ne va pas simplement à un rythme lisse au fil du temps et s'arrête à la fin, elle a une certaine physique appliquée à elle. droite ? Quand il frappe le mur, il pourrait rebondir. Si c'est une roche, elle pourrait être affectée d'une certaine manière, le poids de la roche pourrait changer les choses. Donc, dans ce cas, ces trois variables se réfèrent à la tension qui pourrait être considérée comme rebondissant, encore une fois peut-être la forme de celle-ci, pourrait être considérée comme une friction qui est peut-être le poids de l'objet et comment cela affecte son vitesse au fil du temps, et aussi la vitesse qui est un windup combien de force initiale vous lui donnez au début. En fait, je n'ai pas tendance à trouver qu'on ait besoin d'utiliser la vélocité. Vous pouvez l'utiliser si vous voulez, mais j'aime garder les choses simples, et juste utiliser deux propriétés, ce qui est très bien. Donc, si ça se sent élastique, vous pouvez juste jouer jusqu'à ce que vous soyez heureux. Donc, la prochaine chose que nous voulons faire est de donner Buzz comme une série d'états avec lesquels jouer. Donc, maintenant, il vole en l'air, mais si on veut qu'ils fassent des choses différentes ? Eh bien, Framer rend ça très facile avec quelque chose qu'on appelle les états. Ce que nous voulons faire, c'est définir un nom pour l'état, que nous appellerons voler, et lui donner un tas de propriétés. Nous pouvons utiliser les mêmes que nous avons utilisés là-haut, vous pouvez même les copier et les coller si vous voulez. Vous pouvez utiliser le crochet de commande pour indenter d'avant en arrière comme vous le souhaitez. Pour appeler cet état, tout ce que vous avez à faire est de taper states.next. Maintenant, quand je clique sur lui, il s'anime en haut et en bas. Maintenant, la raison pour laquelle il sait revenir en arrière est que états Framer comprennent où l'élément a été positionné initialement, et se souvient de cela comme sa valeur par défaut afin qu'il revienne de son état par défaut à l'état que vous avez défini. Mais ça se reproduit lentement. Donc, nous voulons nous rappeler de ramener dans la courbe que nous avons utilisée. Pour ce faire, tout ce que vous avez à faire est de taper les options d'animation et de lui donner ces propriétés. Maintenant, il jaillit. Vous pouvez ajouter autant d'états que vous le souhaitez. Donc, si je veux en ajouter un autre, et que je veux commencer à changer un peu les choses autour, jouant les choses entre elles, peut-être que je veux donner un effet de flip, ce qui pourrait être cool. Donc, je veux le retourner autour de son axe y, donc il retourne horizontalement. Peut-être, je veux que son échelle soit déplacée d'une façon ou d'une autre, et voilà. Trois états différents. Plutôt cool. Maintenant, juste pour le rendre un peu plus intéressant, instant nous n'avons qu'une seule couche. Que se passe-t-il si nous voulions changer l'arrière-plan en ajoutant un autre calque ? Tout ce que vous avez à faire est d'ajouter un arrière-plan. Par défaut, il s'applique du blanc, mais vous pouvez vraiment ajouter n'importe quelle couleur que vous voulez. Donc, dans ce cas, allons de l'avant et ajouter un beau bleu doux. Ça a l'air plutôt bien. Enfin, nous pouvons partager cela avec n'importe qui que nous voulons en un simple clic. En passant sur le bouton de partage dans la barre d'outils, il va vous demander d'enregistrer, ce qui est une bonne chose à prendre l'habitude de faire. Lorsque vous le faites, nous avons un lien vers le prototype, copier dans le presse-papiers, et il est déjà chargé dans Chrome. Vous pouvez jouer avec directement dans le navigateur, ce qui est génial, parce que vous pouvez le partager avec des amis, ou des collègues, qui tout simplement en partageant cette URL. Lorsque vous regardez le prototype Framer, vous remarquerez que vous pouvez également cliquer sur Ouvrir si vous visualisez prototype de quelqu'un d'autre pour l'ouvrir directement dans Framer et voir comment il l'a fait, ou le télécharger si c'est ce que vous préférez. Vous pouvez également les afficher directement sur votre téléphone, ce qui est vraiment utile pendant le prototypage. Certaines personnes aiment cliquer sur le bouton miroir, qui vous donne un ensemble d'applications que vous pouvez télécharger sur votre téléphone, et les afficher en plein écran, et ils vous permettent même de prévisualiser en temps réel afin que vous puissiez faire change et voir ce qu'ils ressentent, ce qui est super utile. Maintenant, la dernière chose que je vais mentionner est juste quelques conseils au cas où vous seriez coincé ou quoi que ce soit. Nous avons dans la barre d'outils quelque chose appelé extraits qui vous donne un ensemble d'éléments couramment utilisés dans les extraits de code qui sont utilisés pour les créer. Donc, aujourd'hui, nous avons parlé des états. Donc, vous pouvez cliquer sur celui-ci, et vous remarquerez qu'un tas de code est ajouté. Il vous rappelle comment faire ces choses, et vous pouvez jouer avec eux directement sur la droite, que j'aime utiliser pour que je puisse copier et coller des choses si j'oublie une partie de la syntaxe. Mais une autre chose que vous pouvez faire est que vous pouvez cliquer sur la documentation, qui a tout disponible sur le côté gauche. Vous pouvez même la chercher. Aujourd'hui, nous avons de nouveau parlé des États. Donc, nous avons appris les options d'animation, nous avons appris comment animer entre eux, et il y a même toutes les autres que nous n'utilisions pas avec lesquelles vous pouvez jouer quand vous le voulez. Enfin, lorsque vous tapez, remarquez que différentes propriétés apparaissent. Vous pouvez même cliquer sur un petit raccourci en bas à droite pour voir à quoi cette propriété fait référence et ce qu'elle fait, qui est vraiment utile. Donc, maintenant vous avez appris les bases de la façon de cliquer et d'animer des éléments, vous avez un peu appris sur les événements, propriétés et le panneau de calque, comment partager. Avec toutes ces connaissances, ce sera génial si vous êtes allé de l'avant et avez créé un projet dans Skillshare et nous montré ce que vous avez obtenu. Jouez avec différents types de propriétés, animez-les, rendez-le intéressant, et partagez-le pour que nous puissions en parler. 4. Prototype 2 : créer une transition: Ce que nous allons apprendre dans cet exercice, c'est comment utiliser l'esquisse et importer vos fichiers directement dans Framer pour rendre vos prototypes beaucoup plus rapides. Nous allons le faire avec un exemple de Google Docs qui est l'expérience d'intégration ou de première exécution et vous pouvez utiliser toutes les images que vous voulez pour cela vraiment, mais en attendant, je vous ai fourni un document de croquis. Si vous n'avez pas encore Sketch, assurez-vous d'aller sur sketchapp.com et d'obtenir l'essai gratuit. Si vous ne l'avez pas utilisé, je vous recommande fortement cours de croquis Andrew Markandos sur Skillshare, c'est vraiment un excellent moyen de commencer et si vous avez pas, c'est tout à fait bien, suivez le long. Nous allons ouvrir le fichier de croquis et vous remarquerez que les images sont séparées en différents tableaux d'art. Ces images sont chaque écran glissant que vous aurez. Vous remarquerez également qu'il y a des points indicateurs affichés en bas. Donc, avec ce fichier ouvert, tout ce que nous allons faire est de démarrer un nouveau document Framer avec commande N et d'importer le fichier d'esquisse. Framer sait déjà quel fichier de croquis est ouvert ce qui rend ce super rapide et facile vous suffit cliquer sur un bouton et votre fichier est là déjà. Vous remarquerez si vous passez la souris sur le milieu ici que j'ai tous les mêmes calques que j'ai eu accès dans sketch directement dans Framer ce qui est super sympa. Il est désactivé par défaut tous les différents tableaux d'art qui n'étaient pas les premiers. Donc, Framer suppose juste que vous voulez travailler avec le premier tout de suite. Donc, une chose à souligner est que cette structure, la hiérarchie des calques si vous voulez, le regroupement est le même dans Sketch que dans Framer, ce qui est super agréable. Donc, si je fais des changements à tout moment, disons que je renomme cet indicateur points ou quelque chose, il est préférable de ne pas utiliser d'espaces, je recommande fortement de simplement le garder simple, cela le rendra plus facile afin que vous n'ayez pas à taper des traits de soulignement et du code et lorsque vous appuyez sur « Enregistrer », revenez à Framer et vous pouvez utiliser Command Shift I ou simplement cliquer sur « Importer » à nouveau ce que vous préférez importer à nouveau le fichier et vous remarquerez qu'il est mis à jour. Même chose vaut pour toutes les images ou les choses que vous changez sur l'image elle-même, il va juste télécharger sans blesser votre code du tout ce qui est vraiment sympa. Donc, la première chose que nous allons faire est commencer à jouer avec certaines de ces couches et du code. Nous devons préfixer n'importe quelle couche que nous modifions avec le nom de cet objet qui contient toutes ces informations et nous pouvons le nommer comme nous voulons, afin que nous puissions taper Sketch si c'est un peu plus court. Vous remarquerez que nous avons déjà précédé en autocomplete les couches que je pourrais vouloir manipuler ce qui est super sympa et si je veux changer sa valeur comme nous l'avons appris dans le premier exercice, je peux juste le faire. Donc, je peux le déplacer vers le bas. Donc, c'est ainsi que nous allons modifier chaque couche comme il faut. Donc, la première chose que nous voulons faire est en fait rendre certains de ces tableaux d'art visibles. Vraiment tous parce que nous voulons qu'ils soient tous affichés comme l'utilisateur scanne d'une page à l'autre. Donc, pour ce faire, définissez visible égal à true et vous remarquerez que le calque est maintenant affiché. Tout ce que nous avons à faire est de copier cela quelques fois et de s'assurer que toutes les couches sont affichées comme nécessaire. Une chose qui est soignée est que vous passez la souris sur ceux-ci, remarquez comment le code à gauche met en évidence la couche qui utilise ce code d'une manière ou d'une autre. Cela devient vraiment utile surtout pour les documents plus longs afin que vous puissiez trouver où vous êtes référé à chaque chose. Donc, la prochaine chose que nous allons faire est de faire apparaître ces points indicateurs en haut du document afin que nous ne les perdions jamais. En ce moment, ils sont juste montrés cachés à l'intérieur du tableau d' art A et donc si vous pouviez passer à travers, vous ne les verrez plus. Donc, la façon de le faire est de taper le nom et de changer sa supercouche se référant à son parent de ce qui était le tableau d'art A à l'ensemble du document Framer. Nous pouvons le faire en faisant simplement référence à l'écran Frameer. Maintenant, vous remarquerez sur la droite, il est affiché en haut du document et ils sont au-dessus de tous les calques, ce qui est vraiment génial. La prochaine chose que nous voulons faire est d'envelopper tous ces différents tableaux d'art dans ce que nous appelons un composant de page, pensez à cela comme si vous avez une liaison pour un livre et que vous voulez mettre toutes les différentes pages dans cette liaison afin que vous ayez un livre sans faille, c'est ce que nous faisons. Nous voulons nous assurer que le tableau d'art A, B, C, D et E s'enroule dans le même livre. Donc, la façon de le faire est de taper dans les pages est égal au composant de page. Pages est juste le nom que nous avons choisi pour cela , vous pouvez l'appeler vraiment ce que vous voulez. composant Page est le nom de la référence Framer pour une vue de pagination glissante, et nous voulons envelopper le premier tableau artistique pour le faire juste pour commencer. Maintenant, il n'y a qu'une page dans ce livre, non ? Nous avons ce premier tableau d'art, nous voulons vraiment y ajouter tous les autres et nous le faisons simplement en tapant Pages.addPage, puis en tapant les tableaux d'art un à la fois. Vous remarquerez chaque fois que nous faisons que les pages sont placées à l'intérieur de ce wrapper dans le tableau d'art A. Vous pouvez même voir si vous passez la souris sur contenu de la page que nous sommes en train de les configurer côte à côte. Framer fait tout le travail dur pour vous ici, vous n'avez rien à positionner vous-même. Il sait simplement en fonction de la largeur de chaque image que vous voulez qu'elles soient des pages de la même largeur. Une fois que nous avons ajouté chaque page, allez-y et essayez de balayer. Plutôt cool, en quelques lignes de codes, nous avons une vue de balayage mais nous n'avons pas encore terminé. Remarquez comment chaque fois que je glisse horizontalement ou verticalement tout est déplacé autour ne serait-il pas bizarre si cela se produisait dans votre application. On ne veut pas ça. Donc, Framer nous donne juste une ligne de code pour réparer ça. Tout ce que nous avons à faire est de taper dans pages.scrollVertical égal à false et là vous l'avez, tout est balayable. Mais ce n'est pas fait parce que les points indicateurs en bas restent et nous voulons qu'ils se déplacent en fonction de la page sur laquelle vous êtes. Donc, nous allons devoir changer fondamentalement quelque chose en fonction d'un événement qui se produit. Donc, l'événement que nous voulons écouter dans ce cas est quand la page change. Pour ce faire, nous avons quelque chose que nous appelons changer page actuelle qui est quelque chose que nous pouvons écouter qui nous permet de savoir quand la page est changée, que quelque chose s'est passé. La façon dont nous pouvons nous assurer que cela fonctionne est en tapant un paramètre de débogage appelé print, vous pouvez taper ce que vous voulez là-bas et lorsque vous changez la page, remarquez comment Framer apparaît cette petite fenêtre avec le texte que vous avez décidé de vérifiez que l'événement a été déclenché. Donc, chaque fois que je glisse, ça dit « YAY ! Impressionnant. Vous pouvez toujours commenter les choses en appuyant sur la barre oblique de commande ou en tapant un hashtag au début, ce qui signifie qu'il ne va tout simplement pas être lu comme code, mais il est agréable de garder autour comme des notes pour que vous puissiez vous souvenir de ce que vous avez fait. Tout comme vous pouvez le voir en haut, que ce commentaire nous rappelle qu'il s'agit de tous les calques de Sketch importés dans un seul. Donc, maintenant, ce que nous voulons faire est que vous modifiez la page, nous devons mettre à jour ces points indicateurs. Donc, je vais rafraîchir pour effacer le document d'impression et maintenant je vais changer ce point d'indicateur en tapant Sketch.IndicatorDots mais vraiment ce que je veux est de déplacer juste le point sélectionné. Donc, vraiment, nous allons appeler Selected. Tout ce que je veux faire, c'est que je veux changer sa position x en fonction de la page sur laquelle nous sommes. Donc, pour ce faire, nous allons déplacer sa position x autour pour l'instant, vous pouvez essayer quelque chose d'idiot comme plus égal, ce qui signifie le prendre de sa position actuelle ajoutez-le à n'importe quel nombre que vous tapez comme 20. Maintenant, chaque fois que j'y vais, ça va bouger un peu. Mais ce n'est pas vraiment ce qu'on veut, n'est-ce pas ? Parce que quand je vais à gauche, ça va continuer à aller avant parce que chaque fois que je change de page, nous ajoutons 20, et ça ne va pas vraiment aider. Donc, ce que je veux essayer de faire est de le mettre en quelque sorte en fonction de la page sur laquelle nous sommes. Pour ce faire, je peux essentiellement rechercher quelle page nous sommes avec une méthode simple appelée index de page horizontal. Cela signifie que nous balayons horizontalement, nous voulons savoir quel index de la page sur laquelle nous sommes actuellement. Mais en ce moment, si nous devions par exemple imprimer ça pour voir ce qu'il fait parce que vous remarquerez que rien ne se passe. Nous pouvons simplement aller de l'avant et imprimer la même ligne et vous verrez qu'elle est en train de bouger, mais juste par un et que vous allez en arrière et en avant en conséquence, elle imprime la page sur laquelle vous êtes. Alors, allez-y et commentez cela et maintenant que nous savons qu'il va retourner le numéro de chaque page, nous devons multiplier cela par fondamentalement la largeur de n'importe quoi entre les points afin qu'il saute à cet état. Donc, nous pouvons prendre la largeur du point sélectionné en tapant dans esquiss.Sélectionné.Largeur et multiplier que par l'index. Si vous actualisez votre balayage, vous remarquerez qu'il est presque là, il se déplace vers l'avant et vers l'arrière selon les besoins, mais pas tout à fait la bonne distance. C' est parce qu'on se déplace sur une distance d' un point, mais vraiment ils sont espacés de deux points. Donc, je dois le multiplier par deux et là vous l'avez. Donc, nous allons nous arrêter là si vous voulez apprendre des choses plus avancées ici, vous pouvez réellement jeter un oeil à l'exemple que j'ai fourni dans le forum de discussion, ce qui vous permettra de voir une méthode plus avancée qui anime les choses comme vous faites glisser à travers, mais pour l'instant, cela devrait être assez bon pour aller alors pourquoi ne pas aller de l'avant et essayer d'importer votre propre exemple d'intégration et de le partager comme un projet dans le cours. 5. Prototype 3 : créer une action d'application de tâches à faire: Pour ce dernier exemple, nous allons apprendre à faire une application interactive. Cela implique de prendre ce que nous avons appris des deux premières leçons sur l' importation d'animations et d'esquisses et d'ajouter sur la façon d'utiliser un composant de défilement pour avoir une liste déroulante ainsi un composant déplaçable qui anime du contenu comme celui-ci lorsque vous faites glisser. J' ai déjà créé un exemple de fichier d'esquisse appelé fait pour que nous puissions l'utiliser pour cet exercice. Si vous voulez le rendre encore plus intéressant, vous pouvez réellement utiliser votre propre coutume pour faire conception d' applications si vous avez pris le cours de croquis d'Andrew sur Skillshare. Donc, pour commencer, allons de l'avant et ouvrons le fichier exemple et jetons un coup d'oeil à la façon dont il est structuré. Vous remarquerez d'abord qu'il y a un groupe appelé « Contenu de la liste » en ce que cela s'adapte bien sous l'en-tête en haut et sous le bouton d'action flottant en bas. Vous remarquerez que chaque couche est groupée avec un nom très facile à lire que nous pouvons ensuite utiliser pour les modifier lorsque nous sauterons dans Framer. Donc, il est important de garder ceci propre et bien rangé. Donc, avec cela dit, jetons directement dans Framer et voyons comment nous pouvons commencer à donner vie à cette chose. Donc, nous allons créer un nouveau document. Je vais importer le fichier d'esquisse que nous avons ouvert et nous allons renommer cette esquisse comme nous l'avons fait dans le dernier exemple, juste pour le rendre plus facile à écrire. La première chose que nous allons faire est de faire défiler le contenu de la liste. Nous allons le faire en créant un nouvel objet appelé Scroll et comme nous l'avons fait avec le composant page dans le dernier exercice, nous allons en faire un composant de défilement et envelopper la couche de contenu de liste. Donc, comme vous le remarquerez, c'est déjà déroulant ce qui est assez cool. Tout ce que nous avions à faire est de l'envelopper en utilisant la couche groupée correcte. Maintenant, la prochaine chose que nous voulons faire est de nous assurer qu'il ne fait pas défiler horizontalement comme il le fait maintenant. Si vous vous souvenez du dernier exemple, c'est en fait le même bit de code. Donc, maintenant il ne va que de haut en bas. Super. La prochaine chose que nous voulons faire est d'animer la première tâche appelée Task one call mom et de lui permettre d'être draggable. Pour ce faire, nous nous référons à la couche et nous tapons draggable.enabled est vrai. Vous remarquerez que ça marche. Je peux le faire glisser, mais ce n'est pas tout à fait l'interaction que nous voulons. Il vole hors de l'écran, vous remarquerez que si je rafraîchis ici, je peux faire glisser toute la vue de défilement et l'élément en même temps, ce n'est pas tout à fait idéal. Donc, il y a un tas de choses que nous allons vouloir faire. La première chose est de verrouiller et de s'assurer que vous ne pouvez pas le faire défiler verticalement parce que c'est tout simplement redondant ne fonctionne pas très bien. Donc, prenons tout cela et assurez-vous que nous définissons verticalement sur false. Maintenant, nous ne pouvons le faire défiler qu'horizontalement. Super. Une chose que vous pouvez remarquer est dans cet exemple et dans le dernier, nous avons dû taper point d'esquisse avant accéder à l'un des calques que nous avons importés à partir de Sketch. Au fil du temps, cela peut devenir un peu fatigant et donc Framer vous donne réellement un petit raccourci pour accélérer les choses. Tout ce que vous avez à faire est d'appeler un utilitaire appelé couches globales et de taper le nom de l'objet qui contient toutes vos couches d'esquisse. Maintenant, nous ne pouvons tout simplement pas inclure le préfixe et tout devrait toujours fonctionner comme il l'a fait. Super, ça accélérera un peu les choses. Ensuite, ce que nous voulons faire est d'ajouter quelque chose appelé un verrou de direction, afin que je ne puisse pas faire glisser deux choses à la fois quand je ne veux pas. Par exemple, si j'essaie juste de faire glisser cette première tâche et que la liste fait défiler sur moi, ce n'est peut-être pas génial. De même, si j'essaie de faire défiler et je déplace aussi la liste du haut, cela pourrait se sentir bizarre aussi. Heureusement, Framer rend ce super facile. Tout ce que j'ai à faire est de taper scroll dans ce cas parce que c' le composant scroll que nous voulons appliquer et nous voulons nous assurer que lorsque vous le faites glisser, qu'il est verrouillé et que nous voulons le faire à la fois pour le défilement contenu et aussi nous voulons le faire pour le contenu de la tâche. Ce qui veut dire que quand tu bouges, je ne peux pas aller de l'autre côté et que je fais défiler ça, je ne peux pas faire défiler vers le haut et vers le bas. Merveilleux. La prochaine chose que nous voulons faire est d'ajouter une animation de sorte que lorsque je fais glisser la tâche, si je ne la déplace pas au-delà d'un certain seuil, elle devrait simplement revenir au début. Donc, pour ce faire, nous allons devoir essentiellement appeler un événement une fois que j'ai lâché le jeu parce que cela ne devrait pas arriver lorsque je bouge ou quand je commence, ça devrait arriver quand je libère. Donc, pour ce faire, tout ce que je veux faire, c'est écouter quand j'ai déplacé cette tâche. Donc task1.sur les événements et encore une fois quand je l'ai terminé, je veux appeler une animation ici. Donc, tout ce que nous faisons, c'est animer la tâche. Nous voulons fondamentalement que son x se réinitialise à zéro. Peut-être que nous voulons ajouter un petit ressort à cela pour que ça se sente bien. Dans ce cas, vous pouvez voir qu'il rebondit légèrement en place ce qui est un joli rappel que cette chose est physique d'une certaine manière, que c'est quelque chose qui peut bouger. Mais on ne veut pas qu'il revienne à chaque fois, n'est-ce pas ? Si vous atteignez un certain point, nous voulons qu'il anime un chemin. Donc, pour faire cela, ce que nous voulons faire est de vérifier où se trouve cette position comme vous le faites glisser. Pour que nous sachions à quel moment devrions-nous déclencher un drapeau et dire hey, je suis exactement là où je dois être pour faire la transition et donc ce que nous pouvons faire pour le rendre plus facile, c'est que nous pouvons chercher un autre événement appelé drag move et ce est appelé chaque fois que vous déplacez un élément sur l'écran. Donc, dans ce cas, nous voulons essentiellement regarder en l' imprimant où est la position x de cette tâche. Vous remarquerez en bas qu'il imprime chaque valeur x au fur et à mesure que je la déplace sur l'écran. Donc, vous pouvez dire que si c'est vraiment loin à gauche, c'est dans les négatifs parce que c'est derrière zéro. Si vous le déplacez vraiment loin vers la droite, il va vers le haut dans les années 200 et plus loin. Nous voulons vraiment commercialiser tout ce que vous voulez et l'une des belles choses à propos du proto-typage est ici que vous pouvez prendre cette décision au lieu de laisser le soin à vos ingénieurs. En tant que concepteur, vous pouvez avoir un impact sur la façon exacte que quelque chose se sent vraiment. Donc, dans ce cas, je pense que quelque chose autour de 250 devrait se sentir plutôt bien. Donc, nous n'avons plus vraiment besoin de cela, je vais juste en venir à ça pour l'instant et au lieu de cela, nous voulons écrire quelque chose appelé une déclaration if. Pour voir si la tâche a déplacé une certaine quantité sur l'écran, faites quelque chose si elle ne fait pas autre chose. Donc, dans ce cas, nous voulons voir a dépassé 250 pixels. Donc, si c'est moins de 250, ramenons-le tout en arrière et si ce n'est pas le cas, alors nous allons imprimer quelque chose juste pour que nous puissions nous assurer que cela fonctionne. Encore une fois, parce que le script café utilise indentation tout ce qui est indenté après cela si l'instruction fait référence à quelque chose qui devrait arriver ici tout indenté après que le reste se passe après. Donc, ici vous pouvez vérifier si je le déplace assez loin sur l'écran, il dit « Bonjour » et si je le déplace juste un peu, il va revenir directement ou même si je vais dans les négatifs parce que c'est encore moins de 250. Donc, cela fonctionne assez bien, mais au lieu d'imprimer « Bonjour » ce que nous voulions vraiment faire est de glisser hors de l'écran. Donc, vous pouvez vous sentir libre de copier et coller l'animation existante, mais au lieu de la valeur x étant nulle, nous voulons qu'elle aille assez loin de l'écran. Donc, je vais écrire 750 qui est la largeur de l'écran donc il s'éteint au moins. Voyons si ça a marché. Donc, si je fais glisser un peu moins de 250, ça s'enclenche si je vais plus de 250, ça glisse. Génial, c'est un bon début. Il y a encore un tas de choses à faire, non ? Nous voulons animer cette coche pour qu'elle apparaisse au fur et à mesure que vous faites glisser et nous voulons également nous assurer que nous glissons hors du reste des éléments. Nous voulons les faire glisser un peu vers le haut pour qu'ils remplacent ce que vous venez de retirer. Faisons ça d'abord. Donc, ce que nous disons est que si cela traîne hors de l'écran, ajoutons un commentaire pour rendre cela plus clair. Donc, tout ce qui se passe dans cette indentation se produit après l'appel de cette else-instruction. Donc, ce que nous voulons faire est fondamentalement déplacer tous ces objets différents, tâche deux, tâche trois, et tout cela fait et juste le déplacer vers le haut. Donc, pour ce faire, allons de l'avant et commençons par le fait fait d'abord. Prenons fait et animons ça. Nous voulons l'aborder dans la valeur Y et nous voulons l'amener à, pour l'instant, disons sur l'endroit où la tâche 3 a été commencée. Donc, pour ce faire, nous voulons juste ramener sa valeur Y à l'endroit où la tâche 3 est actuellement positionnée, ce qui semble être d'environ 380 pixels si vous regardez cela. Nous pouvons lui donner une courbe si nous le voulons ou nous pouvons simplement simplifier et la garder comme une fonction temporelle. Vous pouvez même utiliser, si vous avez déjà utilisé CSS, vous avez probablement entendu parler de béziers cubiques, et vous pouvez utiliser n'importe lequel d'entre eux ou vous pouvez même simplement utiliser la facilité dans ou hors quelque chose comme ça. Dans ce cas, nous pouvons simplement utiliser ease out, qui au lieu d'un ressort est juste une fonction d'assouplissement, donc nous pouvons voir à quoi cela ressemble ici. Donc, il semble que lorsque j'ai glissé à travers, ces éléments se sont déplacés comme je m'y attendais. C' était un peu trop rapide. Alors, voyons si je ralentit ça. mieux, mais nous avons encore besoin de déplacer les tâches 1, 2 et 3. Alors, faisons-le. Tâche deux, animons-la. Donnons plus de place ici pour que vous puissiez lire un peu mieux. Définissons sa valeur Y à l'endroit où se trouvait la tâche une. Nous pouvons régler la même heure et faisons la même chose pour la tâche 3. Nous voulons le mettre à l'endroit où était la tâche 2. Alors, en traversant, tout glisse vers le haut. Maintenant, si vous remarquez attentivement, l'espacement entre fait dans le bas de ce groupe ne se déplace pas exactement au même rythme. On dirait presque qu'il est un peu parallaxé, ce qui est un effet soigné, mais peut-être pas ce que nous voulons. Donc, je veux juste modifier le positionnement Y fait juste un peu plus bas et je peux juste utiliser les mathématiques et je peux juste ajouter, mettons-le 20 pixels plus bas. Ça a l'air un peu mieux, peut-être même un peu plus. C' était trop. Peut-être que 20, c'était très bien. Ouais, ça a l'air plutôt bien. Maintenant, nous pouvons faire glisser quelque chose et animer le contenu vers le haut de l'écran. Mais ce que nous voulons faire ensuite, c'est que vous faites glisser l'élément, permettre à la coche de se déplacer. Donc, si nous regardons en arrière où nous vérifions le positionnement X de cet élément appelé tâche 1, nous pouvons annuler le commentaire maintenant et le réutiliser un peu ou si vous venez de le supprimer, c'est bien, il suffit de le taper à nouveau. Ce que nous voulons faire, c'est que nous voulons changer quelque chose à propos cette coche qui s'appelle vérification terminée. Pour l'instant, gâchons son opacité. Donc, par défaut, son opacité a été définie sur un. Donc, si nous laissons ça, rien ne changera vraiment. Elle est restée à l'un tout le temps. Si on le met à zéro, vous remarquerez qu'il a disparu. Mais ce que nous voulons vraiment, c'est qu'il s'anime pendant que vous faites glisser, pas de faire l'un ou l'autre. Donc, pour ce faire, ce que nous pouvons faire est d'utiliser une méthode appelée modulate, ce qui semble fou, mais c'est en fait assez simple. Donc, pour en savoir plus sur le fonctionnement, nous pouvons simplement aller directement dans les documents et y jeter un oeil. Donc, il semble qu'il prenne une valeur, qui est l'entrée du modulate, ce qui signifie, ce que je nourris dans ce qui devrait changer au fil du temps. Donc, vous pouvez penser à cela comme peut-être vous convertissez Celsius en Fahrenheit et dans ce cas, comme il se déplace entre zéro et 100, vous voudriez que Fahrenheit lise quelque part entre 32 et 212, donc, qu'ils ont mappé les uns aux autres de manière appropriée. Donc, dans ce cas, ce que nous voulons faire est de mapper la position X de la tâche à une valeur d'opacité comprise entre zéro et l'une des coches. Alors, essayons-le. Si je prends la valeur X de la tâche 1 comme entrée, alors si vous vous souvenez des documents, et vous pouvez toujours regarder à nouveau si vous voulez les référencer, nous avons deux plages à mettre. La première gamme devrait être quand nous voulons commencer cette animation, qui devrait être, je ne sais pas, quelque part autour de 100 à 250. Droit ? Cela fait référence à la position X de la tâche. Ensuite, nous voulons faire passer l'opacité de zéro à un pendant cette plage. Alors, donnons-lui un coup de feu. Plutôt bien. Donc, maintenant, nous avons la coche qui s'anime avec son opacité avec votre position de glissement. Maintenant, pour un dernier petit détail, faisons la même chose, mais faisons-le avec la valeur d'échelle de la coche. Ainsi, nous pouvons le copier et le coller, le modifier à l'échelle et voir ce qui se passe. Maintenant, vous remarquerez, cela va beaucoup trop loin que je sors et si nous regardons à nouveau la documentation pour moduler, vous remarquerez qu'il y a quelque chose appelé limite. Il est défini sur false par défaut, il n'y a vraiment pas de limite. Donc, si vous passez ce point, par exemple dans cette conversion, il serait toujours en mesure de le faire. Mais nous ne voulons pas vraiment ça parce que nous ne voulons pas qu'il dépasse la position de vous traîner. Donc, ce que nous voulons faire ici, c'est dire, « Hey, nous voulons vraiment que la limite soit réelle. » Ensuite, comme vous le remarquez, il reste en place comme vous le souhaitez. Plutôt bien. Donc, cela couvre un bon morceau de beaucoup de trucs et astuces que vous pouvez utiliser pour créer des prototypes animés dans Framer. Un autre raccourci qui est intéressant est, vous pouvez réellement spécifier au lieu de taper dans toutes ces courbes encore et encore. Vous pouvez réellement taper une animation par défaut, ce qui est quelque chose que vous pourriez vouloir faire. La façon dont vous le faites est de définir les valeurs par défaut pour votre animation, et nous voulons définir fondamentalement une courbe par défaut et dans ce cas un ressort. Il suffit de choisir un et maintenant vous pouvez réellement débarrasser des choses que vous avez spécifiées un par un. Notez que c'est encore rebondit un peu et si je les prends aussi, tout s'anime encore. Allez-y et donnez un coup de feu. J' aimerais vous voir télécharger un fichier de projet en le partageant et de cette façon, nous pouvons jeter un coup d'oeil et l'ajouter à votre projet. Si vous vouliez devenir fou d'utiliser votre propre design personnalisé pour le fichier d'esquisse, ce serait génial aussi. Une chose à remarquer pour cela est que le fichier de croquis ici, vous remarquerez si vous cliquez sur l'aéroport est de 750 pixels de large. Si vous prenez le cours de croquis, vous allez probablement faire les choses à un x donc dans ce cas, 375 largeur. Mais framer a en fait besoin que vous utilisiez la résolution exacte de ce que vous ajoutez dans votre prototype. Donc, vous voudrez tout doubler si vous utilisez cette classe mais pour ce cas, l'exemple que j'ai fourni devrait être suffisant et vous pouvez même simplement personnaliser le style de celui-ci vous-même et aller de l'avant et télécharger tous les changements que vous pouvez Pensez, peut-être que vous pouvez changer l'arrière-plan du ... si je bouge ça, vous avez cette couleur verte ici, vous pourriez entrer et peut-être changer ça un peu si vous vouliez faire quelque chose de différent. Soyez créatif et j'adorerais voir ce que vous avez. N' hésitez pas à poster des questions au groupe de discussion ou si vous cherchez un temps de réponse plus rapide, je voudrais Facebook.com/groups/framerJS qui a une communauté vraiment active où les gens répondent aux questions tout le temps très vite au lieu d'être juste moi. 6. Vos prototypes finaux: Donc, à ce stade, j'espère, vous avez créé ces trois exercices qui vous ont vraiment appris les bases de la création d'un prototype mobile haute fidélité directement sur votre téléphone. Avec cela, vous avez appris à animer choses et à penser un peu plus à la physique du printemps, vous avez appris à lier un tas d'écrans à l'aide de croquis et à les importer directement dans votre prototype, et vous avez a appris à prendre toutes sortes d'entrées utilisateur, du glissement au balayage, passant par la pagination, et a vraiment intégré cela pour construire ces prototypes complexes quand vous en avez besoin. Donc, encore une fois, allez de l'avant et téléchargez les projets que vous avez fait pour que nous puissions en parler davantage, et j'espère que vous avez apprécié la classe. 7. Explorer le design sur Skillshare: façon.