Migration Sketch → Figma

Partie 2: l’organisation de mes fichiers Figma

Retrouvez la partie 1 : je suis (enfin) passé sur Figma.

L’autre jour je discutais avec un ami, qui est lui aussi designer (👋🏼 Yoan), à propos de la migration Sketch / Figma, quand il m’a demandé : “Et comment t’organises tes fichiers Figma pour la collaboration avec les devs ?”. Et c’est une très bonne question.

Ca a été l’un des premiers sujets sur lequel je me suis penché, car Figma étant un outil facilitant la collaboration, il m’a paru important d’avoir une organisation bien structurée pour faciliter la lisibilité de mes fichiers par tout collaborateur — designer ou non.

J’ai donc passé pas mal de temps à chercher à droite à gauche des bonnes pratiques sur le sujet, et à force de tester diverses méthodes, j’ai trouvé une organisation qui nous correspond bien. Je pense que ça peut être intéressant de la partager afin de pouvoir s’échanger nos bonnes pratiques et avoir un workflow toujours plus optimisé. Voici donc comment, chez Simundia, nous organisons nos fichiers Figma destinés à la collaboration.

1. Les flows et annotations

Pour commencer, je trie mes différents flows en les regroupant et en les séparant avec un en-tête unique. Pour le nommage de l’en-tête, je me suis fait une convention “Nom de la feature — nom du flow” pour s’y retrouver et identifier rapidement celui qui nous intéresse. J’y mets les différents écrans à la suite en les nommant “N° étape — action”. Je peux y ajouter des annotations pour guider les non-designers dans leur compréhension des différents écrans ou éléments, qui pourraient paraître intuitifs pour nous, mais ne le sont pas forcément pour tout le monde.

2. Les composants et leurs états

Je classe tous les composants que j’utilise dans mes interfaces au même endroit afin de faciliter la lecture et la compréhension de ces derniers ainsi que leurs différents états possibles. Cela évite également aux ingénieurs de devoir partir à leurs recherches dans les libraires par exemple. J’applique une nomenclature classique “Page / Élément / État”.

3. Les pages

Je range quasiment tout le temps mes pages de la façon ci-dessous.

J’aime bien garder une trace de toutes les recherches, explorations et évolutions du travail mené. J’ai donc toutes les solutions envisagées / testées dans les pages “🧪 Experiment N”, qui me servent d’archives et me donnent une visibilité sur ce qui a déjà été fait ou non, ce qui a marché ou non, pourquoi, etc.

La feature prototype de Figma étant pas mal développée, je l’utilise pour animer mes interfaces et guider les ingénieurs sur le résultat à avoir en production. Et généralement, c’est vachement plus apprécié de présenter un beau petit prototype vivant lors des design review plutôt qu’une suite d’écrans statiques dont on ne peut que s’imaginer l’utilisation finale et les interactions possibles. Je réalise donc mes prototypes sur une page dédiée, où comme vous pouvez vous l’imaginer : c’est souvent le bordel 😅.

Dans les pages “💠 Annotation Symbols” et “💡 Informations”, j’y mets tous les composants me servant à organiser le fichier : les en-têtes, annotations, tags, etc. ainsi qu’une petite cover pour le fichier.

La page “📱 Final” étant celle qui sera la plus utile et consultée par les non-designers, j’y mets les flows définitifs, les composants, annotations utiles, etc, dont je parlais un peu plus haut.

4. L’index du projet

Pour s’y retrouver facilement dans l’index du projet, je crée une cover pour chaque fichier (qui correspond à une feature), avec le nom de la feature, un tag indiquant son statut (en cours / en pause / prêt pour le dev / en prod), le nom des concepteurs/ingénieurs en charge de celle-ci, et un petit aperçu de l’interface. Nos features étant généralement développées par type d’utilisateurs du produit, j’ai fait un code couleur en fonction de ces derniers, afin de les regrouper visuellement et de faciliter la lecture.

Je suis curieux et envieux d’explorer sans cesse de nouvelles choses et d’améliorer quotidiennement mon workflow, alors n’hésitez pas à me partager également vos bonnes pratiques d’organisation pour la faire évoluer toujours plus !