Exercice : concevoir une application d’atelier de réparation de vélos à l’aide de Figma

  • 12 minutes

Dans cet exercice, vous allez explorer certains composants et créer une application d’atelier de réparation de vélos à l’aide du kit d’IU Figma.

Scénario

Vous travaillez dans un magasin de vélos et êtes responsable de soldes VIP à venir. Vous devez planifier les soldes en fonction des préférences client pour les sujets de présentation.

Vous souhaitez concevoir une application canevas où vos collègues peuvent inscrire des participants potentiels et recueillir les préférences des participants à l’aide d’une tablette dédiée.

Votre objectif est de concevoir l’application et de permettre au propriétaire et au directeur marketing du magasin de l’examiner et de formuler des recommandations.

L’application doit vous permettre, à vous et à vos collègues, de recueillir les informations suivantes :

  • Nom, adresse e-mail et numéro de téléphone du client

  • Choix d’un sujet de présentation préféré :

    • Préparation mentale et physique pour les courses

    • Cinq (5) bonnes pratiques hors saison

    • Conseils sur la maintenance préventive

    • Sélection de la taille du vélo selon l’âge, des jeunes aux adultes

Exercice

Regardez la vidéo suivante pour découvrir les étapes de cette unité :

  1. Accédez à la page web Kit d’IU Figma.

  2. Cliquez sur Ouvrir dans Figma.

    Capture d’écran de la page web Kit d’IU Figma illustrant le bouton Ouvrir dans Figma cliqué.

  3. En regard du nom du kit, sélectionnez Dupliquer dans la liste des actions.

    Capture d’écran de la page web Kit d’IU Figma mettant l’accent sur l’option Dupliquer dans le menu déroulant en regard du nom de la conception.

  4. Sous Couches dans le volet de navigation gauche, cliquez sur le symbole plus (+) en regard de Pages afin de créer un canevas pour la conception de l’application.

    Capture d’écran du volet de navigation gauche du studio Figma. L’accent est mis sur l’onglet Couches et le signe plus en regard de Pages.

  5. Redéfinissez le nom de la page sur Événement VIP pour vélos.

    Capture d’écran du volet de navigation gauche du studio Figma. L’accent est mis sur la page dont le nom est redéfini sur Événement VIP pour vélos.

  6. Dans la section Ressources du studio, sélectionnez le facteur de forme Tablette, puis déplacez un composant Screen sur la page venant d’être créée.

    Capture d’écran du studio Figma. L’accent est mis sur le composant Screen situé sous la section Tablette, dans l’onglet Ressources du volet de navigation gauche.

    Veillez à faire glisser le composant au lieu de le sélectionner d’un simple clic. Si vous sélectionnez accidentellement le composant d’un simple clic, l’écran suivant s’affiche. Si ce scénario se produit, revenez à la page Événement VIP pour vélos sous Couches, puis répétez cette étape.

    Capture d’écran du studio Figma. L’accent est mis sur les composants dans le studio et sur l’onglet Couches.

  7. Pour permettre l’ajout de composants sur l’écran, vous devez d’abord détacher l’écran. Sélectionnez Détacher l’instance dans le menu contextuel en cliquant avec le bouton droit sur le composant d’écran.

    Capture d’écran du composant d’écran dans le studio Figma. L’accent est mis sur l’option Détacher l’instance du menu contextuel.

  8. Supprimez la zone de texte informative en la sélectionnant, puis en appuyant sur la touche Supprimer de votre clavier.

    Capture d’écran du composant d’écran dans le studio Figma. L’accent est mis sur la zone de texte du composant de page.

  9. Pour renommer le composant d’écran, double-cliquez sur le libellé situé en haut du composant d’écran, puis saisissez le nom Home Screen.

    Capture d’écran du composant d’écran dans le studio Figma. L’accent est mis sur le libellé du composant.

  10. Ajoutez les composants nécessaires à partir de la liste Tablette. Ces composants permettent aux collaborateurs d’inscrire des clients à l’événement.

    1. Sous la zone des composants Tablette, dans la section 00 Déroulant, ajoutez un composant Form.

    2. Redimensionnez et déplacez le formulaire pour avoir les coordonnées et dimensions suivantes :

      • X : 0

      • Y : 60

      • Width : 1366

      • Height : 648

    3. Suivez les instructions de l’étape 7 pour détacher le formulaire.

      Capture d’écran du studio Figma affichant le composant Form et la définition des coordonnées et dimensions du cadre dans la section Cadre du volet de navigation droit.

    4. Dans le coin supérieur gauche, cliquez sur Couches, puis sous Home Screen et msft_Form, supprimez le libellé du texte d’information en le sélectionnant, puis en appuyant sur la touche Supprimer de votre clavier.

      Capture d’écran du studio Figma. L’accent est mis sur le composant de texte situé dans le volet de navigation gauche.

  11. Dans le formulaire, ajoutez les champs de saisie permettant de capturer les informations client pour l’événement. Compte tenu du facteur de forme Tablette et de la saisie de données dans un composant de formulaire, sélectionnez tous les nouveaux composants dans la section Tablette / Cartes de données horizontales du volet de navigation gauche Ressources.

    Capture d’écran du studio Figma. L’accent est mis sur la liste de composants Cartes de données horizontales située sous la section Tablette, dans l’onglet Ressources du volet de navigation gauche.

  12. Ajoutez les composants suivants et définissez les propriétés de composant à l’aide du volet de navigation droit : Pour modifier la propriété Text de chacun, sélectionnez trois fois le texte dans le composant lui-même jusqu’à ce qu’un surlignage bleu s’affiche sur le texte, puis saisissez le texte :

    • 00 Header, Dividers (zone de texte de titre avec les propriétés suivantes) :

      Text : formulaire d’inscription à l’événement VIP

    • 03 TextInput, Dropdown, ComboBox (zone de saisie de texte permettant de capturer le nom d’un client) :

      Text : Nom du client :

    • 03 TextInput, Dropdown, ComboBox (zone de saisie de texte permettant de capturer l’adresse e-mail d’un client) :

      Text : Adresse e-mail du client :

    • 03 TextInput, Dropdown, ComboBox (zone de saisie de texte permettant de capturer le numéro de téléphone d’un client) :

      Text : Numéro de téléphone :

    • 04 Toggle, CheckBox, Radio (groupe d’options de présentation parmi lesquelles choisir) :

      • Text : Préférences de présentation :

      • Libellés d’option :

        • Préparation mentale et physique pour les courses

        • Cinq (5) bonnes pratiques hors saison

        • Conseils sur la maintenance préventive

        • Sélection de la taille du vélo selon l’âge, des jeunes aux adultes

    Capture d’écran du studio Figma avec la section des composants, les composants du formulaire avec les champs de saisie ajoutés et la section de conception.

  13. Ajoutez un bouton Envoyer en dehors du formulaire et définissez la propriété X sur 1175 et la propriété Y sur 720. Redéfinissez la propriété Text du contrôle Bouton sur Envoyer.

    Capture d’écran du studio Figma avec le composant Bouton, le bouton Envoyer et la section des coordonnées du cadre.

Étapes suivantes

Vous savez maintenant comment concevoir une application à l’aide du kit d’IU Figma, qui vous permet de créer une application canevas. Votre prochaine étape consiste à découvrir comment créer une application canevas sur la base d’une conception Figma.