In diesem Artikel werden wir die Elemente der Figma-Oberfläche besprechen. Sich zu Beginn mit der Oberfläche vertraut zu machen, wird Ihre spätere Arbeit erheblich erleichtern. Wir werden den Datei-Browser und die Anwendungsoberfläche beim Bearbeiten einer Datei besprechen. Lesen Sie weiter, um mehr zu erfahren.
Das erste, was Sie sehen werden, nachdem Sie sich bei Figma angemeldet haben, ist der Datei-Browser, der es Ihnen ermöglicht, durch Ihr Konto zu navigieren. Von hier aus können Sie auf Ihre Projekte, Teams und Ressourcen zugreifen. Die Datei-Browser-Oberfläche besteht aus 3 Abschnitten: Navigationsleiste, Seitenleiste und Dateien.
1. Navigationsleiste befindet sich oben auf dem Bildschirm und ermöglicht es Ihnen, bestimmte Aktionen auf Kontoebene auszuführen.
A) Benutzername – hier wird der Name des aktiven Benutzers angezeigt. Wenn Sie darauf klicken, können Sie zwischen den Konten wechseln, in die Sie auf einem bestimmten Gerät angemeldet sind.
B) Suchleiste – in diesem Abschnitt können Sie schnell nach Projekten, Kollegen und Dateien nach Namen suchen.
C) Benachrichtigungen – hier erscheinen Benachrichtigungen über alles, was in Ihrem Konto passiert.
D) Kontomenü – hier können Sie Ihre Kontoeinstellungen und installierten Plugins verwalten.
Nützlicher Tipp: Wenn Sie die Figma-Desktop-App verwenden, können Sie einfach zwischen Projekten und dem Datei-Browser wechseln. Projekte öffnen sich als neue Tabs, und der Datei-Browser ist mit dem Home-Symbol gekennzeichnet.
2. Seitenleiste – dies ist der Bereich der Benutzeroberfläche, der sich auf der linken Seite des Bildschirms befindet. Sie ermöglicht es Ihnen, durch Dateien und Prototypen zu navigieren.
Zuletzt verwendet – in diesem Tab werden die Dateien und Prototypen angezeigt, die Sie zuletzt angesehen oder bearbeitet haben.
Entwürfe – hier sehen Sie alle Entwurfsversionen, die Sie erstellt haben. Zusätzlich finden Sie den Tab Gelöscht, in dem Sie archivierte Dateien anzeigen können.
Sie können bereits gelöschte Dateien wiederherstellen oder dauerhaft löschen – klicken Sie mit der rechten Maustaste auf die Datei, um diese Optionen zu sehen.
Community – dies ist ein Bereich, in dem Sie Dateien und Plugins durchsuchen können, die von anderen Figma-Nutzern geteilt wurden. Wir werden in unserem nächsten Blogbeitrag auf diesen Abschnitt zurückkommen.
Teams – hier sehen Sie alle Teams, zu denen Sie gehören.
3. Dateien – in diesem Abschnitt werden alle Ihre Dateien angezeigt.
Für jede Seite im Datei-Browser können Sie wählen, wie die Dateien angezeigt werden: Als Grid anzeigen oder Als Liste anzeigen. Standardmäßig ist die Rasteransicht eingestellt.
Dateien können nach Ihren Bedürfnissen gefiltert und sortiert werden.
Über der Liste der Dateien in den Tabs Zuletzt verwendet und Entwürfe befinden sich Schaltflächen zum Hinzufügen von Dateien: Neue Design-Datei oder Neue FigJam-Datei. Jeder Dateityp hat sein eigenes Set an Funktionen und Werkzeugen.
Design-Dateien ermöglichen es Ihnen, Ihre Benutzeroberflächendesigns zu erstellen.
FigJam-Dateien sind digitale Whiteboards, die unter anderem für Online-Meetings und Workshops verwendet werden.
Aufgabe 2.1. Machen Sie sich mit der Datei-Browser-Oberfläche in Figma vertraut und öffnen Sie Ihr erstes Projekt. Verwenden Sie die Schaltfläche Neue Design-Datei.
Ihre Benutzeroberfläche beim Bearbeiten einer Datei in Figma besteht aus vier Abschnitten: Leinwand, Werkzeugleiste, Ebenen-Panel, Eigenschaften-Panel.
1. Leinwand ist der Hauptbereich, der sich in der Mitte des Bildschirms befindet. Dies ist der Raum, in dem Sie arbeiten werden.
2. Werkzeugleiste ist die Leiste, die sich oben auf dem Bildschirm befindet. Hier finden Sie die notwendigen Werkzeuge und Funktionen, die Sie zum Entwerfen von Benutzeroberflächen benötigen.
a) Hauptmenü – an diesem Ort haben Sie Zugriff auf die Liste aller Funktionen in Figma. Tastenkombinationen werden ebenfalls in der Liste angezeigt.
Nützlicher Tipp: Sie können alle Tastenkombinationen in einem speziellen Panel anzeigen. Um es zu aktivieren, klicken Sie auf Hauptmenü > Hilfe und Konto > Tastenkombinationen.
Das Hauptmenü enthält die folgenden Optionen:
b) Bewege- und Skaliere-Werkzeuge
c) Rahmen- und Schnittwerkzeuge
d) Formen-Werkzeuge – hier finden Sie grundlegende geometrische Formen und die Funktion Bild platzieren.
e) Stift- und Bleistiftwerkzeuge
f) Text-Werkzeug – es erstellt Text-Ebenen.
g) Hand-Werkzeug – es ermöglicht Ihnen, sich im Projekt zu bewegen und innerhalb der Datei zu klicken, ohne Objekte versehentlich auszuwählen und zu verschieben.
h) Kommentar-Werkzeug – es ermöglicht Ihnen, schnell Ideen mit Teammitgliedern auszutauschen.
i) Dateiname – hier können Sie den Speicherort der Datei oder ihren Namen sehen und ändern.
j) Benutzer – hier sehen Sie die Personen, die derzeit eine Datei anzeigen oder bearbeiten.
Nützlicher Tipp: Wenn Sie im Team arbeiten, können Sie auf das Avatar eines anderen Benutzers klicken, um den Beobachtungsmodus zu aktivieren und ihre Aktionen in Echtzeit zu verfolgen. Die Leinwand und das Avatar des verfolgten Benutzers werden mit einem farbigen Rahmen markiert, wenn der Beobachtungsmodus aktiviert ist.
Sie können sich auch sichtbarer machen, damit andere Teammitglieder Ihre Aktionen leicht verfolgen können. Klicken Sie auf Ihr Avatar und wählen Sie Spotlight me.
k) Freigabeeinstellungen – hier können Sie den Zugriff anderer Benutzer auf die Datei verwalten.
l) Präsentieren – diese Option ermöglicht es Ihnen, die Datei anzuzeigen und mit den erstellten Prototypen zu interagieren.
m) Zoom-/Ansichtsoptionen – hier können Sie die Dateiansichtsoptionen schnell anpassen.
3. Das Ebenen-Panel ist der Bereich auf der linken Seite des Bildschirms. Hier werden alle Komponenten und Ebenen der Datei angezeigt.
a) Ebenen – hier sehen Sie alle Objekte, die zur Leinwand hinzugefügt wurden. Jedes Objekt ist eine separate Ebene. Neben jeder Ebene sehen Sie ein Symbol, das ihren Typ anzeigt.
Sie können den Namen der Ebene ändern, indem Sie doppelt auf die ausgewählte Ebene im Ebenen-Panel klicken.
Nützlicher Tipp: Es ist nicht einfach, sich daran zu erinnern, die Namen der Standardebenen zu ändern, aber versuchen Sie, es im Hinterkopf zu behalten. Dies wird Ihre Datei in Ordnung halten und es einfacher machen, ein bestimmtes Element zu finden, wenn Sie es bearbeiten möchten. Wenn Sie jedoch trotzdem vergessen, ist nichts verloren. Es gibt Plugins wie “Clean Document”, die Ihnen helfen, das Chaos zu beseitigen.
Neue Objektebenen werden im übergeordneten Rahmen oder in der Gruppe platziert. Dies ermöglicht es, die Ansicht der Rahmen- und Gruppenelemente ein- und auszuklappen.
Sie können jede Ebene sperren und entsperren. Klicken Sie dazu auf das Vorhängeschloss-Symbol, das neben dem Ebenennamen erscheint, wenn Sie mit der Maus über die Ebene fahren. Sie können gesperrte oder unsichtbare Ebenen sehr leicht von anderen Ebenen unterscheiden, da sie mit einem geeigneten Symbol gekennzeichnet sind.
Nützlicher Tipp: Die Möglichkeit, Ebenen zu sperren, ist sehr nützlich, insbesondere wenn einige von ihnen im Hintergrund sind. Dies hilft Ihnen, versehentliches Verschieben von Elementen zu vermeiden.
Hier können Sie auch die Sichtbarkeit der ausgewählten Ebenen ein- und ausschalten. Klicken Sie dazu auf das Augensymbol. Sie können gesperrte und deaktivierte Ebenen in der Liste der Ebenen sehr leicht unterscheiden – sie sind mit geeigneten Symbolen gekennzeichnet.
b) Assets – In diesem Tab sehen Sie die Komponenten, die Sie in Ihrer Datei verwenden können. Dies können Icons, Schaltflächen oder andere komplexere Benutzeroberflächenelemente sein. Um eine bestimmte Komponente zu finden, verwenden Sie das Suchfeld. Komponenten können in der aktuellen Datei und in den Bibliotheken, auf die Sie Zugriff haben, gesucht werden.
c) Seite – Sie können in jeder Datei eine unbegrenzte Anzahl von Seiten hinzufügen. Jede Seite hat ihren eigenen Leinwand-Hintergrund, sodass Sie in einer Datei separate Prototypen erstellen können.
Nützlicher Tipp: Sie können die Breite des Ebenen-Panels anpassen. Greifen Sie dazu den rechten Rand dieses Panels – Ihr Cursor verwandelt sich in einen weißen Doppelpfeil. Ziehen Sie dann den Rand, bis Sie die gewünschte Breite erreicht haben.
4.Eigenschaften-Panel ist der Bereich auf der rechten Seite des Bildschirms, der aus drei Tabs besteht: Design, Prototyp, Inspizieren.
a) Design – hier können Sie die Eigenschaften aller Ebenen: Rahmen, Formen und Texte anzeigen und anpassen.
b) Prototyp – hier finden Sie die Einstellungen des Prototyps und die Verbindungen zwischen den Elementen in der Datei.
c) Inspizieren – in diesem Tab können Sie sehen, wie Sie die einzelnen Objekte Ihres Projekts in Code umsetzen. Die verfügbaren Formate sind: CSS, Android und iOS.
Aufgabe 2.2. Machen Sie sich mit der Datei-Oberfläche in Figma vertraut. Stellen Sie sicher, dass Sie bereits die Namen der Hauptbestandteile der Oberfläche kennen, damit es Ihnen leichter fällt, sich beim praktischen Arbeiten durch die Datei zu navigieren.
Das ist alles, was Sie über die Figma-Oberfläche wissen müssen. Schauen Sie sich unsere anderen Artikel an: Scaling scrum.
Wenn Ihnen unsere Inhalte gefallen, treten Sie unserer aktiven Community auf Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.
Ein Grafik- und UX-Designer, der in das Design vermittelt, was in Worten nicht ausgedrückt werden kann. Für ihn hat jede verwendete Farbe, Linie oder Schriftart eine Bedeutung. Leidenschaftlich in Grafik- und Webdesign.
Weißt du, wie man ein E-Book erstellt? Kennst du alle wesentlichen Aspekte des E-Book-Produktionsprozesses? Der…
Nachhaltiges Marketing ist nicht mehr nur eine der Marketingstrategien, die Sie in Ihrem Unternehmen anwenden…
In letzter Zeit sind zwei Phänomene auf dem Arbeitsmarkt aufgetaucht, die mit den Einstellungen zeitgenössischer…
Wie verkauft man auf Pinterest und warum sollte man es tun? Der Verkauf auf Pinterest…
Sind Sie ein Freelancer, der nach Möglichkeiten sucht, sein Portfolio zu bewerben? Heutzutage können nicht…
Die digitale Finanzverwaltung und Online-Buchhaltung sind in der Geschäftswelt zunehmend beliebt geworden. Laut einem Bericht…