Wie man ein Kreisdiagramm in Figma erstellt

Möchten Sie Daten in Figma visualisieren? Erfahren Sie, wie Sie mit Formen, Winkeln und Plugins ein Kreisdiagramm erstellen. Eine einfache Anleitung zum Erstellen klarer, datenbasierter Visualisierungen.

Erstelle beeindruckende Produktvideos und Dokus mit KI

Dieses Tutorial wurde mit Trupeer in weniger als 5 Minuten erstellt

Kostenlos erstellen

Hier ist eine detailliertere Aufschlüsselung:

1. Erstelle eine Ellipse: Wähle das Ellipsenwerkzeug und zeichne einen Kreis. Du kannst beim Ziehen die Umschalttaste gedrückt halten, um sicherzustellen, dass es ein perfekter Kreis ist.
2. Greife auf die Bogenoptionen zu: Fahre mit der Maus über den Kreis, und du wirst sehen, wie ein Punkt erscheint. Klicke und ziehe diesen Punkt, um die Bogensteuerungen anzuzeigen.
3. Passe Sweep und Start an: Die Bogensteuerungen ermöglichen es dir, "sweep" (Schnittgröße) und "start" (Startwinkel) des Bogens anzupassen.
4. Erstelle Segmente: Dupliziere den ersten Bogen (Schnitt), um weitere Segmente für dein Kreisdiagramm zu erstellen. Passe für jedes Duplikat die Sweep- und Startwinkel an, um die gewünschten Anteile zu erhalten.
5. Färbe die Segmente ein: Fülle jedes Segment mit einer anderen Farbe, um sie voneinander zu unterscheiden. Du kannst jedem Segment auch mit dem Textwerkzeug Beschriftungen hinzufügen.
6. Anordnen und verfeinern: Ordne die Segmente und Beschriftungen nach Bedarf an. Du kannst die Elemente gruppieren, um das Diagramm übersichtlich zu halten.

Schritt-für-Schritt-Anleitung: Wie man in Figma ein Kreisdiagramm erstellt

Schritt 1

Klicke auf den Abschnitt 'Aktionen'.

Schritt 2

Wenn die Kreisdiagramm-Option erscheint, klicke einfach darauf, um sie auszuwählen.

When the pie chart option appears, simply click on it to select.

Schritt 3

Das Kreisdiagramm wird nun auf deinem Bildschirm angezeigt. Außerdem wirst du eine Option 'Bearbeiten' bemerken; klicke darauf, um fortzufahren.

The pie chart will now appear on your screen. Additionally, you will notice an 'Edit' option; click on this to proceed.

Schritt 4

Passe in diesem Schritt das Kreisdiagramm an deine spezifischen Anforderungen an. Gib alle gewünschten Beschriftungen ein und, sobald du fertig bist,

In this step, customize the pie chart to meet your specific needs. Enter any desired labels and, once complete,

Schritt 5

Tippe irgendwo auf dem Bildschirm, um den Bearbeitungsmodus zu verlassen.

Tap anywhere on the screen to exit editing mode.

Schritt 6

Deine Änderungen werden auf das Kreisdiagramm angewendet.

Your changes will be applied to the pie chart.

Profi-Tipps zum Erstellen eines Kreisdiagramms in Figma

Verwenden Sie das Ellipse-Werkzeug, um die Basis zu zeichnen
Wählen Sie das Ellipse-Werkzeug (O) aus und klicken und ziehen Sie dann bei gedrückter Umschalttaste auf der Leinwand, um einen perfekten Kreis zu zeichnen. Dies dient als Ihre vollständige Grundlage für das Kreisdiagramm.
Kreis in einen Bogen umwandeln
Wenn der Kreis ausgewählt ist, gehen Sie zum Eigenschaften-Bedienfeld und passen Sie die "Arc"-Einstellungen an. Aktivieren Sie ihn, indem Sie die "Start"- und "End"-Winkel ändern, um einen Segmenteffekt zu erzeugen.
Für mehrere Segmente duplizieren
Um weitere Segmente zu erstellen, duplizieren Sie den Kreis (Ctrl/Cmd + D) und passen Sie dann die Bogenwinkel für jedes Segment an, um unterschiedliche Datenwerte darzustellen. Verwenden Sie für jedes Segment unterschiedliche Farben.
Verwenden Sie Mathematik, um das Diagramm aufzuteilen
Wenn Ihre Daten in Prozent vorliegen, multiplizieren Sie 360 (Grad in einem Kreis) mit dem Prozentsatz, um den Winkel jedes Segments zu erhalten. Zum Beispiel: 25 % = 90°.
Zur besseren Übersicht farblich kennzeichnen
Verwenden Sie das Füllwerkzeug, um jedem Segment unterschiedliche Farben zuzuweisen. Das verbessert die Lesbarkeit und die visuelle Wirkung.

Häufige Fehler und wie man sie vermeidet

Bögen nicht korrekt ausgerichtet
Stellen Sie sicher, dass jedes Bogensegment dort beginnt, wo das vorherige endet, um Lücken oder Überlappungen zu vermeiden. Geben Sie Start- und Endwinkel manuell ein, um mehr Präzision zu erzielen.
Den Überblick über Winkel verlieren
Beschriften Sie Ihre Ebenen mit Segmentgraden oder Datenbeschriftungen, damit Sie wissen, welches Segment wofür steht.
Nicht ausgerichtete Textbeschriftungen
Verwenden Sie intelligente Hilfslinien oder zentrieren Sie den Text manuell über jedem Segment, um ein sauberes und professionelles Erscheinungsbild zu gewährleisten.
Segmente verdecken einander
Achten Sie beim Hinzufügen von Segmenten auf die Ebenenreihenfolge. Bringen Sie Segmente bei Bedarf nach vorne oder nach hinten, um zu verhindern, dass andere Teile verdeckt werden.
Ungenaue Proportionen
Überprüfen Sie Ihre Berechnungen beim Umrechnen von Prozenten in Winkel doppelt, um eine genaue Datendarstellung sicherzustellen.

Häufige Fragen zu Kreisdiagrammen in Figma

Kann ich in Figma ohne Plugins ein Kreisdiagramm erstellen?
Ja, Sie können mit dem Ellipsenwerkzeug und den Bogen-Einstellungen Kreisdiagramme manuell erstellen, ganz ohne Plugins.
Gibt es ein Plugin zum Erstellen von Kreisdiagrammen in Figma?
Ja, Plugins wie "Chart" oder "Pie Chart Maker" stehen zur Verfügung, um den Prozess mithilfe von Dateneingaben zu automatisieren.
Wie erstelle ich ein exaktes 25-%-Segment?
Multiplizieren Sie 360 mit 0,25 (25 %), das ergibt 90 Grad. Stellen Sie den Winkel des Bogens auf 90° ein, um ein perfektes 25-%-Segment zu erhalten.
Kann ich Kreisdiagramme in Figma animieren?
Während Figma einfache Prototyp-Animationen unterstützt, müssten komplexe, datengetriebene Animationen außerhalb von Figma erstellt werden.
Kann ich Kreisdiagramme aus Figma exportieren?
Ja, wählen Sie das Kreisdiagramm aus, gehen Sie zum Exportbereich, wählen Sie Ihr bevorzugtes Format (PNG, SVG, PDF) und klicken Sie auf Exportieren.
Wie nimmt man den Bildschirm auf dem Mac auf?
Um auf einem Mac den Bildschirm aufzunehmen, können Sie Trupeer AI verwenden. Es ermöglicht Ihnen, den gesamten Bildschirm aufzuzeichnen, und bietet KI-Funktionen wie das Hinzufügen von KI-Avataren, das Hinzufügen von Sprachkommentaren sowie das Vergrößern und Verkleinern im Video. Mit der KI-Videoübersetzungsfunktion von trupeer können Sie das Video in über 30 Sprachen übersetzen.
Wie füge ich einer Bildschirmaufnahme einen KI-Avatar hinzu?
Um einer Bildschirmaufnahme einen KI-Avatar hinzuzufügen, müssen Sie ein KI-Tool zur Bildschirmaufnahme verwenden. Trupeer AI ist ein KI-Tool zur Bildschirmaufnahme, das Ihnen hilft, Videos mit mehreren Avataren zu erstellen, und unterstützt Sie auch dabei, Ihren eigenen Avatar für das Video zu erstellen.
Wie nimmt man den Bildschirm unter Windows auf?
Zum Aufnehmen des Bildschirms unter Windows können Sie die integrierte Game Bar (Windows + G) oder ein fortschrittliches KI-Tool wie Trupeer AI für erweiterte Funktionen wie KI-Avatare, Sprachkommentar, Übersetzung usw. verwenden.
Wie füge ich einem Video einen Sprachkommentar hinzu?
Um Sprachkommentare zu Videos hinzuzufügen, laden Sie die Chrome-Erweiterung von Trupeer AI herunter. Nach der Registrierung laden Sie Ihr Video mit Ton hoch, wählen Sie den gewünschten Sprachkommentar von Trupeer aus und exportieren Sie Ihr bearbeitetes Video.
Wie zoome ich in einer Bildschirmaufnahme hinein?
Um während einer Bildschirmaufnahme hineinzuzoomen, verwenden Sie die Zoom-Effekte in Trupeer AI, mit denen Sie zu bestimmten Momenten hinein- und herauszoomen können, um die visuelle Wirkung Ihres Videoinhalts zu verstärken.