Introduction
Qu’il s’agisse d’une interface, d’une bannière ou tout simplement d’une carte de visite, le seul rendu de la réalisation ne vous permet pas de vous projeter à 100%. Il faut bien souvent passer par ce qu’on appelle des "mockups" permettant de pousser le réalisme d’une création encore plus loin. Bien qu’il existe beaucoup de site permettant d’utiliser une image et de générer une simulation du un "mockup", il faut pouvoir le faire soit même lorsqu’on a une idée précise de la mise en situation.
S’il on reste dans l’univers de l’UI, il est fort probable que vous ayez uniquement besoin d’avoir le même rendu que le comportement attendu après l’intégration. Pour cela, il doit pouvoir appliquer un rendu plat sur une zone en perspective voire sur une zone isométrique en fonction des besoins. Vous pouvez également prendre n’importe quel visuel d’iPhone ou de Macbook et venir y glisser en quelques cliques votre réalisation.
Le plugin Angle vous permet de réaliser ce type de besoin avec une interface volontairement simple et accessible. Disponible sur Sketch, Figma, mais également Adobe XD, Angle vous permettra de pousser le réalisme de vos créations encore plus loin, que vous utilisiez le plugin ou bien tout simplement les ressources disponibles sur le site.
.webp)
Fonctionnalités
SUGGESTED FRAME
Ce premier onglet permet d’afficher les éléments les plus susceptibles de fonctionner par rapport à la dimension et aux proportions de l’élément sur lequel vous voulez appliquer le rendu.
ALL FRAME
Ce deuxième onglet liste l’ensemble des éléments disponible pour l’utilisation du plugin. Particularité du plugin et des deux onglets, l’élément choisi doit être sur la même “page” que celui à qui on appliquera le rendu.
SEARCH A FRAME
Cette barre de recherche vous aidera pour choisir plus rapidement votre frame dans le cas. Au survol de celle-ci, son nom complet s’affichera. Cela peut éventuellement vous faire gagner du temps si vous ne souhaitez pas chercher votre frame en vous basant sur la miniature.
PREVIEW
Cette zone, est dédiée à la prévisualisation du rendu. Les fonctions présentent dans la partie “Apply Transformation” peuvent changer le rendu de la prévisualisation, ce qui vous permet d’éviter certaines erreurs et de devoir relancer le plugin.
PIXEL DENSITY
Cette option est la plus pratique à mon sens, car elle vous permet de choisir la résolution du rendu en fonction de la taille de l’élément auquel le rendu sera appliqué. Ce qui peut vous permettre de générer un rendu propre à l'export pour les écrans rétina par exemple.
ARTBOARD ORIENTATION
Le nom est commun pour tous les logiciels de design, mais pour l’exemple de Figma, nous devrions dire “Frame Orientation”. Cela permet d’effectuer une rotation dans le sens horaire et anti-horaire, mais également d’avoir un effet miroir en fonction du rendu souhaité.
Comment l’utiliser
SELECT A FRAME
Dans un premier temps, vous devez avoir deux éléments, le premier étant la frame du rendu et le second la forme (shape) servant a appliquer ce rendu. La forme peut être simple, sur un mockup téléchargé ou récupéré via une ressource sur Figma Community. Une fois que vous avez ces deux éléments, sélectionnez la forme qui va recevoir le rendu. Vous pouvez lancer le plugin, faites attention, car la forme doit avoir 4 bords.
APPLY TRANSFORMATION
Une fois que la fenêtre du plugin est ouverte vous devez sélectionner la frame qui servira de base pour générer le rendu. Vous avez la possibilité de changer l’orientation tout comme la résolution finale du rendu. Une fois que vous avez bien configuré, vous n’avez plus qu’à appliquer le rendu et voilà !
Conclusion
Même si les besoins sont plus rares, je dirais qu’ayant connu les anciennes versions du plugin et l’ayant testé sur Sketch, cette version sous Figma tiens ses promesses. Le gros avantage et de pouvoir choisir la densité appliquée sur la forme ce qui permet de modifier la taille de celle-ci sans perdre forcément en qualité.
Le seul inconvénient notoire, est que le plugin applique le rendu généré dans une propriété ce qui ne permet pas d’animer le rendu passant par la partie Prototype de Figma. Rassurer vous, cela peut facilement être contourné en utilisant d’autres plugins.
