Einführung

  • 5 Minuten

Willkommen beim Modul Eine Power Apps Canvas-App mit Figma entwerfen. Mit diesem eigenverantwortlichen Unterricht lernen Sie, wie Sie die Designfunktionen von Figma nutzen können, um die Erstellung von Canvas-Apps in Microsoft Power Apps voranzutreiben.

Übersicht

Figma ist ein leistungsstarkes und intuitives Designtool, mit dem Sie außergewöhnliche Benutzeroberflächen erstellen, mit Teammitgliedern zusammenarbeiten und an einem Ort einen Prototyp Ihrer App erstellen können. Figma ist ein cloudbasiertes Designtool und bietet ein konsistentes Erlebnis, bei dem Sie spontan entwerfen oder in Echtzeit mit Teammitgliedern zusammenarbeiten können.

Die benutzerfreundliche Oberfläche bietet Anfängern ein nahezu müheloses App-Design-Erlebnis. Die Plattform bietet eine breite Palette an Funktionen und Funktionalitäten, die Ihnen dabei helfen, Ihre Vision Wirklichkeit werden zu lassen. Mit den robusten Designtools in Figma können Sie Formen, Symbole, Schaltflächen und andere UI-Elemente erstellen und anpassen. Darüber hinaus bietet Figma eine umfangreiche Bibliothek vorgefertigter Komponenten und Designressourcen, wodurch Sie während des Designprozesses Zeit und Aufwand sparen.

Ähnlich wie bei der Zusammenarbeit mit anderen Microsoft-Tools wie Microsoft 365 können Sie mit Figma Ihren Teammitgliedern ermöglichen, an Ihren Projekten zusammenzuarbeiten und Ihre Designs gleichzeitig anzuzeigen und zu bearbeiten. Mit Figma kann jeder nahtlos Feedback geben, Änderungen vornehmen und Designs iterieren. Darüber hinaus bietet Figma Funktionen wie Kommentare und Versionsverlauf, die eine effektive Kommunikation und Nachverfolgung von Design-Iterationen sicherstellen.

Screenshot eines Figma-App-Designprojekts

So verwenden Sie Figma

Figma zeichnet sich durch seine Integrationsfähigkeiten aus, die Sie zur Verbindung mit anderen Tools in Ihrem App-Entwicklungsworkflow nutzen können. Ganz gleich, ob Sie Projektmanagement-Tools, Entwickler-Übergabeplattformen oder Design-Systemintegrationen verwenden: Figma bietet nahtlose Integrationen, die Ihre App-Design‑ und Entwicklungsprozesse optimieren.

  1. Besuchen Sie die Figma-Website.

  2. Wählen Sie im Menü oben rechts Anmelden oder Kostenlos starten aus, falls Sie noch kein Konto in Figma eingerichtet haben.

    Screenshot des oberen Navigationsbereichs der Figma-Website mit den hervorgehobenen Optionen „Anmelden“ und „Kostenlos starten“

  3. Wenn Sie verbunden sind, können Sie mehrere einsatzbereite FigJam-Vorlagen durchsuchen, mit denen Sie Ihre Design‑ oder Lernprozesse beschleunigen können.

    Screenshot von Figma Studio. Der Fokus liegt auf dem Abschnitt „FigJam-Vorlagen“.

  4. Sie können auch ein neues Projekt starten, indem Sie eine Vorlage innerhalb der Figma Community auswählen. Um auf diese Vorlagen zuzugreifen, wählen Sie im linken Navigationsbereich von Figma Studio Community erkunden aus.

    Screenshot des linken Bereichs in Figma Studio. Der Fokus liegt auf der Option „Community erkunden“.

    Die Figma-Community enthält Tausende kostenloser und kostenpflichtiger Vorlagen.

    Screenshot der Seite „Figma-Community“

  5. Während Sie an Ihrem App-Design arbeiten, können Sie UI-Komponenten aus dem Abschnitt Asset des Studios auswählen. Das Studio enthält Elemente wie Formulare, Schaltflächen und Kontrollkästchen, die Sie verwenden können.

    Screenshot des linken Bereichs von Figma Studio. Der Fokus liegt auf dem Abschnitt „Assets“.

  6. Um durch die verschiedenen Abschnitte und Seiten Ihres App-Designs zu blättern, gehen Sie zum Abschnitt Ebenen von Figma Studio.

    Screenshot des linken Bereichs von Figma Studio. Der Fokus liegt auf dem Abschnitt „Ebenen“.

An dieser Stelle können Sie die verschiedenen Möglichkeiten und Funktionen von Figma zum Entwerfen einer App erkunden und mit Teammitgliedern zusammenarbeiten, um dieses Design anzureichern oder zu genehmigen.

Nächste Schritte

Nachdem Sie nun die Grundlagen des Figma-App-Designs kennengelernt haben, können Sie lernen, wie Sie das Figma-UI-Kit zum Entwerfen einer Canvas-App verwenden.