Dieser Artikel ist für die bisherige und die neue Figma Benutzeroberfläche verfügbar. Über den Schiebeschalter unten links auf der Seite kannst du auf die gewünschte Benutzeroberfläche umschalten. Lerne UI3 kennen: Figma, neu gestaltet →

Vor dem Start

Wer kann diese Funktion verwenden?

Verfügbar in jedem Abo

Nutzer*innen mit Schreibzugriff können den Eckradius und die Glättung anpassen.

Beim Benutzeroberflächen-Design sehen wir abgerundete Ecken auf Bildschirmen, Symbolen, Schaltflächen und Karten. Es ist für die Augen einfacher, Kreisen und Kurven zu folgen, während scharfe Kanten unsere Sichtlinie stören.

Figma stellt den Eckradius in (dichteunabhängigen) Pixeln dar. Du kannst den Eckradius für eine gesamte Form oder für jeden Punkt in einem Vektorobjekt anpassen.

Figma hat zwei Funktionen zum Erstellen abgerundeter Ecken:

Eckradius: Rundet die Ecke ab, an der sich zwei Linien treffen. Verwende dies, um Formen mit abgerundeten Ecken zu erstellen.
Eckenglättung: Passt eine abgerundete Ecke zur Erstellung einer durchgehenden Kurve an. Verwende diese Einstellung zur Erstellung von „Squircles“.

Hinweis: Abgerundete Ecken sind möglicherweise nicht für Rechtecke verfügbar, die Sie mit dem Zeichenstift erstellen, oder für Rechtecke, die Sie im Vektorbearbeitungsmodus bearbeiten.

Du kannst Eckradius und Glättung anwenden auf:

Rahmen
Rechtecke, Polygone und Sterne
Vektornetzwerke, die geschlossene Formen sind
Boolesche Operationen, die Rechtecke enthalten

Hinweis: Es ist nicht möglich, den Eckradius auf Linien, Pfeile und Vektornetzwerke mit nur einem einzigen Strich oder boolesche Operationen, die nur Ellipsen enthalten, anzuwenden.

Eckenradius für eine gesamte Form anpassen

Es gibt mehrere Möglichkeiten, den Eckradius für ein Vektorobjekt oder eine Form anzupassen.

Tipp: Die Einstellungen für de niedrigen und hohen Verschiebewert gelten auch für den Eckenradius. Verwende die Tasten ← und →, um einen niedrigen Verschiebewert zu verwenden. Halte die Umschalttaste gedrückt, um die Einstellungen der hohen Verschiebewerte mit den Pfeiltasten zu verwenden.

Design-Tab

Wähle die Ebene aus.
Gib einen Pixelwert in das Feld Eckradius in der rechten Seitenleiste ein oder bewege den Cursor über das Symbol, klicke und ziehe dann nach links, um zu verkleinern, oder nach rechts, um zu vergrößern.

Adjust corner radius from the right sidebar.png

Arbeitsfläche

Du kannst auch den Eckradius für Rechtecke, Sterne und Polygone auf der Arbeitsfläche anpassen.

Wähle die zu ändernde Form aus.
Bewege den Mauszeiger über die Ecke, die du anpassen möchtest, bis der Ziehgriff für den Radius angezeigt wird.
Ziehe, um den Radius anzupassen.

Bild zeigt Ziehgriffe auf der Arbeitsfläche, mit denen wir den Eckradius unseres Telefonhintergrunds anpassen können

Den Radius einer einzelnen Ecke anpassen

Standardmäßig wendet Figma den Eckradius auf die gesamte Form an. Es gibt mehrere Möglichkeiten, den Eckradius für einzelne Ecken anzupassen.

Achtung: Es ist nicht möglich, den Radius einer einzelnen Ecke in einer Instanz anzupassen. Dies sollte bei der Festlegung des Eckradius für Komponenten berücksichtigt werden.

Einstellung unabhängiger Ecken (nur Rechtecke und Rahmen)

Wähle das Rechteck oder den Rahmen aus, den du ändern möchtest.
Klicke in der rechten Seitenleiste auf Unabhängige Ecken.
Im Tab Details zum Eckradius kannst du:
- Für jede Ecke einen Pixelwert eingeben
- Auf Variablen anwenden in einem der vier Eckradiusfelder klicken, um eine Zahlenvariable anzuwenden
- Den Schieberegler verwenden, um die Eckenglättung anzupassen

Adjust corner radius settings independently.png

Arbeitsfläche (nur Rechtecke)

Du kannst den Eckradius auch für eine einzelne Ecke auf der Arbeitsfläche anpassen. Dies gilt nur für Rechtecke.

Wähle die zu ändernde Form aus.
Halte die Zusatztaste gedrückt, um eine einzelne Ecke anzupassen.
- Mac: ⌥ Wahltaste
- Windows: Alt
Bewege den Mauszeiger über die Ecke, die du anpassen möchtest, bis der Ziehgriff für den Radius angezeigt wird.
Ziehe, um den Radius anzupassen.

Halte die Zusatztaste gedrückt, während du mit dem Mauszeiger über eine Ecke fährst, um nur diese Ecke anzupassen.

Vektor-Bearbeitungsmodus (nur Formen)

Wähle die zu ändernde Form aus.
Doppelklicke auf die Form oder drücke Enter oder die Eingabetaste, um in den Vektorbearbeitungsmodus zu wechseln.
Wähle den einzelnen Punkt auf der Arbeitsfläche aus.
Passe den Eckradius mit dem Feld in der rechten Seitenleiste an.
Gib einen Pixelwert in das Feld Eckradius ein oder bewege den Mauszeiger über das Symbol , klicke und ziehe dann nach links, um zu verkleinern, und nach rechts, um zu vergrößern.

Eckenglättung für Squircles

Den Designer*innen ist ein Unterschied bei den abgerundeten Ecken der iOS7-App-Symbole aufgefallen. Durch diese Eckenglättung wurde eine nahtlose, durchgehende Kurve erstellt, die normale bei abgerundeten Ecken nicht möglich ist.

Formen, die diesen besonderen Effekt nutzen, bezeichnen wir als Squircles. Eine Form, die sich irgendwo zwischen einem Quadrat und einem Kreis befindet. Wir sehen immer noch Squircles in den späteren Designs von Apple, einschließlich OS14.

In einem Squircle steckt jede Menge Mathematik. Erfahre mehr über die Suche eines Entwicklers von Figma nach Squircles.

Overlay_showing_how_corner_smoothing_affects_corner_radius__2_.png

Eckenglättung anpassen

Du kannst die Eckenglättung auf jede Form anwenden, auf die du einen Eckradius anwenden kannst. Im Gegensatz zum Eckradius kannst du die Eckenglättung nur auf die gesamte Form anwenden.

Wähle die Ebene aus, die du aktualisieren möchtest.
Öffne in der rechten Seitenleiste den Design-Tab.
Klicke auf das Symbol Unabhängige Ecken, um den Tab Eckradius zu öffnen.
Verwende den Schieberegler, um die Eckenglättung anzupassen, oder klicke auf iOS, um die Eckenglättung auf 60 % einzustellen, die Standardeinstellung für iOS.