---
id: design
title: Conception
shortTitle: Conception
description: Cette page présente les principes de conception du DSFR pour les designers et détaille l’organisation des librairies, des styles et des composants.
shortDescription: Principes et outils de conception pour les designers
keywords: conception, design, sketch, figma, accessibilité, icônes, grille, styles de texte, styles de calques, symboles, DSFR
excerpt: Découvrez les bonnes pratiques de conception avec le DSFR et les ressources à disposition pour les designers.
summary: Cette page rassemble les éléments essentiels pour concevoir des interfaces avec le Système de Design de l’État. Elle présente l’organisation des librairies Sketch et Figma, l’utilisation des icônes Remix, les règles d’accessibilité, les systèmes d’espacement et de grille, les styles de texte et de calques, ainsi que les composants disponibles. Elle fournit également des liens vers la communauté et les ressources d’aide.
order: 1
---

# Conception

## L’organisation des librairies

Sketch et Figma possédant des spécificités propres à chacun, l’organisation des fichiers et librairies d’un logiciel à l’autre peut varier. Il en va de même concernant la gestion des <span lang="en">overrides</span>.

- [Premiers pas sur Sketch](../sketch/index.md)
- [Premiers pas sur Figma](../figma/index.md)

## Les icônes

Les icônes du Système de Design de l’État sont issues de [Remix Icon](https://remixicon.com/), une librairie open source. Une sélection d’icônes est intégrée aux librairies pour les besoins des composants notamment. Si l’icône que vous cherchez n’y est pas présente, n’hésitez pas à la télécharger directement depuis le [site de Remix Icon](https://remixicon.com/), tout en respectant les [4 tailles imposées](path:/core/icon) par le Système de Design de l’État.

## L’accessibilité

Les services publics numériques et certains services privés **ont l’obligation d’être accessibles de façon équivalente à tout citoyen**, qu’il soit ou non en situation de handicap (visuel, auditif, moteur, troubles Dys…). Un **service numérique accessible** est plus facile à utiliser pour les personnes handicapées et de meilleure qualité pour tous. Afin de garantir cette obligation, le Système de Design de l’État répond aux directives et exigences du Référentiel Général d’Amélioration de l’Accessibilité - RGAA dans sa version 4.

![](../../../_asset/getting-started/designer/design/illustration-accessibilite.jpg)

## Les fondamentaux

### Les espacements

Le Système de Design de l’État utilise des multiples de 8px pour définir les marges et <span lang="en">padding</span>, auxquels s’ajoutent les espacements de 2px, 6px, 4px, 12px et 20 px afin de gérer tous les cas de figure les plus courants.

Ce système d’espacement permet de **garantir une homogénéité, cohérence et consistance des interfaces conçues**. Cela dans le but d'améliorer l’UX et de faciliter la conception et la réalisation de spécifications destinées aux développeurs.

### La grille

![](../../../_asset/getting-started/designer/design/grille-espacements.jpg)

Le système de grille sur 12 colonnes proposée par le Système de Design de l’État vous permet de structurer vos contenus. Il met à disposition 5 mises en page, basées sur 4 points de rupture.

![](../../../_asset/getting-started/designer/design/structure-grille-12-colonnes.jpg)

### Les styles de textes

Les styles de texte présents dans la librairie sont là pour vous permettre de créer des interfaces rapidement tout en garantissant la cohérence entre les différents sites utilisant le Système de Design de l’État.

Veillez à toujours appliquer un style de texte à vos contenus et symboles, cela vous permettra aussi de créer des symboles dynamiques car ils seront modifiables dans les <span lang="en">overrides</span>. Si dans les styles proposés, vous ne trouvez pas celui qui répond à vos besoins, vous pouvez en créer un en respectant les <span lang="en">tokens</span> existants.

![](../../../_asset/getting-started/designer/design/styles-texte.jpg)

### Les styles de calques

Les styles de calque présents dans la librairie sont là pour vous permettre de créer des interfaces rapidement tout en garantissant la cohérence entre les différents sites utilisant le Système de Design de l’État.

Pensez à toujours appliquer un style de calque à vos formes, non seulement cela créé des <span lang="en">overrides</span> dans vos symboles, mais vous serez certain d’utiliser les couleurs, les bordures et les ombres conformes au Système de Design de l’État. Si dans les styles proposés, vous ne trouvez pas celui qui répond à vos besoins, vous pouvez en créer un en respectant les <span lang="en">tokens</span> existants.

![](../../../_asset/getting-started/designer/design/styles-calques.jpg)

## Les composants

### Les symboles

Le Système de Design de l’État met à disposition sous forme de symboles, différents états et déclinaisons des composants, dont les règles d'usages sont rédigées dans la documentation.

![](../../../_asset/getting-started/designer/design/symboles-composants.jpg)

## L’aide et la communauté

Si vous avez besoin d’assistance dans l’utilisation de certains composants du Système de Design de l’État, l’équipe ainsi que la communauté se feront un plaisir de vous aider. Rejoignez également la communauté pour échanger avec la communauté et être tenu informé des dernières évolutions.

Rendez-vous sur les pages dédiées à la [Communauté](../../../community/index.md) pour en savoir plus.
