Prototyper avec 💎 Sketch 49 🚀

LĂ©o Ches7nut Fuster
francetelevisions-design
5 min readMar 3, 2018

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@

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 👇👇

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 👇👇

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)👇👇

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 Ă  :

📣 Psssssssssst 📣

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

--

--