Il existe un million de façons de faire une présentation, mais Figma est un outil sous-estimé pour cela. La fonction de prototype de Figma permet une multitude d'options de transition personnalisables. Non seulement vos transitions impressionneront votre public, mais vous pouvez incorporer des plugins pour plus de piquant et garder votre public engagé, vous donnant ainsi confiance en vos compétences.
Nous allons vous montrer comment faire une présentation qui tue avec Figma; suivez simplement ce guide.
1. Configurez votre premier cadre de présentation
Ouvert Figma et cliquez Nouveau fichier de conception. Clique le Outil Cadre (F) pour dessiner votre cadre ou pour choisir un cadre prédéfini sur la droite en utilisant Présentation > Diapositive 16:9. Tu peux créer un modèle principal gagner du temps.
Renommez votre cadre en double-cliquant sur le titre bleu en haut à gauche. Définissez une couleur d'arrière-plan; cependant, vous pouvez toujours le modifier plus tard en mettant en surbrillance tous les cadres et en modifiant la couleur de remplissage.
2. Ajouter le texte du titre
Utilisez le Outil Texte (J) et écrivez votre titre. Utilisez des zones de texte distinctes pour des lignes distinctes, avec seulement un ou deux mots par ligne. Définissez vos préférences de texte dans le Texte menu à droite. Figma utilise les polices Google, vous voudrez peut-être savoir les meilleurs appariements de polices Google.
3. Ajouter une image
Tu peux utiliser une photo d'archive ou prenez votre propre photo pertinente. Pour ajouter une image, dessinez un rectangle à l'aide de la Outil Rectangle (R). Votre image sera assise dans cette forme.
Cliquez sur le rectangle et accédez à Remplir et cliquez sur le carré de couleur. Puis clique Solide > Image > Choisir une image. Trouvez votre image et cliquez Ouvert. Survolez l'image pour révéler 4 cercles blancs. Cliquez et faites glisser un cercle vers l'intérieur pour arrondir les coins de votre image.
Disposez vos calques de sorte que l'image soit à l'arrière et le texte sur le calque supérieur. Vous pouvez faire glisser les calques dans le panneau des calques ou en utilisant Cmd/ctrl + [ renvoyer une couche ou Cmd/ctrl + ] pour faire avancer une couche.
4. Créer la première transition
La première transition ouvrira l'image et permettra au texte du titre de glisser dans le cadre. Tout d'abord, dupliquez la première image en la sélectionnant et en appuyant sur Cmd/ctrl + D pour le dupliquer.
Dans le cadre de gauche, réduisez l'échelle de l'image en réduisant les attributs de hauteur dans le H boîte à environ 150, laissant une fente horizontale de l'image. Alignez-le au centre en sélectionnant les deux images dans les cadres et en cliquant sur Ooption + V (Mac) ou Alt + V (Les fenêtres).
Pour terminer la transition d'image, sélectionnez l'image de gauche. Puis changez le opacité à 0% dans le menu de droite dans la case à côté de Pass Through sous Layer. Cela rendra l'image invisible avant la transition et l'ouverture.
Cliquez sur la première zone de texte et maintenez enfoncé Décalage. Commencez à faire glisser, puis maintenez également enfoncé Barre d'espace et continuez à faire glisser le texte hors du cadre. On dirait qu'il disparaît une fois hors du cadre. Sans l'ajout de la barre d'espace, cette transition ne fonctionnera pas, mais si vous maintenez la barre d'espace avant de faire glisser, cela ne fera que déplacer votre cadre.
Répétez cette opération pour votre deuxième zone de texte ou les suivantes, mais faites-les glisser un peu plus à gauche pour ajouter de la variété dans la transition. Avec le texte toujours sélectionné, réduisez l'opacité du calque à 0% de la même manière que vous l'avez fait précédemment pour l'image.
Pour définir la transition, accédez à Prototype. Sélectionnez le cadre de gauche et cliquez sur le cercle bleu qui apparaît au centre du côté droit du cadre. Faites-le glisser pour que la ligne passe à votre deuxième image.
Dans le menu déroulant qui dit Instantané, sélectionner Animation intelligente. Puis changez de case avec le chronomètre à 1000ms. Cela définira votre transition pour qu'elle prenne une seconde à partir du clic de la souris. Les autres paramètres doivent être définis par défaut. Assurez-vous de ne pas renommer les titres des images après avoir défini une transition, sinon les fichiers ne se connecteront pas.
Clique le Jouer bouton pour tester votre transition. Revenir à Concevoir pour continuer la conception de votre présentation.
5. Ajouter plus de diapositives
Pour passer de la diapositive 1 à la diapositive 2, dupliquez la diapositive la plus à droite (Cmd/ctrl + ré). Dans le nouveau cadre—diapositive 2—déplacez les zones de texte hors du cadre en utilisant la technique précédente (Décalage + Glisser alors Barre d'espace après avoir commencé à faire glisser). Déplacez une zone de texte vers la gauche et l'autre vers la droite du cadre. Réglez l'opacité sur 0 % pour les deux.
Pour l'image, réduisez-la et décalez-la légèrement, puis réglez l'opacité sur 0 %. Ceci, effectivement, vous donne une toile vierge pour votre deuxième diapositive. Vous pouvez ajouter le contenu au-dessus des ressources invisibles de la diapositive précédente.
Ajoutez une grande image au centre du cadre. Pour ajouter des décorations au-dessus de votre image, utilisez un Plugin Figma pour les GIF ou télécharger un autocollant GIF de Giphy et faites-le glisser au-dessus de l'image. Sélectionnez votre image principale et tous les GIF, puis regroupez-les (Cmd/ctrl + g), cela garantit que Smart Animate fonctionnera correctement.
Sélectionnez le groupe et copiez-le (Cmd/ctrl + C). Collez-le ensuite sur le cadre de la diapositive 1 (Cmd/ctrl + V). Réduisez-le et réglez l'opacité sur 0%. Déplacez ensuite ce calque vers l'arrière (Cmd/ctrl + [). Cela garantit une transition en douceur vers la diapositive suivante.
Aller à Prototype. Sélectionnez la diapositive 2 et cliquez sur le cercle bleu pour le faire glisser vers la diapositive 3. La valeur par défaut de Figma dans le menu prototype est d'utiliser les paramètres précédents, ils doivent donc tous être définis en fonction de la transition précédente. Revenir à Concevoir.
Dupliquer la dernière diapositive (Cmd/ctrl + D). Cette diapositive utilisera la même image que la précédente, mais nous la redimensionnerons sur un côté du cadre. Déplacez l'image vers la gauche du cadre en la faisant glisser tout en maintenant Décalage. Survolez le bord droit de l'image jusqu'à ce que des flèches opposées apparaissent, cliquez et faites glisser le bord droit de l'image vers la gauche jusqu'à ce que vous soyez satisfait.
Aller à Prototype et reliez les deux cadres ensemble. Revenez ensuite à Concevoir.
Ajoutez un titre et un corps de texte à droite de l'image mise à l'échelle et regroupez-les. Copiez le groupe de texte et collez-le sur la diapositive précédente. Cliquez et faites glisser le groupe de texte à droite du cadre comme précédemment.
6. Ajouter une maquette
Créez une maquette; consultez notre guide sur la création de maquettes à l'aide de plugins dans Figma. Ajoutez un nouveau cadre, puis collez-y votre maquette. Redimensionnez la maquette pour l'adapter au cadre.
Copiez la maquette et collez-la dans l'image précédente. Redimensionnez-le pour l'adapter à la portion d'image, puis déplacez-le à l'arrière des calques et réglez l'opacité sur 0 %. Reliez les cadres dans Prototype.
7. Ajouter des étiquettes
Dupliquez le cadre de la maquette. Ajoutez un titre et une description pour expliquer certaines parties de votre maquette. Regroupez le texte et nommez-le. Ensuite vous pouvez créer un indicateur de verre dépoli pour vos puces et lignes. Regroupez une ligne avec un cercle. Alignez votre indicateur avec ce qu'il décrit et ajoutez votre description à côté. Reliez les cadres dans Prototype.
Dupliquez le cadre et ajoutez un autre indicateur à puce avec ce qu'il décrit. Prototypez ceci à nouveau. Dupliquez chaque image par puce, de sorte que chaque puce effectue la transition seule.
8. Terminez votre présentation
Dupliquez la dernière diapositive. Écrivez un dernier mot ou deux et centrez-le. Copiez le texte et collez-le sur la diapositive précédente.
Réduisez le texte en maintenant K tout en le mettant à l'échelle - cela maintient votre texte formaté tout en le redimensionnant. Placez votre texte quelque part près du haut de la maquette et envoyez le calque à l'arrière, sous l'image. Réglez l'opacité sur 0 %. Revenez à votre dernière diapositive.
Déplacez tous les autres objets hors du cadre en utilisant la méthode de glissement. La transition fera tout glisser vers les côtés et le haut lorsque le texte descendra du haut et se développera. Lier les diapositives dans Prototype.
9. Partagez votre présentation Figma
Vous pouvez accéder à votre présentation partout où vous pouvez vous connecter à votre compte Figma ou partager l'URL avec d'autres, afin qu'ils puissent regarder de n'importe où. Pour présenter votre présentation finale avec ses transitions, cliquez sur le Jouer bouton et présent en mode plein écran.
Vous pouvez également enregistrer les images au format PDF, bien que vous perdiez les transitions animées en faisant cela.
Améliorez vos présentations avec Figma
Non seulement cette présentation est minimaliste, ce qui ne submergera pas votre public, mais les transitions sont professionnelles et propres. Il ne faut pas qu'un expert UI/UX utilise Figma d'une manière qui profite à vos présentations, quel que soit votre poste. Présentez avec confiance et vous serez inondé de questions sur la façon dont votre présentation a été faite.