---
title: Premiers pas sur Sketch
shortTitle: Premiers pas sur Sketch
description: Cette page guide les utilisateurs dans l’installation et l’utilisation des librairies Sketch du DSFR pour concevoir des maquettes cohérentes avec l’identité de l’État.
shortDescription: Installation et utilisation des librairies Sketch du DSFR
keywords: sketch, librairie, composants, design tokens, grille, typographie, DSFR, interface, maquette, pictogrammes
excerpt: Guide de démarrage pour installer et utiliser les fichiers Sketch du DSFR avec les bonnes pratiques et outils associés.
summary: Cette page présente les étapes nécessaires pour installer les typographies officielles et configurer les librairies Sketch du Système de Design de l’État. Elle détaille les fichiers disponibles, leur structure, l’organisation des composants, ainsi que les recommandations pour une bonne utilisation. Des conseils sont également donnés pour profiter des mises à jour et tirer parti des outils de conception intégrés.
order: 2
---

# Premiers pas sur Sketch

> [!CAUTION]
> La librairie Sketch n'est plus maintenue depuis la version 1.11 du DSFR.

## Télécharger les librairies du DSFR

[DSFR-Sketch.zip](/static/file/sketch/DSFR-Sketch.zip)

## Les ressources

Avant de commencer à proprement parler l’installation de la librairie Sketch, 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.gouvernement.fr/marque-Etat) Pour en savoir plus sur [la raison d'être de cette charte,](https://www.gouvernement.fr/charte/charte-graphique-les-fondamentaux/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 été spécialement dessinée pour répondre à des besoins d’identification, de sobriété et de lisibilité des supports de communication. Elle a été développée pour un usage exclusif par les acteurs de la sphère étatique.— gouvernement .fr

### 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 à des compositions d’informations spécifiques, secondaires ou mineures (contenus historiques, citations, traduction, etc.). Il convient de toujours privilégier l’usage de la Marianne à 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 « Système de Design de l'État · Fondamentaux, Composants » utilise la librairie « Système de Design de l’État · Core » pour fonctionner.

### Les fichiers

Les fichiers « Système de Design de l'État · Fondamentaux, Composants » et « Système de Design de l'État · Modèles » sont en libre téléchargement et présentent les différents outils présents dans la librairie sous forme de style de texte et de styles de calques mais aussi les symboles « prêt à l’emploi » disponibles ainsi que des modèles de page.

### Les librairies

- La librairie « Système de Design de l’État · Core » (non téléchargeable) regroupe tous les outils nécessaires à la réalisation de vos maquettes. Elle se structure en 3 catégories :
  - « 📐  0. Outils » : Des accès rapides pour la conception d’interface
  - « 🎨  1. Fondamentaux » : Les espacements, icônes et pictogrammes illustratifs sont regroupés dans cette catégorie au même titre que les ratio médias. Cette catégorie regroupe des aides à la conception de composants.
  - « 🧩  2. Composants » : Les éléments d'interface
- La librairie « Système de Design de l’État · Kit » (non téléchargeable) est destinée à la construction et la réalisation des planches de présentation des éléments qui composent la librairie « core ».
- La librairie « Système de Design de l’État · Pictogrammes » (non téléchargeable) regroupe l’ensemble des pictogrammes du Système de Design de l’État et des outils de conception.

## Installation et synchronisation des librairies

### Étape 1

Télécharger le fichier « Système de Design de l'État · Fondamentaux, Composants » sur [Sketch Cloud](https://www.sketch.com/s/06adaf11-8530-4b92-87f5-33309b78b0b6)

### Étape 2

Télécharger le fichier « Système de Design de l'État · Modèles » sur [Sketch Cloud](https://www.sketch.com/s/ad14a3f8-4131-4215-b427-43ccd9c8ab1c)

### Étape 3

Ajouter la libraire « Système de Design de l’État · Core » via Sketch Cloud. Pour ce faire, il vous suffit de vous rendre sur ce lien suivant : [Ajouter la librairie via Sketchcloud](https://www.sketch.com/s/6034ddd9-a0d3-4844-adda-bd4c821f24b1) et de cliquer sur “<span lang="en">Add Library</span>”.

![](../../../_asset/getting-started/designer/sketch/sketch-librairie-core-synchronisation.jpg)

> [!NOTE]
> La librairie s’ouvrira automatiquement dans Sketch et s’ajoutera à vos librairies existantes.

### Étape 4

Ajouter « Système de Design de l’État · Kit » via Sketch Cloud (Optionnel). Pour ce faire, il vous suffit de vous rendre sur ce lien suivant : [Ajouter la librairie via Sketchcloud](https://www.sketch.com/s/5abb81c6-92fe-4f69-a44a-d335566f615d) et de cliquer sur “<span lang="en">Add Library</span>”.

> [!NOTE]
> La librairie s’ouvrira automatiquement dans Sketch et s’ajoutera à vos librairies existantes.

### Étape 5

Ajouter « Système de Design de l’État · Pictogrammes » via Sketch Cloud (Optionnel). Pour ce faire, il vous suffit de vous rendre sur ce lien suivant : [Ajouter la librairie via Sketchcloud](https://www.sketch.com/s/29560974-7d35-4f3d-b878-01b398ea08f2) et de cliquer sur “<span lang="en">Add Library</span>”.

> [!NOTE]
> La librairie s’ouvrira automatiquement dans Sketch et s’ajoutera à vos librairies existantes.

### Étape 6

Vérifier que les librairies soient bien activées dans les paramètres de Sketch

![](../../../_asset/getting-started/designer/sketch/sketch-preferences-librairie.jpg)

### Étape 7

Commencer la conception

## Les mises à jour de la librairie

Pour bénéficier des mises à jour dans vos fichiers, il vous suffit de cliquer sur « Notifications » puis sur  « <span lang="en">Library update available</span> » qui apparaîtra lors de la livraison d’une nouvelle version de la librairie.

![](../../../_asset/getting-started/designer/sketch/sketch-maj-librairie.jpg)

## 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 Sketch, des symboles de paramètres de grille sont disponibles dans la section « 📐  0. Outils » pour vous renseigner sur les valeurs à indiquer. Dans le fichier « Système de Design de l’État » à télécharger, la planche “Grille” met en lumière l’utilisation générale de celle-ci et à la suite des “<span lang="en">Artboards</span>” prêtes à l’emploi sont à disposition.

### 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 Sketch, les <span lang="en">overrides</span> disponibles sur les symboles vous informent des modifications autorisées sur les composants.

> [!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.

### Pour aller plus loin

Sketch propose [une documentation destinée à la prise en main du logiciel.](https://www.sketch.com/docs/) 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.
