Premiers pas sur Figma

Les ressources

Avant de commencer à proprement parler l’installation de la librairie Figma, quelques pré requis sont nécessaires. Tout d’abord, il vous faut installer les typographies issues de la Charte de la marque de l'État. Pour en savoir plus sur la raison d'être de cette charte, un espace dédié existe sur le site du Gouvernement.

La typographie Marianne

Elle a été déclinée en six niveaux de graisse afin de permettre un large panel d’expression. Néanmoins, le Système de Design de l'État n’utilise que 3 niveaux de graisses : regular, medium et bold.

La typographie Marianne a été spécialement dessinée pour répondre à des besoins d’identification, de sobriété et de lisibilité des supports de communication. Elle a été développée pour un usage exclusif par les acteurs de la sphère étatique.— gouvernement .fr

Comment installer la typographie Marianne ?

La typographie Spectral

Il s’agit d’une typographie dont le style vient contraster avec la typographie principale Marianne.

Son usage doit se faire avec parcimonie, en se limitant à des compositions d’informations spécifiques, secondaires ou mineures (contenus historiques, citations, traduction, etc.). Il convient de toujours privilégier l’usage de la Marianne à la Spectral.— gouvernement .fr

Comment installer la typographie Spectral ?

L’organisation des fichiers et librairies

Le fichier « 🎨 Fondamentaux »

Ce fichier regroupe les briques fondamentales du Système de Design :

  • Couleurs d’options (et présentation du système de couleur)
  • Styles de texte
  • Styles de grille
  • Espacements et composants pour les incarner
  • Ratios de médias
  • Bloc marque
  • Icônes

En tant que fondation, il comporte des liens vers le fichier des composants qu’il est essentiel de restaurer à chaque mise à jour (voir section “La synchronisation de la librairie”).

Le fichier « 🧩 Composants »

Ce fichier rassemble les composants à disposition dans le Système de Design. En plus d’une page d’introduction “Pour commencer”, vous y trouverez une page par composant, avec les symboles et une planche de présentation. Pour insérer les composants directement dans vos fichiers de travail, suivez la procédure ci-dessous.

Le fichier « 🖼️ Pictogrammes »

Ce fichier rassemble des pictogrammes aux couleurs du Système de Design de l’État. Ceux-ci ont été conçus par l’équipe du DSFR et/ou par des utilisateurs. En plus d’une page d’introduction “Lisez-moi”, vous y trouverez une page par catégorie, avec les symboles. Pour insérer les composants directement dans vos fichiers de travail, suivez la procédure ci-dessous.

Accéder aux fichiers du Système de Design de l'État sur Community

La synchronisation de la librairie

Que vous soyez nouvel utilisateur du Système de Design de l'État ou ancien, il est recommandé d’utiliser la méthode décrite ci-dessous, car le fichier original n’est plus supporté depuis la version 1.2.1.

Attention

Depuis une récente mise à jour, Figma ne permet plus d’utiliser les librairies partagées d’un espace autre que celui de son organisation ou équipe. Nous utilisions cette méthode pour rendre le DSFR disponible pour le plus grand nombre, et sommes désormais forcés d’en changer.

Le DSFR est désormais disponible sur la page Community du Service d’Information du Gouvernement (SIG). Il se compose toujours de deux fichiers (Fondamentaux et Composants). Pour l’utiliser comme librairie partagée, vous devez le dupliquer puis le publier dans votre espace ou équipe.

Accéder aux fichiers du Système de Design de l'État sur Community

Le tutoriel étape par étape

ÉTAPE 1 Dupliquer les fichiers

Commencez par visiter les pages Community des deux fichiers et les dupliquer :

  • Si vous faites partie d’une Organisation, il vous sera proposé de dupliquer les fichiers directement dans votre Organisation
  • Si vous faites partie d’une équipe Pro ou avez simplement un compte gratuit (Starter), le fichier sera directement dupliqué dans vos brouillons (“Drafts”)
  • Dans les deux cas, il est recommandé de déplacer les fichiers dupliqués dans un projet d'équipe, en cliquant sur le nom du fichier, puis “Move to folder”.

ÉTAPE 2 Publier les fichiers

Une fois les fichiers rangés dans le projet et l'équipe de votre choix, vous pouvez publier les fichiers en cliquant sur le nom du fichier puis “Publish styles and components” :

  • Commencez par publier le fichier des Fondamentaux
  • Une fois ce dernier publié, il vous faudra restaurer les liens dans le fichier “Composants” (ce dernier étant encore lié au fichier Fondamentaux original, et non le duplicata présent dans votre projet). Pour ce faire, ouvrez la modale “Team library”, activez l’utilisation du fichier “Fondamentaux” récemment publié, puis cliquez sur “Missing libraries”. Choisissez le fichier récemment publié comme librairie de remplacement, puis sur “Swap libraries”.
  • Ceci fait, vous pouvez publier le fichier “Composants” dans votre projet.
  • Vous pouvez désormais utiliser ces fichiers comme librairie partagée dans vos fichiers.

Note

Si vous n’avez qu’un compte gratuit, vous ne pourrez pas publier les composants des deux fichiers, mais seulement les styles (de couleur, de typographie). Il vous faudra donc travailler directement dans le fichier “Composants”, dans l’onglet Espace de travail prévu à cet effet, pour pouvoir les insérer comme des composants locaux.

Les mises à jour de la librairie

À la sortie d’une nouvelle version du DSFR, les fichiers présents sur Community seront mis à jour. Pour mettre à jour vos librairies locales, il vous faudra répéter la manœuvre, et utiliser “Swap libraries” pour maintenir les liens dans vos projets :

  • Si, par exemple, vous disposez de la version 1.2.0 et que la version 1.3.0 est sortie, vous devrez dupliquer et déplacer dans votre projet local les fichiers “Fondamentaux v1.3.0” et “Composants v1.3.0”.
  • Une fois ceci fait, vous pouvez supprimer les anciennes libraires 1.2.0 de votre espace local. Tous les liens précédemment effectués apparaîtront comme “Missing libraries”
  • Publiez la version 1.3.0 en suivant la méthode présentée dans le paragraphe précédent, sans oublier de restaurer les liens entre Fondamentaux et Composants.
  • Ensuite, vous pouvez restaurer les liens dans vos fichiers locaux en utilisant la fonctionnalité “Swap libraries”.
  • Si vous avez des libraires ou des composants intermédiaires, veillez à les mettre également à jour, en respectant autant que possible l’ordre de publication et restauration des liens suivants :
    Fondamentaux > Composants > Librairies intermédiaires éventuelles > Fichiers de design.

Important

Tout au long de ces manœuvres, il est préférable de garder la case “Swap default styles in instances” décochée. Cette option sert majoritairement à changer les styles d’un fichier sans pouvoir modifier ses composants.

Les recommandations sur l’utilisation de la librairie

→ La grille

La grille permet de structurer le contenu d’une page. Pour en comprendre son fonctionnement consultez sa page dédiée dans la rubrique “Fondamentaux techniques". Dans Figma, les grilles sont disponibles en styles de composition par défaut. Pour les utiliser, rendez-vous dans la section “Layout grid” du panneau de propriétés d’une Frame. Pour des explications illustrées, consultez la page “Pour commencer”.

→ Les “design tokens”

Chaque thème possède ses propres “design tokens”. Il n’est pas autorisé de transposer les “design tokens” du thème sombre en thème clair, et inversement. De plus, il est fortement recommandé d’appliquer les “design tokens” issus du Système de Design de l'État.

→ Les composants

Les composants sont disponibles sous la forme de symboles dynamiques dans la librairie partagée. Sur Figma, toutes les overrides étant autorisées par défaut. Une nomenclature régit les modifications conformes au Système de Design. Consultez la page “Pour commencer” du fichier DSFR - Composants pour la découvrir.

Attention

Si vous détachez des symboles de la librairie pour les modifier, vous ne bénéficierez plus des mises à jour automatiques pour ces éléments.

Le Système de Design de l’État étant en constante évolution, les composants actuels peuvent être amenés à être modifiés, et d’autres composants amené à être ajoutés.

→ Pour aller plus loin

Figma propose une documentation destinée à la prise en main du logiciel.
N’hésitez pas à aller la parcourir en apprendre plus sur les styles de textes les styles de calques… et bien d’autres fonctionnalités.

Premiers pas sur Sketch

Développeurs