Eckenradius und Glättung anpassen
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.
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.
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
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.
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.
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.
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.
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.
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 Rahmen und Rechtecke)
Die Einstellung Unabhängige Ecken ist für Rechtecke und Rahmen verfügbar.
- 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
Arbeitsfläche (nur Rechtecke)
Du kannst auch den Eckradius 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.
Vektor-Bearbeitungsmodus (nur Formen und geschlossene Vektor-Netzwerke)
- Wähle die zu ändernde Form aus.
- Klicke in der Symbolleiste auf Objekt bearbeiten 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 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.
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 auf der Arbeitsfläche oder im Ebenen-Tab aus.
- Ö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.