Des prototypes d'interaction sans code : une premiere prise en main d'Origami Studio

Résumé

Origami Studio associe un canevas de mise en page et un editeur visuel de logique par modules : transitions et gestes se construisent sans code et se montrent sur un vrai telephone. Gratuit, mais reserve au Mac.

Recommander
Nom
Origami Studio
Version
226
Open source
Propriétaire
Système
macOS
Mis à jour
2026-10-06 19:12

Un outil de prototypage muri dans un grand reseau social, puis ouvert

La boite a outils d'un designer d'interaction sait dessiner des parcours et faire defiler des ecrans, et elle s'arrete net des qu'une animation se complique ou qu'un vrai capteur doit entrer en jeu. Origami Studio est un outil de prototypage gratuit ne dans l'equipe de design d'un grand reseau social, ou il a servi des annees a eprouver des idees d'interaction sur les produits maison avant d'etre ouvert a tous. Dessin, animation et logique tiennent dans un seul espace de travail, l'usage personnel ne coute rien, et en septembre 2026 la version en etait a 226, sur un rythme d'une livraison toutes les deux ou trois semaines.

Espace de travail d'Origami Studio

Canevas et modules : deux jambes pour tenir debout

L'interface se separe en deux couches de raisonnement. Le canevas s'occupe de ce que l'on voit : les formes se dessinent librement, le texte se corrige sur place, les composants se posent, et une mise en page dynamique repond d'elle-meme quand la taille du canevas change. L'editeur de modules est de la programmation visuelle en briques : on cable des modules ensemble, le resultat alimente l'entree d'une propriete de l'interface, et l'element se meut comme on le lui a dit. Un designer qui n'ecrit pas de code tire quelques modules et obtient un parallaxe au defilement ou un saut conditionnel ; qui est a l'aise avec la logique attrape le module de script et calcule plus difficile. Le canevas pour l'allure, les modules pour le comportement, et ce partage est ce qui le separe d'un outil qui ne fait que tourner des pages.

Edition d'un composant d'interaction

Le materiel reel, a l'interieur du prototype

C'est la partie la plus affutee. Un prototype peut appeler directement le materiel natif d'un telephone : photos de l'appareil, niveau du microphone, retour par vibration, carte positionnee, valeurs de l'accelerometre et du gyroscope, tout cela dispose de modules tout faits. Une demonstration n'est donc pas quelque chose qui ressemble juste : c'est un prototype vivant que l'on peut vraiment secouer, vraiment localiser, vraiment faire vibrer. Une application compagne sur le telephone projette le prototype sur un vrai ecran pour les revues, et faire passer un telephone convainc plus vite qu'une diapositive. Le prototype peut aussi etre enregistre et exporte en video, ce qui arrange autant le passage a l'ingenieur que l'insertion dans une proposition.

Apercu sur un telephone

De la maquette au prototype qui fonctionne

Le passage depuis les outils de design habituels est fluide. Les formes vectorielles et les calques de texte copies d'un editeur vectoriel courant arrivent en calques modifiables, sans rien a redessiner, et les fichiers d'une autre application de design repandue s'importent aussi. La performance a beaucoup gagne sur les dernieres versions, l'edition des modules et l'apercu repondent nettement plus vite, et des calques de shader, des ressorts a comportement liquide ainsi qu'une generation assistee de modules de script sont venus s'ajouter. Deux choses valent d'etre sues avant de commencer. Il existe une version pour Mac et rien d'autre, les utilisateurs de Windows restent dehors. Et le systeme de modules presente une pente rude, ce qui convient aux designers d'interaction et de mouvement prets a passer quelques jours avec la documentation.

Une etude de mouvement

Comment il sert sur de vrais projets

Trois schemas reviennent sans cesse. Quand un mouvement doit etre tranche, les transitions et la facon dont un geste suit le doigt se reglent en modules et s'eprouvent sur un telephone encore et encore, avant d'etre confiees a l'ingenieur, ce qui epargne pas mal de reprises. Quand un systeme de design se construit, les composants deviennent des modules d'interaction reutilisables, et une equipe puise dans un langage commun du comportement au lieu d'en inventer un par ecran. Quand il faut presenter, un prototype sur un appareil reel persuade bien mieux qu'une image fixe, parce qu'un client ou un responsable peut l'essayer sur-le-champ. La matiere pour apprendre n'est pas mince non plus : la documentation officielle est organisee module par module, et la communaute regorge de combinaisons de modules toutes faites que l'on peut demonter et etudier.

Ce qu'un designer en retire

Le gain est concret. Un detail d'interaction eprouve devient un vocabulaire partage avec les developpeurs, et l'ecart entre ce qui a ete imagine et ce qui est construit se resserre. Une livraison toutes les deux semaines maintient l'arrivee de fonctions et la prise en charge d'appareils, si bien qu'un outil adopte aujourd'hui risque peu d'etre laisse en route. Il demande du temps au depart et il demande un Mac, mais pour la classe d'interaction qu'un prototype a pages ne sait pas dire, cet echange se defend sans peine.

Origami StudioTéléchargement
Systèmes pris en charge : macOS