Soyons plus précis. Comment transformer instantanément un prototype créé avec Figma en applications natives iOS et Android grâce à Bravo Studio ? Cette question ressemble à une chimère pour nombre de designers. Aujourd’hui, grâce au no-code, elle devient réalité.
À noter que nous n’avons aucun partenariat avec l’un ou l’autre logiciel, nous vous proposons simplement un retour d’expérience de notre utilisation de Figma et Bravo Studio.
Le no-code est peut-être une révolution pour les services UX et UI. Hier, la création d’une application passait par une phase de test en maquettes statiques puis par un POC long à mettre en place car mobilisant des équipes techniques. Aujourd’hui, ces deux phases peuvent être réunies en une, et surtout, être réalisées dans un temps incroyablement court. Voici comment.
Figma et Bravo Studio : présentation des outils
Figma est un logiciel de design vectoriel, en SaaS ou en application de bureau, utilisé principalement en prototypage de plateformes web et mobile. Pour les designers, c’est un concurrent de Sketch. Comme son équivalent, il permet de créer des maquettes haute fidélité desktop et mobile en UI, mais aussi de créer des wireframes en UX.
Ce logiciel offre de nombreuses possibilités, communes à toutes les solutions présentes sur le marché, telles que le design d’éléments duplicables, l’illustration, la personnalisation des typographies, le responsive, des kits UI, etc. Sa particularité est qu’elle est une solution collaborative, facile à prendre en main en équipe et fonctionne grâce à des plugins répondant aux différents besoins des designers.
Bravo Studio est un logiciel qui propose de transformer certains fichiers UX et UI, avec un certain naming, une certaine nomenclature de fichier, en un prototype d’application native sur iOS Apple et Android, sans écrire une seule ligne de code. L’export est ensuite simplifié pour une installation rapide sur smartphone. L’outil propose une documentation très riche et fouillée, et fédère une large communauté d’utilisateurs prêts à enrichir le savoir autour de l’application, via des tutos ou des projets partagés.
Bravo fonctionne sur la base de tags repérés dans les calques des maquettes Figma. Bravo détecte les containers, les sliders, les boutons, etc. et les transforme automatiquement et immédiatement en containers, sliders ou boutons natifs iOS et Android. Le potentiel est énorme et autorise par exemple de modéliser des micro-interactions, des splash screens, des transitions de pages, etc.
On imagine ici tout de suite le gain de temps que cela peut engendrer dans la phase de création d’une application : aller immédiatement dans des vraies interactions utilisateurs et obtenir un feedback quasi-instantané !
Pourquoi utiliser Figma et Bravo ensemble dans l’UI et l’UX
Aujourd’hui, le combo Figma/Bravo est surtout utilisé en UX Research, métier qui cherche de nouvelles solutions à l’heure où les échanges physiques sont compliqués. Cela devient un jeu d’enfant d’évaluer la pertinence d’une application grâce à ces outils. Auparavant, on créait des maquettes par page, plus ou moins longues et détaillées, que l’on transformait en statique, hébergées et reliées sur InVision. On devait alors rédiger un scénario, un guide, pour que l’utilisateur sache comment utiliser le prototype et quelles passerelles existaient entre les pages. Et on manquait certaines phases du comportement utilisateur, comme par exemple l’ouverture de l’application et les périodes d’hésitation.
Aujourd’hui, il possible de tester le comportement comme si l’application existait vraiment, du téléchargement à la commande finale. Cela permet au designer d’aller beaucoup plus loin dans le prototypage, comme inclure des interactions, avec des vidéos, des boucles et des gif. Bravo Studio permet d’intégrer des parcours conditionnés, que ce soit en fonction du profil de l’utilisateur ou de son action. On peut ainsi suivre ses émotions, ses tâtonnements, ses réflexes. On peut comprendre si les vidéos l’ont aidé ou si les animations lui ont plu.
On est également beaucoup plus transparent avec l’utilisateur testeur. On lui propose une vraie application, beaucoup plus intuitive. Le comportement de ce dernier sera alors fidèle au comportement de l’utilisateur final. L’UX Researcher et le designer peuvent ainsi aller beaucoup plus loin dans le recueil du besoin et dans l’aboutissement des visuels. Et tout cela sans encore avoir fait intervenir un seul développeur !
Application no-code : possibilités et limites d’utilisation
Bien que Bravo Studio soit encore une jeune application, les fonctionnalités sont déjà très abouties pour la plupart des designers. Lors de nos utilisations, nous avons particulièrement apprécié la fonction API qui permet de se connecter à une source extérieure de données.
Pourquoi est-ce un plus ? Parce que le fait ne pas avoir à héberger la base de données de son application en son sein ouvre un champ des possibles immense. On ne pourra pas être exhaustif ici, mais par exemple, on peut connecter de la plus basique des bases de données (un CSV issu de Google Sheet ou Excel) aux plus complexes, comme des vidéothèques, des soundboards, etc. sans une ligne de code, juste une clef API.
Dans un de nos projets pilotes, nous avons par exemple lié la lecture d’une phrase personnalisée à l’ouverture de l’application par un profil donné. Il ne nous a fallu que des liens pointant vers un serveur où ces sons avaient été enregistrés. Et tout cela bien sûr en natif iOS et Android.
Mais de sa jeunesse, Bravo en subit encore quelques limites. L’une d’elle est d’exiger du designer des notions en développement. En effet, un pur créatif aura du mal à construire et spécifier son fichier Figma de manière à ce que Bravo Studio retranscrive à la perfection sa maquette. Il faut comprendre quelles sont les différents éléments qui constituent un code et savoir les nommer.
Ce système de tag, qui aide à un fonctionnement stable de Bravo à travers Figma, définit également le périmètre des possibilités à ce que veut ou peut proposer Bravo. L’équipe publie néanmoins un Trello qui suit la mise en œuvre de nouvelles fonctionnalités, avec un système de vote appréciable pour les utilisateurs.
Enfin, se pose la question de la sécurité des données, habituelle en cas d’entreprise jeune et en croissance. Basée à Barcelone, la startup a pourtant bien intégré le RGPD à son fonctionnement, mais l’utilisation d’applications tierces comme AWS pour l’hébergement de données, Amplitude et Google pour l’analytics, Zendesk pour le support, Segment.io pour le flux de données ou encore Rollbar pour le suivi des erreurs, oblige à la prévention. Surtout lorsque l’on travaille avec le plan gratuit, ou les silos peuvent logiquement devenir poreux. Quoiqu’il en soit, cela concerne selon nous uniquement les données du designer, les bases de données évoquées plus haut pouvant être sécurisées avec un Excel en propre, transformé en CSV.
Concernant les plans, mentionnons que toutes nos réalisations ont jusqu’ici été possibles grâce aux version gratuite de Figma et Bravo Studio. D’un point de vue designer, mis à part le splash screen d’ouverture de l’app, il n’y a aucune limite d’utilisation à la création d’une application. Ce sera plus tard, selon les besoins en nombre de testeurs, de builds, et les recours au support, que les plans payants deviendront intéressants. À noter que l’utilisation de Bravo Studio pour publier une application sur les stores Apple et Google ne dispense pas de l’achat des licences développeurs respectives.
Design et no-code : quel avenir ?
Il y a 5 ans, un designer créait ses maquettes sur Photoshop, supportant la lourdeur de ce qu’un logiciel de cette puissance impose, tout en ayant toutes les difficultés du monde à les montrer en action à son client. Il y a 3 ans, il passait sur Sketch et utilisait InVision pour créer un prototype un peu en trompe-l’œil pour son utilisateur. Maintenant, on peut générer une application native sans coder, tout en allant très loin d’un point de vue ergonomie, design et fonctionnalités.
Alors, est-ce qu’on aura toujours besoin de développeurs à l’avenir ? Les designers, avec une rapide formation d’intégrateur seront-ils capables de tout faire ? À notre avis, le no-code ne remplacera jamais les profils techniques. Il sera plutôt un facilitateur et un moyen de mieux communiquer entre les équipes design et IT. Il faudra toujours des développeurs pour créer les fonctionnalités, produire un code propre, léger et adapté.
Le no-code, bien qu’il en soit encore à ses balbutiements, fait face, à l’instar de la voiture autonome, à un plafond de verre qu’il sera difficile de briser. D’un point de vue design, il est un formidable accélérateur du processus de POC. Il crée des passerelles entre la création et le développement. Mais il doit se cantonner aux phases de tests. Lorsque l’on voit les difficultés qu’ont les intelligences artificielles ne serait-ce qu’à imiter le comportement humain, il paraît illusoire qu’elles réussissent à comprendre et à répondre aux différentes manières de penser et de construire qu’ont les designers d’une part et les développeurs d’autre part.
Mais finalement, il est déjà prodigieux d’avoir ces outils à disposition, permettant d’être aussi proche d’un résultat de production si vite dans la phase de création d’une application. Pensons-y, aujourd’hui, on peut créer une application dans la journée et sans une ligne de code, et la mettre en ligne sur l’App Store et le Play Store le soir à des fins de tests !
Sources :
https://www.bravostudio.app/privacy
https://www.bravostudio.app/post/bravo-pricing-and-plans
