Outil qui ne fait qu’être de plus en plus populaire, Figma prend réellement une place importante dans le workflow de certains collaborateurs.

Bien que déjà bien puissant de nature, il existe une façon d’aller encore plus loin dans les capacités de l’outil : l’utilisation de plugins complémentaires.

Voici une courte sélection de ces modules additionnels qui permettent de traiter plus en profondeur certains sujets particuliers.

Wireframe

https://www.figma.com/community/plugin/742764242781786818/Wireframe

Ce plugin permet de créer rapidement et de façon très naturelle des prototypes d’interfaces sous forme de fils de fer. L’étape de wireframing est alors encore plus simple.

Il dispose d’une liste de templates catégorisés qui répondent aux principaux prérequis du web (desktop, tablettes, mobiles). L’ensemble est géré directement en SVG.

Color Palettes

https://www.figma.com/community/plugin/740832935938649295/Color-Palettes

Trouver la meilleure palette de couleur est une vraie plaie pour chaque projet. Ce plugin permet d’ajouter au sein même de votre interface un petit moteur de recherche pour récupérer des palettes qui peuvent s’avèreraient être idéales.

Au menu : recherche, code hexadécimal, petit nom.

Product Planner

https://www.figma.com/community/plugin/766652281834442616/Product-Planner

Créer un produit peut vite devenir complexe, grâce à ce plugin il est désormais possible de bien démarrer cette aventure. Que ce soit en termes de planification, d’informations produits, de risques à garder en tête, des buts à atteindre … Une extension de Figma réellement tournée vers l’aspect collaboratif de la production.

Remove BG

https://www.figma.com/community/plugin/738992712906748191/Remove-BG

Parmi les petits liens indispensables se trouve RemoveBg qui permet à n’importe qui de retirer ce qui se trouve en arrière-plan d’une image sans sortir la grosse machinerie.

Unsplash

https://www.figma.com/community/plugin/738454987945972471/Unsplash

Très connu sur Internet pour sa quantité de visuels utilisables gratuitement, Unsplash s’intègre directement à vos visuels Figma sans avoir à télécharger en amont les médias.

W.

WhoCanUse : l’outil magique pour vérifier le contraste de votre palette de couleurs !

En terme d’accessibilité à l’information, s’il y a bien un frein qui revient très souvent, c’est le contraste proposé aux utilisateurs d’un site web.

Grand débat depuis la nuit des temps (et l’arrivée des 256 couleurs sur notre cathodique) entre designers et intégrateurs, la sélection de couleurs reste un point de frustration pour ceux qui souhaitent respecter au maximum les règles d’accessibilité du web.

Wait, what?

Le W3C a publié à plusieurs reprises les WCAG –https://www.w3.org/TR/WCAG21/(Web Content Accessibility Guidelines) afin de guider de la meilleure façon possible ceux qui veulent proposer du contenu à le faire bien.

Utopie vs réalité.

Dans la vraie vie, les WCAG ne sont pas réellement respectées. Cela demande du travail, du temps et un investissement sur la durée. Ce qui rend la tâche complexe pour les utilisateurs ayant une vue dégradée nécessitant l’usage d’un navigateur adapté.

Ces navigateurs utilisent un ensemble de techniques pour aider l’utilisateur à “lire” le contenu, souvent en text-to-speech ou par d’autres astuces visuelles.

Si le contenu est bien encapsulé dans un cadre technique adapté, ceci se passe sans accrocs. Dans le cas contraire … ça devient quasiment impossible pour cette population d’accéder à votre contenu.

C’est là qu’intervient WhoCanUse !

Il existe une myriade de plugins pour Figma, Sketch, navigateurs et autres outils pour tester l’accessibilité d’un site. Mais ceci intervient plutôt en bout de course. Alors que la vérification peut (et devrait) être effectuée en amont, à l’étape du wire framing lorsqu’on s’apprête à poser une charte graphique.

Le rendu ultime : noir & blanc.
Le rendu ultime : noir & blanc.

En passant par cette étape (contraignante, certes), il est possible de vérifier rapidement si le ratio imaginé entre le fond et le texte sera problématique lors de la phase d’intégration ou non.

Exemple ci-dessous avec les résultats d’une combinaison que l’on retrouve de plus en plus sur la toile.

Hum, à première vue, ça semble correct non ? Et bien, la réponse est … non.

Profitez-en, le site est gratuit et éducatif : https://whocanuse.com/

P.

Pourquoi utiliser Firefox Focus comme navigateur sur iPadOS à la place de Safari ?

Le marché des navigateurs est bien plus intéressant aujourd’hui qu’à mes débuts sur Internet. En dehors de celui de Microsoft, il n’y avait pas vraiment de concurrence pour mon système d’exploitation. J’ai vécu de nouveau le cas lorsque j’ai acheté mon premier iPad, il n’y avait que Safari Mobile de disponible.

Les autres sont arrivés progressivement, mais étaient rapidement bloqués par les restrictions de l’écosystème Apple. Toutefois, au fur et à mesure, il y a eu de vraies évolutions avec des fonctionnalités réellement intéressantes.

Je navigue souvent avec Safari, il reste pratique, car je l’utilise aussi sur iPhone et MacBook Pro. Mais la version iPad reste bien moins agréable que la version desktop.

Ceci pour beaucoup de raisons, mais principalement à cause du nombre de traqueurs qu’il laisse encore passer.

J’accepte depuis bien longtemps que toute mon activité en ligne soit traquée et analysée. Mais si je peux encore un peu rêver et imaginer une vraie navigation allégée, alors je le fais.

D’où mon usage ponctuel de Firefox Focus qui vient sauver mon usage des ressources en ligne.

Il porte bien son nom, car il active par défaut le mode navigation privée en retirant l’ensemble des traqueurs des sites web. De plus, l’aspect monotab reste pratique pour se focaliser sur un seul contenu à la fois et éviter la surabondance de sites ouverts en simultané.

Autre avantage, ce navigateur ne garde pas en mémoire votre historique de navigation, vos mots de passe, vos marque-pages et vos cookies. Parfois bloquant pour se connecter à certains sites, mais en utilisant un gestionnaire de mots de passe, on s’en sort au final très bien.