Comment nous avons construit tous les processus de développement et de mise en œuvre de la conception autour d'un seul outil.
Salut Je suis Vanya Solovyov , directrice du design chez DocDoc (qui fait partie du groupe Sberbank). Aujourd'hui est la colonne Tim-Tim, dans laquelle je vais décrire comment nous nous entendons avec les autres équipes.
En 2017, nos interfaces ont été créées dans Sketch , des prototypes ont été assemblés dans Marvel et le développement a été passé par Zeplin . Tout était standard pour l'époque jusqu'à l'apparition de Figma .
Cet article ne concerne pas la comparaison d'outils, de tels articles ont déjà été écrits en abondance. Elle explique comment, dans notre entreprise, Figma a aidé:
- concevoir pour devenir public, et non pas le privilège d'un designer;
- organiser l'ensemble du processus de conception sans documentation inutile;
- Débarrassez-vous des outils et des ressources inutiles pour les soutenir.
Pour le designer
Le concepteur ne stocke plus les dispositions localement, sous forme de fichiers. Il n'échange pas de captures d'écran des interfaces avec le gestionnaire et n'envoie pas les mises en page nécessaires à d'autres concepteurs. La mise en page a un lien et est disponible pour tous les participants au processus.
Création d'une maquette → assemblage d'un prototype interactif → remise au développement - et tout cela par un seul lien.
Le processus de création du design a cessé d'aller «au-delà des sept sceaux», il est devenu public. Un cas courant dans notre travail: le designer crée une interface, un autre participant à la tâche entre dans la mise en page et laisse ses conseils sous forme de commentaire.
Dans Figma, il est pratique non seulement de maintenir vos mises en page, d'utiliser un système de conception commun, mais également d'interagir avec les développeurs, les testeurs et les gestionnaires. Lorsqu'une équipe produit voit une fonctionnalité, il est très important de ne pas produire de versions inutiles et d'états de mise en page afin de ne pas ralentir toute l'équipe. Andrey Goranov, designer.
Pour manager
Nous avons sept chefs de produit et chacun est un leader dans son domaine. Pour leur commodité, nous avons organisé les dossiers de manière à ce que chacun ait son propre projet à Figma : rendez-vous avec un médecin, diagnostic, télémédecine, etc. Un lien leur suffit pour que tous les développements de leurs tâches soient à portée de main.
Exemple de projet de télémédecine
Ils apportent des améliorations sous forme de commentaires à la partie nécessaire de la mise en page. Nous avons décidé ensemble que nous n'accepterions de grandes modifications nulle part: ni dans les protocoles, ni dans Jira , ni dans les messagers. Dans le commentaire, le concepteur nécessaire est mentionné et une notification lui est envoyée par mail.
Tout est stocké en ligne, ne secouez pas que vous n'aurez pas accès à la mise en page, en travaillant depuis un autre ordinateur. Je sais avec certitude que les améliorations ne peuvent être apportées que sous forme de commentaire dans la mise en page et elles seront apportées. C'est très cool. De plus, l'historique des commentaires vous permet de restaurer des événements. Grisha Garshin, manager
Pour développeur et testeur
Auparavant, lorsque nous transmettions des mises en page aux développeurs via Zeplin , eux et les concepteurs avaient une idée différente des mises en page. Les concepteurs ont vu une image complète des transitions dans Sketch , et les développeurs seulement un écran spécifique dans Zeplin . Les gars ne comprenaient pas toujours quel écran suivre et passaient du temps à s'interroger.
Les développeurs n'ont vu qu'une disposition spécifique dans Zeplin
Dans Figma, les développeurs voient exactement la même image que les concepteurs. Pour l'unité, nous adhérons à une telle organisation des dispositions: transitions horizontales entre les écrans, verticalement - à l'intérieur des écrans. Cela a aidé les gars à se sentir «chez eux» dans les maquettes.
Transitions horizontales entre écrans, écrans verticaux - intérieurs
Il est pratique que toutes les mises en page soient au même endroit et que tout le monde y ait accès, il est confortable de faire un examen - il y a des commentaires. Les mises en page sont toujours pertinentes et sous la même forme pour tous les participants, il est pratique de séparer les mises en page pour iOS et Android . Une autre chose intéressante est que vous pouvez créer un lien vers un écran spécifique et l'insérer dans la documentation. Irina Mukhina, testeuse.
Nous utilisons les mêmes noms de variables dans les couleurs et les styles, cela aide à ne pas produire d'entités inutiles dans la disposition de l'interface. Les développeurs peuvent décharger indépendamment n'importe quel élément de la mise en page, sans perdre de temps à demander au concepteur de le faire. Par exemple, vous pouvez obtenir le code svg de l'icône ou l'exporter au format souhaité.
Lorsque vous vous habituez à des services en ligne comme Figma , les outils précédents semblent primitifs et très distants. Pas d'hébergement de fichiers, de problèmes de licence, d'installation de logiciels à la place - juste un lien vers la description de la tâche dans Jira . Pour obtenir les styles CSS d'un élément, deux clics suffisent. Peter Dorozhkin, développeur.
Pour un marketeur
Nous effectuons également des tâches de marketing Web dans Figma . Ils ont leur propre projet, où toutes les dispositions sont stockées. Ainsi, les concepteurs marketing sont plus faciles à adhérer à notre identité d'entreprise - tous les éléments sont dans Figma .
Trouvez le stock que vous avez fait à l'automne 2018? Pf, facile!
Cela fonctionne bien et vice versa: le designer marketing a dessiné des illustrations, les a transférées à Figma . Le designer produit les a amenés à son interface et, si nécessaire, a légèrement ajusté la forme et la couleur - car tout est vectoriel.
Nous travaillons actuellement sur un concepteur d'illustrations à Figma.
Il est facile d'expliquer au concepteur où et quels éléments visuels doivent être modifiés / supprimés / ajoutés. Au lieu de mille mots, vous pouvez montrer une fois où et ce qui doit être fait. Les concepteurs peuvent revenir sur ces commentaires à tout moment qui leur convient. Katya Fedyunina, responsable marketing
Et lorsque la tâche marketing, mais se rapporte directement au produit, le travail d'équipe des designers de deux départements passe à un nouveau niveau. L'un propose un concept visuel, l'autre essaie une interface - le tout dans une même mise en page et en même temps!
Pensée principale
Le design est le résultat du travail de l'équipe, pas d'une seule personne. Efforcez-vous de faire en sorte que chaque participant puisse interagir avec lui confortablement. Éloignez-vous des outils locaux et recherchez ceux qui vous connectent à vos processus.