In diesem Artikel werden wir die grundlegenden Projekteinstellungen in Figma besprechen, das heißt, alles, was Sie wissen müssen, bevor Sie mit dem Designen beginnen. Wir erklären, was Frames, Layout-Raster und Lineale sind. Lesen Sie weiter, um mehr zu erfahren.
Zuerst müssen Sie einen Bereich der Leinwand auswählen, um Ihre Designs zu erstellen. Dafür ist das Frame-Werkzeug gedacht. Sie finden es in der Werkzeugleiste. Nachdem Sie das Frame-Werkzeug aktiviert haben, haben Sie einige Optionen, um einen Frame zu erstellen.
Nachdem Sie einen Frame hinzugefügt und ausgewählt haben, haben Sie Zugriff darauf im Eigenschaften-Panel.
a) Position der Leinwand (X und Y) – hier können Sie die Position des Frames auf der Leinwand entlang der horizontalen (X) und vertikalen (Y) Achse angeben.
b) Abmessungen des Objekts (Breite und Höhe) – hier können Sie die Größe des Frames ändern.
c) Proportionen beibehalten – Damit können Sie die Proportionen des Frames beim Ändern der Größe beibehalten. So können Sie die Höhe oder Breite des Frames ändern, und der zweite Parameter passt sich automatisch an.
d) Größe anpassen – Diese Funktion ermöglicht es Ihnen, den Frame an seinen Inhalt anzupassen.
Nützlicher Tipp: Sie können die Größe des Frames auch manuell ändern: Greifen Sie den Rand oder die Ecke des Frames (der Cursor verwandelt sich in einen schwarzen Doppelpfeil), und ziehen Sie, um die gewünschte Größe zu erhalten.
e) Hochformat und Querformat – hier können Sie die Ausrichtung Ihres Frames auf vertikal oder horizontal ändern.
f) Rotation – damit können Sie den Winkel eines Frames anpassen.
g) Eckenradius – Dank dieser Funktion können Sie die Ecken eines Frames abrunden, um weichere Kanten zu schaffen.
h) Unabhängige Ecken – Die Einstellung für unabhängige Ecken ermöglicht es Ihnen, den Eckenradius für jede Ecke anzupassen.
i) Inhalt zuschneiden – Damit können Sie Objekte ausblenden, die über die Grenzen des Frames hinausgehen.
j) Automatisches Layout – Damit können Sie responsive Frames erstellen.
k) Layout-Raster – Diese Funktion hilft, eine strukturierte Benutzeroberfläche zu erstellen.
l) Füllung – Mit dieser Option können Sie Ihren Frame mit Farbe, Verlauf oder Foto füllen.
m) Strich – Damit können Sie Striche zu einem Frame hinzufügen. Sie können auch erweiterte Stricheinstellungen verwenden, die unter dem Auslassungszeichen zu finden sind.
n) Effekte – Hier können Sie einen Schatten oder Unschärfen zu einem Frame hinzufügen. Klicken Sie auf das Symbol für die Effekt-Einstellungen, um die Schatteneinstellungen anzupassen.
o) Exportieren – Hier können Sie Ihren Frame in die folgenden Formate exportieren: PNG, JPG, SVG und PDF.
Über jedem Frame auf der Leinwand wird sein Name angezeigt. Um ihn zu ändern, klicken Sie zweimal darauf. Sie können Frames zusammen mit ihrem Inhalt kopieren und so oft wie gewünscht auf die Leinwand einfügen.
Aufgabe 3.1
Beginnen Sie mit der Arbeit an dem Projekt, indem Sie die richtige Größe eines Frames auswählen. Nützlicher Tipp: Wenn Sie nicht wissen, welche Größe Ihr Frame haben sollte, wäre es eine gute Wahl, eine der beliebtesten Bildschirmgrößen zu verwenden. Gehen Sie zu https://gs.statcounter.com/screen-resolution-stats für weitere Informationen.In diesem Tutorial werden wir eine E-Commerce-Mobile-App entwerfen, also wählen wir eine der am häufigsten verwendeten Auflösungen für Smartphones – 360×640 px.
Wir werden gemeinsam 3 Projekte vorbereiten.
Nachdem Sie einen Frame hinzugefügt haben, duplizieren Sie ihn sofort und benennen Sie jeden Bildschirm entsprechend, um die Datei organisiert zu halten.
Das Layout-Raster ist ein System aus horizontalen und vertikalen Linien (Spalten oder Reihen), das Ihnen hilft, Elemente in Ihren Frames präzise auszurichten. Ein richtig eingestelltes Raster wird Ihre Arbeit sicherlich erleichtern und den gesamten Designprozess beschleunigen. Es gibt zwei Möglichkeiten, das Layout-Raster in Ihrem Design einzustellen:
Nützlicher Tipp: Wenn Sie ein neuer Designer sind, empfehlen wir, ein Layout-Raster auf jedes Projekt anzuwenden. Es gibt nichts Schlimmeres als einen völlig leeren Arbeitsbereich.
Sie können ein Layout-Raster zu einem aktiven Frame im Eigenschaften-Panel hinzufügen. Sie haben 3 Optionen: Raster, Spalten, Reihe. Sie können mehrere Optionen gleichzeitig auswählen.
Sie können die Einstellungen jedes Rasters im Panel für Layout-Rastereinstellungen anpassen. Sie können die Sichtbarkeit des Rasters jederzeit ein- oder ausschalten, indem Sie auf das Augensymbol klicken.
Nützlicher Tipp: Wenn Sie nicht wissen, welches Layout-Raster Sie in Ihrem Projekt wählen sollen, können Sie das Grid System-Plugin verwenden, das es für Sie erledigt.
Aufgabe 3.2. Stellen Sie das Layout-Raster in Ihrem Projekt ein. Für die Zwecke dieses Projekts haben wir Spalten ausgewählt und die folgenden Werte festgelegt:
Lineale sind eine weitere nützliche Funktion, die Ihnen hilft, die Elemente in der Datei auszurichten und sie in Ordnung zu halten. Um die Linealansicht zu aktivieren, klicken Sie auf das Hauptmenü, dann auf Ansicht und Lineale.
Lineale sind oben und links auf der Leinwand sichtbar. Mit dieser Funktion können Sie vertikale und horizontale Linien (Hilfslinien) erstellen – klicken und halten Sie das gewählte Lineal, und bewegen Sie dann den Cursor in den Bereich der Leinwand. Eine dünne, rote Linie erscheint, die Sie bewegen können. Sie können so viele Hilfslinien erstellen, wie Sie möchten. Sie können unnötige Linien leicht löschen – wählen Sie einfach die Linie aus (die gewählte Linie wird blau), und klicken Sie dann auf Löschen.
Aufgabe 3.3. Experimentieren Sie mit dem Hinzufügen von Linealen. Sie werden hilfreich sein, wenn es darum geht, die Elemente auszurichten.
Sie haben gerade die grundlegenden Projekteinstellungen in Figma kennengelernt. Lesen Sie auch: KI-unterstützte Chatbots.
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.
Startups sind in letzter Zeit ein führendes Geschäftsmodell, und jedes Jahr werden immer mehr Produkte…
Was sind die Vorteile von sozialen Medien? Kann es gezielten Traffic auf Ihre Unternehmenswebsite bringen?…
Wenn Sie auf dem weltweit beliebtesten Marktplatz verkaufen, sind Sie sicherlich besorgt über die Ergebnisse,…
Die Maßnahme der Effektivität eines Marketers ist die Anzahl der Konversionen, d.h. der gewünschten Aktionen,…
Wenn es um KI in der Musikproduktion geht, ist sie am besten in der Co-Kreation…
In dem heutigen Artikel werden wir das Thema der Zusammenarbeit zwischen Product Owner und Scrum…