Entwerfen Sie Ihre App mit dem UI-Kit

[Dieser Artikel ist Teil der Dokumentation zur Vorschauversion und kann geändert werden.]

Um eine App aus einem Figma-Design zu erstellen, müssen Sie mit dem Erstellen Sie Apps aus dem Figma UI Kit beginnen. Das UI-Kit besteht aus Komponenten, Beispiel-Apps und mehreren zusätzlichen Ressourcen wie:

• Informationen darüber, was unterstützt wird und was nicht.
• Schritt-für-Schritt-Anleitungen, wie Sie Ihre App in Figma so gestalten, dass sie in Power Apps konvertiert werden kann.
• Eine Liste der unterstützten Komponenten—von einfachen Bildschirmen bis hin zu einzelnen Komponenten wie Schaltflächen, Dropdown-Menüs und Texteingaben.
• Wichtige Hinweise zur Verwendung der Komponenten.

Holen Sie sich das UI-Kit

1. Gehen Sie zur Seite Erstellen Sie Apps aus dem Figma UI Kit.
2. Melden Sie sich bei Bedarf mit Ihren Figma-Zugangsdaten an.
3. Wählen Sie Duplikat, und wählen Sie dann das Figma-Team aus, dem Sie angehören. Weitere Informationen zum Duplizieren von Projekten in Figma finden Sie unter Figma: Doppelte Dateien oder Projekte.
4. Wählen Sie bei Bedarf den Abwärtspfeil neben dem Dateinamen aus und verschieben Sie die Datei aus Ihren Entwürfen.

Lesen Sie die Anweisungen

Lesen Sie die Anweisungen aus den Seiten Lesen Sie dies zuerst und Schritt 1: Erste Schritte im UI-Kit. Die Anweisungen auf diesen Seiten helfen Ihnen, die allgemeinen Richtlinien zur Verwendung dieses Kits zu verstehen. Sie erfahren auch mehr über die vom Kit verwendeten Ressourcen, wie z. B. Schriftstile, Komponentenrichtlinien, unterstützte Komponenten und mehr.

Ihre App entwerfen

Befolgen Sie die Anweisungen auf der Seite Schritt 2: Gestalten Sie Ihre App im UI-Kit, um mit der Verwendung des Kits zum Erstellen Ihres eigenen App-Designs zu beginnen.

Do's and Don'ts beim Entwerfen

Das Kit enthält eine detaillierte Anleitung zur Verwendung der Komponenten. Hier sind jedoch einige der wichtigsten Gebote und Verbote, die Sie beim Entwerfen der App beachten sollten:

• Lesen Sie jede Seite sorgfältig durch, damit der Designprozess und der Konvertierungsprozess reibungslos verlaufen.
• Entwerfen Sie nur mit den unterstützten Komponenten aus diesem Kit.
• Verwenden Sie nur die unterstützten Schriftarten, die im Kit aufgeführt sind.
• Ändern Sie nicht die Namen der Komponententypen.
• Ändern Sie nicht die Ebenen der Komponententypen.

Weitere Informationen

Das Kit bietet auch zusätzliche Seiten für weitere Informationen, wie unten zusammengefasst:

• Schritt 3: In eine App umwandeln – eine visuelle Darstellung der Umwandlung des App-Designs in eine App. Um Schritt-für-Schritt-Anleitungen zu befolgen, siehe Erstellen Sie eine Canvas-App aus Figma.
• Schritt 4: Nächste Schritte – erläutert die möglichen nächsten Schritte, die Sie unternehmen können, um Ihre App weiter auf Ihr Geschäftsszenario vorzubereiten. Diese Schritte beinhalten Verbindung zu Daten, App-Logik hinzufügen , mehr hinzufügen Bildschirme und Steuerelemente.
• Unterstützte Komponenten – listet Informationen zu unterstützten Komponenten auf. Weitere Informationen finden Sie unter Vom UI-Kit unterstützte Komponenten.

Nächster Schritt: Eine Canvas-App aus Figma erstellen

Siehe auch

• Vom UI-Kit unterstützte Komponenten
• Problembehandlung häufiger Fehler