Designers

 

La version 1.1.0 est disponible !
La liste des nouveauté est disponible sur les notes de version
et vous pouvez la télécharger ci-dessous!

Comment installer et utiliser le Système de Design de l'État ?

Cette section guide les designers dans la prise en main du Système de Design de l'État, elle met à disposition les ressources nécessaires pour démarrer un projet, et présente la librairie de composants.

Les composants sont uniquement disponibles au format Sketch et Figma. Si vous utilisez Adobe XD, un outil de conversion est disponible sur ce lien, mais nous ne garantissons pas la bonne intégrité des éléments.

 

Les ressources

1. Utiliser la librairie Sketch

Rendez-vous sur le lien ci-dessous et cliquer sur “Add Library to Sketch”

Rendez-vous sur le lien ci-dessous et cliquer sur “Add Library to Sketch”

Ajouter la librairie Sketch via Sketchcloud

Ajouter la sous-librairie d’icône via Sketchcloud

La librairie s’ouvrira automatiquement dans Sketch et s’ajoutera à vos librairies existantes, vérifiez ensuite dans vos préférences que la librairie est active.

Pour bénéficier des actualisations dans vos fichiers, il suffira de cliquer sur la notification « Shared library update available » qui apparaîtra lors de la mise à disposition de nouvelles versions de la librairie.

La librairie utilise la sous librairie d’icônes, il est donc nécessaire d’ajouter cette dernière pour la librairie fonctionne correctement.

Nous proposons également le téléchargement du fichier source des librairies. Le fichier source permet de travailler en local et propose des planches de guide pour vos premières utilisations de Sketch :

DSFR - Librairie v1.0.0

 

DSFR - Sous librairie d’icône v1.1.0

 

 

Pour rappel, cette méthode ne permet pas de bénéficier automatiquement des mises à jour du Système de Design de l’État, vous devrez télécharger la nouvelle version puis remplacer manuellement la librairie existante si vous voulez profiter des mises à jour.

2. Configurer la librairie Figma

Rendez-vous sur les liens ci-dessous, à ouvrir avec votre compte Figma :

Rendez-vous sur les liens ci-dessous, à ouvrir avec votre compte Figma :

DSFR - Fondamentaux

DSFR - Composants

Une fois les deux fichiers visités, les deux librairies (Fondamentaux et Composants) seront ajoutées à vos librairies partagées Figma. Pour les activer, rendez-vous dans votre modale “Team libraries” dans le panneau “Assets” de n’importe quel fichier. La démarche est illustrée en détail dans la page “Pour commencer” du fichier DSFR - Composants.

Attention, les deux librairies sont liées : l’une sous-tend l’autre. Prenez soin de bien activer les deux en même temps.

Lors des mises à jour, un message vous avertira des impacts sur vos designs, et vous pourrez choisir de mettre à jour ou non.

Vous pouvez dupliquer les fichier (en cliquant sur la liste déroulante à droite du nom du fichier) pour travailler sur le fichier source et créer vos propres composants. Pour rappel, utiliser un duplicata du fichier ne permet pas de bénéficier automatiquement des mises à jour du Système de Design de l’État.

3. Obtenir les typographies

Téléchargez les fichiers, puis installez-les sur votre ordinateur pour les utiliser.

Télécharger la police Marianne

Télécharger la police Spectral

Télécharger la police Marianne

Télécharger la police Spectral

4. Commencer à designer !

Tout est prêt ! Pour commencer, créez un nouveau fichier, puis utilisez les styles et les symboles partagés.

Vous êtes nouveau sur Sketch ? Consultez la documentation Sketch pour apprendre à vous en servir dans les meilleurs conditions : les styles , les symboles, les overrides, le smart layout et toutes les autres fonctionnalités utiles.

Si vous choisissez de débuter avec Figma, une large documentation est également éditée par le logiciel pour bien le prendre en main (en anglais).

Les librairies en détail

Les librairies sont composées de styles et de symboles (“Component” dans Figma, mais nous adopterons par la suite le terme symbole de manière transverse), elle se structure en 3 catégories principales :

  • Outils : des aides à la conception

  • Fondamentaux : les styles et éléments de base pour construire les composants

  • Composants : les éléments d'interface

1. Les fondamentaux

Les styles et les éléments de base pour concevoir vos designs. Pour comprendre leur utilisation découvrez les Fondamentaux .

La grille

La grille permet de structurer le contenu d’une page, pour comprendre son fonctionnement consultez la page Grille dans la rubrique “Composants”.

  • Sur Sketch vous trouverez les symboles paramètres de grille dans la section “Outils” qui vous renseignent sur les valeurs à indiquer. Dans le fichier, la page “Gabarits grille” met à disposition des “Artboards” prêts à l’emploi.

  • Sur 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 styles de textes et styles de calques

Veillez à toujours appliquer des styles de textes et styles de calques de la librairie partagée pour respecter le Système de Design de l'État.

Les icônes

Nous utilisons les icônes de la librairie open source Remix. Si vous ne trouvez pas l’icône adaptée dans les librairies partagées, vous pouvez vous rendre sur ce lien https://remixicon.com/ pour télécharger celle qui vous convient, en respectant les 3 tailles imposées par le Système de Design de l'État, indiquées dans la rubrique Icônes.

2. Les composants

Les composants sont disponibles sous la forme de symboles dynamiques dans la librairie partagée.

  • Sur Sketch les overrides disponibles sur les symboles vous informent des modifications autorisées sur les composants.

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

Pour comprendre leur utilisation découvrez les éléments d’interface dans la rubrique éléments d’interface .

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 seront ajoutés.

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


Le Système de Design et 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, trouble 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.


Obtenir de l’aide et participer à la communauté

Si vous avez besoin d’assistance dans l’utilisation de certains composants du Système de Design, 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é pour en savoir plus.


🙌 Vous êtes maintenant prêt(e) à utiliser le Système de Design de l'État.