Wie erstelle ich Formen in Figma? Figma für Anfänger #4

In diesem Artikel finden Sie eine Beschreibung der Werkzeuge zum Erstellen und Ändern der Formen, aus denen jedes Ihrer Projekte besteht. Sie lernen grundlegende Formenbearbeitungsoptionen und erweiterte Funktionen wie boolesche Gruppen und Maskenerstellung kennen. Wie erstelle ich Formen in Figma? Lies und finde es heraus.

So erstellen Sie Formen in Figma – Inhaltsverzeichnis:

1. Formen hinzufügen
2. Eigenschaftsfenster – 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 Symbolleiste finden. Mit dieser Funktion können Sie grundlegende Vektorformen erstellen: Rechteck, Linie, Pfeil, Ellipse, Polygon, Stern .

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

Genau wie bei Rahmen gibt es viele Möglichkeiten, Formen zu erstellen:

• Klicken Sie nach Auswahl einer Form aus der Liste der Formwerkzeuge auf den Rahmen- oder den Leinwandbereich. Dadurch wird eine Form mit einer Standardgröße von 100 × 100 px erstellt.
• Wenn Sie die Größe des erstellten Elements steuern möchten, klicken Sie auf den Rahmen- oder Leinwandbereich und halten Sie die linke Maustaste gedrückt. Durch Bewegen können Sie dann die Größe der Form manipulieren.
• Wenn Sie ein perfektes Quadrat, einen Kreis oder ein Polygon erstellen möchten, halten Sie beim Ziehen die Umschalttaste gedrückt.

Jede Form, jedes Textobjekt oder jedes Bild, das Sie der Leinwand hinzufügen, ist eine separate Ebene. Auf diese Weise können Sie die einzelnen Eigenschaften jedes Elements ändern.

Eigenschaftsfenster – Design

Sie können Objekteigenschaften auf der Registerkarte „Design“ des Bedienfelds „Eigenschaften“ anzeigen und bearbeiten. Der Layertyp bestimmt, welche Parameter hier angezeigt werden. Die meisten Parameter sind in allen Layertypen gleich. Wenn Sie keine Ebene auswählen, zeigt das Eigenschaftenbedienfeld alle lokalen Stile für die Datei und die Leinwandfarbe an.

Auf der Registerkarte Design können Sie die folgenden Parameter hinzufügen:

1. Ausrichtung – Mit den Ausrichtungswerkzeugen können Sie die Ebenen im Canvas-Bereich richtig zueinander ausrichten. Diese Funktionen sind nur verfügbar, wenn zwei oder mehr Ebenen ausgewählt sind.

2. Verteilung und Aufräumen – Mit dieser Funktion können Sie Ebenen organisieren, indem Sie gleiche Abstände zwischen ihnen erstellen. Diese Funktionen sind nur verfügbar, wenn zwei oder mehr Ebenen ausgewählt sind.

3. Position des Canvas (X und Y) – hier können Sie die Position der Ebenen im Canvas entlang der horizontalen (X) und vertikalen (Y) Achse anpassen.

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

5. Proportionen einschränken – ermöglicht es Ihnen, die Proportionen der Form bei der Größenänderung 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 einstellen.

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

8. Unabhängige Ecken – Mit der Einstellung für unabhängige Ecken können Sie den Eckenradius für jede Ecke anpassen.

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

10. Füllen und Konturieren – Sie können Formen und Textebenen Füllungen und Konturen zuweisen. 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 jeder Ebene mehrere Füllungen und Konturen hinzufügen.

Für Füllungen und Striche ist standardmäßig Volltonfarbe eingestellt. Um die Eigenschaften anzupassen, klicken Sie auf das Farbmuster. Dadurch wird der Farbsektor geöffnet, in dem die Optionen verfügbar sind: Volltonfarbe, Farbverlauf (linear, radial, eckig, Raute) und Bild.

Wenn Sie den Strichstil weiter ändern müssen, können Sie die erweiterten Stricheinstellungen verwenden, die unter dem Ellipsensymbol 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 schwarz dargestellt, sodass Sie sie leicht von den inaktiven unterscheiden können.

11. Effekte – hier können Sie der Ebene einen Schatten oder eine Unschärfe hinzufügen. Um die Effektwerte anzupassen, klicken Sie auf Effekteinstellungen, die sich unter der Schaltfläche mit dem Sonnensymbol befinden.

12. Exporteinstellungen – 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 Oberflächenelemente Ihrer Anwendung. Erstellen Sie zunächst Drahtmodelle mit einfachen Formen.

Nützlicher Tipp: Denken Sie daran, jeder Ebene regelmäßig einen eigenen Namen zu geben. Wenn du das nicht im Auge behältst, machst du bestimmt ein Chaos in deinen Schichten.

Beginnen wir mit dem Anmeldebildschirm:

• Am oberen Rand des Bildschirms platzieren wir das Logo der zu entwerfenden Anwendung.
• Darunter befinden sich Platzhalter mit Beschriftungen: Login und Passwort. An dieser Stelle können Sie die Stelle für den Text mit einem Rechteck markieren.
• Am unteren Rand des Bildschirms 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, es so zu verwenden, wie Sie es benötigen.

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

Kommen wir nun zum Home-Frame:

• Wir werden eine Suchleiste am oberen Rand des Bildschirms platzieren.
• Darunter befindet sich die Überschrift „Bestseller“.
• Unter der Überschrift platzieren wir Produktbilder in zwei Spalten. Erstellen Sie ein Rechteck, das in eine Spalte passt, und duplizieren Sie es mehrmals.
• Unter jedem Produkt sollte etwas Platz für seinen Namen und Preis sein.
• Ein weiteres Element unserer Benutzeroberfläche wird die untere Leiste sein, in der wir die Symbole platzieren: Startseite, Favorit, Profil, Warenkorb.

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

Gemeinschaft. Eine Beispieldatei finden Sie hier: https://www.figma.com/community/file/1118814949321037573.

Klicken Sie einfach auf die Schaltfläche „ Kopie abrufen“, um die Iconia-Datei zu öffnen – ein vollständig bearbeitbares Symbolpaket mit über 1.300 gebrauchsfertigen und skalierbaren Vektorsymbolen in 6 einzigartigen Stilen. Um die ausgewählten Symbole zu kopieren, gehen Sie zur Iconia-Bibliotheksseite im Ebenenbedienfeld.

Suchen Sie das Symbol, das Sie in Ihrer Datei verwenden möchten, klicken Sie mit der rechten Maustaste darauf und klicken Sie auf Kopieren. Gehen Sie dann zurück zu Ihrer Datei, klicken Sie erneut mit der rechten Maustaste auf eine beliebige Stelle und wählen Sie Hier einfügen. Eine andere Möglichkeit, Symbole hinzuzufügen, ist die Verwendung von Plugins.

Denken Sie daran, dass die Konsistenz der Schnittstelle sehr wichtig ist. Entscheiden Sie sich für einen Symbolstil und halten Sie sich überall in Ihrer Anwendung daran. Wenden Sie das gleiche Prinzip später auf Textstile, Bildgrößen und andere Elemente an.

Nachdem Sie das Layout der Elemente auf der Startseite geplant haben, können Sie zum Produkt-Frame wechseln:

• Oben auf dem Bildschirm platzieren wir die Schaltfläche „Zurück“ auf der linken Seite.
• Es wird ein großes Foto des Produkts unten geben.
• In der rechten Ecke des Fotos platzieren wir eine Schaltfläche mit dem Symbol „Favorit“.
• Unter dem Foto platzieren wir den Namen und Preis des Produkts und Platz für eine Beschreibung.
• Am unteren Rand des Bildschirms fügen wir eine CTA-Schaltfläche „Zum Warenkorb hinzufügen“ hinzu.

Objekt bearbeiten

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

Wenn Sie den Bearbeitungsmodus aktivieren, erscheinen neue Funktionen in der Symbolleiste 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.

Mit dem Zeichenstift-Werkzeug können Sie der Form auch andere Eckpunkte hinzufügen. Dadurch können Sie weitere Änderungen vornehmen.

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

Mit dem Farbeimer- Werkzeug können Sie die Füllung einer Form entfernen und wiederherstellen. Wählen Sie dazu Farbeimer 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, wird das Werkzeug Boolesche Gruppen in der Symbolleiste angezeigt. Sie können benutzerdefinierte Formen 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.

• Auswahl subtrahieren – subtrahiert alle oberen Formen und ihre überlappenden Bereiche von der untersten Form

• Auswahl überschneiden – die neue Form besteht nur aus überlappenden Fragmenten ausgewählter Formen

• Auswahl ausschließen – die erstellte Form besteht nur aus Fragmenten ausgewählter Formen, die sich nicht überlappen.

Nach dem Anwenden des Booleschen Gruppenwerkzeugs werden alle ausgewählten Formen zu einer einzigen Ebene zusammengeführt, was bedeutet, dass sie dieselben Füllungs- und Stricheigenschaften haben. Sie können sie mit anderen Formen kombinieren und weitere logische Operationen ausführen.

Aufgabe 4.2. Üben Sie das Modifizieren von Formen mit den Werkzeugen Objekt bearbeiten und Boolesche Gruppe . Auch wenn Sie diese Funktionen in diesem Stadium Ihres Projekts noch nicht benötigen, lohnt es sich, 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, neu zu erstellen. 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

Mit Masken können Sie nur ausgewählte Bereiche eines Bildes anzeigen und den Rest ausblenden, ohne sie zu beschneiden. Das bedeutet, dass beim Maskieren kein Teil der Ebenen entfernt oder geändert wird, sodass Sie die Maske jederzeit ändern können, wenn Sie einen anderen Teil des Bildes anzeigen möchten.

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

Sie können jede Ebene als Maske verwenden, z. B. Vektorformen, Textebenen und Bilder. Die Reihenfolge der Schichten ist sehr wichtig. Die unterste Ebene wird als Behälter der Maske betrachtet, dh als Öffnung, durch die Sie das Bild sehen.

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 Symbolleiste Als Maske verwenden.

Alle äußeren Bereiche des Layers, die über dem Container liegen, werden ausgeblendet. Nur die Bereiche innerhalb des Maskenbereichs bleiben sichtbar.

Aufgabe 4.3. Verwenden Sie Masken, um Produktbilder zu Ihrem Design hinzuzufügen. Denken Sie an die richtige Reihenfolge der Ebenen. Die Ebene, die der Container sein wird, muss sich unter der Bildebene befinden.

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

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

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

Wenn Ihnen unsere Inhalte gefallen, werden Sie Teil unserer fleißigen Bienen-Community auf Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.

Autorin: Klaudia Kowalczyk

Ein Grafik- und UX-Designer, der das ins Design bringt, was sich nicht in Worte fassen lässt. Für ihn hat jede verwendete Farbe, Linie oder Schrift eine Bedeutung. Leidenschaft für Grafik- und Webdesign.

Alle Beiträge anzeigen

Figma für Anfänger:

1. Einführung in Figma
2. Figma-Schnittstelle – grundlegende Informationen
3. Grundlegende Projekteinstellungen in Figma
4. Wie erstelle ich Formen in Figma?
5. Typografie in Figma
6. Bibliotheken in Figma
7. Prototyping in Figma
8. Tools für die Zusammenarbeit in Figma
9. Beste Figma-Plugins
10. Wie benutzt man Figma? 3 ungewöhnliche Wege