Introduction
Dans un monde de plus en plus axé sur le numérique, avoir un portfolio en ligne est essentiel pour tout professionnel créatif.
En tant que designer, il est très important d’avoir un portfolio pour mettre en avant ses expériences passées et présentes, ses passions, ses envies, etc. Le fait est que, en tant que bon UI designer qui se respecte, les connaissances en développement sont présentes, mais la mise en place est fastidieuse, chronophage et le résultat est trop souvent en deçà des attentes. Heureusement, aujourd’hui certaines entreprises nous offrent la possibilité de nous faciliter la vie avec des outils no-code et nous proposent des solutions plus ou moins personnalisables. Et au fil de mes recherches, un outil revenait très souvent au centre de l’attention : Framer.
Dans cet article, nous plongerons dans les entrailles de Framer pour découvrir ce dont il est réellement capable et s’il répond bel et bien à toutes ses belles promesses.
Framer, qu’est-ce que c’est ?
Avant de plonger dans la création de notre portfolio, jetons un coup d’œil à ce qu’est Framer. Il s’agit d’une puissante plateforme de prototypage qui permet aux concepteurs de créer des prototypes interactifs et réalistes pour diverses applications et interfaces utilisateur.
Framer propose de nombreuses fonctionnalités qui facilitent la conception :
- Des composants intelligents : il offre une conception simplifiée, élément par élément et sans lignes de code.
- Des modèles prédéfinis : grâce à une bibliothèque regroupant des modèles (application mobile, lecteur musical, etc.), des options d’interactions, de superpositions, de transitions ou encore d’effets, il est facile de mettre en œuvre vos idées.
- Des tests utilisateurs : la solution propose des options d’arrière-plans et de cadres à personnaliser, permettant de présenter votre travail. Il suffit ensuite de partager un lien pour rendre votre prototype accessible à des utilisateurs tiers.
- Un espace collaboratif : il est possible de donner accès à tous les acteurs de la conception. L’outil offre la possibilité d’intégrer des collaborateurs externes et de contrôler les accès ainsi que les partages.
- Récemment, Framer a intégré OpenAI, ce qui permet de créer rapidement des landing pages à partir de divers templates personnalisables.
Prise en main
Pour commencer, familiarisons-nous avec l’interface de Framer et les outils disponibles pour créer notre portfolio.
L’interface de Framer présente des similitudes frappantes avec de nombreux autres outils de création tels que Figma. Elle est particulièrement conviviale et intuitive, évitant les pièges rencontrés dans d’autres outils où l’utilisateur est submergé par une surcharge d’informations dès le début de son parcours, ce qui rend son utilisation rapidement ardue.
L’interface se divise en trois parties principales :
- Le canva au centre de l’écran : C’est ici que se trouve notre projet, avec la possibilité de définir dès le début les breakpoints pour visualiser le responsive et corriger d’éventuelles erreurs.
- Une barre latérale (à gauche) : Elle offre trois options principales (les différentes pages, les calques et les éléments graphiques) et est toujours visibles pour faciliter la navigation.
- Une barre latérale (à droite) : C’est ici que nous trouvons toutes les options de mise en page et d’animations. Elle utilise les termes familiers de CSS pour éviter toute confusion et offre une grande variété d’options de personnalisation de base.
Présentation du projet
Bon, maintenant que nous avons posé les bases, il est temps de nous plonger dans la création de ce portfolio. J’ai décidé de rester relativement simple en mettant en place une page d’accueil et une page détaillant chaque projet.
Dès mes premiers pas sur Framer, j’ai pu constater sa facilité de prise en main et à quel point il se rapproche des nombreuses fonctionnalités que nous retrouvons sur Figma en termes de mise en page.
Au début du projet, je pensais importer directement mon projet Figma dans Framer et apporter les modifications nécessaires pour rendre la maquette viable. Cependant, je me suis rapidement rendu compte qu’il n’était pas si difficile de créer directement dans Framer (Presque moins difficile que de préparer correctement un fichier figma). C’est donc ce que j’ai fait pour l’ensemble du projet.
Animations
Ce qui m’a particulièrement attiré chez Framer, c’est la promesse de pouvoir créer des animations complexes sans se prendre la tête avec des montagnes de code ou d’autres solutions bien trop compliquées à prendre en main.
Et encore une fois, j’ai été impressionné par la facilité d’utilisation de ces options. Pour créer des animations, nous disposons d’un volet « Effets » qui se divise en deux parties :
- Les animations liées à une interaction (clic, survol, glisser-déposer)
- Les animations liées au défilement (vitesse de défilement, transformations au défilement et animations au défilement)
Cela peut sembler limité, cependant, c’est amplement suffisant pour offrir une personnalisation pratiquement infinie et précise. J’ai pu mettre en place une grande variété d’animations au sein de mon portfolio, et tout s’est déroulé parfaitement et facilement.
Parti CMS
Pour la création des pages projet de mon portfolio, j’ai pu explorer la partie CMS de Framer. Celle-ci est particulièrement bien conçue et nous propose de créer différentes « Collections » (bases de données). Pour les remplir, nous avons plusieurs possibilités :
- Remplir manuellement via l’interface en ajoutant des champs de différents types (image, texte, ID, etc.).
- Importer un fichier CSV contenant l’intégralité de notre base de données. Cette option fonctionne très bien mais ne permet pas d’importer des images (sauf si celles-ci sont hébergées).
Grâce à cela, nous avons pu nous lancer dans la création de notre modèle de page projet, et, une fois de plus, Framer nous a grandement facilité la tâche en proposant une interface parfaite. Lorsque nous ajoutons un élément et que nous souhaitons le rendre dynamique, il suffit de cliquer sur le petit plus à côté des options de personnalisation pour définir la bonne donnée.
En définitive, cette partie du site a pu être réalisée extrêmement rapidement.
Framer x Figma
Une des nombreuses possibilités offertes par Framer est la capacité de récupérer directement les maquettes réalisées dans Figma pour les importer dans Framer et les éditer directement. C’est cette fonctionnalité qui m’a particulièrement attiré sur le logiciel car la promesse est folle : transformer des maquettes en site fonctionnel en un simple copier-coller.
Dans les faits, c’est effectivement bluffant. Après avoir utilisé le plugin Framer dans Figma, je me retrouve avec une page identique directement dans Framer. Toutefois, il faut faire particulièrement attention à la création de la maquette au préalable, car Framer doit pouvoir comprendre les différents éléments et leur comportement attendu. Cela nécessite donc de prêter une attention particulière aux contraintes et aux auto-layout que nous mettrons en place dans notre projet.
Par exemple, voici une grille sans aucun auto-layout ni contraintes. Évidemment, Framer ne parvient pas à identifier les éléments, ce qui nous donne un résultat absolument non responsive et inutilisable.
Et voici la version avec tout bien fait.
Résultat
Et voilà, nous arrivons à la fin de la création de ce portfolio, et pour être tout à fait honnête, je suis bluffé par la qualité de l’outil, sa facilité de prise en main et les possibilités qui me semblent aujourd’hui presque infinies.
Dans le cadre de cet article, j’ai fait le choix de ne pas utiliser une version payante pour m’assurer de sa viabilité, et je n’ai absolument pas été limité par celle-ci, à l’exception de trois choses :
- L’URL n’est pas personnalisable.
- Il n’est pas possible d’importer des vidéos.
- Un blason “Made in Framer” trône fièrement en bas à droite en position fixe.
Voici ce à quoi ressemble donc le portfolio pour le moment !
En conclusion
En conclusion, je pense que Framer est l’outil idéal, particulièrement adapté aux designers. Tout au long de la création de mon portfolio et de l’apprentissage de l’outil, je n’ai à aucun moment eu l’impression de perdre mon temps. Chaque fois que je rencontrais une difficulté, j’ai eu la merveilleuse surprise de découvrir toute la documentation proposée par Framer et par la communauté, qui s’avère être particulièrement active. Cela en fait, selon moi, l’outil le plus apte à répondre aux attentes des designers web.
