Vor dem Start

Wer kann diese Funktion verwenden?

Verfügbar bei allen Abos

Jede*r mit Schreibzugriff kann die Kontureigenschaften aktualisieren

Konturen sind eine Sammlung von Eigenschaften, die du auf Ebenen in Design-Dateien anwenden kannst. Das können sowohl Konturen als auch die visuelle Darstellung eines Vektorpfads sein. Verwende Kontur-Eigenschaften für Folgendes:

• Füge Konturen um Formen, Vektornetzwerke oder boolesche Operationen hinzu
• Erstelle Linien und Pfeile
• Füge Bildern Ränder hinzu
• Füge einzelnen Seiten rechteckiger Ebenen, z. B. bei Rechtecken, Frames und Komponenten, Konturen hinzu

Du kannst das Aussehen einer Kontur mit Farbe, Strichstärke, Verteilung, Seite und Endpunkten steuern.

Kontureigenschaften

Sieh dir die Kontureigenschaften im Abschnitt „Kontur“ der rechten Seitenleiste an und passe sie an.

Farben

Farbe ist die Haupteigenschaft, die du zur Definition der Kontur verwendest. Du kannst mehr als eine Farbe für eine Kontur verwenden. Das gilt auch für Farbverläufe und Bildfarben. Farben müssen in Bezug auf Gewicht, Position und Stil dieselben Eigenschaften aufweisen.

1. Verwende den Farbwähler, um einen Farbtyp, einen Wert und die Deckkraft auszuwählen.
2. Klicke auf , um der aktuellen Auswahl eine weitere Farbe hinzuzufügen.
3. Wähle oder , um die Sichtbarkeit einer Farbe zu ändern.
4. Wähle , um die Stilauswahl zu öffnen. Von dort aus kannst du einen Farbstil anwenden oder aus der aktuellen Auswahl einen neuen erstellen.
5. Wähle , um die Kontur aus der ausgewählten Ebene zu entfernen.

Position

In Figma kannst du festlegen, wo die Kontur auf dem Ebenenpfad angewendet werden soll. Wähle aus Innen, Außen oder Mitte. Die Standardoption für die meisten Formebenen ist Innen, außer bei zentrierten Linien.

Das SVG-Format unterstützt nur zentrierte Konturen. Dies ist zu beachten, wenn du planst, die Ebene als SVG zu exportieren.

Wenn du eine Ebene mit einer Innen- oder Außenkontur zu SVG exportierst, „vereinfacht“ Figma die Kontur. Dadurch sieht eine Innen- oder Außenkontur wie eine mittlere Kontur aus. Dies beeinflusst zwar nicht das Erscheinungsbild des exportierten Objekts, aber die Komplexität des SVG-Codes.

Hier erfahren Sie mehr über die Vereinfachung von Konturen →

Stärke

Verwende das Feld, um die Konturstärke in Pixel auszuwählen. Gib einen Wert ein, oder fokussiere das Feld und scrolle mit der Maus oder dem Trackpad durch die Werte.

Einzelne Konturen

Standardmäßig wendet Figma die Kontureigenschaften auf alle Seiten einer Ebene an. Wenn deine Ebene ein Rechteck, ein Frame oder eine Komponente/Instanz ist, kannst du auch die Eigenschaft „Kontur pro Seite“ nutzen.

Verwende die Eigenschaft Kontur pro Seite, um auszuwählen, auf welche Seite oder Seiten die Kontur angewendet werden soll.

• Alle (Standard)
• Oben
• Unten
• Links
• Rechts
• Benutzerdefiniert: zur Auswahl der Seiten, auf die die Kontur angewendet werden soll. „Benutzerdefiniert“ erlaubt es dir auch, für jede Seite eine unterschiedliche Konturstärke festzulegen.

Benutzerdefinierte Konturen pro Seite

Wenn du „Benutzerdefiniert“ wählst, siehst du im Abschnitt „Kontur“ vier einzelne Felder. Verwende die Felder, um die Strichstärke für jede Seite unabhängig anzupassen. Um eine Kontur von einer Seite zu entfernen, stelle die Strichstärke auf 0 ein.

Du kannst einzelne Konturen verwenden, um gängige Designelemente und Muster zu erstellen:

• Wende eine einzelne Kontur oben oder unten in einer Tabellenzeile an
• Zeige eine horizontale Linie unter einer Abschnittsüberschrift oder einem Abschnittstrenner an
• Wende einen Rand nur auf drei Seiten eines Elements an
• Füge einen Farbblock auf der linken Seite einer Karte oder eines Aufgabenelements hinzu

Endpunkte

Füge den Endpunkten aller offenen Pfade Stil hinzu Die Endpunkteigenschaft wird je nach ausgewähltem Vektorpfad an zwei verschiedenen Positionen angezeigt.

Nur zwei Endpunkte

Wenn die Ebene ein offener Vektorpfad ist, kannst du die Endpunkte am Anfang und Ende des Vektorpfads im Hauptabschnitt Kontur festlegen. Zum Beispiel: Linien- und Pfeilformen.

Verwende die beiden Felder, um den Kappen- oder Spitzenstil ↓ für die Endpunkte Anfang (links) und Ende (rechts) festzulegen.

Mehr als zwei Endpunkte

Wenn du einen geschlossenen Vektorpfad oder eine Form – oder einen offenen Pfad mit mehr als zwei Endpunkten – hast, findest du die Endpunkt-Einstellungen stattdessen im Erweiterten Linienmenü.

Wenn du die gesamte Ebene ausgewählt hast, kannst du „Endpunkte“ verwenden, um für alle Endpunkte denselben Spitzen- oder Kappenstil festzulegen.

Um sie unabhängig voneinander zu bearbeiten, musst du jeden Endpunkt im Vektor-Mode einzeln auswählen:

1. Wenn die Ebene ausgewählt ist, drücke Enter / Return, um den Vektorbearbeitungsmodus zu öffnen →
2. Wähle einen einzelnen Endpunkt aus. Du erkennst den ausgewählten Endpunkt am blauen Kreis mit weißer Kontur.
3. Wähle das im Abschnitt „Kontur“ der rechten Seitenleiste aus, um das erweiterte Linienmenü zu öffnen.
4. Aktualisiere die Endpunkt-Eigenschaft.
5. Das Erweitertes Linienmenü bleibt geöffnet, sodass du einen anderen Endpunkt auf der Arbeitsfläche auswählen und den Endpunkt erneut aktualisieren kannst.

Endpunkte mit Kappen und Spitzen

Triff deine Wahl an Kappen oder Spitzen, die du deinen Endpunkten hinzufügen willst:

• Keine: Am Ende des Pfads wird keine Kappe oder Spitze hinzugefügt. Die Enden sind quadratisch, ohne die Länge des Pfades zu verändern.
• Rund (Standard): Fügt eine Kappe mit der halben Strichstärke hinzu und rundet den Endpunkt des Pfades auf 50 % der Breite ab.
• Quadrat: Fügt eine Kappe in der Hälfte der Konturstärke hinzu, während der Endpunkt des Pfades quadratisch bleibt.
• Linienpfeil: Zwei 45-Grad-Linien zu beiden Seiten der Endpunkte. Der Linienpfeil hat die gleiche Kontur wie der Pfad selbst. Du kannst die Länge der Pfeilspitzenlinien nicht ändern.
• Dreieckspfeil: Dreieckspitzen an beiden Endpunkten. Du musst in den Vektorbearbeitungsmodus → wechseln, um einen Pfeil nur auf ein Ende des Pfads anzuwenden.
• Umgekehrtes Dreieck: Eine umgekehrte oder gespiegelte Version des Dreieckspfeils, bei der der Pfeil nach innen in Richtung des Pfades zeigt.
• Rautenpfeil: Fügt dem Endpunkt eine durchgehende, rautenförmige Spitze hinzu.

Konturarten

Du kannst die erweiterten Kontureinstellungen verwenden, um das Aussehen einer Kontur weiter anzupassen. Um auf diese Einstellungen zuzugreifen, gehe zum Abschnitt „Kontur“ in der rechten Seitenleiste und wähle „Erweiterte Kontureinstellungen“ aus.

Grundkontur

Du kannst die Grundeinstellungen für die Kontur verwenden, um einen gestrichelten oder gepunkteten Strich zu erstellen. 

Gestrichelt

Erstelle eine gleichmäßige gestrichelte Linie.

1. Wähle im Panel „Kontur“ , um das „erweiterte Linienmenü“ zu öffnen.
2. Wähle den gestrichelten Konturstil
3. Gib die gewünschte Länge für den Strich in Pixeln ein.
4. Gib die Länge des Abstands zwischen den Stricheln in Pixeln ein.
5. Wähle die Art des Strichendes aus:
   • Keine
   • Rund
   • Quadratisch

Gepunktet

Erstelle eine gepunktete Linie.

1. Verwende im Kontur-Panel das Dropdown-Menü, um die Konturposition auf Mitte zu ändern.
2. Wähle , um das Erweiterte Linienmenü zu öffnen.
3. Wähle den gestrichelten Konturstil
4. Gib eine Strichlänge von 1 Pixel ein.
5. Wähle in der Einstellung Strichende die Option „rund“ aus.
6. Passe den Abstand zwischen den Strichen an, um ihn anzupassen.

Benutzerdefiniert

Erstelle eine gestrichelte oder gepunktete Linie mit einem individuellen Muster.

1. Wähle im Panel „Kontur“ , um das „erweiterte Linienmenü“ zu öffnen.
2. Stelle die Einstellung Konturstil auf die Option Benutzerdefiniert ein.
3. Verwende die folgende Syntax in der Einstellung Striche, um das Strichmuster Gestrichelt, Abstand, Gestrichelt, Abstand festzulegen ...
4. Wähle das gewünschte Strichende aus.

Pinselstrich

Pinselstriche verleihen deiner Auswahl ein organisches, handgemaltes Aussehen. Verwende den Tab Pinsel in den Erweiterten Kontureinstellungen, um durch die verfügbaren Pinselstile zu blättern, einschließlich der benutzerdefinierten Pinsel, die du erstellt hast. Bewege den Cursor über einen Stil, um eine Vorschau darauf zu sehen, wie er auf deine Auswahl aussehen wird. Sobald du einen Pinselstrich angewendet hast, kannst du mit der Einstellung Richtung festlegen, in welche Richtung die Kontur fließen soll.

Dynamische Konturen

Dynamische Konturen verleihen der Kontur deiner Auswahl ein handgezeichnetes, ungleichmäßiges Aussehen. Du kannst die Einstellungen für die Dynamische Kontur verwenden, um das Erscheinungsbild der Kontur zu konfigurieren:

• Frequenz: Bestimmt die Anzahl der Erhebungen in der Kontur
• Wackeln: Legt fest, wie stark die Unebenheiten erscheinen
• Glätten: Bestimmt, wie stark die Unebenheiten geglättet werden

Verbindungs- und Gehrungswinkel

Definiere, wie Linien innerhalb eines Pfads oder Vektornetzwerks verbunden werden. Passe die Verbindungen in einem gesamten Pfad an oder wechsle in den Vektorbearbeitungsmodus, um einen einzelnen Ankerpunkt im Pfad auszuwählen. Wähle aus Folgendem:

• Gehrung: Erstelle eine scharfe Spitze, ähnlich einem Pfeil, an der Stelle, an der sich die beiden Pfade treffen.
• Abschrägung: Schneide die scharfe Spitze ab, um eine flache Kante zu erstellen.
• Abgerundet: Runde den Punkt, an dem sich zwei Wege treffen, ab, um die Verbindung zu glätten.

Verwende die Einstellung Gehrungswinkel, um den Winkel zu steuern, in dem zwei verbundene Linien abgeschrägt werden. Beispiel: Bei einer Gehrung von 90° ist jeder Winkel ≤ 90°; alles > 90° erzeugt eine scharfe Spitze.

Übersicht über die unterstützten Kontureigenschaften

Einige Eigenschaften werden nur bei bestimmten Ebenentypen unterstützt. Verwende die Tabelle unten, um festzustellen, ob eine bestimmte Eigenschaft für den Ebenentyp, mit dem du arbeitest, unterstützt wird.

Ebenentyp	Farben	Position	Stärke	Kontur pro Seite	Farbstil	Endpunkt	Verbindung
Rechteck	✓	✓	✓	✓	✓	✕	✓
Linien	✓	✕	✓	✕	✓	✓	✕
Pfeile	✓	✕	✓	✕	✓	✓	✓
Ellipse	✓	✓	✓	✕	✓	✕	Bei Änderung mit dem Bogen-Tool
Polygon	✓	✓	✓	✕	✓	✕	✓
Stern	✓	✓	✓	✕	✓	✕	✓
Boolesche Werte	✓	✓	✓	✕	✓	✕	✓
Vektornetzwerke	✓	✓	✓	✕	✓	Nur offene Pfade	✓
Text	✓	✓	✓	✕	✓	✕	✓
Frames (einschließlich Komponenten)	✓	✓	✓	✓	✓	✕	✓

Anzeigen und Kopieren von Kontureigenschaften mit Lesezugriff auf eine Datei

Wenn du Lesezugriff für eine Datei hast, werden die Kontureigenschaften in der rechten Seitenleiste als Ränder angezeigt. Diese Eigenschaften lassen sich als CSS oder als Farbwert wie Hex, RGB, HSL oder HSB darstellen. Nach der Auswahl ihrer Darstellung fährst du mit der Maus über den Abschnitt Ränder und klickst auf Kopieren.

Stile und Konturen

Du kannst nur Farbstile erstellen und auf Konturen anwenden. Es gibt keine Möglichkeit, die anderen Eigenschaften einer Kontur, wie Stärke und Position, als Stil zu speichern.

Beim Zuweisen eines Farbstils zu einer Kontur lassen sich die anderen Eigenschaften aber anpassen. Dazu gehören Konturstärke und Verteilung sowie alle erweiterten Kontureigenschaften wie Enden, Verbindungen und Strichelungen.

Anwenden von Farbstilen auf Konturen

1. Wähle die Ebene aus, die du aktualisieren möchtest.

2. Klicke im Abschnitt Kontur des rechten Panels auf das Stilsymbol.

3. Verwende die Stilauswahl, um den relevanten Farbstil auszuwählen.

4. Passe nach Belieben die anderen Eigenschaften der Kontur an.

Skalieren und Ändern der Größe von Konturen

Konturen reagieren je nach Skalierung unterschiedlich.

• Passe die Größe des Objekts an, wenn du die Konturstärke beibehalten möchtest, während du die Objektmaße änderst. Fahre mit dem Mauszeiger über den Begrenzungsrahmen der Kontur, bis der Cursor erscheint, und ziehe dann daran, um die Größe zu ändern.
• Verwende das Skalierungswerkzeug, um die Kontureigenschaften zusammen mit den Abmessungen des Objekts zu skalieren. Mehr zur Benutzung des Skalierungswerkzeugs →

Konturen in Vektorobjekte konvertieren

Mit der Funktion „Kontur umwandeln“ kannst du Konturen in Vektorobjekte umwandeln. Damit wird jeder Pfad im Objekt in eine einzige bearbeitbare Form umgewandelt.

Damit kannst du Folgendes:

• Halbgeviertstriche entfernen oder verlängern
• Benutzerdefinierte Formen erstellen und sie im Vektorbearbeitungsmodus bearbeiten
• Mehrere Pfade zu einem einzigen Objekt kombinieren
• Vektorobjekte einheitlich skalieren

Kontur umwandeln

1. Klicke mit der rechten Maustaste auf die Ebene und wähle Umrisslinie aus, oder verwende die folgende Tastenkombination:
   
   • Mac: ⌘ Befehlstaste ⌥ Option O
   • Windows: Strg Alt O
2. Figma wird den Pfad in ein Vektorobjekt umwandeln und alle Farben, die als Kontur verwendet wurden, als Füllung anwenden.
3. Du siehst, wie dieses Vektorobjekt im Vektorbearbeitungsmodus aussieht. Drücke Enter / Return oder klicke in der Symbolleiste auf Objekt bearbeiten, um das Vektorobjekt zu bearbeiten.