Typografie und Text | Figma für Anfänger #5

Wie fügt man Texte in Figma hinzu und bearbeitet sie? Worauf sollte man beim Gestalten von Inhalten achten? Antworten auf diese Fragen finden Sie im folgenden Artikel. Lesen Sie weiter.

Typografie und Text in Figma – Inhaltsverzeichnis:

1. Text hinzufügen
2. Text Eigenschaften

Text hinzufügen

Sie können Text zu Ihrer Datei hinzufügen, indem Sie das Textwerkzeug verwenden, das Sie in der Werkzeugleiste finden.

Sie können zwei Arten von Textfeldern erstellen. Wählen Sie das Textwerkzeug und dann:

• Klicken Sie auf die Leinwand – auf diese Weise erstellen Sie ein Textfeld, das sich automatisch an den eingegebenen Text anpasst.
• Klicken und ziehen Sie den Cursor auf der Leinwand, auf diese Weise erstellen Sie ein Textfeld mit fester Breite. Das bedeutet, dass Text, der nicht in die Breite des Feldes passt, automatisch in die nächste Zeile verschoben wird.

Text Eigenschaften

Wie im Fall von Rahmen und Formen können Sie die Texteigenschaften im Eigenschaften-Panel sehen, nachdem Sie eine Textebene ausgewählt haben. Die verfügbaren Optionen ermöglichen es Ihnen, viele Aspekte von Textebenen zu steuern, unter anderem Größe, Schriftart und Ausrichtung.

1. Textstile – hier können Sie Textstile anzeigen und erstellen.

2. Schriftart – hier können Sie eine Schriftart auswählen, die Sie verwenden möchten. Nach dem Klicken wird eine Dropdown-Liste angezeigt. Wenn Sie den Namen der Schriftart kennen, geben Sie ihn einfach ein.

Nützlicher Tipp: Text ist eines der Schlüsselelemente der Benutzeroberfläche, daher ist seine Lesbarkeit sehr wichtig. Vermeiden Sie die Verwendung von Schreibschriftarten. Obwohl sie schön aussehen, machen sie den Inhalt weniger lesbar. Wenn Sie nicht viel Erfahrung mit Typografie haben, verwenden Sie die folgenden Schriftarten: Open Sans, Roboto oder Source Sans Pro.

Das “Typescale”-Plugin wird Ihre Arbeit erleichtern, da es die passenden Größen auswählt.

3. Textgewicht und Neigung – hier können Sie das Erscheinungsbild des Textes anpassen, indem Sie eine der verfügbaren Schriftartenvarianten auswählen.

Nützlicher Tipp: Einige Schriftarten haben keine Varianten, sodass diese Option möglicherweise nicht verfügbar ist.

4. Textgröße – hier können Sie die Größe des Textes ändern.

Nützlicher Tipp: Das Ändern der Größe des Textfeldes ändert nicht die Textgröße.

5. Zeilenhöhe – ermöglicht es Ihnen, den vertikalen Abstand zwischen den Textzeilen anzupassen.

6. Buchstabenabstand – ermöglicht es Ihnen, den horizontalen Abstand zwischen den Buchstaben anzupassen.

7. Absatzabstand – hilft Ihnen, den horizontalen Abstand zwischen Absätzen anzupassen.

8. Automatische Breite – passt die Länge des Textfeldes an die Länge des eingegebenen Textes an.

9. Automatische Höhe – wenn Sie diese Option aktivieren, können Sie die Breite des Textfeldes steuern, und die Höhe wird automatisch angepasst.

10. Feste Größe – diese Option passt die Größe des Textfeldes an seinen Inhalt an.

11. Text links / zentriert / rechts ausrichten – ermöglicht es Ihnen, die horizontale Ausrichtung im Textfeld anzupassen.

12. Oben / Mitte / Unten ausrichten – ermöglicht es Ihnen, die vertikale Ausrichtung im Textfeld anzupassen.

Aufgabe. 5.1. Fügen Sie Texte zu Ihrer Anwendung hinzu. Denken Sie daran, die Schriftgrößen angemessen zu halten. Stellen Sie sicher, dass der wichtigste Inhalt ins Auge fällt.

• Im Fall einer E-Commerce-App ist es wichtig, dass die Preisangaben und der Produktname deutlich sichtbar sind. Verwenden Sie die fette Schrift, um den Text hervorzuheben, auf den Sie die Aufmerksamkeit des Benutzers lenken möchten.
• Stellen Sie sicher, dass die CTA (Call to Action)-Schaltflächen deutlich sichtbar sind und den Benutzer zum Klicken anregen. In diesem Fall sind die Schaltflächen: “Anmelden” und “In den Warenkorb”.
• Die Farbe der Schaltfläche und die Farbe des Textes darauf müssen kontrastieren, damit der Text leicht lesbar ist.
• Fügen Sie Beschriftungen zu den Platzhaltern hinzu.

Sie haben gerade gelernt, wie man Typografie und Text in Figma verwendet. Lesen Sie auch: Wissen Sie, was UX-Design bedeutet?

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