Dans le design moderne, les images et les illustrations sont des éléments essentiels pour rendre vos projets visuellement attrayants et communicatifs. Dans Figma, il existe plusieurs outils et techniques pour intégrer, manipuler et optimiser des images et des illustrations. Cet article vous guidera à travers les étapes pour travailler efficacement avec des images et des illustrations dans Figma, que vous soyez designer, développeur ou membre d’une équipe de création.
1. Ajouter des images et des illustrations dans Figma
L’ajout d’images ou d’illustrations dans Figma est simple et rapide. Vous pouvez intégrer des fichiers d’images en quelques clics :
- Importer une image :
- Dans Figma, ouvrez le fichier dans lequel vous souhaitez insérer l'image.
- Cliquez sur le menu File > Place Image (ou utilisez le raccourci clavier
Shift + Cmd/Ctrl + K). - Sélectionnez l’image sur votre ordinateur ou faites glisser un fichier d’image directement dans l’espace de travail.
- Une fois l’image importée, elle apparaîtra sur votre plan de travail, que vous pourrez déplacer et redimensionner à volonté.
- Utiliser des illustrations de la bibliothèque Figma : Figma propose aussi une vaste bibliothèque d’illustrations intégrées que vous pouvez utiliser directement dans vos projets. Vous pouvez y accéder via la section Community ou la barre latérale de la bibliothèque d'assets pour trouver des illustrations vectorielles libres de droits.
2. Redimensionner et recadrer des images
Une fois l’image insérée dans Figma, vous pouvez la redimensionner et la recadrer pour qu’elle s’adapte à votre design.
- Redimensionner une image :
- Sélectionnez l’image.
- Faites glisser les poignées de redimensionnement dans les coins ou les bords pour modifier sa taille tout en conservant les proportions, ou maintenez la touche Shift enfoncée pour ajuster les dimensions de manière proportionnelle.
- Recadrer une image : Pour recadrer une image, vous devez utiliser la fonction Crop dans Figma :
- Sélectionnez l’image.
- Dans la barre latérale droite, cliquez sur l’outil Mask pour créer un masque de forme sur l’image.
- Vous pourrez ainsi ajuster le recadrage en déplaçant le masque ou en modifiant sa forme.
3. Utiliser des masques pour intégrer des illustrations dans des formes
Les masques dans Figma permettent de couper une image ou une illustration en fonction d’une forme définie. Cela est particulièrement utile lorsque vous souhaitez intégrer une image à l’intérieur d’une forme particulière (comme un cercle, un triangle ou un carré) tout en gardant un style soigné.
- Appliquer un masque sur une image :
- Sélectionnez l’objet (forme ou illustration) que vous souhaitez utiliser comme masque.
- Placez l’image ou l’illustration au-dessus de la forme.
- Sélectionnez les deux objets (forme et image), puis faites un clic droit et choisissez Use as Mask. L'image sera découpée selon la forme de votre objet.
Cette technique est idéale pour des éléments de design comme des photos en forme de cercle ou des icônes personnalisées.
4. Ajouter des effets et ajuster les propriétés des images
Figma offre des outils pour appliquer des effets visuels aux images et illustrations. Voici quelques techniques courantes :
- Appliquer des ombres et des flous :
- Sélectionnez l’image ou l’illustration.
- Dans la barre latérale droite, sous l’option Effects, cliquez sur + pour ajouter un effet.
- Vous pouvez ajouter des ombres portées, des flous, ou même des effets de luminosité pour donner un aspect plus dynamique à votre image.
- Ajuster la luminosité et le contraste : Bien que Figma ne propose pas d'outils de retouche d'image aussi avancés que Photoshop, vous pouvez ajuster la luminosité, la saturation et les couleurs de base de vos images avec des plugins comme Image Palette ou Unsplash pour ajouter un filtre de couleur.
5. Travailler avec des illustrations vectorielles
Les illustrations vectorielles offrent une grande flexibilité, car elles peuvent être redimensionnées sans perte de qualité. Figma prend en charge les illustrations vectorielles, que ce soit pour des logos, des icônes ou des illustrations créées dans des logiciels comme Adobe Illustrator.
- Importer des illustrations vectorielles : Vous pouvez importer des fichiers SVG dans Figma :
- Allez dans File > Place Image, puis sélectionnez le fichier SVG que vous souhaitez importer.
- Vous pouvez ensuite modifier les chemins vectoriels dans Figma en sélectionnant l’illustration et en utilisant les outils de vectorisation pour ajuster les formes.
- Modifier les couleurs et les formes des illustrations : Les illustrations vectorielles sont facilement modifiables dans Figma. Sélectionnez l'élément vectoriel que vous souhaitez modifier, et vous pouvez ajuster ses couleurs, ses bordures et ses remplissages à l’aide des outils de la barre latérale. Vous pouvez également redimensionner les éléments vectoriels sans compromettre leur qualité.
6. Utiliser des plugins pour améliorer vos images et illustrations
Figma propose une large gamme de plugins pour enrichir vos créations visuelles. Certains plugins vous permettent de travailler avec des images de manière plus avancée, comme des retouches automatiques ou des effets de filtre, tandis que d'autres facilitent l'intégration d'illustrations et de ressources visuelles :
- Unsplash : Permet d’ajouter des images libres de droits à partir d’une vaste bibliothèque.
- Iconify : Donne accès à des milliers d’icônes vectorielles que vous pouvez utiliser et personnaliser.
- Image Palette : Permet de générer des palettes de couleurs à partir d’une image pour harmoniser votre design.
7. Optimiser la taille des images pour le web
Si vous travaillez sur des projets destinés à être publiés sur le web, il est crucial de veiller à ce que vos images soient optimisées pour un chargement rapide. Figma permet de gérer facilement la taille des images sans compromettre leur qualité.
- Redimensionner l’image avant l’export :
Lorsque vous exportez une image ou une illustration, vous pouvez choisir la taille de l’exportation (1x, 2x, etc.) pour réduire ou augmenter sa résolution en fonction de vos besoins. - Exporter en différents formats :
Figma permet d'exporter des images et illustrations dans plusieurs formats comme PNG, JPEG, SVG ou PDF. Le format SVG est particulièrement adapté pour les illustrations vectorielles et les graphiques de petite taille, tandis que PNG et JPEG sont parfaits pour les images bitmap.
Conclusion
Travailler avec des images et des illustrations dans Figma est simple, mais permet une grande flexibilité. Grâce à des outils puissants pour importer, modifier, redimensionner et optimiser des visuels, vous pouvez enrichir vos designs tout en maintenant une cohérence esthétique et une haute qualité. Que vous utilisiez des photos, des illustrations vectorielles ou des icônes, Figma offre toutes les fonctionnalités nécessaires pour intégrer des images dans vos projets de manière fluide et créative.
