Concevoir, réaliser et publier votre portfolio avec Figma et Framer

1. 1: Si vous êtes designer ou si vous travaillez dans le domaine de la création, vous avez besoin d'un portfolio. n'y a aucune excuse, oui, vous pouvez publier sur les réseaux sociaux, mais avoir votre travail sur votre propre domaine, sur un site Web que vous avez conçu et construit, sera toujours plus professionnel. Mais comment créer un site Web qui demande beaucoup de travail et de temps Je n'arrive pas à lire un code. C'est super cher. Et quelle plateforme dois-je utiliser ? Ne vous inquiétez pas, nous le faisons ensemble dans ce cours. Vous allez créer votre propre portefeuille afin de pouvoir le partager avec n'importe qui, y compris les entreprises, les clients ou famille et les amis si vous le souhaitez. Et vous n'aurez pas à écrire une seule ligne de code. Bonjour, je m'appelle No Keto. Je suis un brillant designer expérimenté basé à Barcelone. Pour trouver des clients et des projets, je dois passer en revue mon portefeuille de nombreuses fois. Je sais que cela peut être une expérience intimidante, mais ce n'est pas nécessairement le cas, surtout si vous utilisez les bons outils Et c'est ce que nous allons faire ici. Nous allons utiliser Figma et Framer pour créer notre propre Nous allons passer en revue notre design sur Figma. Et ne vous inquiétez pas si vous n'avez pas de design. J'en ai préparé un spécialement pour ce cours que vous pouvez utiliser pour suivre, puis nous intégrerons nos designs dans Framer Framer est un outil qui nous permet de créer site Web entièrement fonctionnel sans écrire une seule ligne de code Plus important encore, pour ce cours, Framer est totalement gratuit. Une fois que nous aurons créé nos designs sur Framer, nous créerons les interactions nécessaires pour lier nos pages, créer des systèmes de gestion de contenu afin gérer notre contenu de manière dynamique, ajouter des animations et des transitions, et nous ajouter des animations et des transitions, et assurer que notre site s'affiche bien sur tous les appareils Enfin, publiez notre site Web sur notre propre domaine. Le résultat final, un site Web que vous pouvez partager avec n'importe qui et commencer à chercher l'emploi de vos rêves. Mais non seulement cela, en suivant ce cours, vous acquerrez les compétences nécessaires pour créer non seulement ce site Web, mais aussi n'importe quel autre. Commençons. 2. Projet de classe: Le projet de ce cours est assez explicite. Vous allez créer votre propre portefeuille à l'aide de Framer. Vous avez la possibilité de suivre ce cours en utilisant vos propres designs que vous créez dans Figma ou d'utiliser ceux que je fournis dans l' onglet Ressources. C'est à vous de choisir. Vous pouvez suivre ce cours peu importe ce que vous choisissez de faire, et voici les étapes que nous allons suivre. Tout d'abord, nous allons préparer nos fichiers Figma. Si vous choisissez d'utiliser votre propre design, je vous fournirai de précieux conseils pour nommer les couches et organiser votre design afin d'assurer une transition fluide. La deuxième étape consistera à explorer Framer pour vous familiariser avec la plateforme afin de connaître tout le potentiel qu'elle offre La troisième étape consistera à installer le plug in entre Figma et Framer Nous allons apprendre à l' installer et à l'utiliser. La première étape sera de transférer vos créations de Figma dans un encadreur C'est le moment magique où, avec un simple copier-coller, vous pouvez intégrer tous vos designs dans un encadreur. Nous allons tout ajuster et changer pour que tout soit exactement comme vous le souhaitiez avant d'ajouter des animations, des transitions ou toute autre touche de finesse. Le résultat final de ce cours sera une URL La que vous pourrez partager avec n'importe qui. Et surtout, vous pourrez le partager avec le reste de la classe. De plus, si vous le souhaitez, n'hésitez pas à partager votre design Figma afin que nous puissions voir tout votre processus de conception Commençons ce cours en examinant le framer. 3. Présentation de Framer: Nous avons beaucoup parlé de Framer. Mais qu'est-ce que Framer ? Framer est un constructeur de site Web gratuit sans code. Cela signifie que vous pouvez créer de véritables sites Web avec des designs que vous avez créés en quelques heures, voire quelques minutes. Vous n'avez pas besoin de coder, il vous suffit prendre vos designs, mettre dedans, de les publier, et vous aurez un site Web en ligne que vous pourrez commencer à créer, évidemment sans design préalable. Et faites le travail directement sur Framer, car il contient des tonnes de composants et de modèles avec lesquels vous pouvez commencer Même avec un design très simple, vous pouvez ajouter des animations, des transitions, et si vous avez envie encore un peu plus de bits de code pour le rendre plus complexe. Désormais, rien de tout cela n'est nécessaire pour créer un site Web simple. Comme je l'ai dit, vous avez également de nombreux modèles avec lesquels vous pouvez commencer. Certains sont gratuits, d'autres payants, mais ils constituent tous d'excellents points de départ pour vos projets. Il contient également de nombreuses documentations, vidéos, didacticiels et même un cours complet pour vous aider à démarrer sur la plateforme Nous n'aurons pas le temps d'aborder tout cela dans ce cours, mais si cela vous intéresse, je vais vous laisser quelques ressources ci-dessous afin que vous puissiez les consulter. Et n'hésitez pas à poser des questions à ce sujet. Mais jetons un coup d'œil à l'éditeur lui-même. Si c'est la première fois que vous ouvrez Framer, vous devrez vous inscrire avant de pouvoir l'utiliser Je vous suggère vraiment de l'utiliser avec Google afin ne pas avoir à vous souvenir de votre identifiant, de votre mot de passe, etc. Mais n'hésitez pas à continuer avec votre e-mail si vous souhaitez le séparer de votre compte Google. Maintenant, lorsque nous appuyons sur le lancement, notre page de projets ou notre tableau de bord nous sont présentés . Si c'est la première fois que vous atterrissez ici, se peut qu'il soit vide ou qu'il s'agisse d'un projet de démonstration. Mais ici, en haut de la page, il y a quatre façons de commencer. Vous pouvez commencer par un didacticiel interactif. Vous pouvez commencer par un modèle. Vous pouvez commencer par coller depuis Figma ou regarder un tutoriel pour améliorer vos compétences Sur la gauche, vous aurez votre équipe. Dans mon cas, j' ai donc un terrain de jeu, qui est mon espace pour tester des designs. J'ai mon équipe de portefeuille au sein de laquelle j'ai différentes options pour mon portefeuille. Ensuite, j'ai deux projets sur lesquels je travaille avec d'autres personnes. Mais créons un nouveau projet afin que je puisse vous montrer le véritable éditeur. Maintenant, si vous connaissez Figma ou d'autres éditeurs, en aurez l'impression En haut, nous avons différentes options pour commencer. Nous pouvons commencer par insérer une page complète, juste une section, des options de navigation ou des menus, ainsi que des collections CMS et d'autres éléments susceptibles d'intéresser notre page, tels que des liens vers des réseaux sociaux ou des Nous pouvons également commencer par une mise en page telle qu'un cadre, différentes lignes, colonnes ou grilles adaptées à notre conception Nous pouvons ajouter un texte simple. La possibilité de commencer par le CMS, mais ne vous inquiétez pas, nous allons avoir une leçon axée sur l'ajout d'une collection sur Framer Et puis nous avons différentes actions, qui ressemblent à un menu rapide pour effectuer des actions spécifiques. Chaque projet comportera évidemment des pages différentes. Par exemple, nous avons une page d'accueil, mais nous pouvons ajouter une page à propos, ou nous pouvons ajouter autant de pages que nous le voulons, puis les lier ensemble comme un vrai site Web. Lorsque nous ajoutons quelque chose à notre page, cela s'affiche dans le menu Couches. Comme cela fonctionne sur Figma ou d'autres outils, nous pouvons sélectionner chaque élément différent Pour chacun d'entre eux, nous aurons des propriétés différentes telles que la position, les effets de taille, l'animation et les transitions que nous pouvons ajouter à cet élément. Mais encore une fois, ne vous inquiétez pas, nous allons nous concentrer sur une autre leçon. Comme il s'agit d'un élément de texte, nous avons tellement de textiles que nous pouvons modifier. Ici, en haut, nous avons les différents paramètres du site. Nous avons notre profil, nous avons le paramètre de localisation, vous pouvez donc définir les options de langue par défaut pour le changer de langue. Nous avons également les paramètres de page et les paramètres du site. Nous avons quelques propriétés SEO que nous pouvons définir ici. Nous avons les différents domaines. Nous avons une redirection, nous pouvons donc rediriger depuis une autre page. Nous avons la mise en scène et la version, ce qui est très utile si vous souhaitez revenir à une version précédente enregistrée sur Framer Nous disposons de certaines analyses qui sont très utiles lorsque nous publions notre site Web et nous avons différents plans de mise à niveau. Nous avons également les paramètres de référencement pour chaque page spécifique de notre côté. Nous allons maintenant examiner cela beaucoup plus en détail lorsque nous serons prêts à publier notre site. Ne vous inquiétez pas si vous ne comprenez pas ce que tout cela fait. Enfin, nous avons ici la possibilité de prévisualiser notre version pour nous assurer que nous en sommes satisfaits et enfin de la publier. Il s'agit évidemment d'un aperçu très rapide de Framer. Ne t'inquiète pas. Au fur et à mesure que nous progresserons dans ce cours, j'aborderai plus en détail certains de ces domaines tels que le CMS, comment ajouter des animations ou comment créer une version réactive pour mobile. Ne vous inquiétez pas si cela vous semble frais, nous prendrons notre temps. Mais pour l'instant, allons-y et installons le branchement qui nous permettra de transférer notre design de Figma 4. Installer le plugin Figma to Framer: Il existe de nombreuses façons de démarrer le projet Framer. Nous avons vu dans la leçon précédente que vous pouvez glisser-déposer des sections déjà créées. Vous pouvez partir d' une mise en page et y ajouter vos composants. Vous pouvez partir d'un modèle ou d'un design Figma Voici ce que nous allons faire. Pour cela, nous avons besoin d'un plug-in. Revenons à notre tableau de bord ou à notre page de projets. En haut, nous devons sélectionner Coller depuis Figma. Si, pour une raison ou une autre, vous ne le voyez pas, rendez-vous sur Framer.com slash Nous y voilà. En cliquant sur ce lien, vous serez redirigé vers la même page. L'option que vous choisissez n' a pas vraiment d'importance. Cliquez sur Get the Figma Plug In, et cela ouvrira la page Figma pour ce plugin Maintenant, dans mon cas, je ne suis pas enfermé. Je vais le faire rapidement. Si vous n'êtes pas connecté à Figma sur le navigateur, je vous suggère de le faire également Une fois que vous êtes connecté à Figma, cliquez sur Try it out. Cela devrait ouvrir un nouveau fichier Figma avec l'écran du plugin. Ouverte. Cet écran nous indique comment l'utiliser, comment nommer nos couches, comment nous assurer que nos groupes sont entièrement préservés. Et vous avez également un lien vers un tutoriel. Il s'agit maintenant d'un fichier vide. Si nous appuyons sur Run, rien ne se passera vraiment. Comme s'il n'y avait rien à copier ici. Créons rapidement un design afin de pouvoir le tester. Je vais maintenant créer un cadre de 120 ou 50 pixels. Je vais lui donner des coins arrondis et je vais lui donner de la couleur. Je vais ajouter le texte. Cela a fonctionné. Je vais sélectionner le cadre et il doit être disposé juste pour m' assurer que l' espacement est correct Maintenant que c'est fait, je vais sélectionner le cadre à partir d'ici. Vous pouvez également le sélectionner dans le panneau des couches. Accédez à notre menu Figma, cliquez sur Plugins, puis sur Figma to HTML with Et cela devrait nous indiquer que quelque chose est copié. Maintenant, cette fenêtre contextuelle pourrait vous être présentée ici. Il vous suffit de sélectionner Copier dans le presse-papiers. Il indique copier vers des couches basées sur le cadreur. C'est ce que nous allons faire. Nous allons ouvrir Framer Je vais ouvrir le site que nous avons créé précédemment. Je vais aller sur la page À propos et appuyer sur la commande V. Voici notre bouton. Je vais le centrer un peu plus. C'est la même chose que celle que nous avons conçue sur Figma. Si vous ouvrez ici le panneau de couche, vous verrez que nous avons un cadre et du texte Et le texte est en fait modifiable. Nous pouvons donc le supprimer et le remplacer par autre chose si nous le voulons. Non seulement il est très facile de copier nos designs de Figma dans un encadreur, mais tout est modifiable et tout conservera ce que vous avez conçu Maintenant, si cela n'a pas fonctionné, si vous n'avez pas réussi à installer le plug-in et à copier le design de Figma dans le cadre, je vous suggère de recommencer le processus Vous allez sur Framer.com slash Figma. Branchez le connecteur Figma, assurez-vous d'être connecté à Figma lorsque vous cliquez sur Essayer Et assurez-vous également, lorsque vous ouvrez Figma, que si vous accédez au menu des plug-ins, Figma to Tema with framer apparaît Si cela ne fonctionne toujours pas pour vous et que vous n'avez pas pu installer le plug-in, faites-le moi savoir ci-dessous et je ferai de mon mieux pour vous aider à le configurer afin que vous puissiez continuer ce cours correctement. Cependant, si cela a fonctionné pour vous et que le modèle est maintenant copié sur le cadre, vous êtes prêt pour la leçon suivante, qui consiste à intégrer nos designs de Figma à la plateforme 5. Vérifier les motifs Figma: Avant de tout copier dans son intégralité, jetons un coup d'œil au design que j'ai préparé pour vous. Maintenant, n'oubliez pas que vous pouvez utiliser vos propres designs ou vous pouvez utiliser ceux que je vis sous leur onglet de ressources. Cette technique fonctionnera dans les deux sens. J'ai ici un site de portfolio très simple. Nous avons une page d'accueil, elle possède un menu de navigation en haut avec trois onglets. Nous avons du travail, nous en avons environ et nous avons une page de contact. Nous avons un petit en-tête haut avec mon propre nom, mon titre, mon emplacement et ma disponibilité actuelle. Ensuite, nous avons quelques projets ici. Je n'ai pas ajouté de titre, mais remarquez que chacun d'entre eux aura la même mise en page. Nous avons un CTA, nous prenons contact, puis un pied de page avec des liens vers les réseaux sociaux J'ai également conçu la version mobile, et même si nous n'allons pas copier cette version dans Framer, c'est une bonne chose car cela me donne une idée de ce à quoi je veux que mon design ressemble sur un appareil mobile Nous avons alors la même chose pour la page du projet. Nous avons le projet ici en haut, nous avons une image principale, une description, le rôle du client, des données sur ce projet. Ensuite, nous avons des images, des paragraphes, etc. avec une mise en page différente. Puis le même CTA ici en bas. Enfin, nous avons un point sur le stand avec un en-tête contenant quelques informations sur mon expérience, façon de me contacter et sur le même CTA s'agit d'un design très basique, mais il comporte certains éléments qui, au fur et à mesure que nous y travaillerons sur le cadre, nous simplifieront la vie Des choses que nous pouvons réutiliser. Des choses que nous pouvons concevoir une fois et dupliquer autant que nous le voulons. Nous allons essayer de le construire de manière efficace. convient également de noter que j'ai essayé de nommer chaque couche et chaque groupe afin qu'une fois que nous avons copié dans le cadre, il soit beaucoup plus facile de comprendre ce qui est copié et quel bit nous modifions. Je suggère que si vous utilisez vos propres designs, vous fassiez de même. Assurez-vous que chaque section est correctement groupée et que chaque couche porte le nom approprié. Si vous souhaitez utiliser ce design au lieu du vôtre, accédez aux ressources, poignardez-le et téléchargez-le à nouveau à partir de là. Si vous rencontrez des problèmes, faites-le moi savoir et je ferai de mon mieux pour vous aider. 6. Copier les motifs dans Framer: Tu devrais être prête. Si vous avez regardé jusqu'à présent, vous devriez avoir un compte chez Framer Vous avez installé le connecteur pour intégrer nos designs Figma dans le cadre, et vous êtes maintenant prêt à N'oubliez pas que vous pouvez utiliser vos propres designs, mais je vais utiliser le projet que j'ai présenté dans la leçon précédente pour toute la classe. Allons-y, pour simplifier les choses, nous allons simplement copier la version de bureau. Et nous allons commencer par la page d'accueil. Je vais retourner à Framer et à mon tableau de bord afin de créer un nouveau projet Je vais cliquer sur Nouveau, et on devrait me présenter une page blanche. Je vais retourner à Figma. Je vais être un peu brutal. Je vais tout sélectionner sur ma page d'accueil. Tout est encadré, mais je vais sélectionner les différentes sections de ma page d'accueil. Je vais accéder aux plugins du menu Figma et appuyer sur Figma to HTML with Remarquez ici en bas comment cela signifie qu'il copie mes couches. Je vais dire copier dans le presse-papiers, et cela me dit que 51 couches ont été copiées que je peux coller dans Framer Je vais revenir à Framer, sélectionner le bureau et je vais juste dire commande Vous pensez peut-être, d'accord, tout est copié ici, mais je ne vois rien. Eh bien, la couleur de fond est légèrement différente. Je vais m'assurer que la couleur de fond que j'ai sur Figma est la même que sur Framer. Nous y voilà. Tout est copié maintenant. Mais je ne peux pas voir au-delà de ce point. Cela est dû au fait que ce bureau n'a pas la hauteur appropriée. Au lieu de dire 1 000 figues, je vais juste dire « fit content ». Et voilà, c'est parfait. Mais encore une fois, je rencontre un autre problème. Maintenant, la largeur que j'ai sur le cadre est légèrement inférieure à celle que j'ai sur Figma Il y a deux manières de résoudre ce problème. Soit nous changeons le bureau avec encadreur pour qu'il corresponde à celui de Figma, soit nous modifions les différents éléments situés au-delà de ce point pour les adapter à cette nouvelle largeur Tu peux faire ce que tu veux. Dans ce cas, cela dépend certainement de vous. Mais parce que je peux voir que c'est juste cet élément ici, alors que le reste fonctionne correctement. Je vais juste régler ça. Au lieu de dire que la largeur est fixe, je vais dire que la largeur est remplie, la largeur remplit le conteneur dans lequel se trouve cet élément. Nous pouvons faire de même avec ces autres éléments. C'est le même design que celui que nous avons sur Figma, et maintenant c'est sur Framer bien, c'est que sur Figma, nous avons tout construit en utilisant la mise en page automatique, ce qui signifie que cela préserve les différentes distances entre les éléments Cela préserve les différentes mises en page. Et quelque chose d'aussi rapide que de fixer la largeur. Et la hauteur d'un élément est très simple car il est construit sous forme de pile comme disposition automatique sur Figma Maintenant, si vous n'êtes pas familier avec la mise en page automatique sur Figma, je vous suggère de regarder des tutoriels pour vous familiariser avec celui-ci car c'est l'un des outils les plus utiles proposés par la plateforme Parce que c'est quelque chose de si courant. Maintenant, Framer, bien qu'il porte un nom différent et qu'il s'appelle Stack, offre les mêmes propriétés que celles que nous avons sur Figma, ce qui nous permet de correspondre exactement à notre design Maintenant, passons également rapidement à notre page à propos. Nous allons sur les pages et nous créons une nouvelle page, pour laquelle nous allons appeler. Faisons de même. Nous passons à notre dossier Figma Je vais sur la page à propos. Je sélectionne les différentes couches que j'ai ici. Accédez au menu Figma. Branchez Figma au HTML, assurez-vous qu'il le copie Copiez dans le presse-papiers, allez dans le cadreur et appuyez sur la commande V. Maintenant, nous avons le même problème. Nous savons comment y remédier. Nous allons maintenant régler la valeur la plus élevée pour l'adapter au contenu. Ici, nous allons dire Feel. La seule chose ici est que, comme cette version de bureau est un peu plus étroite que celle que nous avons sur Figma, il n'y a pas beaucoup d'espace entre ces deux éléments sur la version encadrée Maintenant, nous pouvons le laisser tel quel, ou nous pouvons le modifier si nous le voulons. Je vais dire de commencer, et je vais réduire un peu cette image. Il a à peu près la même hauteur que l'élément de texte. Nous y voilà. Notre page à propos est entièrement copiée. J'ai dit tout à l'heure que nous pouvons être efficaces en transformant en composants réutilisables des éléments qui se ressemblent et fonctionnent de la même manière des éléments qui se ressemblent et fonctionnent de la même manière sur différentes pages. Si nous revenons à notre page d'accueil, nous avons ce lien du projet ici et il est répété plusieurs fois. Désormais, chaque projet est le même élément avec les mêmes informations. Il aura des titres différents, mais les données seront les mêmes. Nous avons un titre, un type et un an. Cela redirigera ensuite vers une autre page. Nous pouvons transformer cet élément en composant. Maintenant, qu'est-ce qu'un composant ? C'est exactement la même chose que ce qui se trouve sur Figma. composants sont essentiellement des éléments que vous pouvez réutiliser dans l'ensemble de votre projet ou de votre conception, et nous vous aiderons à gérer des conceptions cohérentes sur différentes pages. Nous pouvons continuer en sélectionnant le lien complet. Assurez-vous donc de sélectionner le lien du projet. Nous allons cliquer avec le bouton droit de la souris et dire Créer un composant. Je vais l'appeler Project Link. Cela créera une page séparée où nous pourrons modifier ce composant principal. Je vais supprimer tout cela si nous le voulons, nous pouvons dupliquer celui-ci, avoir exactement la même chose. Mais maintenant, si nous voulons tous les modifier en même temps, nous pouvons simplement aller ici. Je vais changer le côté du téléphone, vais dire 64, je vais dire 24. Lorsque nous accédons à notre page d'accueil, toutes ses instances sont modifiées. C'est un très bon moyen de travailler efficacement et de s'assurer que tous les éléments qui se ressemblent de votre côté sont correctement mis à jour. Pour l'instant, nous allons laisser les choses comme ça. Nous avons copié les designs de notre page d'accueil et de notre page À propos de Figma dans Framer Vous vous demandez peut-être, d'accord, qu'en est-il de la page du projet ? Nous avons ici une page de projet que nous devrions également copier, n'est-ce pas ? OK. Nous n'allons pas le copier pour le moment car il nécessite que vous connaissiez les collections et les CMS, ce qui est par hasard la prochaine leçon 7. Comprendre le CMS: Nous avons maintenant le squelette principal de notre site. Nous avons notre page d'accueil, et nous avons une page à propos. Maintenant, nous devons réfléchir à nos projets, mais avant cela, nous devons parler du CMS ou des collections. Imaginons ce qui suit. Chaque projet est un bloc. Chaque bloc contient des informations différentes, car deux projets n' auront pas le même titre. Peut-être qu'ils ont la même année, peut-être qu'ils ont le même client, mais les domaines seront les mêmes. Vous avez un titre, un type de projet, vous avez un an, vous avez un client, et vous avez peut-être des paragraphes et des images. Chaque page aura essentiellement un contenu différent, mais nous aurons la même structure. Nous pouvons y réfléchir de manière dynamique. Nous créons la page ou ce composant, et nous l'utilisons pour chaque projet contenant des données différentes. Pour cela, nous avons besoin de collections. Maintenant, si vous ne le suivez pas, voyons-le de manière pratique. Nous allons accéder au CMS Stab et cliquer ici en haut, sur le bouton plus Il s'agit de créer une collection pour nous, et nous allons l'appeler Projects Perfect. Maintenant, il n'y a pas d'article ici, il n'y a que deux champs ici. Nous avons le titre et nous avons Slug, qui sont les données de base dont nous avons besoin Nous allons dire «   modifier les champs » ici. Vous pouvez ajouter ce que vous voulez. Nous en avons déjà mentionné quelques-uns. Ajoutons du texte brut et disons l' année, car ce sera du texte brut. Nous allons ajouter un client. Nous allons également ajouter un type de projet et nous allons ajouter un rôle pour le moment. C'est ça. Vérifiez que vous pouvez ajouter différents types de champs pour le moment. Nous allons simplement le conserver sous forme texte brut afin de pouvoir le modifier rapidement. Mais n'hésitez pas à explorer tout cela. Nous avons maintenant tous ces champs, mais nous n'avons aucun contenu. Créons un nouvel élément de test ici, nous pouvons remplir les différents champs que nous avons créés pour le titre. Je vais parler du site Web de la boutique Nike , un projet imaginaire que je n'ai jamais réalisé, mais qui serait vraiment une bonne année. Je vais dire client de 2019, évidemment. Type de projet Nick. Je vais dire conception de site Web, inscrivez-vous. Je vais dire UX designer. Je ne vais pas ajouter de contenu pour le moment. Et je vais juste dire prudent, cool. Cela a ajouté une ligne à notre CMS. Je vais le remplir avec quelques faux projets, afin que nous puissions explorer les options du CMS OK, travaillons avec ces cinq maintenant que nous avons ces informations ici. Si nous revenons sur notre page, vous verrez que nous avons le CMS ici et que nous avons nos projets. Mais maintenant, nous devons extraire ces informations du CMS pour les intégrer à notre conception réelle. Parce que même si j'ai ajouté cinq projets dans mon CMS, ceux-ci n'apparaissent nulle part. Comment dois-je m'y prendre ? Nous pouvons maintenant utiliser ces informations de deux manières. Nous pouvons les utiliser comme liste de collection ou comme pages spécifiques. Désormais, les listes de collection regroupent tous les articles de notre collection en un seul endroit. Imaginez une liste de tous les éléments que nous avons sur notre CMS. Il suffit de mettre une page, ce qui est exactement ce dont nous avons besoin pour notre page d'accueil. Les pages sont des pages pour chaque élément de notre CMS, une page pour chacun de nos projets. Maintenant, la façon de l'insérer est de passer sous Insérer. Et dans la section CMS , nous avons la liste des collections. Et nous pouvons glisser-déposer ici tous les projets, ou nous pouvons glisser-déposer des champs de contenu sur notre page spécifique. Nous avons maintenant ajouté notre CMS avec cinq projets et les différents champs dont nous avons besoin. Nous savons que nous avons besoin de tous ces projets sous forme de liste sur notre page d'accueil. Et nous savons que nous avons besoin d' une page spécifique pour chaque projet où nous rassemblons toutes ces informations. Parce que cela demande un peu plus de travail et que nous devons terminer notre conception. Concentrons-nous là-dessus dans notre prochaine vidéo, où nous aurons une liste de projets sur la page d'accueil et une page de projet pour chacun de nos projets. 8. Créer une collection CMS: Cool, alors concentrons-nous d'abord sur la page d'accueil. La première chose dont nous avons besoin est une liste de nos projets. Je vais supprimer tout cela et ne laisser qu' une instance de notre composant de projet. N'oubliez pas que nous avons créé un composant pour le titre de ce projet, et je vais le laisser ainsi. Tu vas voir pourquoi. Nous allons insérer dans la section CMS, nous allons dire liste des collections. Je vais le faire glisser ici. C'est ainsi que nos projets sont présentés sous forme de liste. C'est correct car il extrait toutes les informations, mais cela ne ressemble en rien à nos designs. Mais heureusement pour nous, il existe un moyen rapide de le réparer sous plusieurs couches. Vous pouvez voir, tout d'abord, que nous l'avons ajouté du mauvais côté. Cela ne devrait pas être régi par le CTA. Cette liste de collection doit se trouver dans la section du projet. Tout d'abord, changeons cela. Maintenant. Je vais supprimer le contenu cette liste de collections où il est écrit Publier, je vais le supprimer. Cette liste de collections est essentiellement liée à notre CMS, et elle extrait les informations de notre CMS dans le contenu qu'il contient en dessous. Nous pouvons donc prendre notre composant et faire glisser dans la liste des collections. Maintenant, il va créer cinq instances de la même chose, car nous avons cinq projets. Mais aujourd'hui, nous avons deux problèmes. Tout d'abord, notre design a changé. Cela est dû au fait que la liste des collections n'a pas la bonne largeur. Donc, au lieu de dire « réparé », je vais dire « sentez-vous cool ». La première chose a été corrigée. La deuxième chose est qu' il n'extrait pas les données de chaque projet, de notre CMS. Pourquoi est-ce le cas ? Eh bien, la réponse à cette question est très simple. Il s'agit d'un composant. L'idée de base d'un composant est que tout ce qu'il dit ici, il le dira ici à moins que nous le changions. Mais nous n'avons qu' un seul élément ici et nous ne pouvons pas modifier celui-ci ici. Comment modifier celui-ci ? Il présente les informations relatives à chacun de nos projets. Ce que nous devons faire maintenant, c'est créer des variables. Supportez-moi, ce n'est pas aussi complexe qu'il y paraît. La seule chose que nous devons faire est de assurer que ces trois champs changent en fonction des informations que nous extrayons du CMS. Il existe un moyen très simple de le faire. Le titre de notre projet se trouve sous la section texte, il est écrit « contenu par contenu », titre du projet ». Si nous changeons cela, cela changera le texte ici. Si nous revenons à notre page d'accueil, le texte sera modifié pour toutes nos instances. OK, cool. Ce que nous devons faire, c'est nous assurer que cela est variable. Au lieu d'écrire ici ce que nous voulons, nous allons créer une variable. Pour ce faire, nous appuyons sur le signe « + » à côté du contenu, en disant « créer une variable » et en disant « texte brut ». Nous allons l'appeler de la même manière que nous l'avions. Et nous allons dire que le titre par défaut est le titre du projet et que, de cette façon, il revient à ce que nous avions. Cool, je vais continuer et faire la même chose pour les deux. Nous allons passer sous le texte, nous allons dire « création de contenu variable », texte brut », « type de projet », puis « année ». Et c'est pareil. Le contenu crée une variable, du texte brut, une année. Nous y voilà. Maintenant, c'est connecté. Ce texte devrait maintenant être dynamique car nous ne pouvons pas le modifier ici, nous allons retourner à notre page d'accueil. Cela n'a pas changé, mais nous sommes désormais en mesure d'extraire des informations car nous avons créé ces trois variables. Ici, sur le panneau de droite, nous indiquerons quelque chose qui indique Project Link, qui est le nom de notre composant et des trois variables que nous avons définies. Ce que nous pourrions faire ici, c'est le modifier manuellement. Mais encore une fois, cela changera pour chaque projet, et ce n'est pas ce que nous voulons. Remarquez ce bouton plus ici. Nous pouvons maintenant le connecter aux variables que nous avons depuis notre CMS. Nous pouvons dire que le titre du projet sera le nôtre. Le type de projet sera, le type de projet sera l'année. C'est ainsi que vous le modifiez dynamiquement. Nous avons maintenant toutes les informations extraites de notre CMS pour les intégrer à cette liste de projets, et c'est parfait. Mais maintenant, nous avons besoin d'une page pour chacun de ces projets. Nous allons accéder à l'onglet Page sous CMS. Nous allons accéder à la page de détails des projets P et dire. Cela créera un clic ici qui indiquera les pages du projet. 55 est le nombre de projets que nous avons sur notre CMS. Ici, en haut, nous pouvons voir tous les différents projets que nous avons. bien, c'est que vous n'avez besoin de le concevoir qu'une seule fois. Si nous allons de l'avant et concevons cette campagne Apple, elle s'adaptera à chacune de nos pages de projet. Tout d'abord, supprimez tout cela. Ensuite, nous allons revenir à notre design Figma et faire la même chose que pour notre page d'accueil et pour la page à propos, qui consiste à tout copier avec notre plug-in N'oubliez pas que nous allons dans le menu Figma, puis connectez Figma à HTM avec Framer Tu sais comment ça marche. Cela devrait être très rapide. Et nous allons le sélectionner et le coller à chaud. Parfait. Nous avons notre page maintenant. Ça a l'air bien. Nous avons quelques problèmes avec une image, mais nous savons comment la modifier au fur et à N'oubliez pas que nous sommes en train de modifier la pomme, les projets Apple, comme nous l'avons fait auparavant. Nous pouvons attribuer différentes données de notre CMS à différents champs, sur notre site. Je sélectionne le type de projet, qui devrait en fait définir le titre du projet, désolé pour cela. Mais nous sélectionnons le titre du projet, nous passons au texte Content set variable et disons «   title under year ». Nous pouvons faire exactement la même chose. Je vais également modifier cela, juste pour que vous voyiez comment cela change pour les différentes pages. Je ne suis pas sûr d'en avoir créé un pour le rôle. Oui, je l'ai fait. Parfait. Je vais faire pour le type de projet. Nous avons le type de projet. OK. Nous sommes maintenant sur la page de la campagne Apple, mais si je vais sur le Lego One, il devrait être mis à jour avec toutes les informations que nous avons sur notre CMS. C'est parfait. C'est exactement ce que nous voulons. Nous l'avons créé une fois, nous l'avons utilisé efficacement et nous n'avons pas besoin de créer une page pour chacun de nos projets. Le plus important, c'est que si nous voulons maintenant modifier ceci, parce que nous n' aimons pas vraiment notre design sur Figma, nous voulons changer quelque chose, ce que nous voulons Tout ce que nous modifierons ici en termes de mise en page, de fonds, de quoi que ce soit sera adapté à chaque page. Ils auront tous exactement la même apparence. Vous avez vu à quel point il est facile de travailler avec le CMS. Vous ajoutez toutes les données ici. De plus, vous pouvez ajouter autres éléments ici et modifier les champs comme vous le souhaitez, et vous pouvez intégrer ces informations dans les dessins. Mais ce qui est bien maintenant, c'est que nous avons maintenant toutes les pages de notre site. Nous avons notre page d'accueil avec tous les projets ici sous forme de liste. Nous avons la page « À propos ». Nous avons les pages de projets pour chacun de nos projets. Maintenant que nous avons configuré le design, nous avons ajouté la collection. Nous sommes donc prêts pour la prochaine étape, qui consiste à relier toutes ces pages afin que vous puissiez naviguer vers chacune d'elles. 9. Lier les pages: Il y a plusieurs choses que nous devons connecter de notre côté. Nous devons connecter la navigation à chaque page individuelle de notre côté, nous devons connecter chaque lien de projet à chaque page de projet. Enfin, nous devons connecter cette prise de contact à peut-être une adresse e-mail. Et ces trois liens de réseaux sociaux vers les plateformes de réseaux sociaux ou les profils que nous voulons. Commençons par ceux du projet, car je pense que c'est le plus important. Il ne nous reste plus qu'à retourner dans notre composant. Parce que n'oubliez pas que tout ce que nous voulons modifier dans cette liste de projets, nous devons accéder au composant juste pour assurer qu'il s'applique à chacun d'entre eux. Double-cliquez pour y accéder. Nous allons maintenant ajouter un lien vers le tout. Ce que nous pouvons faire, c'est simplement ajouter un lien ici. Au lieu de baliser une page ou une URL spécifique ici, nous allons créer une variable Nous pouvons l' éditer sur notre page d'accueil, créer la variable, c'est très bien. Nous revenons maintenant à la page d'accueil. N'oubliez pas que nous accédons aux variables à partir de la section située sous le lien du projet du composant, la section située sous le lien du projet du composant, car rien sur le CMS n' est un lien ou quelque chose comme ça. Nous n'avons pas ce schéma positif ici. Mais si vous cliquez ici sur A, nous verrons le projet Colon Slack Ce que signifie sluck, c'est la page réelle du projet, le lien spécifique pour chaque projet tel que défini sur le CMS Maintenant, si j'appuie sur Slc, c'est parti. Il redirigera vers la page de projet appropriée. Il existe un moyen de le tester, et pour cela, nous devons prévisualiser notre version, qui se trouve en haut. Nous pouvons cliquer ici. Nous pouvons faire défiler notre liste de projets vers le bas et sélectionner l'un des projets parfaits. Et disons peut-être la jambe parfaite. Incroyable. Les projets de notre liste de projets sont liés à chaque page de projet spécifique. La deuxième chose que nous allons faire est la navigation. Nous pouvons maintenant être efficaces avec la navigation car c'est un élément qui sera répété pour toutes les pages de notre côté. Pourquoi devrions-nous le modifier sur chacune des pages ? Nous devrions en fait avoir un composant pour cela. C'est ce que nous allons faire. Nous allons écrire, cliquer et dire, créer une navigation par composants parfaite, qui créera un composant pour notre navigation que nous pourrons simplement copier-coller sur toutes les pages de notre site et le modifier une seule fois. Avant cela, je vais lier chacun de ces liens. Cela devrait vous mener à la page d'accueil, également à la page d'accueil car nous n'avons pas de page spécifique pour le travail À propos devrait vous amener à la page de contact à propos. Pour l'instant, nous allons le lier à une adresse e-mail simplement parce que nous n'avons pas de page de contact spécifique. Allons-y ici. Je vais sélectionner l'icône. Je vais aller ici où il est écrit lien. Je vais créer un lien vers la page d'accueil. Nous y voilà. Maintenant c'est lié. Nous allons maintenant sélectionner le travail. Fais la même chose. Lien vers la page d'accueil, lien vers la page à propos. Et nous allons créer un lien vers la page à propos. Remarquez ici où il est écrit lien. C'est parce qu'il extrait un style par défaut que nous pouvons modifier si vous le souhaitez, nous pouvons changer son apparence. Par défaut, tous les liens sont de cette couleur. Et je n'aime pas vraiment ça, j'aime juste ma couleur blanche. Mais sur Hover, nous allons peut-être le changer bleu plus foncé. Nous allons le tester. N'oubliez pas que vous pouvez prévisualiser n'importe quoi. Vous pouvez prévisualiser ce composant ici. Oui, c'est un peu dur à voir, mais oui, nous allons laisser les choses comme ça. Ensuite, la page de contact, nous allons ajouter un mail à, je vais dire mon e-mail. Et cela ouvrira votre application de messagerie par défaut pour écrire un e-mail. Nous allons donc laisser les choses comme ça et ne pas trop nous inquiéter. Nous avons maintenant notre lien de navigation vers la page à propos. La page de travail. Revenons à la page d'accueil. Ce que nous allons faire, c'est simplement copier cette navigation pour que vous puissiez commander ou simplement dire copier. Nous allons passer à la page à propos. Appuyez sur le bureau, dites la commande V, faites-la glisser vers le haut, Parfait, et supprimez la navigation qui n'est pas un composant. Faites attention à celui que vous supprimez. Celui-ci est un composant avec ce symbole en forme de diamant ici. Celui-ci ne l'est pas. Nous allons donc le supprimer. Nous allons aller sur les pages de nos projets. N'oubliez pas que vous ne devez le faire qu'une seule fois. Et ici, je vais sélectionner Desktop, dire la commande V, faire glisser vers le haut et supprimer la navigation qui n'est pas un composant. Ici, nous avons un peu d'espace en haut, et je vais m' assurer que c'est en haut. Nous y voilà. Il ne nous reste qu' à vérifier que cela fonctionne pour toutes nos pages. C'est parfait. C'est exactement ce que nous voulions. Faisons maintenant de même avec notre pied de page, ce qui devrait être beaucoup plus facile car nous savons déjà comment le faire N'oubliez pas de cliquer avec le bouton droit de la souris, de créer un composant, par exemple le pied de page, et de le lier à chacun de vos réseaux sociaux préférés Cool, allons-y. Revenons maintenant à notre page d'accueil. Je vais commander à C de copier mon pied. Retournez à la page à propos. Copiez le pied de page et assurez-vous qu'il est dans la bonne position. Et enlevez celui-ci. Assurez-vous que la largeur est remplie, nous voulons juste prendre tout l'espace. Ensuite, nous allons accéder aux pages du projet, sélectionner le bureau et supprimer le pied de page Il ne s'agit pas d'un composant. C'est ça. Notre pied de page est connecté, notre navigation est connectée aux liens de projet connectés à chaque page de projet spécifique Mais à cause de la navigation, du pied de page, fait que tout doit être connecté non seulement sur ordinateur, mais aussi sur mobile et autres points d'arrêt, nous devons parler de réactivité Et ce sera un sujet important. Préparez-vous pour le prochain cours. 10. Designer pour le mobile : page d'accueil: Je pense qu'il est assez évident qu'à notre époque, tous les sites Web doivent être beaux sur tous les appareils. Et nous pouvons supposer que tout le monde consultera notre site Web à partir de l'appareil de notre choix, dans ce cas, un ordinateur portable. La plupart des gens accèdent à des sites Web depuis leur téléphone, et nous devons y répondre En fait, nous l'avons déjà fait. Sur nos designs, vous pouvez voir que nous avons conçu pour les ordinateurs de bureau et que nous avons également réfléchi à la mise en page que nous souhaitons pour les appareils mobiles. C'est bien, mais comment appliquer réellement ces designs dans Framer Maintenant, Framer, par défaut, lorsque vous ouvrez ce site sur mobile, il redimensionnera tout Tout aura l'air très petit. Et ce n'est pas ce que nous voulons, nous voulons simplement nous assurer qu' il soit beau et accessible. bien, c'est que nous avons conçu en utilisant la mise en page automatique ou le stack L'adapter au mobile ne devrait pas prendre autant de temps, même si cela demande un peu de peaufinage. Nous allons ajouter un point d'arrêt pour mobile et vous verrez que tout va bien. C'est très bien. Nous allons peaufiner cela La première chose est que nous allons adapter notre navigation. Nous n'allons pas faire de menu raffiné pour le moment. Je vais laisser ça pour une leçon bonus que tu pourras regarder plus tard. Mais nous allons simplement nous assurer que vous pouvez accéder à chacun de ces liens. Nous allons créer une variante ici et je vais lui donner une taille. Je vais dire que cette variante est 390 car c'est la taille de notre appareil ici. Je vais juste le copier. Au lieu d'avoir ces trois liens côte à côte, je vais les placer sous forme de pile verticale. Et je vais laisser un peu plus d'espace. Je vais dire 35. Et je vais juste m'assurer que tout est aligné au centre. C'est ce que nous allons faire ici. Au lieu d'avoir cette première variante, je vais dire variante deux et m'assurer qu'elle est belle. Parfait. La deuxième chose est l'en-tête. Maintenant, la première chose que je remarque ici, c'est que mon nom est énorme, et je ne veux pas qu'il soit si grand. Réduisons la taille du téléphone. Cool. Vous verrez que tout est dupliqué. Nous avons donc maintenant des couches pour le bureau et des couches pour le téléphone. Vous pouvez accéder rapidement à chaque élément sur notre appareil téléphonique. Je vais dire 42. Nous avons également cette pile qui est assise l'une à côté de l'autre. Au lieu d'horizontal, je vais dire vertical. Je vais dire qu'il faut laisser une ligne. Cela fonctionne déjà. Mais est-ce que tu peux voir ? Il y a beaucoup de rembourrage autour. Nous n'avons pas besoin de tant que ça. Je vais sélectionner l' ensemble de la pile au lieu de l'avoir ici. Nous pouvons laisser les 200 pour le haut et le bas, mais nous allons dire 20 ici, 20 ici. C'est déjà beaucoup mieux. Je vais juste lui donner un peu plus d'espace au lieu d'un espace entre les deux, je vais dire « commencez », je n'en ai pas besoin de tant que ça. Je vais juste en ajouter 15. Ça a déjà l'air bien mieux. C'est parfait. Passons à ces sections. Il va falloir être malin à cet égard. Tout d'abord, pour toute cette section, je vais changer le même rembourrage que celui du dessus au lieu de 80 à droite et à gauche, je vais dire à gauche, et c'est déjà un peu mieux Je vais changer le fonds ici. Je vais dire 24. Mais maintenant, je dois passer en revue chaque composant, comme nous l'avons fait pour notre navigation, et le modifier ici afin qu'il puisse s'adapter à chacun de nos projets. Passons à la composante de notre projet. Encore une fois, nous avons fait la même chose avec la navigation. Nous allons créer une variante d'une largeur de 390. La première chose que je remarque, c'est que le titre de ce projet est énorme Modifions également cette taille de police. Il va y en avoir 42. Le type de projet sera 24, ce qui est déjà une bonne chose. 24 pour l'année, ce qui est parfait. Maintenant, pour ce qui est de la conception de notre téléphone, nous allons sélectionner le composant et nous assurer qu'il indique la variante 2. Il semble correct en termes de taille, mais il fait des choses étranges parce qu'il va au-delà de ce dont nous avions besoin Nous allons revenir au composant et au titre de ce projet. Nous allons nous assurer qu'il est écrit « remplir ». Nous allons le laisser comme espace entre et sous les détails du projet. Nous allons dire « plein », juste pour nous assurer que le titre de ce projet occupe le plus de place possible sans dépasser la première année. Lorsque nous reviendrons sur notre page d'accueil, cela devrait être corrigé. Notez maintenant qu'il n'y a pas beaucoup d'espacement entre le titre et l' année où le titre est long Et nous pouvons résoudre ce problème en disant, au lieu d'un espace entre les deux, nous pouvons dire « démarrer » et en ajoutant cet écart de 50, ce qui devrait régler le problème. Oui, c'est parfait. C'est exactement ce à quoi nous voulons qu'il ressemble. Maintenant, allons-y et modifions les tailles de police qui semblent un peu trop grandes à mon goût, disons 38 Et nous allons corriger ce pied de page de la même manière que nous l'avons fait pour notre navigation Nous allons créer une autre variante. Nous allons lui donner un 319. Nous nous assurons qu'il s' agit d'une pile verticale. Nous n'allons pas lui donner autant de pudding. Et centrons-le. Maintenant, nous sélectionnons le pied de page, et nous disons que la variante est parfaite C'est exactement à cela que nous voulons que notre version mobile ressemble. Tout sera connecté de la même manière. C'est juste la mise en page que nous avons modifiée pour qu' elle corresponde à nos designs. Ce qui est parfait. Cool, allons-y et modifions également les pages du projet et la page à propos 11. Designer pour le mobile : pages à propos et de projet: Nous savons donc déjà comment créer un point d'arrêt adapté aux mobiles comme nous l'avons fait pour la page d'accueil Faisons de même pour la page à propos et cela devrait être plus rapide. Nous allons créer un point d'arrêt pour le téléphone. Tout d'abord, nous allons sélectionner la bonne variante pour la navigation et pour le pied Je vais changer de téléphone car je connais déjà la taille de leur téléphone. Pour celui-ci également, nous devons aborder les sections intermédiaires ici. Et cela devrait être assez simple car encore une fois, nous utilisons stack et tout est déjà configuré pour être réactif d'une certaine manière. La première chose que nous allons faire est de nous attaquer à l'en-tête. Nous avons ici une pile horizontale qui deviendra verticale, et cela résout déjà le problème. Nous allons modifier le rembourrage comme nous l'avons fait pour la page d'accueil qui est déjà mieux adaptée Nous allons changer la taille du téléphone pour qu'elle soit 64. Pour dire, Phil, je vais modifier ce texte ici pour remplir l'espace. Cool, je pense que cela résout déjà beaucoup de choses pour cette image ici. Il est un peu plus petit pour remplir l'espace. Nous allons dire, Phil, parfait, il résout déjà beaucoup de choses. Nous avons l'en-tête. Passons maintenant à cette expérience ici. Encore une fois, cela devrait être assez simple. Tout d'abord, nous allons encore une fois changer le rembourrage, ce que nous savons déjà faire Les piles horizontales ici, nous allons passer à la verticale Ensuite, nous avons quelques piles pour chacun des rôles. Ce sont, encore une fois, des empilements horizontaux que nous pouvons transformer en éléments verticaux Ils ont beaucoup d' écart entre les deux Modifions-le rapidement pour chacun, je vais dire dix. Au lieu d'avoir un espace entre les deux, je vais dire « start et je vais lui donner un espace de 50. Parfait, nous pouvons faire de même avec ça. Contactez-nous, nous avons cette description ici qui se présente sous la forme d'une pile horizontale qui se transformera en colonne verticale. L'espace entre les deux, nous allons changer le départ et lui donner 50 comme ci-dessus. Nous avons les cadres ici et les coordonnées qui sont empilées horizontalement et qui modifieront la verticale. Dans ce cadre, nous allons dire « remplir » au lieu de « fixer ». Juste pour nous assurer qu' il s'adapte à notre espace, veillons à ce qu'ils soient tous bien espacés entre les deux Parfait, c'est ça. Voici notre page à propos, prête à être utilisée. Et la dernière chose que nous devons changer , ce sont les pages du projet. Encore une fois, n'oubliez pas que vous n' avez besoin de le faire que pour l' une des pages. Il s'adaptera aux autres. Faisons-le rapidement. Tu devrais être assez rapide avec ça. Maintenant, nous l'avons fait deux fois. Mais encore une fois, si vous ne comprenez pas le processus ou si je vais trop vite à votre goût, faites-le moi savoir et nous comment aborder les différentes options de largeur et de hauteur, ce que chacune d'elles signifie, comment travailler avec des mises en page, des mises en page empilées ou en grille ou des mises en page automatiques Si vous êtes perdu avec ces termes, faites-le moi savoir et je m'assurerai de les expliquer beaucoup plus bas. Nous savons comment ça se passe. Un petit changement ici avec cette image car je voulais être un peu plus Je vais lui donner une date fixe. Je vais le déverrouiller et assurer qu'il est défini comme remplissage. Cela prendra un peu plus de place, ce n'est pas si petit que ça alors pour cette section, c'est pareil. Vous avez remarqué que ce n'est pas si difficile une fois que vous l'avez fait. Une fois que vous savez ce que vous recherchez. En gros, vous pouvez changer la direction du stock de l' horizontale à la verticale. Tu changes le texte. Au lieu de le corriger, vous le changez en Feel. Et pareil pour les titres. Assurez-vous que ça a l'air bien. Modifiez le rembourrage pour qu'il prenne un peu plus de place pour les images Vous devrez peut-être être un peu méchant et lui donner une hauteur ou une largeur fixe, et c'est tout à fait normal. C'est votre site web, vous devez être à l'aise avec lui. Assurez-vous simplement que tout remplit le contenant dans lequel il se trouve. Une fois que vous l'avez fait une fois, vous savez exactement comment le modifier, car je connais ce truc réactif. Ce n'est pas facile pour tout le monde. Je vais vous laisser quelques directives que vous pouvez utiliser. La première chose à faire est de s'assurer que le texte est défini comme étant rempli. Il remplit donc le contenant dans lequel il se trouve. Ensuite, pour chaque contenant, ou pour chaque pile que vous avez, assurez-vous que le rembourrage est correctement configuré. Cela ne prend pas beaucoup de place de gauche à droite, de haut en bas. Assurez-vous également que la pile que vous avez est configurée à la verticale plutôt qu'à l'horizontale. Ainsi, au lieu de prendre de la largeur de la page, il faut plus de masquage et nous avons plus d'espace pour tout lire correctement. Nous y voilà. Nous avons maintenant toutes nos pages conçues pour les ordinateurs de bureau et les appareils mobiles. Avant de poursuivre, faisons un bref résumé de ce que nous avons fait Tout d'abord, nous avons vérifié notre design Figma. Nous avons vu comment tout est organisé et comment tout est nommé. Nous avons installé le plug in pour intégrer nos designs de Figma à Framer Et nous l'avons réellement géré. Nous avons essentiellement copié la version de bureau dans Framer, de notre page d'accueil et de la page à propos Nous avons également créé la navigation et le pied de page en tant que composants afin de pouvoir les réutiliser pour toutes nos pages Nous avons créé une liste de collection avec tous nos projets, en utilisant les données de notre CMS. Nous avons également créé des pages de projet individuelles pour chacun de nos projets. Nous avons tout connecté en reliant chaque projet à chaque page de projet. La navigation vers chaque page spécifique et le pied de page vers les différentes plateformes de réseaux sociaux Enfin, nous avons créé une version réactive. Nos designs sont donc beaux sur mobile. Avant de continuer, assurez-vous que tout affiche bien pour vous sur ordinateur. Sur mobile, tout est connecté. Le CMS fonctionne. Si, à tout moment, vous êtes bloqué, faites-le moi savoir ci-dessous afin que je puisse vous aider et vous assister. Parce que la prochaine chose que nous allons faire est d'ajouter des animations et des transitions. Vous devez donc vous assurer que vos designs beaux avant de passer à cela. 12. Ajouter du mouvement : transitions animées: ne nous reste plus qu'à ajouter une touche de finesse supplémentaire à nos côtés. Pour ce faire, nous allons ajouter du mouvement aujourd'hui. Avoir un site Web statique est très étrange et ils incluent tous un certain niveau de mouvement ou d'animation. Et c'est ce que nous allons faire maintenant. Maintenant, faire de l'animation sur le cadreur est extrêmement facile car il existe de nombreux préréglages que vous pouvez utiliser comme vous le souhaitez Ils se trouvent tous dans la section des effets sur le panneau de droite. Et nous pouvons ajouter une animation sur un pair au survol des différentes interactions que nous effectuons Nous pouvons définir la vitesse. Nous pouvons définir les transitions. Nous pouvons définir l'élément que nous voulons modifier, comme la taille, l'opacité, la couleur, tout ce que nous voulons Dans cette leçon, nous allons aborder trois types d' animations sur l'interaction que vous pouvez reproduire très facilement Bien que nous ne fassions que cela maintenant, je vous suggère de l' expérimenter et vous deviendrez fou. Parce que c'est vraiment cool de voir ce que Framer peut faire dans ce domaine. Les trois types d'animation que nous allons faire apparaissent sous forme d'élément, apparaissent sur la page, défilement, lorsque nous faisons défiler cette page et lorsque nous survolons cet élément spécifique Commençons par l' en-tête, l'animation. Lorsque nous allons créer la première ligne de la page, lorsque cet élément apparaît sur la page, c'est ce que nous allons créer. Au chargement de la page , cet élément apparaît. Avec une transition qui s'estompe, la seule chose à faire est de sélectionner les éléments, s' assurer que l' en-tête entier est sélectionné Nous allons passer aux effets, sélectionner un pair, nous allons utiliser l'un de ces préréglages Par défaut, j'utilise le préréglage de décoloration, que j'aime déjà car il est très subtil et ne ressemble pas à un mouvement énorme Nous pouvons également définir le mode d'entrée de cette animation. Par défaut, il fonctionne comme une transition printanière. Ça va de 0 à 100, ce serait l'animation. Il ne s'agit pas d'une mise à l'échelle, l'échelle est définie comme une. Il ne tourne pas, il est donc réglé sur zéro. Et il n'y a aucune compensation. Nous pouvons également opter pour la transition printanière plutôt que pour le printemps, je dois dire que c'est très subtil, et le printemps est peut-être trop long aussi parce que j'ai déjà joué avec ça, et je sais que c'est ce que j'aime. Mais encore une fois, jouez avec et expérimentez à temps. Je vais dire non, 0,5 Je vais ajouter un peu de retard, pas trop, juste pour nous laisser le temps de voir l'animation. Bien, je pense que j'en suis content. Je vais l'essayer et je vais cliquer sur Aperçu. Et nous y voilà. C'est notre animation. C'est très subtil. Il n'a pas besoin d' être aussi fort. Oui, j'en suis content. Parfait. La deuxième animation sera une animation défilante. Au fur et à mesure que nous défilons, ces éléments apparaissent un par un. Comme nous utilisons une liste de collections et un composant, il suffit de le créer. Encore une fois, nous allons nous assurer de sélectionner le lien du projet. Nous allons créer un effet, nous allons dire animation par défilement. Nous voulons maintenant que le déclencheur se produise lorsque cette couche est visible lorsque nous défilons et que cette couche commence à apparaître, que l'animation ne démarre pas avant, sinon nous la manquerions Nous allons commencer au centre de cette couche. Nous n'allons pas ajouter de replay. Cela signifie que lorsque nous faisons défiler la page, cet élément apparaît, il y reste au lieu de s'allumer et de s'éteindre au fur et à mesure que nous faisons défiler la page. Mais encore une fois, je vous suggère d'essayer ces animations, puis de jouer avec elles, de voir ce que vous ressentez et de voir ce qui vous convient le mieux. Parce que vous êtes peut-être fan d' un effet replay, je vais dire non Au lieu d'utiliser le fondu, je vais dire glisser vers le bas. Vous pouvez redéfinir l'entrée. Je vais le modifier à nouveau pour atténuer le décalage, c'est-à-dire la quantité qui bouge. Il se déplace sur l'axe Y, 150 pixels. C'est peut-être un peu trop, mais d'accord, voyons comment cela fonctionne. Nous avons cette animation initiale, celle-ci est insérée. Je trouve que ça a l'air sympa. Et voyez que lorsque nous faisons défiler la page vers le haut, il ne se rejoue plus. Je vais le modifier un peu plus. Je vais le changer à 25. Je suis. Oui, laisse-le comme ça. Tu vois ce que tu ressens ? Génial. Je trouve que ça a l'air vraiment sympa. Parfait. Maintenant, pour le troisième type d'animation, nous allons faire quelque chose de très sophistiqué, mais qui est très facile à reproduire Nous allons créer cet effet de survol. Lorsque vous placez le pointeur de la souris sur cet élément, il affiche un autre type d'information Maintenant, pour créer cela, nous devons entrer dans le composant Project Leaks. Nous devons créer un composant à partir de celui-ci. Sinon, comme il se trouve dans une pile, nous pouvons le déplacer librement. Supportez-moi simplement. Créons un composant à partir de cela. Je vais dire que le type de projet convient. Nous allons dupliquer celui-ci et le déplacer vers le bas en dehors du cadre. Il doit être assis juste à l'extérieur. S'il s'agit du cadre, il doit être positionné juste à l'extérieur pour que nous ne le voyions pas. Je vais dire client et nous allons configurer en tant que variable client. Cool. Nous allons maintenant définir un état de survol Cela signifie que lorsque nous survolons cet élément, cela se produit Créons-le. Il se peut qu' au lieu de bouger ou de faire quelque chose, cela change de couleur. Si tel était le cas, je vais changer la couleur de l'état du survol Prévisualisons au survol. Il change de couleur. OK ? Ce n'est pas ce que nous voulons. Mais nous pouvons voir que nous pouvons définir un état de survol. Revenons à la couleur d'origine. Ce que nous voulons, c'est que celui-ci se déplace là où il se trouve. Je vais m'assurer que c'est centré et que celui-ci se trouve juste au-dessus. Faisons un aperçu. Parfait. Ils bougent tous les deux, mais d'accord, je ne veux pas voir le client dans le premier état, et je ne veux pas voir le type de projet dans le second état. Nous devons définir le trop-plein comme étant masqué. Et prévisualisons. Maintenant c'est ça, c'est notre effet. Je ne touche même pas à la transition parce qu'elle utilise le ressort. Et je pense que cela fonctionne. Je l'aime bien, je vais le laisser tel quel. Mais sachez que vous pouvez également modifier le préréglage ou l'effet de transition ici. Revenons à notre composant principal et prévisualisons-le. J'adore ça. J' aime vraiment son apparence. Vérifions-nous que nous nous connectons à la bonne variable. Nous allons créer une variable ici comme nous l'avons fait plusieurs fois. Revenons à notre page d'accueil. Ici, sous client, nous allons définir cette variable. Nous pouvons le voir maintenant. Mais lorsque nous prévisualisons cela, nous avons nos belles transitions. Et nous survolons Notre client est là. Je pense que ça a l'air parfait. C'est exactement ce que nous voulions. Il ne s'agit que de trois types d'animation ou transitions que vous pouvez ajouter au cadreur. Nous venons de le faire sur la page d'accueil. N'hésitez pas à ajouter une animation sur la page du projet, sur la page à propos. Deviens fou avec ça. Expérimentez avec des transitions et des animations amusantes. Mais je voudrais te donner un conseil. Une chose que j'ai remarquée à chaque fois que je conçois quelque chose, c'est que moins c'est plus. Et si nous en faisons trop, les animations prennent de la place et les gens ne remarquent pas le contenu ou se sentent même dépassés Donc oui, un peu de mouvement suffit. Je pense que nous en sommes arrivés au point où nous sommes prêts à publier notre site Web. Nous avons tout notre contenu, nous avons de belles transitions. Le point d'arrêt du téléphone est prêt à fonctionner. Donc oui, je pense que c'est le moment. Et c'est exactement ce que nous allons faire dans la leçon suivante. 13. Publier notre site Web: Publions donc notre site Web. Et pour des raisons évidentes, ce sera la vidéo la plus courte. Parce que publier un site Web sur Framer est si simple. Littéralement, il suffit d' aller ici et de cliquer sur Publier. Oui, ça y est, votre site web est maintenant en ligne. Cool. OK, au revoir maintenant. Attendons une seconde. Je commence juste à comprendre que vous ne voulez pas présenter votre travail professionnel et envoyer votre portfolio à des clients comme Little Home 9036 à un encadreur, n'est-ce pas Vous pouvez le faire, mais ce n'est pas la méthode la plus professionnelle. Tout d'abord parce que ce n'est pas très reconnaissable et que personne ne saura qu'il s'agit de votre portefeuille. Ensuite, parce que vous n'avez peut-être pas besoin ils sachent que vous l'avez créée avec Framer et que vous ne voulez pas montrer qu'il s'agit Framer et que vous ne voulez pas montrer qu'il s' d'une application Framer, vous n'en avez pas Mais je vous suggère d' ajouter un domaine personnalisé. Maintenant, pour connecter un domaine personnalisé que vous possédez et masquer ce côté encadreur, vous devez effectuer une mise à niveau, ce qui implique de payer des frais mensuels au framer et d' ajouter un service d'hébergement Mais si vous ne voulez pas le faire maintenant alors que vous n'êtes toujours pas prêt à payer, vous pouvez obtenir un sous-domaine Framer gratuit Donc pour moi, ce serait mon nom, le site Framer point par exemple Ou nous pouvons ajouter Framer. Je vais le laisser comme ça et enregistrer ce sera votre nouveau domaine personnalisé. Une fois que vous êtes prêt à ajouter le vôtre sans ce site d'encadrement, vous pouvez supprimer le domaine et ajouter le vôtre. C'est aussi simple que cela. C'est très rapide à changer. Je vais laisser les choses comme ça juste pour vous montrer comment cela fonctionne. Mais puisque nous sommes ici, passons en revue certains paramètres pour améliorer votre site. Si vous vous souvenez de la première vidéo de ce cours, j'ai passé en revue très rapidement tous ces paramètres, mais maintenant que notre site est terminé, nous pouvons y aller un peu plus lentement et ajouter tous les éléments nécessaires pour améliorer notre référencement et notre site en général. La première chose est que je vais ajouter le titre du site. La langue est l'anglais et sachez que vous pouvez ajouter plusieurs langues. Maintenant c'est vraiment pratique. Je vais ajouter ma description si tu veux. Vous pouvez également ajouter un fabçon, qui est le petit logo qui apparaît ici sur le navigateur Vous pouvez ajouter une image sociale Chaque fois que vous partagez votre lien, votre site Web, sur une plateforme de réseau social, cette image apparaît. Cela ne m'embête pas tant que ça maintenant, et je pourrai le faire plus tard Je vais laisser les choses comme ça. Mais n'hésitez pas à ajouter ce que vous voulez dans cette image. Assurez-vous simplement qu'il s'agit d'un élément pertinent pour votre site et qu'il est rapidement reconnaissable comme quelque chose que vous avez créé. D'autres paramètres que vous pouvez ajouter lors de la mise à niveau. Vous pouvez également avoir une protection par mot de passe juste pour ajouter ce niveau de sécurité à votre site, même sans téléchargement Vous pouvez ajouter votre identifiant Google Analytics ici pour vous connecter au site Google Analytics, ce qui est très utile, même si Framer possède son propre onglet d'analyse ici Une fois que vous aurez publié votre site Web et que vous aurez commencé à le partager, vous pourrez voir certaines données sur les visiteurs en mode payant, ainsi que sur les principales sources d'où proviennent les internautes et sur les pages les plus visitées sur votre site. Enfin, ce que j'ai mentionné, c'est que vous pouvez sélectionner la version en ligne. À ce stade, la mise en scène est désactivée, ce qui signifie que la dernière version que vous avez créée sera celle qui sera utilisée pour tous les domaines. Si vous activez la mise en scène, vous pourrez sélectionner celle des versions que vous avez créées qui sera intégrée à la version en ligne. Comme nous l'avons fait aujourd'hui, il n'existe qu'une seule version, mais si vous ajoutez des modifications et du contenu, vous pouvez sélectionner la version en ligne et celle sur laquelle vous travaillez. Enfin, et vous avez vu que ce n'est pas nécessaire, vous pouvez passer à une version payante de Framer Vous pouvez ajouter d'autres éléments. Vous pouvez avoir un nombre illimité de pages. Bien d'autres fonctionnalités. Cependant, nous avons créé ce site entièrement gratuitement et vous pourrez le publier sur une URL en ligne gratuitement. À titre de conseil, vous pouvez créer votre site sur une version gratuite. Et une fois que vous êtes prêt à publier sur un domaine personnalisé et à y ajouter des fonctionnalités supplémentaires, vous pouvez commencer à payer. Mais encore une fois, ce n'est qu'un conseil, vous faites ce qui vous convient le mieux. Vous l'êtes maintenant, avez-vous un portfolio maintenant ? Et c'est le moment de le partager. Que vous ayez connecté votre domaine personnalisé ou que vous utilisiez simplement le domaine encadré, c'est très bien Ou si vous avez utilisé votre propre design ou celui que j'ai fourni. Assurez-vous de soumettre votre portfolio en partageant le lien sur l'onglet du projet afin que tout le monde puisse le voir Si vous avez des questions sur les leçons que nous avons apprises jusqu'à présent, faites-le-moi savoir lors de l' arrêt de discussion et je répondrai. N'oubliez pas non plus qu'il y aura des leçons supplémentaires. Le premier explique comment créer une barre de navigation réactive avec un joli menu de hamburgers Mais c'est totalement facultatif et vous n'en avez pas besoin pour publier votre site. Ne vous inquiétez pas pour le moment, assurez-vous de soumettre votre portfolio car j'ai hâte de voir ce que vous avez créé avec Framer 14. Conclusion: Félicitations pour avoir terminé ce cours. Avant de partir, assurez-vous de partager site web de votre vie en ajoutant l'URL sur l'étape du projet. Et n'oubliez pas que ce n'est pas la fin du chemin. Un monde plein de possibilités s' ouvre maintenant que vous savez comment utiliser Framer Et pour commencer, voici quelques points que vous pouvez améliorer sur le site que vous venez de créer. Tout d'abord, vous pouvez ajouter un autre point d'arrêt pour une tablette ou un autre appareil, comme nous l'avons fait avec le téléphone Ensuite, vous pouvez ajouter d'autres champs dans le CMS pour gérer les paragraphes de texte, images, de vidéos ou de liens. Ensuite, vous pouvez devenir fou en ajoutant des animations et des transitions sur la page à propos et la page du projet, comme nous l'avons fait sur la page d'accueil. Maintenant, ce ne sont que des sous-suggestions, mais n'hésitez pas à explorer le reste des fonctionnalités proposées par Famer Si vous voulez quelque chose d'un peu plus difficile, n' oubliez pas que des leçons supplémentaires seront ajoutées à ce cours. Le premier explique comment créer une navigation réactive avec le menu hamburger. Restez à l'affût. Mais pour l'instant , je n'ai qu' à vous féliciter encore une fois et merci beaucoup d'avoir suivi ce cours.