La bataille Principle / Flinto
Teddy Loiseau 24 janvier 2019

Pour créer des prototypes interactifs avancés, les solutions proposées aux concepteurs UX/UI ne manquent pas. Nous nous intéressons aujourd’hui à deux outils simples à utiliser pour la création de prototypes interactifs avancés. La grande différence avec les solutions passées est qu’elles ne comptent pas sur le Web pour créer ou utiliser un prototype. Ils fournissent chacun une application Mac native pour la création d’interactions. Avec cette approche, les animations, les transitions et les interactions sont ainsi beaucoup plus riches.

Les deux outils sont encore très jeunes, cependant, ils ont déjà réussi à transformer notre façon de concevoir des prototypes. 


Flinto pour Mac

Flinto est un outil du prototypage axé sur la qualité et la quantité. Il fournit les outils nécessaires pour créer rapidement des animations basées sur la transition et la gestion d’écran afin de gérer un grand nombre d’écrans d’application. Les outils d’importation et les balises de transition aident les concepteurs à garder les éléments de dénomination et d’animation cohérents sur tous les écrans.


Concepteur de transition

Le concepteur de transition permet de personnaliser les animations entre deux écrans en fonction de l’emplacement du deuxième écran avec des effets temporels appliqués à la transition. Ainsi, nous pouvons créer et masquer des écrans, les redimensionner, et appliquer des effets de courbe et de ressort. Le résultat final est toujours l’état du deuxième écran. Cette fonctionnalité est intuitive, permettant de mémoriser des animations sur des objets et d’appliquer les mêmes animations sur des objets similaires sur d’autres écrans. Nous pouvons également ralentir l’animation pour mieux voir quels ajustements doivent être effectués. De même, il est possible de saisir des valeurs spécifiques pour les effets de courbe et de ressort et appliquer plusieurs animations à un seul objet.


Import

À l’aide d’un plugin, Flinto permet d’importer tous les écrans de Sketch en tant qu’objet individuel et conserve les noms. Flinto importe automatiquement tous vos calques et toutes vos planches.


Avantages

  • Importez vos fichiers sketch via le plugin Flinto
  • Transformations 3D
  • Les balises de transition permettent de réutiliser les animations sur plusieurs écrans
  • Aperçu du bureau avec une option plein écran
  • Aperçus en direct dans l’application Flinto
  • Exporter vos animations sous forme vidéo (.mov)
  • Gestes intégrés : toucher, toucher deux fois, appuyer longuement, balayer, toucher


Inconvénients

  • Les groupes de défilement nécessitent beaucoup de configuration pour une tâche qui devrait être relativement facile
  • Aucune importation Photoshop
  • Il faut télécharger l’application gratuite Flinto pour ouvrir des documents Flinto sur des appareils


Quand utiliser Flinto

Utilisez Flinto pour  prototyper une application complète, avec de nombreux écrans et transitions de base. Consultez les tutoriels disponibles sur leur site pour plus d’idées.

www.flinto.com/mac 99 $


Principle

Principle a été conçu par un ancien ingénieur d’Apple. Il permet de concevoir des animations courtes et des interactions fluides, il offre un contrôle chronologique des éléments individuels entre les écrans, permettant ainsi une gestion plus fine de la transition. Principle est une application très intuitive, facile à comprendre et grâce à laquelle vous pouvez voir le résultat immédiatement.


Animer

La vue Animate en bas de la fenêtre est utilisée afin de faire les transitions entre les plans de travail (toucher, défilement, etc.). Ainsi, cela permet d’animer les éléments du même nom entre deux plans de travail distincts. Nous pouvons donc définir et modifier la durée et le délai des éléments connectés au cours de leur transition.


Drivers

La vue Drivers nous donne encore plus de contrôle dans la mesure où elle nous permet d’animer des éléments à l’écran en fonction d’une action ou de la modification d’une propriété. Par exemple, si un élément est déplacé sur l’écran, nous pouvons également en animer un autre.


Avantages

  • Fenêtre d’aperçu intégrée
  • Application Principle Mirror utilisée pour prévisualiser les fichiers Principle
  • Vous pouvez exporter votre animation au format vidéo (.mov) ou .gif (avec les paramètres de Dribbble, awww).
  • Facilité de prise en mains pour les concepteurs non habitués aux outils d’animation traditionnels


Inconvénients

  • Pas d’importation Photoshop
  • Pas de transformations 3D
  • Principle Mirror est nécessaire pour ouvrir les documents Principle sur les appareils
  • Vous devez faire très attention à la dénomination des couches
  • Aucune exportation de valeur d’animation, rendant difficile le partage des spécifications avec les développeurs

  • Quand utiliser Principle

    Globalement, Principle est très simple à utiliser et permet de montrer rapidement les interactions complexes à expliquer verbalement. Il peut réellement débloquer des situations difficiles, comme la validation de micro-interactions ou d’enchaînement d’écrans.

    Principle propose également des tutoriels .

    principleformac.com 99 $

    Teddy Loiseau
    Teddy Loiseau

    Diplômé des beaux Beaux-Arts, Teddy a été directeur artistique au sein de plusieurs agences de communication. Il apporte aujourd’hui son expertise, sa vision créative et artistique dans les projets impliquant l’identité visuelle, l’image de marque, la conception, l’interface utilisateur, les sites Web ou les applications mobiles.

    2 Commentaires

    1. Bonjour,
      Merci pour ce décryptage, je viens de tomber sur votre article en faisant une recherche sur ces deux outils !
      Je trouve que leurs avantages et inconvénients sont finalement assez similaires. Du coup je me pose la question : comment peut-on choisir entre l’un ou l’autre ? Quel est votre avis sur la question ?
      D’avance merci pour votre réponse

      1. Bonjour Agathe,
        Merci pour votre lecture.
        Le choix de Principle ou de Flinto dépend de vos besoins et de l’usage que l’on en fait. Pour des transitions rapides qui ne demandent pas de travail précis sur des réglages de temps, Flinto est adapté. Mais pour un travail sur l’apparition d’éléments avec une gestion dans le temps, Principle propose une timeline qui permet de régler avec précision l’animation. Globalement, Flinto est adapté pour un prototypage rapide tandis que Principle permet des animations plus léchées et plus complexes.
        Nous espérons avoir pu répondre à votre interrogation.
        A très bientôt

    Votre commentaire

    Your email address will not be published. Required fields are marked *