Figma en réalité augmentée

Et si l’on mettait Figma en AR ?

Cela semble plus une question de « Est-ce qu’on peut le faire ? » VS « Est-ce qu’on devrait le faire ?« . Et pourtant, il y a toute une réflexion derrière une telle idée, que je vous partage au fils de cet article.
On commencera par le « pourquoi » du développement de Figma-xr, avant de discuter des différents éléments techniques qui sont rentrés en jeux dans la création d’un tel projet. On conclura sur les évolutions possibles du projet.

Objectif du projet

Plusieurs éléments ont motivé mon choix de projet :

Premièrement, Figma est très populaire pour concevoir des interfaces 2D, cependant je vois de plus en plus de designers 3D l’utiliser. Cela se fait en complément d’un logiciel externe qui prend en charge la spécialisation et l’immersion, rendant l’itération particulièrement lente. Comme j’aime créer des outils qui facilitent le quotidien, ça me parait un excellent sujet.

Secondement, je n’avais encore jamais mis la main sur Vue.js, un framework qui a attiré ma curiosité avec la version 3. Ce projet présente justement des challenges que l’on retrouve dans des applications modernes. Tels que : Créer une application complète avec authentification, navigation, et du stockage de donnée.

Environnement de développement mobile web sur un vrai téléphone

Le point de départ du projet est une base Vue 3 + TypeScript + Vite, configuré pour un déploiement en CI-CD autour de GitHub Pages, ou l’application finale est servie en PWA.

Une fois le setup initial mis en place, il faut ensuite penser à la boucle d’itération. Plus vite, je peux tester une modification, plus vite, je peux avancer. Pour cela, je configure l’environnement de développement de vite, incluant du rechargement automatique, pour accéder à l’expérience en temps réel depuis mon téléphone mobile.

Pour inspecter depuis mon téléphone, j’ai installé Android Debug Bridge, et configuré mon téléphone en mode développeur. Connecter l’appareil à l’ordinateur en usb, puis entrer dans le terminal la commande adb devices suffit à faire apparaitre celui-ci dans chrome://inspect/#devices. Page à partir de laquelle je peux accéder à l’inspecteur des pages web ouvertes sur mon téléphone.

Comme le standard WebXR requiert un fonctionnement en HTTPS et que l’implémentation de Babylonjs est stricte par rapport à cela, le serveur de développement est distribué sur le réseau local par Vite en SSL. Le certificat autosigné n’est pas souvent accepté sur mobile, c’est pourquoi j’utilise le flag #unsafely-treat-insecure-origin-as-secure sur le téléphone de test.

Figma et Oauth

Se connecter à Figma se fait grâce au protocole Oauth. En voici le processus :

1. Créer l’application sur l’interface de Figma. J’y obtiens des codes secrets qui identifient mon application. En échange, j’informe figma des adresses autorisées à recevoir les codes de réponse en retour d’authentification.
2. J’intègre un bouton de connexion qui redirige l’utilisateur vers la page d’authentification de Figma. En paramètre d’URL se trouve un code identifiant mon application, l’adresse de retour, ainsi que les autorisations souhaitées.
3. Quand l’utilisateur est redirigé par Figma vers notre URL de retour, un token temporaire ainsi qu’un code de renouvellement inclus dans l’URL. L’application échange ensuite ce premier avec Figma pour un code unique à l’utilisateur qui servira dans chaque future requête.

Si le code unique n’est plus valide, il est possible d’utiliser le code de renouvellement pour en demander un nouveau.

Avec l’api de figma, un utilisateur peut accéder à des fichiers, ces fichiers détaillent l’architecture complète d’un projet Figma. A l’ouverture d’un fichier, on demande à figma de nous générer une image pour chaque panneau unique de ce fichier. Une fois chargées, l’utilisateur pourra placer ces images à sa guise en 3D.

UI et design

Pour la partie Vue.js, J’ai expérimenté avec plusieurs outils de design, le premier était une implémentation du Material design sur Vue.js. C’était fonctionnel, mais loin d’être moderne. C’est alors que j’ai trouvé une implémentation de shadcn sur Vuejs : shadcn/vue. Cela m’a permis de récupérer des éléments tels que les boutons et tuiles. C’était aussi une bonne excuse pour retrouver Tailwindcss.

À propos de TailWind, mélanger le style à la définition de la vue au travers de montagnes de classes est un choix qui s’éloigne quelque peu de la philosophie de Vuejs. En effet, les fichiers .vue sont divisés en trois sections, une section script, une section template, et une dernière de styles. En adoptant totalement TailWind, je rends le template plus lourd, rendant inutile la dernière section. On y ressent bien l’influence de React. Il n’est pas en mesure de proposer un espace dédié aux styles dans son format de fichier.

Je reviendrai certainement sur cette décision dans une prochaine itération de figma-xr et dans mes futurs projets utilisant Vue.

Babylonjs et Vue.js, l’intégration de l’ui avec la 3D

Il n’existe pas d’intégrations à la Troisjs ou Tresjs (deux implémentations de Vuejs avec Threejs comme R3F) pour Babylonjs. Le pont que l’on met alors en place est une classe prenant en charge la logique de Babylonjs. Cette classe est instanciée dans un composant VueJS, avec comme paramètre le canevas. Elle expose aussi des fonctions pour la transmission d’information.

Afin de préserver une séparation des responsabilités strictes, l’ui 2D de l’expérience est gérée par Vuejs. Cela me permet d’intégrer des fonctionnalités telles qu’un chargement dynamique avec useElementVisibility. En effet, les gros projets contiennent un nombre d’images que Figma ne peut pas générer d’un coup.

Lorsqu’un des boutons est cliqué par l’utilisateur, on transmet l’image à Babylon au travers d’un appel de fonction. Celle-ci s’occupe de l’instanciation dans l’espace 3D. On attache ensuite à ces images un comportement dynamique qui, à chaque déplacement, ancre le média dans l’espace WebXR.

Et Tada !

Vous pouvez accéder à Figma-XR ici : https://arthurmougin.github.io/figma-xr/

Le code source, quant à lui, est accessible ici : arthurmougin/figma-xr

TODO : Figma en temps réel & meilleure XR

Ce projet n’est pas fini, il reste quelques coquilles du coté de l’UX. Les grosses features que l’on pourra ajouter si l’intérêt pour le projet se développe sont les suivantes :

Premièrement, l’api figma donne accès à un webhook, une façon d’écouter les changements effectués en temps réels sur un projet. On pourrait imaginer une boucle d’itération instantanée, ou chaque changement fait sur un panneau Figma se répercute immédiatement dans l’image affichée en AR.

Deuxièmement, l’usage actuel est strictement mobile et ordinateur. On pourra approfondir un usage pour casque immersif en créant une UI appropriée dans babylonjs.

Dernièrement, on peut également intégrer une application à Figma en développant un plugin qui s’intègrerait dans l’interface de l’éditeur. Cela nous permettrait d’enlever entièrement la partie authentification et import de projet. On aurait donc une page compagnon accessible par un QRCode généré par le plugin, qui recevrait les images en temps réel. Une piste intéressante à explorer pour une V2.

Bref, qu’en avez-vous pensé ?
On se retrouve sur Discord et LinkedIn pour en discuter !
À très vite dans le web immersif,
Arthur Mougin