Premières impressions

L'équipe de Framer a récemment changé de cap avec l'annonce d'un nouvel outil de prototypage, Framer X. Lachezar Petkov a joué avec caractéristiques de cet article.

L'équipe de Framer a récemment publié un nouvel outil de prototypage, Framer X et j'ai eu la chance de pouvoir la tester pendant la phase bêta. Dans cet article, je souhaite partager mes réflexions sur ce nouvel outil et ses fonctionnalités. Je vais faire une comparaison avec l'application Framer «héritée» ainsi que d'autres outils, et je discuterai de ses nouvelles fonctionnalités telles que Stacks et Scroll et son nouveau Composants de code et Design .

Cet article est destiné aux concepteurs d'interface utilisateur et UX qui souhaitent en savoir plus sur les capacités de prototypage de Framer X. Comme il s’agit (à bien des égards) d’un tout nouveau produit, il n’est pas nécessaire de se familiariser avec l’ancienne application Framer . Cependant, un peu de familiarité avec HTML, CSS, React JavaScript et Node.js est bénéfique.

Pour les besoins de ce tutoriel, j'ai également créé un prototype. qui est une Matériel exploration de l'application de Khan Academy pour Android.

Note : Je ne suis en aucune façon affilié à Khan Académie; Je pensais simplement que cela ferait une bonne expérience – j'espère que vous serez d'accord.

Introduction à Framer X

Framer X va encore plus loin que son prédécesseur en tentant de combler Voici comment:

Chers concepteurs, rencontrez React

La principale différence entre les anciennes et les nouvelles applications à cet égard est l'introduction de React et JavaScript / TypeScript comme contrairement à l'utilisation de CoffeeScript pour la programmation de microinteractions et d'animations, le chargement de données, etc.

Pendant la phase bêta, les gens ont écrit des composants React qui, je pense, nous montrent le potentiel de mesure de l'outil. Par exemple, vous pouvez intégrer des lecteurs multimédias réels (qui diffusent et écoutent de la musique et des vidéos) dans vos prototypes. Ou, vous pouvez incorporer des graphiques avec des données boursières en temps réel. Ou que diriez-vous d'un composant qui peut traduire l'interface utilisateur de votre prototype dans d'autres langues. Et ce n'est pas tout: les choses ne font que commencer.

Le même code React écrit pour un prototype Framer X pourrait, du moins hypothétiquement, être utilisé dans un environnement de production après la phase de conception. Cela peut être particulièrement utile pour les équipes qui font beaucoup de développement Web dans React (et peut-être pour les équipes qui écrivent des applications mobiles dans React Native). Personnellement, je frémis à l'idée de un concepteur écrivant n'importe quel code qui entre en production, mais qui pourrait fonctionner pour d'autres.

«Framer X ressemble plus à Unity qu'à Photoshop. Un IDE pour la conception, si vous voulez. »

—La documentation de Framer X

L'interface de Framer X

Si vous êtes déjà un utilisateur de Framer, la première chose que vous remarquerez est que l'éditeur de code intégré est disparu. Au lieu de cela, si vous voulez écrire du code, vous pouvez utiliser un éditeur de votre choix. La plupart des gens (y compris moi-même) semblent aller avec VS Code .

La barre latérale comporte quatre onglets:

• Outils
  Ouvre tous les outils de mise en page et de dessin familiers (formes, chemin, texte, cadres ) ainsi que trois nouveaux jouets. Nous discuterons un peu plus tard: Stacks, Link et Scroll.
• Layers
  Contient, bien, les calques de l'image sélectionnée, ainsi que ses propriétés (couleur, position, bordure, ombre, etc.). Ce bit est essentiellement le même que dans l'ancien Framer, et très similaire à Sketch and Figma.

• Components
  Ceci est pour tous les composants Design ou Code que vous pouvez avoir dans le fichier que vous avez ouvert.
• Store
  Une nouvelle fonctionnalité de Framer X. Elle permet aux utilisateurs de publier leurs créations – que ce soit des icônes et des illustrations ou des composants de code interactifs à utiliser par des tiers. Actuellement, tous les composants sont gratuits, mais j'imagine que les gens pourront vendre leurs produits au magasin à l'avenir.

Les boutons Preview et Live Preview sont en haut à droite. Comme avec Legacy Framer, vous pouvez prévisualiser vos prototypes dans une image de périphérique pour plus de réalisme ou les prévisualiser directement sur un appareil réel ou dans un navigateur.

Lecture recommandée : Learning Framer By Création d'un prototype d'application mobile

Prototypage avec Framer X

Quelques réflexions sur le prototype que nous allons créer

L'application Android de la Khan Academy n'est pas une application de . explorons comment cela pourrait ressembler et se comporter si c'était. Je veux penser à cela comme si c’était un projet du monde réel, alors voici quelques considérations que nous verrons comment gérer dans Framer X:

1. Le but du produit est de fournir une éducation gratuite à tous, donc il doit pouvoir fonctionner sur des appareils anciens et bon marché. Qu'est-ce que cela signifie pour la conception du prototype est, il doit fonctionner sur 320dp écrans larges.
2. La conception doit bien s'adapter lorsque l'application est traduite dans une langue plus verbeuse que l'anglais.

La première chose que je vais faire est de simuler l'écran Home . Il y a quatre choses que je veux mettre en évidence:

• Une entrée de recherche;
• Quelque chose qui me montrera mon activité la plus récente;
• Quelque chose qui me montrera mes missions;
• un nouveau défi de maîtrise.

Commençons.

Installation de composants à partir du magasin

Les deux premiers éléments que je veux avoir ici sont la barre d'état Android et la barre de navigation. Au lieu de les dessiner moi-même, je vais rapidement installer un ensemble de composants du magasin appelé « Android Kit ». Il contient toutes sortes d'éléments (statiques, non programmés dans ce cas) tels que des boutons, des cartes, des commutateurs, des barres, des claviers, etc. J'ai obtenu ma barre d'état et ma barre de navigation en quelques secondes:

Remarque : Chaque composant est installé project.

L'outil de défilement interactif

Maintenant, si je faisais cela dans Sketch, je continuerais à moquer le reste des éléments sur la même planche graphique, et s'il ne peut pas contenir tous les éléments , Je le ferais plus grand. Dans Framer X, cependant, les choses fonctionnent un peu différemment. Je vais avoir le contenu de l'écran d'accueil dans un cadre séparé (écran / tableau) et lien pour qu'il défile sous les barres de navigation et d'état de l'écran d'accueil: 19659056] Utilisation de l'outil de défilement « />

Maintenant, lorsque je lance un aperçu, mon contenu est défilable:

Avec le travail sous-jacent, je suis prêt à augmenter un peu la fidélité. Tout d'abord, je veux que le style général de l'application soit doux et accueillant, alors je vais utiliser 4dp (points d'affichage) border-radius pour mes cartes et boutons, et les icônes .

Étant donné qu'il est extrêmement important d'avoir une entrée de recherche réelle pour cet écran, je ne veux pas que la barre d'applications Android et les icônes de recherche soient habituels. Je vais chercher une entrée avec un message CTA avec une icône de hamburger sur Google Maps.

Si je devais aller plus loin, je ferais de cette barre un composant de code et l'écrirais de manière à ce qu'il se déploie en largeur sur scroll, comme ceci:

Je ne ferai pas cela pour les besoins de cet article, mais je dois dire que quelque chose d'aussi simple serait plus facile à faire avec Framer hérité que Framer X, du moins dans cette première version.

Ajoutons une certaine interactivité de base à cette chose! Lorsque je clique sur l'entrée de recherche, je veux que le clavier sorte du bas. Lorsque j'appuie sur l'icône du menu, je souhaite toutefois retirer un tiroir de du côté gauche.

Alors que dans Framer, je devrais écrire un FlowComponent pour ce type de chose, c'est maintenant super facile avec Framer X et avec son nouvel outil Link! Il est similaire aux autres applications de prototypage dans lesquelles je sélectionne un élément d’interface utilisateur, le lie à un cadre et choisit le type de transition souhaité. J'ai importé le clavier du composant Android Kit et l'ai lié à partir de l'entrée de recherche. J'ai défini la transition vers Overlay et la direction vers bas .

Comme il y a trop d'éléments dans le tiroir de navigation pour tenir sur un écran, j'ai dû le diviser en deux cadres, tout comme l'écran Home : un conteneur avec une couche de défilement le contenu réel à l'intérieur Voici comment cela se présente:

Interaction avec le prototype

Neat! Il y a un problème avec cette approche, cependant, que l'équipe de Framer espère corriger. Lorsque la transition d'une image est réglée sur Superposition elle couvre et atténue tout en dessous. Ce n'est pas tout à fait ce que nous voulons lorsque nous faisons des prototypes pour Android: La barre de navigation et la barre d'état doivent être surtout autres éléments d'écran, y compris les superpositions.

Je ne veux pas de gradation d'écran si je veux avoir des options de filtrage et / ou une liste de requêtes récentes lorsque le clavier est retiré. Nous espérons voir quelques correctifs pour ces problèmes dans les futures versions de Framer X.

Épinglage, positionnement et réactivité

Retour à la page Accueil du prototype. En dessous de l'entrée de recherche, je veux une liste de mes activités récentes. Tout comme dans Framer et d'autres outils de conception, vous pouvez épingler des éléments dans des cadres afin qu'ils se déplacent et s'adaptent exactement comme vous le souhaitez. Framer X vous montre également les distances et les écarts entre les éléments, les capture ensemble pour vous, etc. Jetez un coup d'oeil:

Design Components

J'aimerais ajouter quelques éléments à l'écran d'accueil: A Invite Mastery Challenge un compteur de stries, une liste de missions, des signets et une interface utilisateur permettant à l'utilisateur d'explorer le contenu qu'il pourrait trouver cool ou utile.

Depuis les récentes missions et les signets vont être cartes avec un contenu très similaire, la meilleure solution que Framer X a pour moi est d'utiliser composants de conception . Je les ai déjà mentionnés ci-dessus (ensemble de composants du kit de matériaux). Les composants de conception de Framer X fonctionnent de manière similaire aux symboles de Sketch et aux composants de Figma.

Pour convertir un cadre en composant, appuyez simplement sur Cmd + K . Cela crée un maître à partir duquel vous pouvez créer autant d'instances que vous le souhaitez:

Tout ce que vous faites avec un composant Master affectera ses instances, mais tout ce que vous faites pour les instances n'affectera pas le maître. Vous pouvez aussi imbriquer des composants Master et aller aussi fou que vous le souhaitez.

Voici donc mes Missions récentes et Explorer sections:

Chaque section est une image, connectée à son propre composant de défilement et remplie avec des composants. Les chaînes de texte (ainsi que les images bitmap dans les instances) sont remplacées

Stacks

Et si je ne savais pas comment positionner et distribuer toutes ces cartes? Eh bien, la fonctionnalité Stacks de Framer X entre en jeu ici:

Je n'avais qu'à m'assurer que tous les éléments que je voulais dans une pile étaient organisés en images. Cela fonctionne étonnamment bien, et vous pouvez avoir des composants dans une pile, ainsi qu'une pile dans une autre pile, et ainsi de suite. C’est énorme pour quiconque se moque souvent des listes de prototypage! Ils sont assez bons pour faire beaucoup, mais restent un peu à la traîne derrière Sketch: il n’ya pas de dirigeants; vous ne pouvez pas convertir des traits en contours; vous ne pouvez pas aplatir les formes;

Composants de code

Création d’un composant de code simple

Enfin, examinons de plus près les composants du code. Encore une fois, ce sont des composants React réguliers (Stateless et Class) qui peuvent être écrits en JavaScript ou en TypeScript (jusqu'à vous). Vous pouvez également installer des bibliothèques tierces à utiliser dans vos composants dans Framer.

Essayons d’utiliser la bibliothèque styled-components . Cela nous permettra de styliser notre composant en utilisant la syntaxe CSS actuelle dans le fichier .tsx .

Tout d'abord, allez à l'onglet Components → Nouveau composant → du Code . Après avoir nommé votre composant et confirmé, votre éditeur de système par défaut (dans mon cas, le code VS) ouvrira un exemple de fichier de composant Framer X.

Passez maintenant à Fichier → ouvrir un terminal dans ce même dossier, installer yarn si vous ne l'avez pas déjà fait et ajouter composants de style à votre projet Framer:

 $> fils ajouter des composants stylés

La ​​bibliothèque et ses dépendances seront ajoutées à votre package.json et vous êtes prêt à partir.

Voici le source de mon bouton styled-components après J'ai remplacé le code par défaut dans le fichier .tsx de mon composant:

Notez que l'étiquette du bouton est personnalisable directement via l'interface Framer X (à cause de la fonctionnalité PropertyControls de la bibliothèque Framer). Avoir mon bouton écrit en code a évidemment de nombreux avantages. Il est personnalisable, réactif et interactif. En plus des rembourrages réactifs, il est très facile de tester si la conception se rompt dans d'autres langues.

Importer un composant de code depuis le magasin

Il y a beaucoup de contenu vidéo sur Khan Academy, donc pour mon prototype, je veux ouvrir un cours vidéo. Au lieu de simuler un lecteur vidéo «fictif», je peux directement intégrer un lecteur YouTube réel dans mon prototype. Il existe déjà un composant dans la boutique à cet effet:

comme tu veux. Pour l'instant, la seule façon de le faire est de cliquer dessus avec le bouton droit dans la barre latérale, de copier son code et de le coller dans un fichier de composants nouvellement créé.

Grand aperçu )

Le code remplace et la bibliothèque Framer

La bibliothèque JavaScript Framer a maintenant été portée pour fonctionner avec Framer X et React. Comme avec l'ancienne bibliothèque Framer, elle nous fournit des outils (fonctions d'aide) pour animer nos conceptions et écouter des événements (des choses simples comme onClick et onMove, mais aussi des événements avancés comme le pincement, si le périphérique a été pivoté ou une animation).

Les substitutions de code sont des bits de code (fonctions JS) qui vous permettent de modifier les propriétés d'une image ou d'un composant. Les modifications statiques, telles que la couleur, sont appliquées avant l'exécution de l'aperçu, directement dans l'application Framer, et les animations / interactions sont visibles dans la fenêtre d'aperçu ou sur votre périphérique de prévisualisation.

et des exemples par défaut. J'ai dessiné cette illustration simple de coupe de champion pour l'une des cartes prototypes et j'ai décidé de l'animer:

Pour ajouter un remplacement, je dois sélectionner mon cadre cible (dans ce cas l'illustration) et cliquer sur l'élément de menu Code dans la barre latérale droite. Maintenant, je dois sélectionner le remplacement que je souhaite dans Exampels (sélectionné par défaut dans le menu déroulant):

Rappelez-vous que les substitutions ne sont que des blocs de code et qu’elles peuvent donc être intégrées à n’importe quel fichier de votre projet. Ce que je viens de sélectionner, c'est le fichier Examples.tsx qui contient plusieurs fonctions pour Scale, Rotation, Fade, etc. Je peux créer mon propre fichier et écrire mes propres fonctions Override ou les inclure dans le code source de mes composants de code – aussi longtemps que je garde à l'esprit le spécificateur de type Override lorsque j'ai les exporter

Voici le code source de la substitution Scale que j'ai choisie:

 export const Echelle: Override = () => {
    revenir {
        échelle: data.scale,
        en fût() {
            data.scale.set (0.6)
            animate.spring (data.scale, 1)
        },
    }
}

En anglais clair: définissez la valeur d'échelle initiale du cadre sur 0,6, puis animez l'échelle sur 1 avec la courbe de ressort. Enfin, exportez-le avec le nom Scale et spécifiez qu'il s'agit d'un Override.

Une fois appliqué, voici le résultat:

Design Réactivité

Comme je l'ai mentionné au début, il est essentiel que ce prototype particulier fonctionne sur des écrans de petits appareils ( 320dp ). C'est très facile à tester dans Framer X (étant donné que vous avez épinglé correctement vos éléments d’interface utilisateur, comme décrit ci-dessus). Il suffit de définir le mode de prévisualisation sur Canvas – Responsive :

Framer X facilite le test de mes designs pour différents écrans.

Modes de jour et de nuit

Enfin, dans Framer, vous avez deux thèmes: Light, appelé mode «Day»: [19659144] Mode jour (lumière) Framer X « />

Et sombre, appelé mode «nuit»:

Vous pouvez changer les deux du menu Window .

Protoype: Résultat final

Voici toutes mes images liées entre elles:

Et voici le prototype en action:

Ce que j'aime de Framer X

L’application est rapide (bien que la version bêta ait un peu gêné les gros projets) et elle est bien conçue . C’est un nouvel outil, mais en même temps, il est familier. Cela me donne aussi le sentiment d'être un «IDE de conception» et je pense que l'équipe de Framer prend les choses dans une direction très intéressante.

Framer X rend les choses banales comme les écrans de liaison et le défilement être. Bien que j'espère voir encore plus de ce genre de choses à l'avenir: le prototypage est censé être un processus rapide et sale après tout. Passer trop d'heures sur un prototype, c'est passer à côté du prototypage.

Avoir un magasin de composants est une excellente idée et va certainement accélérer mon processus de conception. Je n'ai plus besoin de chercher les plugins dont j'ai besoin . J'imagine que d'ici quelques années, il y aura des milliers de composants avec à peu près tout ce dont j'ai besoin pour mettre ensemble quelque chose de relativement avancé, relativement rapidement. Il faudra peut-être toutefois faire preuve de modération à l’avenir. Je peux voir que les gens téléchargent trop de boutons simples, chacun représentant un fork de l'autre, simplement parce qu'ils le peuvent.

J'aime les systèmes de conception à travers les composants et les fonctionnalités de Private Store . Nous savons tous, beaucoup d'équipes ont du mal à collaborer de manière significative et des outils comme ceux-ci sont d'une aide immense.

Ce que je ne suis pas sûr de Framer X

L’expérience de l’outil original de Framer est quelque peu passée Les nouvelles fonctionnalités de X facilitent le prototypage rapide de toute fonctionnalité ou écran «standard»: vous avez tout ce dont vous avez besoin dans le magasin. Mais on peut dire qu'il est plus difficile d'explorer des idées folles et étranges pour des interactions personnalisées – du moins avec cette première version du produit.

Learning React sera plus intimidant pour beaucoup les concepteurs Pour moi, la réutilisation du code n’est pas une option, car aucun des projets sur lesquels je travaille n’est construit avec des technologies Web. Mais même si c'était une option, je pense à la programmation en termes d’outil pour exprimer mes idées de conception. Je ne suis pas un ingénieur utiliser mon code pour tout sauf un prototype n’est pas vraiment une idée géniale.

Ceci dit, il ya beaucoup plus de documentation sur JavaScript et React que sur CoffeeScript. Il y a aussi plus de gens à aider, et la communauté React semble plutôt accueillante . Je suis très curieux de voir comment Framer X aidera les concepteurs et les ingénieurs à collaborer davantage – voire pas du tout.

Framer X dans My Toolset

J'utiliserai certainement Framer X en production, mais il a complètement remplacé Sketch pour moi pour le moment. Dans mon organisation, chaque concepteur est autorisé à utiliser son outil préféré, pour autant qu’il soit intégré à Zeplin et Framer X ne le fait pas. Les pages, la quantité incroyable de plug-ins et les outils de dessin plus puissants font également défaut par rapport à Sketch (pour le moment).

Je continuerai à utiliser le Framer original pour les interactions personnalisées – du moins dans un avenir prévisible. Lors du prototypage, les choses doivent être faites rapidement et j'ai encore beaucoup à apprendre sur React.

(mb, ra, yk, il)