Étude de cas sur la migration de systèmes de conception

Depuis un an, chaque fois que je suis frustré par Sketch, un de mes collègues me suggère d’essayer Figma . Ensuite, lorsque j'ai écrit un article sur la construction de notre système de conception dans Sketch j'ai reçu de nombreuses réactions de personnes me disant d'essayer Figma. Et récemment, Linda notre responsable de la conception chez Help Scout, m'a demandé: «Hé Buzz, ne devrions-nous pas utiliser Figma?»

Je ne pouvais plus me battre… je devais seulement essayez Figma!

Ce n'est pas une lettre d'amour à Figma ni une critique sévère de Sketch. Au lieu de cela, c’est un récit édifiant pour tous ceux qui envisagent de déplacer des outils. C’est l’histoire de la façon dont tout a été réglé et des particularités de la migration d’un système de conception d’une plate-forme à une autre.

Comprendre le coût

La première chose à considérer est que le changement d’outil a un coût. – considération qui n'est généralement pas prise en compte dans la conversation chaque fois qu'il y a une pile #designtwitter . Seules des équipes composées d'une seule personne peuvent se permettre de modifier les outils de conception à leur guise.

La difficulté pour nous à Help Scout tient au fait que notre système de conception est construit sous la forme de bibliothèques Sketch Libraries multiples et interdépendantes gérées avec GitHub. Nous disposons également de plusieurs projets en cours, de processus et d'une vaste documentation qui dépendent tous de fichiers Sketch. Et n'oubliez pas l'effort monumental nécessaire à la formation et au déplacement d'une équipe entière vers un nouvel outil tout en effectuant un travail réel!

Il y a aussi un coût financier à prendre en compte si quelqu'un (dans ce cas, ce serait moi) prendrait le temps de travailler comme d'habitude pour rechercher et documenter tout ce qui était bon des trucs. Le fait est que si vous travaillez dans une équipe de conception établie, vous saurez que changer d’outils est aussi simple que de changer de bureau.

Mais c’est comme ça que ça fonctionne. Les outils sont «collants» simplement parce qu’ils sont difficiles à quitter. Autant dire que cela ne serait pas une décision que nous avons prise à la légère.

Kicking The Tires

Sachant que ma décision aurait un impact sur l’ensemble de l’équipe et de l’organisation, j’ai commencé par passer deux journées complètes. explorer Figma. J'ai regardé des vidéos, j'ai parlé à d'autres concepteurs qui l'utilisent souvent et j'ai beaucoup joué avec l'outil… J'ai essentiellement exploré à quel point il serait facile de déplacer nos composants Sketch. Une question qui m'est venue à l'esprit était de savoir s'il serait aussi simple que d'ouvrir un fichier .sketch dans Figma?

Sans surprise, no .

Il s'avère que Figma et Sketch – bien que similaire en termes de présentation et de fonctionnalité – présente des différences essentielles dans la manière dont ils permettent aux composants d'être remplacés. C'était le botteur. Figma permet à l'utilisateur de personnaliser la couleur, le type et les effets (ombres, etc.), tandis que Sketch n'autorise que les remplacements prédéterminés. En raison des limitations imposées par Sketch aux composants prioritaires, nous avions construit notre système de conception original autour de ce concept, permettant ainsi le contrôle des couleurs, des bordures et des styles à l'aide d'un système complexe de masques et de composants de bloc de construction.

Trop compliqué? Oui. Mais cela a très bien fonctionné pour nous.

Voici un simple symbole de carte dans Sketch composé de cinq symboles imbriqués nécessaires pour nous permettre d’atteindre le niveau de flexibilité requis. C’est exactement le genre de chose qui n’importe pas dans Figma.

Alors que cette complexité de Sketch nous permettait le niveau de flexibilité offert par Figma, cela signifiait que presque tous les composants importés de Sketch apportaient un niveau de complexité inutile. . Pour que nous puissions utiliser Figma, nous devions tout reconstruire pour éliminer chaque composant jusqu’à l’essentiel.

Moment décisionnel!

Compte tenu de ce qui précède, ma décision initiale était que bien que je pensais que Figma était le meilleur outil, la société plus forte et le pari plus sûr à long terme, il serait trop difficile et coûteux de changer. Reconstruire des bibliothèques entières est un gros travail! C’était comme rompre avant même de lui donner une chance.

«Ce n’est pas vous, c’est nous.»

Mais il se trouve que Figma sont les clients de de Help Scout . Après avoir entendu notre décision de rester fidèle à Sketch, notre responsable des ventes a contacté l’équipe produits Figma – ce qui ne change pas nécessairement l’esprit de chacun, mais qui consiste à partager nos expériences, plus comme des amis. Naturellement, ils ont été sympas à propos de tout cela, mais ils m'ont demandé s'ils pouvaient me parler de mes décisions. Et c'était une opportunité à ne pas manquer!

Dans les jours qui ont précédé ma conversation avec l'équipe de Figma, j'ai décidé de replonger dans l'outil – tout au moins pour me donner suffisamment de compréhension pour pouvoir parler avec confiance et ne pas ressembler à un amateur total devant des gens qui en savaient beaucoup plus que moi dans ce domaine. Au moment où j’ai parlé à l’équipe, j’étais convertie. En quelques jours supplémentaires, j’ai réalisé à quel point nous étions plus productifs et plus collaboratifs si nous disposions de ce type de fonctionnalités. Le coût du changement n’a pas changé, mais j’ai estimé si le coût en valait la peine . Aidez le responsable de la conception de Scout à faire un argument convaincant à cet égard également: si nous sentons que nous allons changer un jour, alors pourquoi pas aujourd'hui ?

La conversation avec Figma a donc été plus longue les lignes de «Donnez-moi un conseil sur la façon de faire ce travail», ce qu'ils ont gracieusement fait.

How To Switch

Il est donc possible que vous soyez au même endroit que moi; vous souhaitez déplacer des outils, mais vous êtes confrontés à la tâche monumentale de reconstruire des centaines de composants, de styles et une charge de documentation. Eh bien, mon ami, vous allez devoir adopter une approche délibérée et systématique à cet égard. Votre kilométrage peut varier, mais c'est ainsi que j'ai déplacé l'ensemble du système de conception de Help Scout à Figma en une semaine à peine.

1. Scindez vos bibliothèques
2. Adoptez des styles étoffés (+ documentation)
3. Expliquez comment les composants se développent
4. S'organiser correctement
5. Importer ou reconstruire
6. Amenez votre équipe à bord
7. Go All In

1. Fractionner vos bibliothèques

Ceci s'applique également à la création de bibliothèques Sketch, mais je suggère fortement de fractionner les systèmes de conception en sous-bibliothèques distinctes couvrant différentes parties de votre écosystème. Dans notre cas, nous avons Core qui contient des composants applicables à tout concepteur (éléments de marque, illustrations, icônes, etc.), puis des documents spécifiques à un domaine. Cette approche facilite la migration un peu plus facilement lorsque vous déplacez des éléments organisés en morceaux.

Dans notre cas, migrer vers Figma impliquait de commencer par les éléments centraux – qui ont ensuite été utilisés pour construire les bibliothèques suivantes.

2. Penchez-vous dans les styles (+ Documentation)

Figma propose des “styles” similaires à ceux que vous avez l'habitude de voir les styles de type travaillant dans Sketch, mais avec l'avantage supplémentaire qu'ils s'appliquent également à couleur et effets. Dans cet esprit, il est vraiment utile de définir toutes vos couleurs et les éléments partagés dans une seule bibliothèque, puis de les documenter.

3. Montrer comment étendre les composants

Comme Figma permet un contrôle beaucoup plus étendu sur l’extension des composants, vous obtiendrez probablement moins de composants que dans Sketch – au lieu de “ bouton couleur unie ” et “ Le bouton décrit "à Figma, vous aurez simplement besoin du bouton" ". À cause de cela, j'ai découvert qu'il était important de documenter les différentes manières dont un composant peut être étendu directement dans la bibliothèque elle-même.

Par exemple, un seul composant est requis pour recréer une conversation de conversation à double face dans Figma. . Mais un nouveau concepteur ne saura jamais ce qu’il convient d’appliquer, il est donc important de démontrer visuellement chaque fois que cela est possible. Voici le même composant utilisé de six manières différentes:

4. Organize Properly

J’ai rapidement abandonné l’essai de reproduire la structure de nommage que j’avais dans les fichiers Sketch d’origine en raison de différences subtiles dans le fonctionnement du système de fichiers de Figma. En fin de compte, l’objectif est de s’assurer que les composants se trouvent dans un endroit logique et facile à trouver, et le meilleur moyen pour y parvenir était d’organiser soigneusement mes Pages par catégorie (par exemple, Formulaires ), Images par classification de groupe (par exemple, Entrées ) et Composants par élément individuel (par exemple, Erreur ). La spécificité de la dénomination rend les composants extrêmement faciles à trouver, en particulier par les personnes qui ne les ont pas initialement créés.

5. Importation contre reconstruction

Ouf, j'aimerais avoir de bonnes nouvelles à propos de l'acte physique d'importer des composants Sketch (pour beaucoup de choses, à savoir des éléments individuels tels que des icônes que vous pouvez importer de Sketch et que tout fonctionne out super). Toutefois, pour les composants plus complexes (notamment ceux qui impliquent des masques et des symboles imbriqués), il est préférable de recréer les composants à partir de zéro . Oui, c'est extrêmement pénible, mais en contrepartie, vous utiliserez très bien Figma en très peu de temps!

Mon flux de travail dans Figma pour recréer les composants plus complexes de Sketch devait littéralement être capturé, puis «tracé». eux à Figma. Aussi ridicule que cela puisse paraître, il s'est avéré beaucoup plus rapide que d'importer à partir de Sketch et de supprimer les éléments inutiles. Et j’ai un peu honte de dire que j’aime ce type de travail, mais s’avère également que ce flux de travail était plus efficace.

(Mais bien sûr, si vous migrez des composants plus simples comme des icônes, Figma Les capacités d’importation vous serviront à merveille.)

6. Obtenez votre équipe à bord

En tant qu'équipe 100% distante la plupart des choses que nous faisons chez Help Scout sont bien communiquées – ce n'était pas différent. Ainsi, bien que l'équipe soit consciente du changement imminent d'outil, ce n'est que lorsque j'ai terminé le système de conception qu'elle a reçu le coup de pouce.

À ce stade, j'ai donné une vidéo de démonstration de 20 minutes expliquant Figma, quelques bases sur: comment l'utiliser et certaines des améliorations intéressantes apportées à leur flux de travail lors de l'utilisation de composants. Cela s'est avéré être un succès et a certainement adouci le choc pour les personnes qui étaient peut-être un peu hésitantes au sujet du déménagement.

7. Go All In

Une partie de mes recherches initiales visait à déterminer si nous pouvions maintenir notre système de conception simultanément dans Sketch et Figma. Je suis certain que cela peut être fait, mais c’est un peu exagéré pour nous étant donné la taille relativement petite de notre équipe et le fait que nous n’avons aucune personne ou équipe dédiée à l’entretien de nos bibliothèques. Mais au lieu de garder ce que nous avions en place, j’ai décidé d’aller completement sur Figma.

Cela signifiait créer et mettre à jour toute la documentation et intégrer les employés afin de faire référence aux nouveaux éléments qui m’obligeaient à traiter de la migration de vieux trucs – y compris les processus de développement existants et le transfert du concepteur. En fin de compte, tracer une ligne dans le sable signifiait que nous étions tous résolus à en faire un succès.

Bien entendu, les bibliothèques Sketch existent toujours; ils ne sont plus documentés ni mis à jour. Et en termes de migration, les projets en vol continuent à utiliser les fichiers Sketch (bien que certains concepteurs aient choisi de migrer leur travail vers Figma), alors que les nouveaux projets utilisent Figma.

Conclusion: élaborez un plan!

Il est difficile de conclure un article comme celui-ci sans donner l’impression que j’ai toutes les réponses – ce que je n’ai certainement pas. Mais mon conseil à ceux qui changent d’outils est de prendre le temps . Mettez en place la recherche, établissez un plan d’attaque, déterminez le coût, puis pesez-vous si vous êtes prêt à le payer – qu’il s’agisse de passer à Figma, Sketch, InVision Studio, Adobe XD, Framer X ou autre. Un nouvel outil à la mode dont je n’ai pas encore entendu parler.

Pour nous, le temps nous le dira, mais je suis toujours convaincu que nous avons fait le bon choix!

Pour en savoir plus sur le livre

(mb, yk, il)