Prototyper avec 💎 Sketch 49 🚀

L’une des fonctionnalités les plus attendues de la part de sketch est enfin arrivée : le prototypage

YEAAAAHHHHHHHH !!!!!!

Dans un contexte ou Invision Studio cherche à rebattre les cartes, Sketch réagit et propose une fonctionnalité de prototypage rapide intégrée. Dans les grandes lignes on retrouve des animations basiques, de page à page, comme chez invision, atomic, marvel app…

En guise d’introduction pour les plus impatients d’entre nous, voici la petite vidéo d’introduction qui a été partagé sur leur homepage (sinon je développe tout plus bas) :

Allons droit au but et présentons les nouveaux icons & raccourcis des outils de prototypage !

(pour cela, il faut bien évidemment être à jour et avoir Sketch 49 !)

1. press W … 2. press H … 3. CTRL + F … 4. CMD + P

Le but de créer un prototype est de faire une mise en situation d’une interface, de manière interactive grâce à des liens entre les éléments et les pages, c’est l’instant où le design prend vie pour la première fois. Cela permet aussi de pouvoir le partager avec d’autres collaborateurs, faire des tests utilisateurs…

Pour expliquer cela, des images valent mieux que des mots :

1. Sélectionnez vos symbols, groupes, items ou zones et liez-les à d’autres artboards

ajout de liens d’un symbol vers un artboard, puis d’une zone vers l’artboard précédent

2. Une fois que vous avez lié un élément à l’autre (ou plusieurs), vous pouvez gérer des options d’animations simples pour bénéficier de transitions fluides d’un état à l’autre.

3. Maintenant vous pouvez utiliser le “preview” (ou prévisualisation). Ce qui permet de tester en direct le prototype, et vos écrans animés ! Bref, à vous les tests utilisateur et les présentations qui présentent un minimum de réalité !

prévisualiser nos actions (sur mac comme sur tous les devices)

Petite réassurance : Mirror existe toujours

Pour ceux qui se sont demandé où était passé l’option mirror de sketch, ne vous inquiétez pas, elle est seulement intégrée dans les notifications et bien évidemment elle a été fusionnée avec le prototypage (on y retrouve les interactions qui ont été appliquées sur les maquettes).

Pour retrouver la fonctionnalité (maintenant “cachée”) , connectez vous à l’application mirror sur iPhone ou iPad, puis connectez votre appareil sur le même Wi-Fi que votre mac, ou via USB et retrouvez une notification directement dans le coin supérieur de l’application Sketch sur le mac :

x@

Le descriptif en anglais est disponible ici 👇👇

Sketch Mirror

Une autre des fonctionnalités attendues est celle du CLOUD et de ses librairies partagées

Aujourd’hui, comme expliqué dans ces article-ci, chez France Télévisions, nous tenons à jour et partageons nos librairies/maquettes via dropbox 👇👇

Dropbox : 5 tips pour bien l’utiliser

Best practices pour utiliser Sketch sans ruiner le travail de librairie

Mais Sketch nous introduit dans sa mise à jour 49 son propre cloud

qui permet maintenant d’uploader/partager des librairies ou maquettes. Si partagées elles sont donc accessibles partout depuis le web ici 👇👇

Sketch Cloud

Et pour l’occasion, 💎 le diamant orange a d’ailleurs étroitement travaillé avec la firme Apple afin de construire une librairie UI partagée officielle iOS 11 🍎 directement accessible depuis Sketch en tant que librairie partagée :

With Shared Libraries, you can now download, and subscribe to, Libraries that have been uploaded to Sketch Cloud and, because all of this is built on open web technologies, these Libraries can be stored and accessed from anywhere on the web. We’re excited to say that we’ve taken advantage of this feature and teamed up with Apple to build their official iOS 11 UI kit right into Sketch, as a Shared Library.

Vous trouverez plus de détail à ce propos ici (en anglais)👇👇

Documentation

Enfin, pour conclure sur cette mise à jour, voici un récapitulatif des avantages (pas nécessairement abordés) de cette mise à jour et de ce que l’on attend encore avec impatience !

Les ++ 🙌

• On peut enfin interagir et avec nos maquettes directement dans sketch
• Les previews sur device sont interactives, comme sur le desktop.
• Le cloud permet de réfléchir à une alternative gratuite à dropbox
• Une meilleure visibilité sur les overrides
• Un outil vectoriel relativement amélioré
• Des fixs de bugs listés en anglais ici : https://www.sketchapp.com/updates/
• On est toujours heureux de lire des phrases telles que :

We’re already working on Sketch 50 and we’ll tell you all about it soon.

Les attentes 🚀

• Plus de complexité au niveau des options d’interactions du proto: plus de diversité, gérer en “ms”, ease-in/out etc.
• Pouvoir prototyper sur IPTV : Chez France Télévisions, confrontés à des besoins de plateforme, c’est une attente importante.
• Une meilleure visibilité sur l’espace de stockage du cloud et de ses limites.
• Être toujours émerveillé de voir un outil qui répond aux attentes des utilisateurs !

Merci d’avoir pris le temps de lire , et n’oubliez pas :

• de clapper 50 fois 👏 cet article pour nous encourager à continuer.
• de vous abonner à :

francetelevisions-design

📣 Psssssssssst 📣

Pour télécharger Sketch et tester toutes ses features, c’est par ici 👇👇

The digital design toolkit