Wie man Formen in Figma erstellt? Figma für Anfänger #4

In diesem Artikel finden Sie eine Beschreibung der Werkzeuge zum Erstellen und Bearbeiten der Formen, die jedes Ihrer Projekte ausmachen werden. Sie werden die grundlegenden Optionen zur Formbearbeitung und fortgeschrittenere Funktionen wie Boolesche Gruppen und Maskenerstellung kennenlernen. Wie erstellt man Formen in Figma? Lesen Sie weiter und finden Sie es heraus.

Wie man Formen in Figma erstellt – Inhaltsverzeichnis:

1. Formen hinzufügen
2. Eigenschaften-Panel – Design
3. Objekt bearbeiten
4. Boolesche Gruppen
5. Masken

Formen hinzufügen

Sie können eine Form mit der Funktion Formwerkzeuge hinzufügen, die Sie in der Werkzeugleiste finden. Diese Funktion ermöglicht es Ihnen, grundlegende Vektorformen zu erstellen: Rechteck, Linie, Pfeil, Ellipse, Polygon, Stern.

Sie können auch benutzerdefinierte Formen mit den Zeichenwerkzeugen erstellen. Sie können entweder einen Stift oder einen Bleistift wählen.

Wie im Fall von Rahmen gibt es viele Möglichkeiten, Formen zu erstellen:

• Nachdem Sie eine Form aus der Liste der Formwerkzeuge ausgewählt haben, klicken Sie auf den Rahmen oder den Zeichenbereich. Dadurch wird eine Form mit einer Standardgröße von 100×100 px erstellt.
• Wenn Sie die Größe des erstellten Elements kontrollieren möchten, klicken Sie auf den Rahmen oder den Zeichenbereich und halten Sie die linke Maustaste gedrückt, während Sie die Größe der Form ändern.
• Wenn Sie ein perfektes Quadrat, einen Kreis oder ein Polygon erstellen möchten, halten Sie die Umschalttaste gedrückt, während Sie ziehen.

Jede Form, jedes Textobjekt oder Bild, das Sie in den Zeichenbereich hinzufügen, wird eine separate Ebene sein. Dies ermöglicht es Ihnen, die einzelnen Eigenschaften jedes Elements zu ändern.

Eigenschaften-Panel – Design

Sie können die Eigenschaften von Objekten im Design-Tab des Eigenschaften-Panels anzeigen und bearbeiten. Der Typ der Ebene bestimmt, welche Parameter hier angezeigt werden. Die meisten Parameter sind in allen Ebenentypen gleich. Wenn Sie keine Ebene auswählen, zeigt das Eigenschaften-Panel alle lokalen Stile für die Datei und die Farbe des Zeichenbereichs an.

Im Design-Tab können Sie die folgenden Parameter hinzufügen:

1. Ausrichtung – Die Ausrichtungswerkzeuge ermöglichen es Ihnen, Ebenen im Zeichenbereich korrekt zueinander auszurichten. Diese Funktionen sind nur verfügbar, wenn zwei oder mehr Ebenen ausgewählt sind.

2. Verteilung und Aufräumen – Diese Funktion ermöglicht es Ihnen, Ebenen zu organisieren, indem Sie gleichmäßige Abstände zwischen ihnen schaffen. Diese Funktionen sind nur verfügbar, wenn zwei oder mehr Ebenen ausgewählt sind.

3. Position des Zeichenbereichs (X und Y) – Hier können Sie die Position der Ebenen im Zeichenbereich entlang der horizontalen (X) und vertikalen (Y) Achsen anpassen.

4. Abmessungen des Objekts (Breite und Höhe) – Hier können Sie die Größe einer Ebene ändern.

5. Proportionen beibehalten – Ermöglicht es Ihnen, die Proportionen der Form beim Ändern der Größe beizubehalten. Sie können die Höhe oder Breite der Form ändern, und der zweite Parameter wird automatisch angepasst.

6. Drehung – Hier können Sie den Winkel eines Rahmens festlegen.

7. Eckenradius – Mit dieser Funktion können Sie die Ecken des Rahmens abrunden.

8. Unabhängige Ecken – Die Einstellung für unabhängige Ecken ermöglicht es Ihnen, den Eckenradius für jede Ecke anzupassen.

9. Ebene (Mischmodi) – Hier können Sie angeben, wie zwei Ebenen miteinander verschmelzen sollen. Sie können nur einen Mischmodus auf jede Ebene anwenden.

10. Füllung und Kontur – Sie können Füllungen und Konturen auf Formen und Textschichten anwenden. Um eine Füllung oder Kontur hinzuzufügen, wählen Sie die gewünschte Ebene aus und klicken Sie auf das +-Symbol. Sie können mehrere Füllungen und Konturen zu jeder Ebene hinzufügen.

Für Füllungen und Konturen ist standardmäßig eine einfarbige Füllung eingestellt. Um die Eigenschaften anzupassen, klicken Sie auf das Farbmuster. Dies öffnet den Farbsektor, in dem die Optionen verfügbar sind: Einfarbig, Verlauf (linear, radial, winkel, diamant) und Bild.

Wenn Sie den Konturstil weiter ändern müssen, können Sie die erweiterten Kontureinstellungen verwenden, die unter dem Ellipsen-Symbol verfügbar sind.

Nützlicher Tipp: Sie können die Sichtbarkeit jeder Eigenschaft in der aktiven Ebene mit dem Augensymbol ein- und ausschalten. Aktive Eigenschaften werden in Schwarz angezeigt, sodass Sie sie leicht von den inaktiven unterscheiden können.

11.Effekte – Hier können Sie einer Ebene einen Schatten oder Unschärfe hinzufügen. Um die Effektwerte anzupassen, klicken Sie auf die Effekt-Einstellungen, die sich unter dem Button mit dem Sonnensymbol befinden.

12.Export-Einstellungen – Hier können Sie die ausgewählte Ebene in das Format Ihrer Wahl exportieren: PNG, JPG, SVG und PDF.

Aufgabe 4.1. Planen Sie das Layout der Benutzeroberflächenelemente Ihrer Anwendung. Erstellen Sie zunächst Drahtmodelle mit einfachen Formen.

Nützlicher Tipp: Denken Sie daran, jeder Ebene regelmäßig passende Namen zu geben. Wenn Sie dies nicht im Auge behalten, werden Sie sicherlich ein Durcheinander in Ihren Ebenen verursachen.

Beginnen wir mit dem Anmeldebildschirm:

• Oben auf dem Bildschirm platzieren wir das Logo der zu gestaltenden Anwendung.
• Darunter werden Platzhalter mit Beschriftungen für: Benutzername und Passwort sein. An diesem Punkt können Sie den Platz für den Text mit einem Rechteck markieren.
• Unten auf dem Bildschirm platzieren wir die Anmeldeschaltfläche.

Nützlicher Tipp: Wenn Sie ein Logo für Ihr Projekt suchen, besuchen Sie diese Website: https://www.freepik.com/free-photos-vectors/logo und laden Sie es kostenlos herunter.

Jede Datei auf Freepik.com hat einen Lizenzhinweis. Stellen Sie vor dem Herunterladen sicher, dass die Lizenz es Ihnen erlaubt, sie nach Ihren Bedürfnissen zu verwenden.

Sie können auch ein Logo verwenden, das im Plugin “Logo Creator” verfügbar ist.

Jetzt kümmern wir uns um den Home-Rahmen:

• Wir werden eine Suchleiste oben auf dem Bildschirm platzieren.
• Darunter wird die Überschrift “Bestseller” stehen.
• Unter der Überschrift platzieren wir Produktbilder in zwei Spalten. Erstellen Sie ein Rechteck, das einer Spalte entspricht, und duplizieren Sie es mehrmals.
• Unter jedem Produkt sollte Platz für den Namen und den Preis sein.
• Ein weiteres Element unserer Benutzeroberfläche wird die untere Leiste sein, in der wir die Symbole: Startseite, Favoriten, Profil, Warenkorb platzieren.

Nützlicher Tipp: Sie können ganz einfach Symbole zu Ihrem Projekt hinzufügen, indem Sie sie aus der Figma-Bibliothek kopieren.

Community. Sie finden hier eine Beispieldatei: https://www.figma.com/community/file/1118814949321037573.

Klicken Sie einfach auf die Schaltfläche Eine Kopie erhalten, und es wird die Datei Iconia geöffnet – ein vollständig bearbeitbares Icon-Paket mit über 1.300 einsatzbereiten und skalierbaren Vektorsymbolen in 6 einzigartigen Stilen. Um die ausgewählten Symbole zu kopieren, gehen Sie zur Iconia-Bibliotheksseite im Ebenen-Panel.

Finden Sie das Symbol, das Sie in Ihrer Datei verwenden möchten, klicken Sie mit der rechten Maustaste darauf und wählen Sie Kopieren. Gehen Sie dann zurück zu Ihrer Datei, klicken Sie erneut mit der rechten Maustaste irgendwo und wählen Sie Einfügen. Eine andere Möglichkeit, Symbole hinzuzufügen, besteht darin, Plugins zu verwenden.

Denken Sie daran, dass die Konsistenz der Benutzeroberfläche sehr wichtig ist. Entscheiden Sie sich für einen Stil von Symbolen und halten Sie sich überall in Ihrer Anwendung daran. Wenden Sie dasselbe Prinzip später auf Textstile, Bildgrößen und andere Elemente an.

Sobald Sie das Layout der Elemente auf der Startseite geplant haben, können Sie zum Produkt-Rahmen übergehen:

• Oben auf dem Bildschirm platzieren wir die Schaltfläche “Zurück” auf der linken Seite.
• Darunter wird ein großes Foto des Produkts sein.
• In der rechten Ecke des Fotos platzieren wir eine Schaltfläche mit dem “Favorit”-Symbol.
• Unter dem Foto platzieren wir den Namen und den Preis des Produkts sowie Platz für eine Beschreibung.
• Unten auf dem Bildschirm fügen wir eine CTA-Schaltfläche “In den Warenkorb legen” hinzu.

Objekt bearbeiten

Sie können alle Formen ganz einfach mit dem Werkzeug Objekt bearbeiten ändern, das sich in der Mitte der Werkzeugleiste befindet. Um diese Funktion zu nutzen, müssen Sie zunächst die Form auswählen, die Sie ändern möchten.

Wenn Sie den Bearbeitungsmodus aktivieren, erscheinen neue Funktionen in der Werkzeugleiste, und Sie sehen Eckpunkte auf der bearbeiteten Form. Sie können auf den gewünschten Eckpunkt klicken und ihn ziehen, um die Form einer Form zu ändern.

Sie können auch andere Eckpunkte zur Form mit dem Stiftwerkzeug hinzufügen. Dies ermöglicht Ihnen, weitere Änderungen vorzunehmen.

Sie können Formen frei mit dem Biegewerkzeug biegen. Wählen Sie das Biegewerkzeug in der Werkzeugleiste aus und klicken Sie dann auf den gewählten Eckpunkt.

Das Werkzeug Farbenkübel ermöglicht es Ihnen, die Füllung einer Form zu entfernen und wiederherzustellen. Wählen Sie dazu Farbenkübel aus und klicken Sie dann auf die Form, die Sie bearbeiten.

Um den Bearbeitungsmodus zu verlassen, klicken Sie auf Fertig.

Boolesche Gruppen

Wenn Sie zwei oder mehr Formen auswählen, erscheint das Werkzeug für Boolesche Gruppen in der Werkzeugleiste. Es ermöglicht Ihnen, benutzerdefinierte Formen zu erstellen, indem Sie sie mit einer der vier verfügbaren Formeln kombinieren: Vereinigung, Subtraktion, Schnittmenge, Ausschluss.

• Vereinigungsauswahl – kombiniert die ausgewählten Formen zu einer neuen Form.

• Subtraktionsauswahl – subtrahiert alle oberen Formen und deren überlappenden Bereiche von der untersten Form.

• Schnittmengen-Auswahl – die neue Form besteht nur aus überlappenden Fragmenten der ausgewählten Formen.

• Ausschlussauswahl – die erstellte Form besteht nur aus Fragmenten der ausgewählten Formen, die sich nicht überlappen.

Nach der Anwendung des Werkzeugs für Boolesche Gruppen verschmelzen alle ausgewählten Formen zu einer einzigen Ebene, was bedeutet, dass sie Füll- und Kontureigenschaften teilen. Sie können sie mit anderen Formen kombinieren und weitere logische Operationen durchführen.

Aufgabe 4.2. Üben Sie das Bearbeiten von Formen mit den Werkzeugen Objekt bearbeiten und Boolesche Gruppen. Auch wenn Sie diese Funktionen in dieser Phase Ihres Projekts nicht benötigen, ist es sinnvoll, Ihr Wissen durch Übung zu festigen. Seien Sie kreativ und haben Sie Spaß. Sie können auch versuchen, die Beispielformen, die Sie im folgenden Screenshot sehen, nachzubilden. Erstellen Sie dazu eine neue Seite in der Datei oder fügen Sie Objekte neben den Rahmen mit dem Projekt hinzu und löschen Sie sie dann einfach.

Masken

Masken ermöglichen es Ihnen, nur ausgewählte Bereiche eines Bildes anzuzeigen und den Rest zu verbergen, ohne zuzuschneiden. Das bedeutet, dass kein Teil der Ebenen im Maskierungsprozess entfernt oder geändert wird, sodass Sie die Maske jederzeit ändern können, wenn Sie einen anderen Teil des Bildes anzeigen möchten.

Um dies besser zu verstehen, können Sie sich einen Bilderrahmen mit einer kleinen Öffnung vorstellen. Sie sehen nur einen Teil des Fotos darin, während der Rest verborgen ist, aber wenn Sie den Rahmen öffnen, können Sie das gesamte Foto immer noch sehen.

Sie können jede Ebene als Maske verwenden, wie z. B. Vektorformen, Textebenen und Bilder. Die Reihenfolge der Ebenen ist sehr wichtig. Die unterste Ebene wird als Container der Maske betrachtet, das heißt, die Öffnung, durch die Sie das Bild sehen werden.

Um eine Maske zu erstellen, stellen Sie sicher, dass die Ebenen richtig ausgerichtet sind. Wählen Sie dann beide Ebenen aus und wählen Sie in der Werkzeugleiste “Als Maske verwenden”.

Alle äußeren Bereiche der Ebene, die über dem Container liegen, werden verborgen. Nur die Bereiche, die sich im Maskenbereich befinden, bleiben sichtbar.

Aufgabe 4.3. Verwenden Sie Masken, um Produktbilder in Ihr Design einzufügen. Denken Sie an die richtige Reihenfolge der Ebenen. Die Ebene, die der Container sein wird, muss unter der Bildebene liegen.

Nützlicher Tipp: Sie können kostenlose Bilder für Ihre Projekte von der Website https://unsplash.com. herunterladen.

Sie können auch das Plugin „Unsplash“ verwenden.

Sie haben gerade gelernt, wie man Formen erstellt in Figma. Lesen Sie auch: 10 Usability-Heuristiken für UX-Design.

Wenn Ihnen unsere Inhalte gefallen, treten Sie unserer aktiven Community auf Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.