Introduction au système de conception (pour les concepteurs)

Si vous êtes concepteur, commencez ici, question de vous assurer d’avoir tout ce dont vous avez besoin pour utiliser le système de conception et notre trousse de prototypage.

À propos de la trousse de prototypage du système de conception

La trousse de prototypage consiste en un ensemble de styles et d’éléments prédéfinis dont vous pouvez vous servir afin de concevoir un site Web ou une application.

La trousse de prototypage est hébergée par Figma. Figma est un outil de conception gratuit que vous pouvez installer sur votre ordinateur ou utiliser dans un navigateur. Cet outil permet de créer :

• des maquettes d’interface utilisateur;
• des prototypes (maquettes d’interfaces interreliées) afin de réaliser des essais d’utilisabilité.

Si vous n’avez jamais utilisé Figma, veuillez consulter la liste de liens Aide et tutoriels – Figma.

Accéder à la trousse de prototypage

La trousse de prototypage du système de conception utilise la fonction Team Library (bibliothèque de l’équipe) de Figma.

1. Créez un compte Figma, si ce n’est pas déjà fait.
2. Veuillez nous envoyer un courriel à l’adresse design.system@ontario.ca dans lequel vous préciserez l’adresse courriel associée à votre compte Figma. Nous consultons nos courriels du lundi au vendredi, de 9 h et 17 h ET. Nous vous aviserons par courriel dès que nous vous aurons accordé votre accès.
3. Une fois que vous aurez reçu la confirmation de part concernant votre accès à la trousse, connectez-vous à Figma avec l’adresse courriel que vous nous avez fournie.
4. Créez un nouveau document de conception ou ouvrez un projet existant.
5. Dans la barre latérale à gauche de l’écran, cliquez sur « Assets », puis sur l’icône Team Library.
6. Pour activer la Team Library, cliquez sur la touche à bascule qui se trouve à côté de la trousse de prototypage du Système de conception pour l’Ontario.

Vous devriez maintenant avoir accès aux composantes, aux points de rupture de la grille, aux couleurs et aux styles de polices.

Dès que vous aurez ajouté la fonction Team Library à vous projets, vous recevrez automatiquement les modifications et les ajouts que nous publions.

Installer les polices du système de conception

Le Système de conception pour l’Ontario utilise principalement deux ensembles de polices : Open Sans et Raleway modified. Il faut installer les polices afin de les utiliser avec la trousse de prototypage.

1. Téléchargez les polices du Système de conception pour l’Ontario
2. Installez les polices en fonction de votre système d’exploitation : Windows ou Mac.
3. Si vous utilisez l’application Figma pour ordinateur, vous pourrez déjà utiliser ces polices. Si vous utilisez Figma dans votre navigateur, vous devrez installer l’application Figma Font Helper (en anglais seulement).

Obtenir de plus amples renseignements sur les orientations au sujet des polices et de la typographie..

Ajouter la grille aux projets

Le système de grille est une composante fondamentale du cadre de conception. Il structure votre page, et votre conception, en divisant l’espace en 12 colonnes.

Ce système vous permet d’aligner des composantes à des points de rupture pour différentes tailles d’écran (p. ex. un ordinateur, une tablette ou un appareil mobile). Ainsi, vos collègues développeurs sauront le code à attribuer à chaque appareil.

Bref, la grille offre d’emblée la disposition par défaut du système de conception.

1. Créez un nouveau cadre ou cliquez sur un cadre existant dans votre document, à l’endroit où vous désirez appliquer la grille.
2. Dans le volet de conception à droite, cliquez sur l’icône à quatre points dans la section « Layout Grid ».
3. Si vous avez déjà ajouté la fonction Team Library, vous devriez déjà voir des points de rupture du tableau pour les appareils mobiles, les tablettes et les ordinateurs. Sinon, consultez les instructions énoncées ici Configuration de la trousse pour ajouter la fonction Team Library.
4. Sélectionnez le point de rupture que vous désirez ajouter à la grille, puis faites-le glisser dans le cadre.

Utiliser la trousse de prototypage

Dès que vous aurez configuré la trousse de prototypage, installé les polices et ajouté la grille à votre cadre, vous serez en mesure de créer des prototypes.

Voici la marche à suivre pour glisser-déposer des composantes dans le cadre:

1. Assurez-vous d’avoir ajouté la fonction Team Library à votre compte Figma.
2. Sélectionnez l’onglet « Assets » situé dans la barre latérale de gauche.
3. Cliquez sur la liste déroulante de la trousse de prototypage d’interface utilisateur (IU) du Système de conception pour l’Ontario afin d’afficher toutes les composantes.
4. Sélectionnez une composante afin de connaître les caractéristiques de celle-ci, c.‑à‑d. :
   1. ses points de rupture;
   2. ses variables;
   3. son état : par défaut, état de survol, état de mise au point, état de survol et état actif.
5. Il suffit de glisser-déposer la composante choisie dans votre cadre Figma.

Conseils

Utilisez la barre de recherche pour trouver des composantes.

Remarque : Si vous avez ajouté d’autres fonctions Libraries, elles s’afficheront aussi dans vos résultats de recherche. Nous vous recommandons de désactiver vos autres fonctions Libraries de manière à n’afficher que les composantes de la trousse de prototypage.

Modifiez la disposition des composantes dans la fonction Library.

Par défaut, la fonctionnalité d’affiche est à « Show as grid » (grille). Basculez vers l’affichage « Show as list » (liste) afin de consulter la liste des composantes.

Modifier l’état d’une composante directement depuis le cadre.

Lorsque vous aurez glissé-déposé une composante dans votre cadre, vous pouvez modifier son état depuis la barre latérale de droite sous « Swap instance » (ne fonctionne que si plusieurs états sont attribués à la composante).

Aide et tutoriels – Figma

Autres outils de conception

Le Système de conception pour l’Ontario utilise Figma, car :

• tout le monde peut employer la version gratuite;
• l’application est compatible avec les systèmes d’exploitation Windows et Mac, et quiconque ne peut installer le logiciel a la possibilité de se servir de l’application dans un navigateur;
• la fonction Team Library nous permet de publier des mises à jour que l’ensemble des utilisateurs recevront automatiquement.

La trousse de prototypage n’est pas compatible avec Adobe XD, Axure et Sketch.

Toute personne qui connaît bien ces outils ne devrait avoir aucun problème à utiliser Figma. L’avantage que procure l’accès à un système de conception renfermant des composantes et des styles prédéfinis devrait simplifier l’apprentissage de l’outil.