Créer une application canevas sur la base d’une conception Figma

  • 7 minutes

À l’aide du kit d’IU Figma pour Power Apps, vous pouvez créer une application canevas que vous pouvez connecter à une source de données, puis mettre à la disposition des utilisateurs de votre organisation.

Les premières étapes requises pour ce processus impliquent l’obtention d’informations de connectivité à partir de Figma pour Power Apps Studio :

  1. Dans le studio Figma, cliquez sur Revenir aux fichiers.

    Capture d’écran du volet de navigation gauche du studio Figma mettant l’accent sur le bouton Revenir aux fichiers.

  2. Cliquez sur Paramètres dans le menu en regard de votre nom de profil Figma.

    Capture d’écran du volet de navigation gauche de la section Revenir aux fichiers dans le studio Figma. L’accent est mis sur le bouton Paramètres.

  3. Dans la nouvelle fenêtre, cliquez sur Générer un jeton dans la section Jetons d’accès personnels sous Compte.

    Capture d’écran de la fenêtre de configuration des paramètres. L’accent est mis sur le bouton Générer un jeton dans la section Jetons d’accès personnels sous Compte.

  4. Dans la nouvelle fenêtre, indiquez un nom pour le jeton, par exemple Power Apps, puis cliquez sur Générer un jeton.

    Capture d’écran de la fenêtre Générer un jeton mettant l’accent sur le nom du jeton et le bouton Générer un jeton.

  5. Un jeton est alors généré. Cliquez sur Copier ce jeton pour l’utiliser ultérieurement dans ce processus.

    Capture d’écran de la fenêtre de configuration des paramètres. L’accent est mis sur le bouton Copier ce jeton dans la section Jetons d’accès personnels.

  6. Dans la section Accueil de Power Apps Studio, cliquez sur la vignette Commencer par une conception de page.

    Capture d’écran de Power Apps Studio. L’accent est mis sur la vignette Commencer par une conception de page dans la section Accueil.

  7. Cliquez sur la vignette Un fichier image ou Figma.

    Capture d’écran de Power Apps Studio. L’accent est mis sur la vignette Un fichier image ou Figma.

  8. Cliquez sur la vignette Démarrer à partir de Figma, puis sur Suivant.

    Capture d’écran de Power Apps Studio. L’accent est mis sur la vignette Démarrer à partir de Figma et sur le bouton Suivant.

  9. Saisissez un nom dans le champ Nom de l’application, puis collez le jeton que vous avez obtenu à l’étape 5 dans le champ Jeton d’accès personnel Figma.

    Capture d’écran de Power Apps Studio. L’accent est mis sur les champs Nom de l’application et Jeton d’accès personnel Figma.

  10. Dans le studio Figma, revenez à la conception de l’application, puis sélectionnez Copier le lien vers la page dans le menu contextuel de la page que vous souhaitez convertir en application canevas. Si vous recevez une erreur, remplacez design par file dans le lien copié.

    Capture d’écran du studio Figma mettant l’accent sur l’option Copier le lien vers la page.

  11. Dans Power Apps Studio, collez le lien dans le champ Lien vers une page ou un cadre Figma, puis cliquez sur Créer l’application.

    Capture d’écran de Power Apps Studio. L’accent est mis sur le champ Lien vers une page ou un cadre Figma et le bouton Créer l’application.

L’application canevas peut être modifiée dans Power Apps Studio.

Capture d’écran de Power Apps Studio avec l’application canevas venant d’être créée.

À présent, vous pouvez connecter le formulaire à une source de données. De plus, vous pouvez compléter l’application à l’aide de Microsoft Power Fx et de tous les contrôles disponibles dans Power Apps pour offrir une expérience riche aux utilisateurs de l’application.

Étapes de l’exercice (vidéo)

La vidéo suivante présente les étapes de l’exercice de cette unité :

Étapes suivantes

Vous savez maintenant comment créer une application canevas sur la base d’une conception à l’aide du kit d’IU Figma. Votre prochaine étape consiste à découvrir comment créer une application canevas sur la base de la conception Figma que vous avez créée pour l’atelier de réparation de vélos.