Trousse de prototypage

Apprenez comment accéder à la trousse de prototypage Figma et l'utiliser pour vos conceptions.

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

La trousse de prototypage du Système de conception pour l’Ontario 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 en matière de facilité d’utilisation

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

Accéder à la trousse de prototypage

Pour accéder à la trousse de prototypage Figma :

  1. Créez un compte Figma, si ce n’est pas déjà fait.
  2. Vérifiez si la version la plus récente de la trousse de prototypage a déjà été publiée comme bibliothèque d’équipe (il est possible qu’un membre de votre équipe l’ait déjà fait).
  3. Lorsqu’une nouvelle version de la bibliothèque est disponible, publiez la version mise à jour. Au besoin, vous pouvez également remplacer votre bibliothèque existante par la version la plus récente.

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 modifiée. Vous devez installer ces polices pour pouvoir utiliser la trousse de prototypage. Pour ce faire :

  1. Téléchargez les polices du Système de conception de l’Ontario.
  2. Installez les polices sur Windows ou sur Mac.
  3. Si vous utilisez l’application de bureau, les polices seront disponibles immédiatement. Si vous utilisez Figma dans votre navigateur, vous devez également télécharger le programme d’installation des polices Figma.

En savoir plus sur les polices et la typographie.

Different weights of Raleway and Open Sans fonts.

Ajouter la grille aux projets

Le système de grille est un élément fondamental de votre canevas de conception. Il divise la page en colonnes et fournit une structure à votre mise en page.

Il vous aide à aligner les composants selon des points de rupture précis (ordinateur, tablette ou appareil mobile) et permet aux développeurs avec qui vous collaborez de savoir quoi coder pour chaque type d’appareil.

En utilisant la grille, vous vous assurez de partir du canevas par défaut du Système de conception de l’Ontario. Pour ajouter la grille :

  1. Créez un nouveau cadre ou sélectionnez un cadre existant dans votre document auquel vous souhaitez appliquer le style de grille.
  2. Ajoutez la trousse de prototypage à votre fichier de conception. Dans la barre latérale droite, sélectionnez l’icône à quatre points dans la section Grille de mise en page.
  3. Vous devriez voir les points de rupture (grille) disponibles pour les formats ordinateur, tablette et mobile.
  4. Une fois le composant souhaité repéré, faites-le glisser dans votre cadre Figma.

Utiliser la trousse de prototypage

Une fois la trousse configurée, les polices installées et la grille ajoutée à votre cadre, vous êtes prêt à commencer la création de prototypes.

Commencez en faisant glisser les composants dans votre cadre :

  1. Assurez-vous d’avoir ajouté la bibliothèque à votre fichier de conception.
  2. Sélectionnez l’onglet Ressources dans la barre latérale gauche.
  3. Sélectionnez le menu déroulant Trousse de prototypage UI du Système de conception pour l’Ontario pour afficher tous les composants disponibles.
  4. Une fois le composant souhaité repéré, faites-le glisser dans votre cadre Figma.

Conseils

Rechercher des composants à l’aide de la barre de recherche

Si d’autres bibliothèques sont ajoutées, elles apparaîtront également dans les résultats de recherche. Nous vous recommandons de désactiver les autres bibliothèques afin de vous assurer de consulter uniquement les composants de la trousse de prototypage.

Modifier l’affichage des composants dans la bibliothèque

Par défaut, l’option Afficher sous forme de grille est activée. Vous pouvez la remplacer par Afficher sous forme de liste pour afficher les composants dans une liste.

Modifier les propriétés d’un composant directement dans votre cadre

Après avoir ajouté un composant à votre cadre, vous pouvez modifier ses propriétés (par exemple, l’état d’interaction) directement dans le panneau des propriétés.

Gabarits de pages Figma

Les modèles de pages Figma du Système de conception pour l’Ontario offrent aux conceptrices et concepteurs des modèles préconfigurés et personnalisables, afin de rendre le processus de création de pages plus efficace et plus cohérent. Chaque modèle utilise des composants à mise en page automatique qui s’adaptent dynamiquement lorsque le contenu change, ce qui vous permet d’y intégrer facilement votre propre contenu.

Pour les utiliser :

  1. Copiez le cadre dans votre projet.
  2. Ajoutez ou supprimez des composants selon les besoins de votre conception.

D’autres modèles de pages sont actuellement en cours de création afin de rendre la conception encore plus efficace.

Aide et tutoriels — Figma

Voici quelques liens pour vous aider à apprendre les notions de base de Figma :

Parcourir tous les tutoriels pour débutants.

Ces démonstrations intégrées peuvent vous aider à vous familiariser avec Figma :

Autres outils de conception

Le Système de conception de l’Ontario utilise Figma pour les raisons suivantes :

  • la version gratuite est disponible
  • l’application est accessible sur Windows et macOS, ou peut être utilisée dans un navigateur si vous n’êtes pas autorisé à installer des logiciels

La trousse de prototypage n’est pas offerte pour Adobe XD, Axure ni Sketch.

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.