Comment créer et ajouter des maquettes à vos conceptions Figma à l'aide de plugins

Si vous êtes un designer qui aime présenter vos créations à l'aide de maquettes, il peut être facile de les créer dans Figma.

Au lieu d'enregistrer vos conceptions Figma et de passer à un autre programme pour créer une maquette, vous pouvez facilement télécharger des plugins de maquette dans Figma. Il existe de nombreuses options de plugins dans différents styles, mais elles sont toutes simples à utiliser et à intégrer dans des conceptions plus grandes.

Comment trouver et télécharger des plugins Figma

Le téléchargement et l'installation d'un plugin dans Figma sont les mêmes, que vous utilisiez l'application ou la version du navigateur. De Page d'accueil du navigateur de Figma, Cliquez sur Communauté > Plugins et Widgets, et recherchez dans la liste ou utilisez la barre de recherche.

De L'application de Figma, la page d'accueil offrira la même option que le navigateur pour accéder à la page de la communauté. Mais si vous êtes sur une page de conception, vous pouvez cliquer sur le logo Figma, puis Plugins. Si vous avez déjà installé des plugins, vous les verrez listés ici.

Pour en savoir plus, choisissez Parcourir les plugins dans la communauté. Cela vous mènera à la page de la communauté dans l'application où vous pourrez rechercher d'autres plugins.

Sur la page de la communauté, vous trouverez un petit texte de présentation pour chaque plugin, la date de la dernière mise à jour et la fréquence à laquelle chaque plugin a été téléchargé. Pour plus d'informations sur chaque plug-in, tels que les commentaires des utilisateurs et les guides d'utilisation, cliquez sur son nom pour accéder à la page d'informations de ce plug-in.

Une fois que vous avez trouvé un plugin que vous souhaitez télécharger, cliquez sur le bleu Installer bouton.

Si vous ne savez pas quoi rechercher, voici nos cinq principaux plugins de maquette préférés. Il y en a beaucoup d'autres, mais c'est bien de commencer quelque part.

• Maquettes d'argile 3D
• Maquettes d'angle
• MockRocket - Maquettes 3D
• Maquette
• Éléments vectoriels 3D

Comment utiliser les plugins de maquette dans Figma

Le processus d'installation des plugins est le même quel que soit le type de plugin que vous utilisez, mais il peut y avoir des différences dans la façon dont ils sont utilisés. C'est pourquoi il est toujours préférable de lire la page communautaire du plugin individuel pour plus de détails.

Dans Figma, vous pouvez choisir des tailles de cadre prêtes à l'emploi pour des écrans spécifiques, comme l'iPhone 13 ou un grand ou petit Android. Vous devez créer votre conception pour sa taille d'appareil prévue plutôt que d'essayer de redimensionner les conceptions plus tard pour s'adapter à votre maquette, mais certaines maquettes permettront des tailles légèrement différentes sans Distorsion.

Vous pouvez même utiliser une capture d'écran de votre appareil, qui sera parfaitement dimensionnée pour une maquette du même appareil.

Les maquettes sont généralement destinées aux conceptions d'écran statiques, bien que vous puissiez faire une maquette vidéo dans Photoshop. Nous allons nous concentrer sur les maquettes Figma pour les appareils portables, mais vous pouvez créer une maquette à partir de zéro dans Photoshop pour les autres appareils. Une fois la conception de votre écran finalisée, vous pouvez passer à la création de la maquette du produit.

Nous allons vous montrer comment utiliser trois de nos plugins suggérés: Clay Mockups 3D, Angle Mockups et Vectory 3D Elements. Allons droit au but.

Maquettes d'argile 3D

Avec votre conception ouverte, sélectionnez le cadre, puis accédez à Plugins et choisissez Maquettes d'argile 3D. Cela ouvre une fenêtre dans laquelle vous pouvez choisir l'appareil pour la maquette. Votre conception doit apparaître sur l'écran de la maquette dans cette fenêtre.

Vous pouvez modifier l'angle de la maquette ainsi que la couleur dans cette fenêtre. Une fois que vous êtes satisfait de son apparence, cliquez sur Enregistrer en tant qu'image.

Vous pouvez revenir en arrière et modifier la couleur ou d'autres aspects à tout moment en cliquant sur Modifier la maquette en dessous de Brancher dans le menu de droite. Vous pouvez maintenant ajouter votre plugin à des conceptions plus grandes comme des présentations ou votre portfolio.

Maquettes d'angle

Pour utiliser Angle Mockups, vous devez créer un compte Angle pour télécharger la bibliothèque de maquettes à partir de leur site Web. Sur Le site d'Angle, Cliquez sur S'identifier, qui fera apparaître une fenêtre contextuelle dans laquelle vous pourrez cliquer S'inscrire et ajoutez vos coordonnées pour créer un compte gratuit.

Une fois connecté, pour télécharger les maquettes, cliquez sur Maquettes > Télécharger l'échantillon. Pour un ensemble plus complet de maquettes, vous pouvez payer pour un accès premium, mais l'échantillon offert avec le compte gratuit est assez bon.

Une fois téléchargé, décompressez le fichier. Celui-ci contient des exemples que vous pouvez utiliser dans Figma, Sketch et Adobe XD, ainsi que des fonds d'écran gratuits. Ouvert AngleFigma. Vous trouverez deux vidéos pour vous aider à utiliser les maquettes, ainsi que quatre ensembles de fichiers Figma avec différentes maquettes.

Pour importer les fichiers sur votre compte Figma, accédez au navigateur Figma et cliquez sur votre profil. Vous pouvez y accéder depuis l'application en allant sur Fichier > Ouvrir le navigateur de fichiers. Faites glisser et déposez chaque fichier Angle dans Figma. Ouvrez ensuite le fichier Angle en double-cliquant dessus depuis la page du navigateur Figma.

Trouvez l'angle de l'appareil que vous souhaitez utiliser pour votre maquette et copiez-le (CMaryland + C pour Mac ou Ctrl + C Pour les fenêtres). Collez-le (Cmd + V pour Mac ou Ctrl + V pour Windows) dans le même plan de travail que votre conception principale.

Dans la palette des calques, développez les calques de l'écran de maquette jusqu'à ce que vous voyiez le calque avec une icône d'image intitulée Placez le plan de travail ici. Sélectionnez ce calque. Ensuite aller à Plugins > Maquettes d'angle et sélectionnez votre design original dans la fenêtre contextuelle.

Cela devrait apparaître dans la fenêtre d'aperçu dans l'angle de votre maquette, mais il ne montrera pas l'appareil de la maquette. Cliquez sur Appliquer et votre écran devrait maintenant être sur la maquette de l'appareil à l'angle correct.

Éléments vectoriels 3D

Vectary 3D fonctionne de la même manière que Clay Mockups 3D, bien qu'il ait moins d'options pour les maquettes d'appareils car il offre également une variété d'actifs 3D. Ouvrez votre conception, sélectionnez le cadre et accédez à Plugins > Éléments Vectary 3D.

Trouvez la maquette que vous souhaitez utiliser dans la bibliothèque contextuelle, puis cliquez sur Bâti de charge. Une fois que votre conception est apparue sur l'écran de l'appareil, cliquez sur Exporter l'image.

Vous avez maintenant une maquette 3D de votre conception sur l'appareil que vous choisissez. Vous pouvez l'ajouter facilement à un autre design.

Une fois votre maquette terminée, vous pouvez l'enregistrer en tant que fichier PNG pour l'utiliser facilement dans une autre conception. Cliquez sur Fichier > Exporter. Sélectionnez l'image que vous avez choisie à exporter, puis cliquez sur Exporter pour votre PNG final.

Ajoutez du réalisme à vos conceptions avec les maquettes Figma

Il existe d'innombrables utilisations pour créer des maquettes pour vos conceptions. Avec divers plugins Figma, vous pouvez trouver une grande variété de styles de travail que vous pouvez ajouter à vos présentations, portfolio ou créer juste pour le plaisir de montrer votre travail de conception.

Avec quelques différences d'application, les plugins de maquette Figma sont faciles d'accès et d'utilisation, alors pourquoi ne pas l'essayer ?

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

Lire la suite