Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Figma

Eine Kurzanleitung zu Bildfüllungseinstellungen von Figma

by
Difficulty:BeginnerLength:ShortLanguages:

German (Deutsch) translation by Rebecca Priscilla (you can also view the original English article)

In diesem Tutorial erfahren Sie alles über die Bildfüllungseinstellungen von Figma. Insgesamt gibt es 4, und mit jeder können Sie die Bildfüllung eines Objekts unterschiedlich bearbeiten. Schauen wir uns das an!

Einstellungen für die Bildfüllung in Figma

Hier ist eine vollständige Videoversion dieses kurzen Tutorials. Folgen Sie uns auf unserem Envato Tuts+ YouTube-Kanal:


Es begann mit einer Füllung

Beginnen Sie, indem Sie ein Objekt auf der Zeichenfläche erstellen, dann füllen (im Eigenschafteninspektor rechts) und Bildfüllung als Typ auswählen.

image fillimage fillimage fill

Sie können dann ein Bild Ihrer Wahl hochladen und erhalten die folgenden 4 Optionen für den Fülltyp:

fill typefill typefill type

1. Füllen

Standardmäßig ist Füllen ausgewählt. Dies stellt sicher, dass das gesamte Objekt mit dem Bild gefüllt ist. Wenn das Objekt breiter oder höher als das Bild ist, wird das Bild entsprechend gestreckt und beschnitten. Aber das Bild wird immer zentriert und es wird so viel wie möglich des Bildes angezeigt:

2. Einpassen

Wenn wir den Fülltyp an dieser Stelle in Einpassen ändern, wird das gesamte Bild im Containerobjekt angezeigt, auch wenn dies bedeutet, dass ein Teil des Objekts nicht gefüllt ist.

fitfitfit

3. Freistellen

Der Füllart Freistellen verhält sich ähnlich wie die Standardfüllung, gibt Ihnen jedoch Positionierungswerkzeuge, um das Freistellen selbst anzugeben. Wie Sie unten sehen können, können Sie das Objekt wie ein Fenster auf dem Bild skalieren und verschieben:

crop figmacrop figmacrop figma

Ein weiterer Unterschied im Verhalten besteht darin, dass beim Ändern der Größe eines Objekts nach dem Anwenden des Freistellenfüllungstyps das Bild mit dem Objekt entlang beider Achsen skaliert wird (wodurch das Bild effektiv gequetscht und gedehnt wird).

resize cropresize cropresize crop

4. Kacheleffekt

Der letzte Fülltyp ist Kacheleffekt, der das Bild immer wieder wiederholt. Dies lässt sich am besten mit einem wiederholbaren Kachelbild wie folgt demonstrieren:

tile fill figmatile fill figmatile fill figma

Sie können sehen, dass es sich unendlich wiederholt, wenn die Größe des Objekts geändert wird. In den Optionen können Sie auch den Maßstab des wiederholbaren Abschnitts bestimmen.

Das ist alles für die Fülleinstellungen von Figma

Auf diese Weise können Sie die Füllung eines Objekts in Figma bestimmen! Ich hoffe, Ihnen hat diese Kurzanleitung gefallen, und vergessen Sie nicht, unsere anderen unten aufgeführten Figma-Ressourcen zu lesen.

Weitere Figma Quick Tips

Erfahren Sie mehr über Figma mit unseren schriftlichen Tutorials und Videoanleitungen:

Figma Ressourcen und Assets (kostenlos und Premium)

Lassen Sie sich von diesen Zusammenfassungen von UI- und UX-Kits für Figma, Grafiken, Icon-Kits und mehr inspirieren!


Nützliche Links

  • Im Tutorial verwendete Muster
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.