Figma vol.1 : Les librairies & composants

Depuis quelques mois, nous avons commencé à utili­ser Figma, un outil de design colla­bo­ra­tif qui nous surprend par sa puis­sance. Nous avons décidé de nous lancer dans une série d’ar­ticles dédiés à ce nouveau logi­ciel, qui fait débat au sein de l’équipe.

Pour commen­cer, nous allons nous pencher sur une des features les plus impor­tantes de Figma : les librai­ries ! Si vous êtes fami­lier de Sketch, ou d’autres outils de concep­tion, vous ne serez pas (trop) perdus. Néan­moins, il faudra vous prépa­rer à chan­ger vos habi­tudes, et vous construire de nouveaux auto­ma­tismes. Soyons honnêtes, dans l’équipe on a un peu râlé le temps de s’ha­bi­tuer !

Cons­truire les bases

Le rappel utile : une librai­rie est un ensemble de compo­sants (l’équi­valent des symboles de Sketch) et de styles que vous allez créer pour votre future maquette. Une fois un élément créé, il vous suffira de modi­fier le compo­sant “parent” pour que toutes ses utili­sa­tions se modi­fient. Une librai­rie permet d’avoir tous les compo­sants prin­ci­paux à un même endroit. C’est aussi le point de départ pour construire vos livrables : à savoir un style guide et l’en­semble de votre design system.

L’avan­tage indé­niable d’une librai­rie est le gain de temps : si au départ vous allez passer un temps non négli­geable à construire un système propre et clair, vous gagne­rez énor­mé­ment de temps et de produc­ti­vité par la suite, notam­ment sur les projets d’en­ver­gure. Deux des fonc­tion­na­li­tés les plus puis­santes de Figma sont les compo­sants et les styles qui sont inti­me­ment liés : ce sont les points de départ de votre future librai­rie.

Etape 1 : Défi­nir les styles

Les styles sont un ensemble de proprié­tés que vous allez défi­nir :

• Styles de textes (pour une bonne hiérar­chie de l’in­for­ma­tion),
• Styles de couleurs (contours, fonds, actions, boutons),
• Styles de formes (radius, tailles, etc).

Défi­nir les styles de votre créa­tion simpli­fiera votre flux de travail, et c’est d’au­tant plus impor­tant lorsque l’on travaille en équipe sur un même sujet. Bien sûr, avec Figma il est aussi possible de travailler en mode colla­bo­ra­tif : vous, vos collègues ou vos inter­ve­nants pouvez effec­tuer en temps réel des modi­fi­ca­tions sur le même fichier. Le mode colla­bo­ra­tif est un vrai vecteur de gain de temps, tous les acteurs du projet peuvent par exemple corri­ger les petites coquilles. Il est égale­ment possible de créer à plusieurs sans avoir à procé­der à des trans­ferts de fichiers, et tout est centra­lisé.

Mais reve­nons à nos styles…

lls permettent de main­te­nir une cohé­rence visuelle à travers toutes les pages de votre site. Voici un aperçu des prin­ci­paux éléments à défi­nir :

• Style de texte : Vous allez défi­nir tous les styles de textes qui seront présents sur votre site (taille, police, couleurs) : niveaux de titres, para­graphes, sur titre, les labels etc.

• Style de couleurs : Dans la même logique que la créa­tion des styles de textes, vous allez défi­nir les couleurs prin­ci­pales de votre concep­tion (primary, secon­dary, etc). Cela vaut aussi pour les dégra­dés et les contours

• Style d’ef­fets : Figma propose quatres types d’ef­fets de calque : ombre portée, ombre internes, flou d’ar­rière-plan et flou de calque. Vous pouvez défi­nir ces effets pour vos blocs, vos textes, vos diffé­rents états.

Jusqu’ici la créa­tion des styles est assez simi­laire entre Sketch et Figma. Ces para­mètres s’af­fichent direc­te­ment dans une fenêtre à droite, lorsque aucun élément n’est sélec­tionné, cela permet d’avoir un aperçu sans passer par un menu, et c’est un très bon point pour Figma.

Etape 2 : Créer des compo­sants et les caté­go­ri­ser

Créer un compo­sant

(source : Figma.com)

Les compo­sants sont des éléments plus ou moins complexes : boutons, champs de formu­laires, blocs récur­rents, bref tous les éléments graphiques que vous réuti­li­se­rez à plusieurs occur­rences dans votre design ; ces compo­sants sont les piliers de votre design system. L’avan­tages des compo­sants est un gain de temps pour la réuti­li­sa­tion et la modi­fi­ca­tion des éléments. Si vous modi­fiez votre compo­sants, alors il sera modi­fié dyna­mique­ment à tous les endroits où il appa­raît dans votre créa­tion. A ces compo­sants, on ajoute des styles préa­la­ble­ment défi­nis ou que l’on défi­nis sur le moment.

Le plus : les variants

Au fur et à mesure que vous créez des compo­sants et construi­sez votre système de concep­tion, vous allez avoir besoin de compo­sants simi­laires les uns aux autres, avec seule­ment de légères diffé­rences : version enabled / disab­bled, version connecté / non connecté etc. Figma propose une nouveauté par rapport à ses concur­rents, et pas des moindres :l’in­tro­duc­tion de la notion de “variant”. Au lieu d’avoir un compo­sants distinct pour chaque état, les variantes vous permettent de regrou­per et d’or­ga­ni­ser des compo­sants simi­laires dans un seul conte­neur. Cela simpli­fie votre biblio­thèque de compo­sants et permet une colla­bo­ra­tion beau­coup plus fluide. Très concrè­te­ment, on retrouve beau­coup plus faci­le­ment ses petits, et l’on peut décli­ner beau­coup plus simple­ment des pages sans avoir à chan­ger les compo­sants.

Pour tout savoir sur les variants, vous pouvez lire cette page détaillée sur le site de Figma

Caté­go­ri­ser et hiérar­chi­ser ses éléments

C’est impor­tant dès le départ de caté­go­ri­ser ses éléments, et de les ranger selon des logiques de design systems. Pour créer des caté­go­ries et sous caté­go­ries, il vous suffira d’ajou­ter un “ / “ entre chaque titre. Cela vous permet­tra de mieux vous y retrou­ver, et d’avoir une vision des éléments de votre future libraire qui sera sûre­ment amenée à gran­dir. En image ça donne ça :

La logique diffère un peu de Sketch, les compo­sants “master” restent sur la page à l’en­droit de leur créa­tion, ce qui nous pousse à être assez orga­ni­sés dès la créa­tion du compo­sants, (mais aussi des futurs). Pour les retrou­ver on doit se rendre dans le panneaux Assets ou parmi l’or­ga­ni­sa­tion que l’on a créé. Cette orga­ni­sa­tion est un peu désta­bi­li­sante au départ, mais c’est surmon­table au bout de quelques utili­sa­tions !

Créer sa librai­rie

(source : Figma.com)

Info utile : Avant toute chose, il est impor­tant de savoir que les biblio­thèques de compo­sants sont une fonc­tion­na­lité payante. Vous pouvez toujours créer et utili­ser des compo­sants sur le plan de démar­rage gratuit, mais vous ne pouvez pas les publier pour y accé­der dans d’autres fichiers.

Orga­ni­sa­tion et fichier

Après avoir créé tous les styles et compo­sants requis, vous allez collec­ter et finir d’or­ga­ni­ser tous les compo­sants sur une seule et même page ( si ce n’était pas déjà le cas). Si vous souhai­tez réunir tous vos compo­sants sur une page nous vous conseillons le plug-in Compo­sant master mana­ger , il vous créera une page dédiée avec tous vos compo­sants en un clin d’œil.

Dans cette page vous allez mettre tous les compo­sants et styles et les orga­ni­ser, afin d’avoir une vue d’en­semble des éléments appe­lés style guide ou design system. Vous pouvez retrou­ver de nombreux exemple ou modèle sur Figma commu­nity.

Point à prendre en compte : Si vous dépla­cez vos compo­sants sur une autre page, vous ne pour­rez pas utili­ser l’op­tion proto­type à son maxi­mum. Par exemple pour votre header, si il ne se trouve pas sur votre page prin­ci­pal, il vous faudra faire vous même les renvois pour chaque onglets, de chaque page. Autant dire que c’est une perte de temps sur un gros projet. Ce détail est à prendre en compte, si votre projet comporte plusieurs pages. A vous d’or­ga­ni­ser un espace à côté de vos plans de travail pour vos compo­sants.

Publier et parta­ger sa librai­rie

Une fois que tous vos éléments sont prêts, il est temps de publier et parta­ger votre librai­rie ! Ce n’est pas diffi­cile de trou­ver comment y accé­der, depuis le panneau des « Assets ». Figma est assez intui­tif et bien conçu pour trou­ver tout assez faci­le­ment. Vous avez deux moyens simples d’ac­cé­der à la modale de créa­tion de votre biblio­thèque :

• **Par le panneau des Assets (**vous trou­ve­rez le petit icon de librai­rie)
• Dans la barre outil de l’édi­teur

Vous allez pouvoir choi­sir les styles et les compo­sants que vous souhai­tez publier en cochant ou déco­chant les cases. Vous pouvez choi­sir de garder des compo­sants privés dans votre fichier.

Tips : Pour empê­cher Figma de publier vos styles et compo­sants, vous pouvez ajou­ter un préfixe au nom du compo­sant dans le panneau des calques. Pour cela il vous suffit d’ajou­ter un “ . “ ou “ _ “ au tout début du nom. FIgma le clas­sera auto­ma­tique­ment dans un onglet privé.

Vous n’avez plus qu’à cliquer sur “Publier” et votre première biblio­thèque est née.

Modi­fi­ca­tion de la biblio­thèque

A partir de votre fichier

Si vous appor­tez des modi­fi­ca­tions à un style ou à un compo­sant publié, cela n’ap­pliquera ces modi­fi­ca­tions qu’aux instances du fichier actuel. Si vous souhai­tez que ces modi­fi­ca­tions soient réper­cu­tées dans votre biblio­thèque, vous devrez égale­ment publier ces modi­fi­ca­tions dans la biblio­thèque. Un point bleu s’af­fi­chera alors sur le menu “Assets” pour vous infor­mer que des mises à jours doivent être publiées.

Depuis le fichier source

Si vous avez créé votre librai­rie depuis un fichier à part, il vous suffi­ras d’ap­pliquer la même mani­pu­la­tion que pour la mise à jour dans un fichier

Gestion « Team » de la librai­rie

Les admi­nis­tra­teurs peuvent choi­sir les biblio­thèques dispo­nibles ou non dans les fichiers d’équipe. Cela permet de parta­ger rapi­de­ment des styles et des compo­sants entre les membres d’une team. Les étapes donnés par Figma sont les suivantes :

L’avan­tage indé­niable d’une bonne biblio­thèque est le gain de temps, n’im­porte qui de votre team peut réali­ser une modi­fi­ca­tion qui s’im­pac­tera en direct sur vos maquettes. Pour des projets avec des dizaines d’écrans, le gain de temps est indé­niable. Bien sur, Figma est assez intel­li­gent pour vous permettre de conver­tir aussi vos librai­ries sketch en fichier Figma, même si vous aurez quelques ajus­te­ments à faire, vous n’au­rez pas pas à tout recréer.

Une fois les clefs en mains, la créa­tion d’une librai­rie s’avère plutôt simple. Ne rechi­gnez pas à la construire dès le départ, ou au moins au fur et à mesure. Cela vous fera gagner un temps consi­dé­rable par la suite et permet­tra d’op­ti­mi­ser les mises à jour et les chan­ge­ments de vos maquettes que ce soit pour vous, ou pour vos colla­bo­ra­teurs!

Retour d’ex­pé­rience global & avis de l’équipe

Après quelques temps d’uti­li­sa­tions, nous vous livrons nos retours d’ex­pé­riences :

Doriane : « Au départ, réap­prendre une nouvelle logique nous a fait un peu grin­cer des dents. Mais au final après quelques temps d’adap­ta­tion et des petits tutos, la prise en main se fait de manière assez simple, si l’on connaît déjà Sketch. Figma a fait un travail péda­go­gique assez formi­dable sur son site pour la prise en main de toutes ses fonc­tion­na­li­tés: c’est expliqué de manière simple en vidéo. Figma possède de nombreux atouts, surtout sur des petits détails qui sont vrai­ment plus intui­tifs et qui pour­ront faire la diffé­rence. Bien sûr on découvre des subti­li­tés au fil du temps comme les variants ou la fonc­tion­na­lité des auto-layout, sur lesquelles on doit se pencher de manière un peu plus appro­fon­die pour les comprendre. Une fois prises en main, elles sont un gain de temps formi­dable. »

Sophie : « La première utili­sa­tion de Figma bous­cule nos habi­tudes ancrées depuis un bon bout de temps sur Sketch. Cet outil se révèle très inté­res­sant au niveau des librai­ries mais néces­site un petit temps d’ap­pren­tis­sage pour les utili­ser ensuite de manière intui­tive. La rapi­dité et les nombreuses features améliorent la produc­ti­vité de travail. Auto-layout est sans doute une des fonc­tion­na­li­tés que je préfère. Le regrou­pe­ment des plugins dans la partie commu­nauté et leur faci­lité d’ins­tal­la­tion est aussi un réel plus par rapport à Sketch. Nous vous parta­ge­rons dans un futur article ceux qui nous sont le plus utiles dans notre process de travail au quoti­dien, article à ne surtout pas manquer ! »