---
title: Premiers pas sur Figma
shortTitle: Premiers pas sur Figma
description: Cette page guide les utilisateurs dans l’installation et l’usage des fichiers Figma du DSFR en précisant la procédure de synchronisation et les bonnes pratiques de conception.
shortDescription: Installation et utilisation des librairies Figma du DSFR
keywords: figma, librairie, composants, design tokens, grille, typographie, DSFR, interface, maquette, pictogrammes
excerpt: Guide d’installation et d’utilisation des fichiers Figma du DSFR pour concevoir des interfaces respectueuses des standards de l’État.
summary: Cette page présente les étapes à suivre pour installer les typographies officielles et configurer les fichiers Figma du DSFR. Elle explique l’organisation des librairies, la procédure de publication et de synchronisation dans Figma, les règles d’usage des composants et styles, ainsi que les recommandations pour assurer la cohérence et la compatibilité avec les futures mises à jour. Des liens vers des tutoriels et la documentation Figma sont également fournis.
order: 3
---

# Premiers pas sur Figma

## Télécharger les librairies du DSFR

[DSFR-figma-v1.15.0.zip](/static/file/figma/DSFR-figma-v1.15.0.zip)

:::fr-accordion[Voir les versions précédentes]{id='figma-versions-precedentes'}

- [DSFR-figma-v1.14.0.zip](/static/file/figma/DSFR-figma-v1.14.0.zip)
- [DSFR-figma-v1.13.1.zip](/static/file/figma/DSFR-figma-v1.13.1.zip)
- [DSFR-figma-v1.13.0.zip](/static/file/figma/DSFR-figma-v1.13.0.zip)
- [DSFR-figma-v1.12.0.zip](/static/file/figma/DSFR-figma-v1.12.0.zip)
- [DSFR-figma-v1.11.0.zip](/static/file/figma/DSFR-figma-v1.11.0.zip)
- [DSFR-figma-v1.10.0.zip](/static/file/figma/DSFR-figma-v1.10.0.zip)
- [DSFR-figma-v1.9.0.zip](/static/file/figma/DSFR-figma-v1.9.0.zip)
- [DSFR-figma-v1.8.0.zip](/static/file/figma/DSFR-figma-v1.8.0.zip)
- [DSFR-figma-v1.7.0.zip](/static/file/figma/DSFR-figma-v1.7.0.zip)
- [DSFR-figma-v1.6.0.zip](/static/file/figma/DSFR-figma-v1.6.0.zip)
- [DSFR-figma-v1.5.0.zip](/static/file/figma/DSFR-figma-v1.5.0.zip)
- [DSFR-figma-v1.4.0.zip](/static/file/figma/DSFR-figma-v1.4.0.zip)

:::

## 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](https://www.info.gouv.fr/marque-de-letat). Pour en savoir plus sur [la raison d'être de cette charte](https://www.info.gouv.fr/marque-de-letat/charte%20graphique-introduction), 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.

### 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

### Installer les typographies Marianne et Spectral

Les typographies en format web sont incluses dans le DSFR. Vous retrouverez les différentes versions (desktop et pdf) de la Marianne et la spectral sur : [https://www.info.gouv.fr/marque-de-letat/la-typographie](https://www.info.gouv.fr/marque-de-letat/la-typographie)

## 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 <span lang="en">Community</span>](https://www.figma.com/@gouvfr)

## 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.

> [!NOTE]
> 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 <span lang="en">Community</span>](https://www.figma.com/@gouvfr) 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 <span lang="en">Community</span>](https://www.figma.com/@gouvfr)

::fr-button[[Voir le tutoriel vidéo de synchronisation](https://vimeo.com/671968785)]{kind=2}

### Le tutoriel étape par étape

#### ÉTAPE 1 Dupliquer les fichiers

Commencez par visiter les pages [<span lang="en">Community</span>](https://www.figma.com/@gouvfr) 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 (<span lang="en">Starter</span>), le fichier sera directement dupliqué dans vos brouillons (“<span lang="en">Drafts</span>”)
- 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 “<span lang="en">Move to folder</span>”.

#### É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 “<span lang="en">Publish styles and components</span>” :

- 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 “<span lang="en">Team library</span>”, activez l’utilisation du fichier “Fondamentaux” récemment publié, puis cliquez sur “<span lang="en">Missing libraries</span>”. Choisissez le fichier récemment publié comme librairie de remplacement, puis sur “<span lang="en">Swap libraries</span>”.
- 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 <span lang="en">Community</span> seront mis à jour. Pour mettre à jour vos librairies locales, il vous faudra répéter la manœuvre, et utiliser “<span lang="en">Swap libraries</span>” 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 “<span lang="en">Missing libraries</span>”.
- 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é “<span lang="en">Swap libraries</span>”.
- 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 “<span lang="en">Swap default styles in instances</span>” 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 “<span lang="en">design tokens</span>”

Chaque thème possède ses propres “<span lang="en">design tokens</span>”. Il n’est pas autorisé de transposer les “<span lang="en">design tokens</span>” du thème sombre en thème clair, et inversement. De plus, il est fortement recommandé d’appliquer les “<span lang="en">design tokens</span>” 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 <span lang="en">overrides</span> é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.

> [!NOTE]
> 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és à être ajoutés.

### → Pour aller plus loin

Figma propose [une documentation destinée à la prise en main du logiciel](https://help.figma.com/hc/en-us/categories/360002042553-Figma-design).
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.
