Canvas-App basierend auf einem Figma-Design erstellen

  • 7 Minuten

Mithilfe vom Figma UI-Kit für Power Apps können Sie eine Canvas-App erstellen, die Sie mit einer Datenquelle verbinden und dann Benutzern in Ihrer Organisation zur Verfügung stellen können.

Die ersten für diesen Prozess erforderlichen Schritte umfassen das Abrufen von Konnektivitätsinformationen von Figma zum Power Apps Studio:

  1. Wählen Sie in Figma Studio Zurück zu Dateien.

    Screenshot des linken Navigationsbereichs des Figma-Portals. Der Fokus liegt auf der Option „Zurück zu Dateien“.

  2. Wählen Sie im Menü neben Ihrem Figma-Profilnamen den Eintrag Einstellungen aus.

    Screenshot des linken Navigationsbereichs des Abschnitts „Zurück zu Dateien“ im Figma-Studio. Der Fokus liegt auf der Option „Einstellungen“.

  3. Wählen Sie im neuen Fenster unter Persönliche Zugriffstoken im Abschnitt Konto die Option Neues Token generieren aus.

    Screenshot des Fensters zur Einstellungskonfiguration. Der Fokus liegt auf der Option „Neues Token generieren“ im Abschnitt „Persönliche Zugriffstoken“ unter „Konto“.

  4. Geben Sie im neuen Fenster einen Namen für das Token ein, z. B. Power Apps. Wählen Sie dann Token generieren aus.

    Screenshot des Fensters „Neues Token generieren“. Der Fokus liegt auf dem Tokennamen und der Option „Token generieren“.

  5. Ein neues Token wird generiert. Wählen Sie Dieses Token kopieren aus. Sie werden es später in diesem Prozess noch verwenden.

    Screenshot des Fensters zur Einstellungskonfiguration. Der Fokus liegt auf der Option „Dieses Token kopieren “ im Abschnitt „Persönliche Zugriffstoken“.

  6. Wählen Sie im Power Apps Studio im Abschnitt Start die Kachel Mit einem Seitenentwurf beginnen.

    Screenshot von Power Apps Studio. Der Fokus liegt auf der Kachel „Mit Seitendesign beginnen “ im Abschnitt „Startseite“.

  7. Wählen Sie die Kachel Bild oder Figma-Datei aus.

    Screenshot von Power Apps Studio. Der Fokus liegt auf der Kachel „Bild oder Figma-Datei“.

  8. Wählen Sie die Kachel In Figma beginnen und dann Weiter aus.

    Screenshot von Power Apps Studio. Der Fokus liegt auf der Kachel „In Figma beginnen“ und auf der Option „Weiter“.

  9. Geben Sie im Feld App-Name einen Namen ein, und fügen Sie dann das in Schritt 5 erhaltene Token im Feld Persönliches Figma-Zugriffstoken ein.

    Screenshot von Power Apps Studio. Der Fokus liegt auf den Feldern „App-Name“ und „Persönliches Figma-Zugriffstoken“.

  10. Kehren Sie in Figma Studio zum App-Design zurück, und wählen Sie im Kontextmenü der Seite, die Sie in eine Canvas-App konvertieren möchten, die Option Seitenlink kopieren aus. Wenn Sie eine Fehlermeldung erhalten, ersetzen Sie Design mit Datei in dem kopierten Link.

    Screenshot von Figma Studio. Der Fokus liegt auf der Option „Seitenlink kopieren“.

  11. Fügen Sie den Link in Power Apps Studio in das Feld Link zu Figma-Seite oder ‑Rahmen ein, und wählen Sie App erstellen aus.

    Screenshot von Power Apps Studio. Der Fokus liegt auf den Optionen „Link zu Figma-Seite oder ‑Rahmen“ und „App Erstellen“.

Die Canvas-App kann in Power Apps Studio geändert werden.

Screenshot von Power Apps Studio mit der neu erstellten Canvas-App.

Jetzt können Sie das Formular mit einer Datenquelle verbinden. Außerdem können Sie die App mit Microsoft Power Fx und allen verfügbaren Steuerelementen in Power Apps ergänzen, um App-Benutzern ein reichhaltiges Erlebnis zu bieten.

Übungsschritte (Video)

Das folgende Video zeigt die Schritte für die Übung in dieser Einheit.

Nächste Schritte

Jetzt wissen Sie, wie Sie mit dem Figma-UI-Kit eine Canvas-App auf Grundlage eines Entwurfs erstellen. Der nächste Schritt besteht darin, zu lernen, wie Sie eine Canvas-App basierend auf dem Figma-Entwurf erstellen, das Sie für die Fahrradwerkstatt erstellt haben.