On a comparé FramerX et Sketch et vu le futur du webdesign, voire du développement front
Courant 2015, la tendance des outils de “prototyping” était lancée, Marvellapp, Origami, Pixate et j’en passe faisaient leurs apparitions pour boxer Axure sur son terrain de jeu. C’est lors de cette période que je suis tombé sur FramerJS.
Pour faire simple, FramerJS, c’était le seul outil qui me permettait de créer des prototypes allant du wireframe à l’interface HD interactive et de les tester sur un desktop ou depuis un smartphone.
“Ok, mais si c’était aussi godmod que tu le laisses entendre, pourquoi il n’a pas cassé le game ?”
FramerJS avait un gros point faible sur lequel les équipes de Framer Studio ont travaillé jusqu’à aujourd’hui : “l’accessibilité”.
En 2015, FramerJS était un outil destiné aux designers, mais nécessitait un niveau de connaissance en Javascript souvent jugé trop haut et pour un designer la courbe d’apprentissage était très très rude dès l’entrée.
Je n’ai jamais lâché l’outil et j’ai produit parfois de très très bons prototypes (très réalistes) mais je ne vous cache pas que j’ai fait quelques charrettes et qu’à plusieurs reprises la patience m’a manqué lors des phases de réalisations.
Depuis quelques semaines les équipes de Framer Studio reviennent sur le devant de la scène avec un nouvel outil : “Framer X”.
“React, meet design.”
Tout est dit dans cette phrase et je réalise alors qu’ils sont en train de sortir un outil aussi puissant (si ce n’est plus puissant) que FramerJS tout en supprimant la barrière technique à laquelle ils confrontaient les designers.
Pour moi leur réflexion est claire, “Si les designers ne vont pas vers du code, c’est le code qui ira vers eux”.
J’ai néanmoins des interrogations sur le “comment”.
Quelques semaines plus tard je reçois mon invitation sur la close beta, je m’empresse alors de l’installer pour l’essayer.
Je retrouve alors quelques notions que je connaissais de FramerJS, mais quelque chose m’interpelle : impossible de trouver mon éditeur de code ou la moindre trace de ligne de code.
Au contraire j’ai l’impression de n’avoir que des outils de conception, comme j’ai l’habitude d’en voir sur Sketch.
Deux questions me viennent tout de suite :
1 : FramerX serait il une copie de Sketch ?
2 : Comment faire mes interactions sans ligne de code ?
Je prends le temps d’aller lire la documentation https://framer.gitbook.io/framer/ et je constate qu’il y a bien un principe de composants mais impossible de faire le lien avec l’interface que j’ai devant moi, je suis un peu perdu.
Je décide alors de faire un tour de l’interface et l’observe 3 éléments qui me font réaliser l’ampleur de la puissance de cet outil.
1 : Il existe une page “Store” dans laquelle on retrouve des librairies “composants” à télécharger
2 : Il existe un onglet “Bibliothèque” dans laquelle on retrouve les “composants” que l’on a téléchargé ou créé
“Hmm ouais ok, des outils de conception qui proposent un store et des éléments graphiques en drag’n’drop, ce n’est pas nouveau… Il ya Craft pour Sketch ou encore InVision Studio…”
Oui c’est vrai, mais cela m’amène à…
3: Ce ne sont pas des éléments “graphiques”, ce sont des composants React ! Ce que l’on manipule en drag’n’drop dans l’interface n’est autre que la face visible de l’iceberg, derrière c’est un composant ReactJS avec une syntaxe ES6.
Pour faire simple, on crée son interface sur FramerX comme on le ferait sur Sketch, on utilise une librairie de composants pour cliquer glisser son bouton comme on le ferait avec son plugin Craft.
Sauf qu’à la fin, ce n’est pas une maquette que l’on obtient, c’est un prototype HD avec des éléments interactifs à échelle 1:1.
Pour aller plus loin, les composants sont des éléments créés par l’homme et non pas générés, ce qui signifie que tout ce qui se trouve à l’heure actuelle sur le store a été créé proprement à la main ou importé d’une librairie React existante (coucou Material-UI).
Pour faire court, tous les composants présents dans FramerX sont utilisables par les devs front sans trop d’effort (à condition qu’ils soient sur ReactJS).
Cela signifie aussi pour les designers qui n’ont pas forcément envie de mettre les mains dans le code, qu’ils auront un outil similaire à Sketch dans lequel ils pourront créer des interfaces rapidement en ré-utilisant des éléments graphiques de la librairie (éléments qui en réalité sont des composants ReactJS utilisables lors de phase de test et par les devs front)
“L’outil est sexy, mais attention ça reste une beta !”
Dans notre cas précis la notion de beta se fait sentir à plusieurs reprises.
Afin de creuser un peu plus le sujet j’ai entrepris de faire sur FramerX et sur Sketch la homepage de HAIGO.FR.
Le constat est simple, en terme de conception et de réalisation d’interface, Sketch est clairement meilleur. L’outil est fluide, les comportements des éléments que je crée (alignement, taille de font, couleur), tout réagit comme je le souhaite au moment où je le souhaite.
Je mets 45 minutes environ pour refaire la page sans me mettre la pression, en prenant le soin de nommer et ranger l’ensemble de mes calques dans des dossiers nommés.
J’entreprends le même exercice sur FramerX, je ne connais pas vraiment les raccourcis et l’interface, je cherche un peu mes repères, mais je trouve assez rapidement mes outils.
Je (re)découvre le principe de “Frame” que j’avais déjà rencontré dans FramerJS qui permet de créer des zones (l’équivalent de div en html / un conteneur) et je découvre l’outil “Stack” qui permet de faire des listes d’éléments, l’outil est pratique est bien pensé, car il se base sur les attributs des Flexboxs pour définir le comportement des éléments à l’intérieur de cette liste.
La plupart des attributs ne me sont pas étranger, mais je suppose que la différence de comportement entre “Space-between”, “Space-around” et “Space-Evenly” ne sera pas parlant pour tout le monde, je pense donc qu’il y aura un travail pour rendre l’interface plus accessible.
Je constate aussi que certains usages auxquels je me suis habitué sur Sketch sont absents sur FramerX et me frustre rapidement.
Exemple “Copier / Coller un texte” ( depuis une page web) me fait perdre les tailles / type de polices, etc… ce qui m’oblige à systématiquement remettre le style.
J’ai eu du mal à m’habituer au positionnement des éléments et au comportement des éléments lorsque j’allonge ou réduis ma “Frame” globale. Il me semble possible de faire des interfaces fluides dans FramerX, car il se base sur le principe de position qu’on trouve en css (Fixe / Relative / Absolute). Des notions qui ne me sont pas étrangères, mais que je ne m’attendais pas à trouver dans un outil de conception graphique.
Là où avec Sketch j’avais un fichier clean en 45mins, je mets 1 heure sur FramerX avec un rangement approximatif…
Il y a donc encore pas mal de petits irritants qui viennent ralentir et frustrer le designer lors de la conception, mais une fois de plus n’oublions pas que nous sommes sur une beta fermée.
Il ne faut pas non plus enterrer FramerX trop vite, Sketch est pour le moment meilleur et il le restera peut-être. Cependant, s’il a été intéressant de comparer la conception d’interface, il est tout aussi important de comparer les rendus finaux.
Et là ce n’est plus la même histoire !
Si Sketch propose des exports sous différents formats (vectoriel notamment) et différentes densité de pixels, FramerX en fait tout autant et propose même plus.
En 1 heure c’est un prototype interactif d’une page que j’ai réalisé : les liens du menu, le scroll, la vidéo en autoplay depuis youtube, les champs texte et les boutons sont interactifs.
J’ai donc un prototype parfaitement testable sans plus d’actions de ma part ! On ne parle pas de transitions basiques page à page, mais de vrais composants se comportant comme sur n’importe quel site avec tous les états et interactions qui leurs sont propres !
Sans parler du fait que les composants rendant la maquette, “automatiquement” interactive sont des composants que j’ai été piocher dans la partie “Store” du logiciel !
Il ne s’agit pas de code généré, mais de composant autosuffisant que je peux créer ou télécharger ce qui me garantit donc un code propre et utilisable par les devs fronts !
Vidéo Comparatif
En conclusion :
L’équipe de framer Studio frappe vraiment fort, j’ai hâte de voir cet outil s’améliorer et sortir de beta ! Au vu de ce que j’ai testé, je vois de nombreux usages possible de cet outil au sein d’Haigo. Bien qu’il y ait encore du chemin à parcourir, j’ai été témoin de l’évolution de FramerJS de 2015 à aujourd’hui, je suis donc convaincu que les personnes en charge du nouveau produit le suivront aussi bien !
Je ne connais aucun service capable de faire ce que cet outil nous propose et semble se profiler comme étant l’un des incontournables de notre futur quotidien de designers et peut-être même développeurs.
