Prototyper avec FIGMA

Le logiciel gratuit à 20 milliards d’euros : meilleure système pour prototyper un jeu ?

FIGMA est une web app gratuite disponible depuis 2016 et dédiée au prototypage de site web. Entendez, pour faire l’UX/UI d’un site web, un outil de design, de dessin vectoriel collaboratif qui gère aussi les interactions avec l’utilisateur en mode démo.
Rapidement plébiscité par les web designers et UX/UI designers, FIGMA s’inscrit dans une gamme de logiciels nouvelle génération qui répond à de nouveaux besoins des graphic designers. Parmi ces logiciels on trouve également InVision, Sketch ou encore Adobe XD.
Le 15 septembre 2022, Adobe annonçait son rachat de FIGMA pour 20 Milliards de $ (oui 9 zéros) : tout un symbole.

Pourquoi FIGMA c’est génial ?

Sans prétendre connaître parfaitement tous les logiciels concurrents (bien que j’ai utilisé professionnellement XD et InVision), j’ai 25 ans d’infographie 2D-3D et de web design derrière moi, et une très forte expérience sur Adobe CS. Par conséquent je peux faire un retour sur mes propres besoins et ma propre expérience. Je vais donc mettre en avant des fonctionnalités de FIGMA qui existent peut-être sur d’autres systèmes. L’idée étant de donner ma vision de FIGMA, pas de dénigrer les autres logiciels.

A ce sujet, FIGMA a créé une série de comparatifs très bien conçus :

• Sketch
• Adobe XD
• Invision Studio
• Framer
• Design sous Windows

Je passerai sur les nombreuses fonctionnalités dédiées au web. Ci-dessous une liste des points forts de FIGMA dans le cadre du prototypage d’un jeu de société.

• fonctionnement en workflow / collaboratif proche de ce que propose Google Worklflow
• archivage des données en cloud
• très grande stabilité, aucun bug depuis plus d’un an y compris en connexion 4G
• interface très intuitive, très lisible, et magnifiquement réalisée
• très grande fluidité de l’affichage, très grande netteté des rendus temps réels (les lignes ultra fines par exemple…) WebGL est utilisé avec perfection
• optimisation des commandes au pad du laptop (c’est tellement important, Adobe…)
• fonction COMPONENT relevant de l’idée de génie
• le système de plugins ouverts qui offrent des solutions magiques par exemple pour la synchro avec des données Google Sheets…
• les outils vectoriels qui réinventent la gestion des edges et des points là où l’on croyait Illustrator indétrônable

 

 

 

La fonction “component”

La fonction component reprend une logique très courante sur les logiciels de 3D : le principe des instances.
L’idée est simple : on crée un élément (texte, vector, groupe, etc.) et cet élément devient une source unique à partir de laquelle on crée des clones.
Quand on modifie la source, les clones subissent également ces modifs. La modification d’une instance reste possible et n’affecte pas la source (contrairement au principe de référence où tous les clones sont des sources).
Cette fonctionnalité est très importante quand on design des sites web et demeure absente à ce jour (et à ma connaissance) d’Illustrator, Photoshop ou InDesign quand bien même, nombre d’UX/UI designers utilisent ces logiciels Adobe pour leurs créations. En effet quand on crée un site web, les principes d’atomic design énoncés par Brad Frost sont au cœur de la logique de design, basée sur des éléments visuels et des contenus hiérarchiques, et la réutilisation plus ou moins ordonnée de ces éléments.
Autrement dit, pour simplifier, quand je fais un site web, j’ai des trucs qui reviennent de pages en pages, à commencer par le header, les éléments de navigation, le footer, mais ça va bien sûr plus loin, car il y a aussi des éléments importants de branding ou d’interface graphique, ce qui donne lieu à la notion du Design System : une base de données de recommandations, ressources et comportements créatifs visant au développement d’applications dans un système donnée. Etant par ailleurs enseignant sur ces questions dans un Master à Aix-en-Provence, je suis particulièrement sensible à ces questions.

Cette année j’ai découvert que mes différentes passions étaient reliées par un mot : FIGMA.

Quand on crée un jeu de société, on réalise de nombreuses versions successives du prototype, avec des améliorations, des tests, des changement plus ou moins importants. Si on crée 50-100-150 cartes il est souvent besoin de modifier un ou plusieurs éléments (texte, picto, couleur, image) présent sur 1, 2 ou 150 cartes en même temps.
Dans Photoshop ou Illustrator on utilisera un calque que l’on affichera sur les cartes souhaitées. Mais le principe de stack verticale ne permet pas de gérer le rendu visuel de toutes les cartes à la fois, sur un affichage de type planche, façon grid system. Et que dire de l’impression de toutes les cartes sur des planches PDF ?..
Illustrator propose l’outil Plan De Travail qui permet de gérer plusieurs rendus dans différents formats sur un espace de travail infini : génial mais les éléments du stack (calques) ne sont présent qu’une seule fois sur l’ensemble du document. Donc si j’ai un élément utilisé sur plusieurs plans de travail il sera forcément dupliqué. On peut utiliser des objets dynamiques reliés de type image externe (les logiciels de PAO font ça très bien depuis longtemps) mais c’est très restrictif, cela concerne un fichier image et oblige à une gestion in et out des données de création.

Pourquoi c’est mieux que Photoshop / Illustrator / InDesign ? (pour du proto)

J’ai pour habitude de dire que le meilleur logiciel est celui qui permet d’atteindre ses objectifs. Oui mais dans quelles conditions ? Avec quelle niveau de productivité ? Avec quels sacrifices sur le design, le temps ou la technique ?
Il convient à chacun de trouver la meilleure méthode et les meilleurs outils si l’on veut donner vie à ses créations parfois nombreuses. Je connais trop de gens dont le processus créatif est clairement contrarié par les (mauvais) outils employés.
Je connais des auteurs de jeux, pour certains excellents, qui réalisent visuellement leurs protos avec Powerpoint, Nandeck ou même Paint (oui, Paint, vous avez bien lu).
Pour ma part j’ai utilisé Google Drawings sur des nombreux protos.

 

Pourquoi utiliser un logiciel techniquement inférieur quand on maîtrise parfaitement la suite Adobe ?

J’ai adoré prototyper avec Google Drawings car il autorise le travail en workflow, il est full web app et permet des interactions avec Docs et Sheets. On peut travailler où l’on veut, quand on veut en profitant du Cloud, montrer son travail facilement depuis sont téléphone, collaborer en commentaires, fichiers d’impressions, etc. Tout cela est plus ou moins impossible avec Photoshop et Illustrator.
Le faible niveau de fonctionnalités dédiées au design de Google Drawings est justement sa force : cela concentre le design sur des outils très simples et en même temps assez puissants (très peu d’infographistes pro utilisent Google Drawings). Par conséquent l’essentiel du temps passé sur la proto est consacré au game design et pas à l’utilisation du logiciel. Pour autant la qualité visuelle n’est jamais sacrifiée et il est tout à fait possible de créer de très beaux prototypes de qualité professionnelle avec Google Drawings qui gère très bien les mesures physiques et permet des sorties en PDF très qualitatives. Malheureusement Google Drawings ne propose ni fonction de stack (alors qu’il gère les couches) ni éléments reliés, façon “component”, ni même le verrouillage des éléments (et ça quand même ça craint !).

Comme l’immense majorité des auteurs de jeu, j’ai un vrai travail IRL qui occupe le plus clair de mon temps. Par conséquent j’ai toujours cherché les solutions logiciels qui me permettent de concevoir des jeux de la manière la plus fluide, la plus rapide, tout en réservant le plus de temps possible au game design.

 

NANDECK

Pour de nombreux auteurs qui ne sont pas designer dans l’âme, NANDECK est une solution plébiscitée car elle permet d’importer des données tabulaires vers des templates pour créer des cartes en nombre. NANDECK rend également possible l’impression en planches A4 ce qui est très important pour prototyper rapidement et sortir facilement des versions de son jeu. NANDECK est vraiment conçu autour de l’idée de “from sheet to print”.  Pour beaucoup d’auteurs de jeu, la création via feuille de calcul est à la base de la création du jeu. Ce type de fonctionnalité est indispensable quand on travail sur de très nombreuses cartes et sur plusieurs versions successives du protos. Mais cela est-il suffisant ? De mon point de vue non. NANDECK propose des outils de design bien trop rudimentaires pour l’infographiste que je suis et surtout, ne va pas au bout de la logique d’interaction avec les données externes, à savoir la synchro complète avec des mises à jour depuis un fichier via URL par exemple. NANDECK satisfait pleinement les besoins d’un grand nombre d’auteurs pour qui le design d’un proto est une question secondaire. Pour ma part je considère, à tort ou à raison, que la qualité visuelle et l’ergonomie d’un proto compte énormément dans l’expérience faite par ses joueurs et play testeurs. Par conséquent, et comme le dit Théo Rivière dans un podcast de 63×88 : “veillez toujours à offrir la meilleure expérience de jeu aux testeurs du proto”. Car oui, la couleur d’un pion c’est important, la lisibilité d’un texte c’est primordial, l’harmonie visuelle ça compte, les fondamentaux du design ça se respecte tout comme l’orthographe, et j’ajouterais : si en plus le proto est très beau alors tant mieux !

FIGMA l’app idéale pour prototyper des jeux ?

FIGMA réunit selon moi toutes les fonctions et qualités que j’attends d’un système de prototypage moderne et performant :

• workflow et cloud
• fonctions design poussées et accessibles (typo, mise en forme, gestion des couleurs, vectoriel, bitmap, mise en page, auto-layout, etc.)
• stack, frames et “atomic design” avec les components tout ce qui est important pour produire et modifier des cartes en masse
• gratuité, vitesse, fluidité, fiabilité, mobilité, évolutivité, raccourcis, environnement pro
• imports, synchro et mises à jour de données tabulaires via URL (synchro oui !)
• ouverture aux plugins externes gratuits (à ce jour j’ai trouvé un plugin pour chacun de mes besoins)
• gestion des unités physiques pour l’impression

Ce dernier point est celui qui reste le parent pauvre par rapport aux logiciels Adobe. Même si on peut gérer des frames (plan de travail) en pixels mais depuis un système de création en mm (via plugin), à ce jour et sauf erreur de ma part, on ne peut gérer de fichier en CMJN ni même de tons seuls ou PANTONE ce qui est un véritable problème pour une édition professionnelle. Il est possible de gérer des correspondances CMJN<>RVB et d’exporter en PDF donc en principe c’est possible mais je n’ai jamais essayé (fera l’objet d’un prochain article).
Ceci étant nous parlons de prototypes, par conséquent, le passage aux fichiers d’exés bien connus des graphistes est en principe très fortement facilité par le travail de préprod dans FIGMA. Autrement dit, le besoin de modifs sur les fichiers de prod est en théorie bien moindre, voir e réduit à zéro. Cela pourrait faire l’objet d’un article ultérieur… A ce sujet j’ai récemment rencontré le content creator d’une petit maison d’édition qui me disait utiliser FIGMA + InDesign pour l’impression, les fichiers FIGMA étant reliés en fichiers externe depuis InDESIGN, FIGMA met à jour, ID imprime…

Si FIGMA est une véritable alternative à Abobe XD, il ne remplacera jamais Photoshop, Illustrator ou InDesign dans leurs domaines de compétences respectifs : la retouche et la post prod photo d’une part, la production vectorielle haut de gamme dédiée à l’impression d’autre part.

 

Prototype digital

Tout d’abord FIGMA bosse en vectoriel et au pixel, donc parfait pour des exports parfaitement calibrés. Avec ses fonctions ultra accessibles d’export des frames en PNG24 + alpha channel 8bits, FIGMA est également un outil parfait pour exporter les maps et créer un proto pour TABLETOPIA OU TABLETOP SIMULATOR par exemple.
Là encore, du point de vue de la productivité, même si l’outil d’export pour le web de Photoshop et Illustrator est très puissant il reste beaucoup plus lourd à utiliser que FIGMA qui a rationnalisé la tâche de manière exemplaire. Il a même été ajouté un petit déroulant pour gérer le coefficient de dimensions du fichier de sortie : tout simplement génial !

 

Prototype physique

Quand on a 5-10 projets en même temps la question de l’automatisation de la productivité et de la production d’un proto se pose rapidement, à savoir :

• création et gestion des données des cartes depuis Google Sheets
• ou création des visuels, du plateau, des tokens, etc.
• graphic design & templating
• création des cartes via une fonction populate depuis les données tabulaires (Google Sheet, Excel, etc.)
• mise en page sur planches A4 (pour imprimante de la maison mais c’est également ok pour un traceur pro A0)
• modifs et synchro des données via URL feuille de calcul on line
• sortie sur PDF en mm à 300dpi avec bords perdus

 

 

 

Sur le web

Vous souhaitez en savoir plus sur FiGMA ?  Vous avez bien raison !

Boadgame design avec FIGMA (on est plein en fait !)
https://dribbble.com/tags/figma_board_gamehttps://www.figma.com/community

Catane sur FIGMA, un système qui utilise le scripting (en plus !)
https://www.figma.com/file/Fe95EfSfGCxQA9QHq8DK9e/Figma-Catan-Playable-Community

Jeu de cartes tradi
https://www.figma.com/file/BwPjXLmDa5ELeafCHkRzUK/Figma-Playing-Cards-Community 

Un UNO
https://www.figma.com/file/bbCfhLF1RylQx4HOJ6ujwo/Uno-Card-Game-(Community)