Tutoriel Framer : Comment créer de superbes prototypes interactifs

Jetez un œil aux exemples de prototypes ci-dessous. Celles-ci ont été réalisées dans Framer. Après ce didacticiel, vous pourrez commencer à créer vos propres prototypes animés époustouflants en un rien de temps.

Framer a sorti sa dernière version il y a une semaine, et le marché du prototypage ne sera plus jamais le même. L'outil de prototypage Framer était auparavant difficile à maîtriser, mais utile en tant que logiciel de prototypage le plus précis et le plus illimité. Maintenant, les choses ont changé. Framer est désormais livré avec les fonctionnalités Design + Code + Collaborate, ce qui signifie que vous pouvez créer votre prototype directement dans Framer, en développant un prototype entièrement fonctionnel sans aucun logiciel tiers et sans aucune compétence en matière de codage.

Ici, je vais vous apprendre à utiliser un code Framer simple sans aucune connaissance préalable du codage requise. Vous apprendrez à combiner les meilleures fonctionnalités du mode conception et du mode code dans Framer pour créer des prototypes animés et interactifs. Passons donc à ce didacticiel et récupérons quelques petits extraits de code pour améliorer vos prototypes.

Bases de l'encadreur

Commençons! Allez simplement sur framer.com et téléchargez une version d'essai. Ils vous donnent deux semaines de leur démo entièrement fonctionnelle, et croyez-moi, c'est assez de temps pour en apprendre beaucoup sur ce logiciel de prototypage.

Après l'installation, vous voudrez peut-être parcourir certains des exemples qu'ils fournissent et jouer un peu avec eux. Lorsque vous avez terminé, il est temps de commencer le prototypage.

(Dans ce didacticiel Framer, je me concentrerai sur la création de prototypes directement dans Framer.js. Vous devez également savoir qu'il existe d'autres façons de commencer le prototypage dans Framer. Par exemple, vous pouvez travailler directement avec des fichiers Sketch. Je couvrirai ce flux de travail dans un autre article.)

Le tout nouveau Framer - Mode Conception

Dans cet article, nous allons créer trois prototypes sympas en quelques minutes avec une utilisation minimale du code : interactions de base, composant de défilement et composant de page.

La dernière version de Framer a une nouvelle fonctionnalité intéressante : le mode conception. Il vous permet de travailler presque de la même manière que dans Sketch ou Figma. Vous pouvez créer des calques vectoriels, importer des images ou créer et styliser des calques de texte. Tout cela devient très pratique lorsque vous souhaitez prototyper rapidement sans aucune application tierce.

Créons une conception de type application

Dans la première partie de ce tutoriel, nous allons préparer un terrain de jeu pour notre prototype Framer. Nous allons créer une conception de type application, avec trois types de calques différents : vecteur, image et texte.

Étape 1 : Créez un bouton et un arrière-plan simples.

Pour commencer votre conception, sélectionnez le premier onglet, qui est le mode de conception, et ajoutez un plan de travail, comme dans Sketch. Dans ce didacticiel, nous allons travailler sur un prototype d'iPhone 7, j'ai donc choisi ce préréglage comme taille de plan de travail. J'ai également ajouté un remplissage de fond bleu.

Ensuite, sélectionnez l'outil rectangle et créez une forme sous la forme d'un simple bouton rond.

Étape 2 : Ajoutez une carte avec une image.

La deuxième méthode d'ajout de calques est la fonction glisser-déposer . Vous pouvez sélectionner n'importe quel fichier image sur votre ordinateur, le déposer dans Framer et le styliser à l'aide de la barre latérale droite. J'ai utilisé une illustration simple et l'ai stylisée comme une carte.

Étape 3 : Ajoutez un titre d'application.

Framer vous permet également d'ajouter un calque de texte. Encore une fois, le style est fondamentalement le même que dans n'importe quel logiciel graphique. Vous pouvez choisir la police, la taille, l'alignement, l'espacement des lettres, etc.

Étape 4 : Indiquez à Framer quelles couches sont interactives.

Il nous reste une étape avant de démarrer notre prototype Framer. Nous devons juste dire à Framer quelles couches seront interactives. Cliquez simplement sur le point à côté du nom du calque dans le panneau des calques. Il est bon de nommer chaque couche correctement pour une utilisation ultérieure. J'ai nommé mes calques card et button .

Étape 5 (Bonus) : Définissez vos couleurs globales.

Une bonne pratique consiste à définir des variables pour l'ensemble du prototype. Vous pouvez définir la palette de couleurs, la typographie et les dimensions de base que vous utiliserez dès le début. Cela permet de gagner du temps sur toute la ligne.

Lorsque vous configurez vos couleurs, nommez-les simplement dans l'éditeur de code et indiquez les valeurs HEX, RVB ou RVBa après le signe "=" approprié". N'oubliez pas de conserver toutes les variables tout en haut de votre code.

 # variables ------------------------------- blue = "#005D99" green = "#3DBE8B" white = "#FFFFFF"

Étape 6 (Bonus) : Ajout de la position relative.

Avec le nouveau Framer, il est très facile de garder votre prototype réactif. Vous pouvez définir des positions relatives à partir du mode conception , comme illustré ci-dessous :

Voici une courte liste de propriétés utiles pour aligner et calculer la position de la couche directement dans le code. Vous pouvez faire les calculs nécessaires pour calculer les positions des calques. Cela devient nécessaire lorsque vous ajoutez des interactions ultérieurement et que vous souhaitez que votre prototype reste réactif.

 # This is how you can align layer position: x: Align.center(0) # align layer horizontaly x: Align.center(200) # align layer horizontaly with 200 offset x: Align.right(0) x: Align.left(0) y: Align.center(0) # align layer verticaly y: Align.top(0) y: Align.bottom(0) # You can use also some variables width: Screen.width # current device width height: Screen.height # current device height # As a reference you can also user layer names x: layerA.x # layerA horizontal position y: layerA.y # layerA vertical position width: layerA.width # layerA width height: layerA.height # layerA height # You can combine all of this into the simple math to calculate position or dimensions width: Screen.width / 2 - layerA.width

Maintenant que vous êtes prêt, commençons notre projet

Nous avons créé différents types de calques Framer. Maintenant, notre aire de jeux interactive est prête à fonctionner.

Finalement! La partie ennuyeuse est terminée. Il est maintenant temps de concevoir une interaction.

Téléchargez le prototype complet ici.

1. Créer une interaction de rétroaction de bouton

Pour concevoir une interaction, nous avons besoin d'un déclencheur pour que cela se produise. Cela peut être presque n'importe quoi : un appui sur l'écran, la fin d'une animation, la fin du chargement d'une image ou l'accéléromètre de votre téléphone.

Étape 1 : Création de l'événement pour l'interaction.

Nous allons rester simple. Créons un retour de bouton lorsque vous appuyez dessus, en utilisant la commande suivante :

 layerA.onTap (event, layer) ->

Framer vient d'écrire cette ligne de code pour vous. Cela signifie que lorsque vous appuyez sur le calque du bouton, quelque chose se produit.

Étape 2 : Ajouter une animation à l'événement.

Commençons une animation après ce déclencheur. Pour ce faire, cliquez sur le point à côté du calque du bouton dans le panneau des calques, puis sélectionnez Ajouter une animation . Lorsque vous ajoutez une animation, Framer passe en mode d'édition d'animation. Vous pouvez mettre à l'échelle, déplacer, faire pivoter ou modifier n'importe quel paramètre du calque :

Framer a ajouté quelques lignes de code supplémentaires. (Ne vous inquiétez pas, vous pouvez toujours modifier votre animation avec le panneau d'animation.)

 button.onTap (event, layer) -> button.animate borderRadius: 27 borderWidth: 10 borderColor: "rgba(115,250,121,1)" options: time: 0.30 curve: Bezier.ease

Toutes nos félicitations! Vous venez de créer votre première interaction. Cela ne fonctionne qu'une seule fois pour le moment, mais nous allons corriger cela. La raison pour laquelle vous ne pouvez déclencher cette animation qu'une seule fois est qu'il n'y a rien de prévu après la fin de l'animation. Nous devons réinitialiser tous les paramètres après la fin de la première animation à ce qu'ils étaient avant.

Étape 3 : réinitialisation de l'animation.

Ajoutez un autre événement, presque comme nous l'avons fait auparavant. La différence est que nous recherchons un événement lorsque l'animation se termine :

Cette fois, le code ajouté par Framer ressemblera à ceci :

 button.onAnimationEnd (event, layer) ->

Ainsi, lorsque l'animation sur le calque du bouton est terminée, nous pouvons ajouter la prochaine animation qui réinitialisera les paramètres du calque du bouton :

 button.onAnimationEnd (event, layer) -> button.animate borderWidth: 100 borderColor: "rgba(255,255,255,1)" borderRadius: 100 options: time: 0.3 curve: Bezier.ease

C'est ça! Nous avons maintenant des commentaires de travail après avoir appuyé sur notre bouton.

2. Création de différents états pour les interactions de la couche carte

Ok, maintenant vous savez comment concevoir une animation et la déclencher. Le plus souvent, vous devez concevoir différents états d'un calque. Vous pouvez concevoir plusieurs états du même calque en modifiant uniquement certains paramètres, tels que la position, la taille ou l'opacité.

Étape 1 : Ajout et création d'états pour un calque de carte.

La façon d'ajouter un état à la carte est presque la même que d'ajouter une animation. Vous devez cliquer sur le point à côté du calque de la carte , puis cliquer sur Ajouter un état . Vous êtes maintenant passé en mode d'édition d'état. Concevez-le comme vous le souhaitez :

Veuillez faire attention à l'indentation du code. Il devrait commencer à partir de la première rangée.

J'ai conçu deux états différents pour ma couche de carte :

 card.states.a = width: 248 height: 287 x: 63 y: 190 borderWidth: 10 borderColor: "rgba(115,250,121,1)" card.states.b = x: 139 y: 529 width: 98 height: 98 borderRadius: 49 borderWidth: 1 borderColor: "rgba(255,255,255,1)"

Étape 2 : Ajouter des événements.

Il n'y a plus qu'une étape pour que cela fonctionne. Nous devons créer un événement pour changer ces états.

 button.onTap -> card.stateCycle()

Cela change tous les états du calque un par un, à chaque fois que vous effectuez une action. Ainsi, dans notre cas, chaque fois que nous tapons sur le calque du bouton , nous passons à l'état de la carte . Si vous souhaitez créer plus d'états et les déclencher correctement, l'extrait ci-dessous fonctionnera beaucoup mieux pour vous :

 button.onTap -> card.stateSwitch("b")

Cet extrait est utile lorsque vous souhaitez déclencher un état particulier du calque.

Le dernier ajustement que j'ai apporté à mon prototype est un changement de vitesse d'animation et de courbe entre les états :

 card.animationOptions = curve: Spring time: 0.8 

Il y a beaucoup plus de choses que vous pouvez faire avec les événements , mais à ce stade, vous pourrez créer presque n'importe quelle interaction de base. C'est l'une des documentations les mieux écrites que j'ai jamais vues.

Accélérer votre travail dans Framer : Composants

Le moment est venu d'ajouter des composants pour accélérer votre travail. Pour tirer le meilleur parti de ce didacticiel à partir de maintenant, téléchargez ce prototype.

1. Le premier élément : le défilement

J'ai un peu modifié notre prototype. Nous avons maintenant une liste à l'intérieur, mais sa hauteur est supérieure à la résolution de l'écran. Nous devons créer un défilement pour pouvoir voir toute la liste dans le prototype.

Étape 1 : Création de calques et configuration des composants.

Commençons par créer un calque d'une hauteur supérieure à notre écran. Marquez ce calque comme interactif et nommez-le list . Passez ensuite en mode code. Nous n'utiliserons pas la barre latérale gauche pratique cette fois. Configurons tout notre écran pour qu'il soit défilable :

 scroll = new ScrollComponent width: Screen.width height: Screen.height

Ce code crée une zone invisible avec la largeur et la hauteur de l'appareil actuel.

Étape 2 : Indiquez à Framer les calques que vous souhaitez faire défiler.

Rien n'est encore arrivé. Nous devons dire à Framer quelles couches doivent pouvoir défiler. Pour ce faire, nous ajoutons notre couche de liste au composant de défilement :

 list.parent = scroll.content

Étape 3 : verrouillage du défilement vertical.

On a le droit de scroller maintenant, mais ça se passe dans tous les sens. Nous devons verrouiller le défilement sur un axe vertical :

 scroll.scrollHorizontal = false 

Wow! Vous avez créé un défilement dans votre application avec seulement cinq lignes de code simple.

2. Le composant de la page : glisser d'un écran à l'autre

Une interaction très populaire pour basculer entre les écrans est le balayage. L'idée ici est très similaire au composant de défilement. Vous pouvez télécharger un prototype fonctionnel ici.

Étape 1 : Configuration du composant.

Tout d'abord, nous devons créer une « boîte » dans l'éditeur de code où la magie se produira :

 page = new PageComponent width: 315 height: Screen.height x: Align.center scrollVertical: false clip: false # the content outside the box won't be clipped

À ce stade, vous devriez être familiarisé avec tout le code ici. Il s'agit simplement d'une configuration simple du composant et de sa zone. Nous devons maintenant créer des calques à balayer.

Étape 2 : création de calques

Nous allons utiliser notre premier prototype et le modifier un peu. Au lieu d'une image de carte, cette fois j'ai importé deux images.

Dans un premier temps, nous devons rendre le plan de travail deux fois plus large. Dans le panneau des propriétés de la planche graphique, recherchez la largeur et multipliez-la par deux (ou ajoutez simplement *2 ). Placez les cartes les unes à côté des autres, activez-les avec le point bleu et nommez-les correctement : carte1 et carte2 .

Étape 3 : Ajout de calques au composant de page.

A la fin de notre code dans l'éditeur de code, il faut ajouter :

 card1.parent = page.content card2.parent = page.content

Cela signifie que nous ajoutons ces couches au composant.

Le composant de page est maintenant prêt à fonctionner !

Dernier mot

C'est tout, les gens ! J'espère que vous avez trouvé ce tutoriel Framer utile pour commencer votre voyage avec l'outil de prototypage le plus puissant du marché. En outre, vous devriez envisager de rejoindre le groupe Framer sur Facebook. Il y a une énorme communauté autour, et ils sont utiles lorsque vous débutez.

Si vous souhaitez aller encore plus loin dans Framer, essayez de lire la documentation de Framer.

• • •

Pour en savoir plus sur le blog Toptal Design :

• eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
• L'importance de la conception centrée sur l'humain dans la conception de produits
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
• Principes heuristiques pour les interfaces mobiles
• Conception anticipative : comment créer des expériences utilisateur magiques