Comment créer des modèles principaux pour les présentations dans Figma

Si vous créez une présentation stylisée, mais que vous ne souhaitez pas utiliser des modèles surutilisés de PowerPoint, Google Slides ou Canva, vous pouvez créer vos propres modèles maîtres pour votre futur dessins de présentation.

C'est une excellente option pour ceux qui veulent des conceptions de présentation thématiques ou qui doivent suivre un guide de style de marque. Continuez à lire pour savoir comment utiliser Figma pour créer des modèles principaux pour vos présentations.

1. Comment configurer un document Figma pour les présentations

Créez un compte gratuit sur Figma.com, ou si vous avez déjà un compte, connectez-vous. Vous pouvez utiliser Figma directement dans votre navigateur, ou vous pouvez télécharger l'application de bureau.

Ouvrir un Nouveau fichier de conception, puis clique Sans titre en haut pour renommer votre fichier, par exemple "Modèle principal de présentation". Sur la gauche, cliquez Page 1, puis le signe plus pour ajouter une nouvelle page. Renommez la nouvelle page en "Modèle". Cela vous permet de séparer ultérieurement vos diapositives principales de vos diapositives de conception.

Pour créer un cadre - le nom de Figma pour un plan de travail ou une toile - utilisez le Outil Cadre (F), puis cliquez n'importe où pour ouvrir un cadre. Dans les paramètres de droite, modifiez le O et H attributs à une taille de présentation appropriée; nous utilisons 1920 x 1080, qui est la taille d'écran standard. Ce sera votre premier modèle maître.

Double-cliquez sur le titre bleu en haut du cadre pour le renommer. Pensez à la mise en page que vous envisagez et nommez-la en conséquence, par exemple, "Top Title Two Column" ou "Top Title Right Picture" serait utile.

2. Concevoir les mises en page de présentation

Pour faciliter la conception de la mise en page, vous pouvez utiliser la grille de mise en page. Pour l'activer, sélectionnez votre cadre, puis dans la barre d'outils de droite, cliquez sur le signe plus à côté de Grille de mise en page. Cela ouvre une grille rouge translucide au-dessus de votre conception.

Pour créer des colonnes, plus faciles à concevoir, cliquez sur l'icône icône de grille à points carrés sous Grille de mise en page, puis cliquez sur Grille dans le menu déroulant et choisissez Colonnes. Définissez le nombre sur 12, ce qui est typique pour la conception d'écran. La grille ne s'enregistre pas sur votre conception finale. Vous pouvez l'activer ou le désactiver temporairement à l'aide de la icône de l'oeil ou supprimez-le définitivement en cliquant sur le icône moins à côté de l'oeil.

Que vous utilisiez ou non la grille de mise en page, vous pouvez commencer à ajouter des composants d'espace réservé de base à votre première mise en page de diapositive. Dans l'ensemble, la mise en page de vos diapositives dépend de vous.

3. Créer une mise en page de texte à deux colonnes

Commençons par concevoir un titre supérieur avec une diapositive de corps de texte à deux colonnes. Pour ajouter votre espace réservé au titre, utilisez le Outil Texte (J) et saisissez "Espace réservé pour le titre". La taille du texte par défaut dans Figma est assez petite, donc avec votre espace réservé tapé, mettez-le en surbrillance et utilisez les paramètres de droite pour augmenter la taille et choisir une police—télécharger une police si nécessaire. Vous pouvez également définir le crénage et d'autres attributs.

Pour s'adapter à la largeur de la diapositive, augmentez la largeur de la zone de texte du titre en cliquant et en faisant glisser le coin vers la droite. Laissez une marge de chaque côté. Cela signifie que la zone de texte s'adaptera à différentes longueurs de titre dans les présentations futures.

Pour ajouter une zone de corps de texte à deux colonnes, utilisez la Outil Texte (J) et faites glisser la zone de texte en fonction de votre grille de mise en page, en laissant suffisamment de place pour une deuxième colonne de même taille à côté.

Avec votre zone de texte en place, choisissez une police et une taille appropriées. Sélectionnez la zone de texte et dupliquez-la en maintenant Ooption (Mac) ou Autre (Windows) tout en faisant glisser la case. Cela crée une mise en page à deux colonnes; cependant, vous pouvez utiliser ce système pour concevoir d'autres types de mises en page.

4. Ajouter une couleur ou une image d'arrière-plan

Vous pouvez définir une couleur d'arrière-plan en sélectionnant le cadre et en allant à Remplir dans le menu de droite pour choisir une couleur. Mais si vous préférez utiliser une image ou un ensemble d'images comme arrière-plan, vous le pouvez. Faites simplement glisser votre image d'arrière-plan d'un dossier sur votre cadre. Vous pouvez le redimensionner immédiatement en faisant glisser les coins pour l'adapter à votre cadre.

Si vous utilisez un image en arrière-plan, assurez-vous que l'image se trouve à l'arrière ou au bas des calques pour chaque diapositive en cliquant avec le bouton droit et en choisissant Envoyer au fond, ou en le faisant glisser vers le bas de la palette des calques de gauche.

Pour éditer davantage l'image, sous Remplir, Cliquez sur Image dans le menu déroulant. Vous pourrez modifier le mode de fusion, le facteur de recadrage et d'autres aspects. Pour modifier l'opacité, modifiez le pourcentage à côté du menu déroulant.

Pour une image individuelle qui n'est pas un arrière-plan, utilisez le Outil Cadre (F) pour dessiner un cadre à l'endroit où vous souhaitez placer l'image, puis faites glisser le fichier de votre ordinateur dans le cadre. Ensuite, vous pouvez utiliser les mêmes paramètres qu'auparavant.

5. Comment créer des styles de texte dans Figma

Lors de la création d'un modèle principal, les styles de texte doivent être cohérents dans toutes les diapositives. Cela peut être fait manuellement en définissant chaque composant de texte pour qu'il soit identique, mais si vous avez de nombreuses diapositives, cela peut être fastidieux à faire. La bonne nouvelle? Vous pouvez automatiser vos styles de texte dans Figma.

Après avoir sélectionné le texte choisi (par exemple, un sous-titre dans son style, sa police et sa taille préférés), cliquez sur l'icône carré de quatre points à côté de Texte dans le menu de droite. Clique le signe plus pour définir un nouveau style.

Dans la fenêtre contextuelle, nommez le style, par exemple, "Titre de la diapositive ou corps du texte". Lors de la conception d'autres diapositives dans ce modèle, vous pouvez choisir le style répertorié dans le menu de texte en sélectionnant le texte et en choisissant le style. Pour dissocier le style et remplacer la fonctionnalité, cliquez sur l'icône icône de lien brisé qui apparaît lorsque vous survolez le titre du style de texte.

Cela fonctionne de la même manière pour les couleurs. Sélectionnez quelque chose avec la couleur que vous voulez, puis cliquez sur le bouton de menu Figma et Actions rapides. Tapez "Tout sélectionner avec le même remplissage" et il sélectionnera tout de la même couleur. Ensuite, vous pouvez le définir comme style de couleur sous le Remplir menu de la même manière que pour créer un style de texte. Cela fonctionne bien pour les couleurs d'arrière-plan en sélectionnant simplement le cadre et en choisissant votre couleur.

Si vous ne suivez pas déjà un guide de style, il existe de nombreux façons de générer des palettes de couleurs.

6. Créer des composants

Pour pouvoir utiliser vos modèles plus tard, ils doivent être des composants, donc ils sont liés. Pour transformer le cadre en composant, sélectionnez le cadre actuel et cliquez sur Commande + Option + K (Mac) ou Ctrl + Autre + K (Les fenêtres).

Le titre du cadre passera du bleu au violet avec une icône en forme de diamant pour montrer qu'il s'agit maintenant d'un composant. Ensuite, pour dupliquer le cadre, cliquez sur Commande + ré (Mac) ou Ctrl + ré (Windows) une fois et faites glisser le nouveau cadre à droite du premier.

Détachez le composant du doublon de l'original en cliquant avec le bouton droit sur le titre du nouveau cadre et en choisissant Détacher l'instance. Renommez la nouvelle diapositive avec un titre approprié pour sa mise en page. Ajoutez le nouveau design à la diapositive, puis faites-en son propre composant en cliquant sur Commande + Option + K (Mac) ou Ctrl + Autre + K (Les fenêtres). Ce processus doit être effectué chaque fois que vous créez une nouvelle diapositive.

Lors de la conception de la mise en page de chaque nouvelle diapositive, utilisez vos styles de texte et de couleur prêts à l'emploi pour gagner du temps. Terminez ce processus avec autant de diapositives de base que vous le souhaitez, en vous assurant qu'elles sont toutes intitulées avec des noms descriptifs.

7. Comment utiliser vos diapositives principales

Pour utiliser les diapositives pour vos futures conceptions, choisissez Page 1 dans le pages menu—votre modèle étant sous son propre titre—et créez un nouveau cadre de la taille d'une présentation. Ensuite, à gauche, cliquez sur Actifs > Composants locaux où vos modèles de diapositives doivent être. Faites glisser les diapositives du modèle sur votre nouveau cadre et centrez-le. Modifiez les espaces réservés pour votre contenu.

Suivez ce même processus jusqu'à ce que votre présentation soit terminée.

Gagnez du temps en créant vos propres modèles principaux dans Figma

Vous pouvez fournir votre modèle principal à vos coéquipiers ou collègues, le conserver pour votre usage personnel ou même le vendre sous forme de packages de conception. Bien qu'il puisse sembler intimidant au départ de créer un modèle de masque de diapositive, cela facilitera la productivité lorsque vous ferez de futures présentations dans Figma, ce qui vous fera finalement gagner du temps.

Les 10 meilleures fonctionnalités Figma que tous les concepteurs devraient utiliser

Lire la suite

A propos de l'auteur