Un an avec Figma

Cet article expliquera comment les grandes équipes peuvent tirer parti d’un outil plus ouvert et plus collaboratif et comment rendre l’adoption et la migration réalisables et agréables. De plus, au cas où vous ne deviez pas encore deviner le titre de l'article, il s'agira en grande partie de Figma et de la manière dont nous avons réussi à adopter cet outil de conception dans notre équipe.

Le public cible est constitué de designers expérimentés travaillant dans Des équipes plus importantes avec des systèmes de conception, des développeurs ou des chefs de produits cherchant à améliorer le fonctionnement des équipes interfonctionnelles dans leur organisation.

J'utilise des outils de conception dans un environnement professionnel depuis plus de dix ans et j'essaie toujours de créer des équipes I 'servir le travail plus efficacement et plus efficacement. Des scripts aux actions dans Photoshop, en passant par les bibliothèques de widgets dans Axure, les plugins Sketch et, maintenant, avec Figma, j'ai aidé les équipes de conception à rester à la pointe du progrès sans laisser de développeurs ou de chefs de produits.

Une connaissance de base des systèmes et des outils de conception sera utile, mais pas nécessaire comme je l’espère. partagez des exemples spécifiques ainsi que des concepts et des méthodes «de haut niveau» que vous pouvez adapter à votre équipe ou à votre contexte.

Notre flux de travail de conception circa 2015

Notre principal outil en 2015 était Sketch . beaucoup où les points communs se sont arrêtés. Nous avions tous différentes méthodes de prototypage, d'exportation et de partage de conceptions avec des parties prenantes (InVision, Axure, Marvel, Google Slides et même le fichier Adobe PDF obsolète) et des développeurs (Avocode, Zeplin, plugins sans applications autonomes telles que Measure). En de rares occasions, nous pouvions envoyer des fichiers directement aux ingénieurs qui avaient la chance de posséder la combinaison rare d'un MacBook et d'une licence Sketch.

Lorsque InVision a publié le plug-in Craft nous étions ravis – d'être Capable de prototyper et de télécharger des écrans de Sketch dans InVision, en partageant des composants et des styles dans des bibliothèques naissantes – tel était le rêve du concepteur.

Finalement, nous avons tous convergé vers la plate-forme InVision. Nous avons créé et documenté les processus qui ont permis de réduire les frictions liées à la collaboration des parties prenantes et au transfert des développeurs. Cependant, en raison de la structure complexe des autorisations, InVision restait un écosystème fermé. Si vous n'étiez pas un concepteur, il existait une chaîne d'approbation qui rendait difficile l'obtention d'un compte InVision. Une fois que vous avez un compte, vous devez être ajouté.

La gestion manuelle des versions et des fichiers, leur stockage et leur organisation sur un lecteur partagé, ainsi que la gestion des conflits de synchronisation n'étaient que quelques-uns des problèmes qui nous causaient de nombreux maux de tête.

Pourrions-nous vraiment avoir un outil tout-en-un qui présente toutes les meilleures fonctionnalités de Sketch et InVision, avec les fonctionnalités de collaboration et de communication en temps réel de Google Docs? En plus de réduire les frais généraux liés au changement de contexte, nous pourrions aussi potentiellement simplifier l’utilisation de trois abonnements aux outils (pour les maquettes, le prototypage et le transfert des développeurs) à un seul.

The Process

Les premiers concepteurs de notre équipe à adopter Figma a commencé à expérimenter avec la première version bêta de Figma en 2016. Les fonctionnalités étaient limitées mais couvraient 80% des besoins. L'importation d'esquisses était complexe, mais nous avons toujours trouvé un intérêt immense à pouvoir collaborer en temps réel et, plus important encore, nous pouvions effectuer 90% du travail de conception d'un projet dans un seul outil. Les commentaires des parties prenantes, les révisions et le transfert des développeurs se sont améliorés de façon exponentielle.

En 2017, quelques concepteurs l'utilisaient pour la plupart de leurs travaux, et l'un des concepteurs Lexicon ( du système de conception de Liferay ), Emiliano Cicero devint rapidement un évangéliste – ce qui s'avéra être un facteur clé pour convaincre le reste de l'équipe de faire le changement.

Lorsque Figma 2.0 fit ses débuts à l'été 2017 avec des fonctionnalités de prototypage ajoutées et améliorations considérables apportées aux capacités de transfert des développeurs, nous savions que cela pourrait constituer un outil viable pour notre équipe mondiale. Mais comment convaincre plus de 20 designers d'abandonner les outils et les workflows qu'ils aiment et qu'ils utilisent confortablement depuis des années?

Je pourrais écrire une série sur ce sujet, mais je vais résumer en disant que les deux choses les plus importantes sont: début petit et création d'une infrastructure solide .

petit départ

À l'automne 2017, nous avons lancé notre premier essai de Figma avec une équipe de produits répartie entre les États-Unis et le Brésil. . Nous avons eu la chance d'avoir une semaine de lancement ensemble dans notre bureau de Los Angeles. Concevoir des flux et des structures filaires ensemble à Figma était tellement plus rapide et plus efficace. Nous avons pu répartir les tâches et partager des fichiers et des composants sans avoir à vous soucier de la synchronisation constante d'un dossier ou d'une bibliothèque.

Lors de notre réunion mondiale de janvier 2018, nous avons élaboré un plan pour adopter lentement Figma. , en utilisant les expériences de cette équipe pour créer l'infrastructure dont nous aurions besoin pour le reste de l'organisation, de sorte que la migration se fasse de manière aussi transparente que possible.

Le plus grand défi auquel nous avons été confrontés était un délai serré – cela n'avait aucun sens. pour que nous puissions retravailler notre processus d’examen et de transfert en raison de l’ampleur du projet avec de multiples équipes techniques et chefs de produits répartis dans le monde entier. Même si le résultat final aurait été meilleur, le timing n’était pas bon. Un autre facteur était le manque d'expérience fiable de la conception hors ligne de Figma (1945), et pour ces raisons, l'équipe décida d'utiliser Sketch et Figma pour les structures filaires et les maquettes, mais tout prototypage ou examen devait être effectué. done in InVision.

Création d'une structure solide en Figma

L'un des la première étape consistait à formuler des directives générales pour l'organisation du projet, des fichiers et des composants. La base de ces choses a été créée par deux jeunes concepteurs (à l'époque), Abel Hancock et Naoki Hisamoto qui n'ont jamais développé les mauvaises habitudes de nommage des couches qui semblent provenir de designers qui a coupé les dents dans Photoshop. Cette méthode d'organisation, associée à une année passée à développer une petite bibliothèque de composants pour les propriétés Liferay.com, était essentielle pour assurer le succès du reste de l'équipe mondiale.

Une première amélioration organisationnelle créée par l'un de nos membres Liferay. Les designers de com, inspirés par le Benoît était notre système de couvertures .

Nous avons mis ce fichier à disposition si vous souhaitez le copier, sinon c'est un hack assez simple:

1. Créez un seul cadre en la première page de votre fichier correspond à 620 × 320.
2. Ajoutez votre design. Si vous avez du texte, nous avons constaté que la taille minimale est ~ 24, les titres de nos exemples sont définis à 48.
3. Enjoy!

Remarque: Il y aura toujours une légère marge autour de votre couverture, mais si vous définissez la page de la même couleur que la carte, cela réduira l'apparence de cette marge.

Cela a contribué à transformer notre bibliothèque, non seulement pour les concepteurs, mais également pour les chefs de projet et ingénieurs et les ingénieurs qui tentent de le faire. pour trouver des choses rapidement. La fonctionnalité de recherche était déjà très efficace, mais les couvertures aidaient les utilisateurs à réduire encore le temps de traitement, et nous permettaient également de communiquer instantanément le statut d'un fichier donné.

Avant d’utiliser Figma, en plus du fichier de dessin «Master» Sketch, la plupart des concepteurs disposaient de fichiers de base qu’ils avaient développés au fil du temps, notamment en mode filaire éléments et composants de base. Comme nous avons fusionné dans un seul motif, nous avons commencé à tout combiner et à les raffiner dans une seule bibliothèque. Comme nous réalisions des structures filaires, des maquettes et des prototypes à Figma, nous avons également commencé à abandonner des applications de flux telles que Lucidchart au lieu de créer nos propres composants de flux de tâches dans Figma.

. étaient des composants redline pour la création de spécifications de transfert précises, des notes collantes pour des diagrammes d'affinité (et à peu près n'importe quoi) et des nœuds de flux.

L'un des plus grands avantages de le faire à Figma est que les améliorations apportées à n'importe lequel de ces composants, réalisées par n'importe quel concepteur, peuvent être facilement insérées dans la bibliothèque puis déplacées vers tous les cas. . Avoir cela dans un endroit centralisé facilite également beaucoup la maintenance, car tout membre de l'équipe peut contribuer à des améliorations avec un processus relativement simple.

Un document redline est destiné à ce qui facilite la tâche du développeur pour connaître les dimensions, les spécifications visuelles et les autres propriétés d’un composant de l’interface utilisateur ou d’un ensemble de composants. Si le sujet vous intéresse, vous pouvez également consulter l'article de Dmitriy Fabrikant sur les plans de conception .

Quelques recommandations à garder à l'esprit lors de la création de composants:

1. Utilisation des dépassements maîtres pour composants de base puissants ( plus ici );
2. Établir un modèle cohérent pour nommer (nous utilisons le modèle atomique );
3. Documentez et étiquetez tout – en particulier couches.

Avec les fonctions de style avancées publiées au début du mois de juin 2017, l’équipe des systèmes a achevé la mise au point d’une version complète de notre bibliothèque Lexicon entre les grandes versions de produit en juillet et la montée en puissance en août. C’était la dernière pièce dont nous avions besoin pour soutenir l’équipe mondiale. Les concepteurs travaillant dans le marketing et d'autres départements utilisaient déjà Figma depuis un certain temps, mais à l'automne dernier, la quasi-totalité des autres équipes de produits avaient finalisé le transfert vers Figma.

À ce jour, la plupart des concepteurs de produits n'utilisent que Figma, il y a également quelques concepteurs qui travaillent dans des systèmes hérités avec beaucoup de prototypes Sketch complexes et compliqués qui ne valent pas la peine d'être importés par Figma. Une autre exception est quelques concepteurs qui utilisent occasionnellement des applications comme Principle ou Adobe After Effects pour une animation plus avancée qui n’aurait aucun sens à faire dans Figma. Nous avons même quelques concepteurs qui explorent Framer X pour des prototypes encore plus robustes, notamment avec des travaux qui nécessitent de tirer parti de tout type de données à grande échelle. Bien que certains concepteurs utilisent plusieurs outils de manière semi-régulière, 80% de nos concepteurs de produits utilisent Figma pour tous leurs travaux de conception et de prototypage.

Améliorations continues

Nous travaillons constamment à des méthodes de travail. plus efficacement, et l’une des choses que nous itérons actuellement est les meilleures pratiques pour nommer les pages. Au début, nous avons nommé les pages en fonction du nom de la page, mais cela a posé problème. De plus, à mesure que nous améliorions nos bibliothèques, nous avions moins besoin de fichiers plus volumineux comportant plusieurs pages.

Nous utilisons actuellement un système de numérotation dans les fichiers. , la page la plus haute étant celle livrée aux développeurs. La phase suivante dont nous discutons aujourd'hui consiste à rendre les versions plus significatives avec des libellés explicites (structures filaires, maquettes, points d'arrêt, etc.) et à mieux utiliser la gestion des versions intégrée de Figma, en établissant les meilleures pratiques pour sauvegarder quand et comment les versions. 19659059] Deux captures d'écran illustrant différentes façons de nommer les pages Figma « />

Final_Final_Last_2 – No More!

Généralement, je n'aime pas utiliser le terme 'changeur de jeu', mais lorsque Figma a publié l'attribution de nom / annotation à l'historique des versions en mars dernier, elle a été dramatique changé la façon dont nous avons organisé nos fichiers. Auparavant, nous utilisions tous différents moyens pour enregistrer des versions et des versions.

Généralement, nous créions de nouvelles pages dans un seul fichier, parfois avec des fichiers volumineux, nous les dupliquions et ajoutions une lettre à la fin du nom de fichier pour signaler une itération. Si vous souhaitez effectuer des modifications drastiques, vous pouvez créer un nouveau fichier et ajouter un numéro de version. C’était très naturel, et découlait du paradigme Photoshop / Sketch de la gestion de plusieurs fichiers pour tout.