Figma - es ist ein beliebtes Werkzeug für Designer, das zum Erstellen von Schnittstellen, Layouts und anderen Grafikprojekten verwendet wird. Eine der wichtigsten Aufgaben eines Designers ist die Arbeit mit Farben, und es besteht oft die Notwendigkeit, eine bestimmte Farbe in einem Bild zu kennen. In diesem Artikel werden wir Ihnen einige einfache Möglichkeiten zeigen, wie Sie diese Aufgabe in Figma bewältigen können.
Der erste Weg besteht darin, das Werkzeug "Pipette" (Pipette) in Figma zu verwenden. Öffnen Sie dazu Ihr Projekt in Figma und wählen Sie das gewünschte Objekt oder die gewünschte Ebene aus, die die gewünschte Farbe enthält. Wählen Sie dann das Eyedropper-Werkzeug in der Symbolleiste rechts aus oder drücken Sie die Taste "I" auf der Tastatur. Danach klicken Sie einfach auf die gewünschte Farbe im Bild, und Figma hebt sie automatisch hervor und zeigt sie im grafischen Format an und gibt ihren Code - HEX, RGB oder HSL - an.
Der zweite Weg besteht darin, das Plugin "Color Picker" (Pipette) für Figma zu verwenden. Dieses Plugin ermöglicht es Ihnen, die Farbe auf dem Bild noch bequemer zu kennen. Um dies zu tun, müssen Sie das Plugin aus dem Menü "Plugins" in Figma installieren. Starten Sie die Anwendung nach der Installation neu und öffnen Sie das Bild, auf dem Sie die Farbe erkennen möchten. Wählen Sie dann das Werkzeug "Farbauswahl" aus der Liste der Plugins aus, zeigen Sie auf die gewünschte Farbe und klicken Sie darauf. Ein Popup-Fenster zeigt den Farbnamen und den Farbcode an und gibt Ihnen die Möglichkeit, ihn zur späteren Verwendung zu kopieren.
Pipette verwenden
Führen Sie die folgenden Schritte aus, um die Pipette zu verwenden:
Schritt 1: Wählen Sie das Pipettenwerkzeug in der Symbolleiste rechts aus.
Schritt 2: Zeigen Sie mit der Pipette auf die gewünschte Farbe im Bild.
Schritt 3: Klicken Sie auf die ausgewählte Farbe, um sie zu ersetzen, oder geben Sie den gewünschten Wert ein.
Sie können auch die Palette rechts verwenden, um schnell die gewünschte Farbe auszuwählen, und mit einer Pipette wählen Sie sie dann im Bild aus.
Sie können auch eine Pipette verwenden, um die Farbe eines beliebigen Objekts zu bestimmen, nicht nur auf dem Bild. Um dies zu tun, bewegen Sie einfach die Pipette auf das gewünschte Element und wählen Sie seine Farbe aus.
Die Verwendung einer Pipette macht es einfach und schnell, die Farbe in einem Bild zu erkennen und in Ihrem Design zu verwenden.
Analysieren einer Farbpalette
Nachdem Sie die gewünschte Farbe in einem Bild in Figma gefunden haben, können Sie sich fragen, welche anderen Farben in der Bildpalette enthalten sind. Es gibt ein paar einfache Möglichkeiten, dies zu tun.
1. Color Picker Tool. Mit diesem Werkzeug können Sie eine Farbe auswählen, die sich neben dem ausgewählten Pixel oder Objekt befindet. Wählen Sie einfach die gewünschte Farbe aus und das Werkzeug zeigt deren Werte an (z. B. RGB oder HEX).
2. Eyedropper Tool. Mit diesem Werkzeug können Sie nicht nur die Farbe des Objekts auswählen, sondern auch alle anderen Farbtöne, die im Design verwendet werden können. Gehen Sie durch das Bild und klicken Sie auf die Farbe, die Sie interessieren, um ihre Bedeutung zu sehen.
3. Style Picker. Mit diesem Werkzeug können Sie nicht nur die Farbe, sondern auch andere Objektstile in Figma auswählen, z. B. Schriftart und Größe. Klicken Sie einfach auf das Objekt und wählen Sie den gewünschten Stil aus der Liste aus.
Mit diesen Werkzeugen können Sie die Farbpalette in einem Bild analysieren und in Ihrem Design verwenden. Wenn Sie die Bedeutung von Farben kennen, können Sie Kombinationen genauer auswählen und harmonische Kompositionen erstellen.
Extrahieren der Farbe aus dem Code
- Markieren Sie das Objekt, an dem Sie interessiert sind, auf dem Bild in Figma.
- Suchen Sie das Feld "Füllen" rechts neben dem Bildschirm und klicken Sie darauf. Es wird eine Farbe im RGB- oder HEX-Format angezeigt.
- Kopieren Sie den Farbwert aus dem Bedienfeld "Füllen".
- Öffnen Sie einen beliebigen Texteditor oder Code-Editor und fügen Sie den kopierten Farbwert ein.
- Wenn der eingefügte Farbwert im HEX-Format vorliegt, können Sie ihn mit Hilfe von Online-Konvertern in das RGB-Format konvertieren.
Nachdem Sie den Farbwert im gewünschten Format erhalten haben, können Sie ihn bei der weiteren Arbeit am Design Ihres Projekts verwenden.
Verwenden des Eyedropper-Werkzeugs
Das Eyedropper-Werkzeug ist eine sehr praktische Möglichkeit, die Farbe in einem Bild in Figma zu erkennen. Es ermöglicht Ihnen, eine beliebige Farbe von jedem Punkt im Bild auszuwählen und sie für zukünftige Arbeiten zu verwenden.
Führen Sie die folgenden Schritte aus, um das Werkzeug zu verwenden:
- Öffnet das gewünschte Layout oder erstellt ein neues Layout.
- Wählen Sie das Eyedropper-Werkzeug aus der linken Werkzeugleiste aus.
- Bewegen Sie den Mauszeiger über den gewünschten Punkt im Bild und klicken Sie mit der linken Maustaste.
- Die ausgewählte Farbe wird rechts im Eigenschaftenfenster angezeigt.
- Optional können Sie das Farbdarstellungsformat anpassen und dessen Wert kopieren.
Mit dem Eyedropper-Werkzeug können Sie die Farbe in einem Bild schnell erkennen und für die spätere Arbeit mit dem Layout verwenden. Sie können die Farben bereits vorhandener Elemente im Bild erkennen oder nach Ihren Wünschen eine neue Farbe auswählen.
Überprüfen der verwendeten Farben in Stilen
Wenn Sie an einem Design in Figma arbeiten, ist es wichtig sicherzustellen, dass die verwendeten Farben den vorgegebenen Stilen entsprechen. Es gibt mehrere Möglichkeiten, dies in Figma zu testen.
Der erste Weg besteht darin, die Stile direkt im Bild zu überprüfen. Wählen Sie das gewünschte Objekt oder den gewünschten Text aus und überprüfen Sie im Eigenschaftenfenster, welcher Farbstil für dieses Objekt festgelegt ist. Wenn Sie den richtigen Stil sehen, wird die Farbe korrekt verwendet.
Wenn Sie nicht sicher sind, welchen Farbstil Sie verwenden möchten, können Sie sich auf der Registerkarte "Stile" an den Farbmanager wenden. Hier können Sie alle verfügbaren Farbstile für Ihr Projekt anzeigen und bearbeiten.
Manchmal gibt es Fälle, in denen die Farbe direkt verwendet wird, ohne an den Stil gebunden zu sein. Um herauszufinden, welche Farbe in solchen Fällen verwendet wird, können Sie eine Pipette verwenden. Sie können eine Farbe aus dem Bild auswählen und deren Werte im RGB-, HEX- oder HSL-Format anzeigen.
Wenn Sie eine bestimmte Farbe haben, die Sie verwenden möchten, die jedoch nicht in den Stilen enthalten ist, können Sie einen neuen Stil erstellen und ihm die gewünschten Werte zuweisen. Sie können auch die Funktion "Globalen Stil verwenden" verwenden, um die Farbe auf verschiedene Objekte und Elemente im Dokument anzuwenden.
Es ist wichtig sich daran zu erinnern: wenn Sie einen Farbstil im Eigenschaftenfenster bearbeiten, kann dies Auswirkungen auf andere Objekte haben, die diesen Stil verwenden. Daher sollten Sie vor Änderungen sicherstellen, dass sie nicht zu unvorhersehbaren Ergebnissen führen.
Mit diesen einfachen Methoden können Sie sicherstellen, dass die Farben in Ihren Designs in Figma korrekt verwendet werden.
Verwenden von Plugins zum Extrahieren von Farben
Eines der beliebtesten Plugins, das zum Extrahieren von Farben verwendet werden kann, ist das Plugin "Color Extractor". Es ermöglicht Ihnen, mehrere Farben im Bild auszuwählen und sie der Figma-Palette hinzuzufügen. Dazu müssen Sie das Bild in Figma öffnen, die gewünschten Bereiche auswählen und das Plugin ausführen. Es erkennt automatisch Farben und fügt sie der Palette hinzu.
Ein weiteres nützliches Plugin ist "Color Picker". Es ermöglicht Ihnen, eine Farbe von überall auf dem Bildschirm auszuwählen und sie automatisch zur Figma-Palette hinzuzufügen. Um ein Plugin zu verwenden, müssen Sie es installieren und dann auf die entsprechende Schaltfläche in der Figma-Symbolleiste klicken. Danach können Sie die Farbe von überall auf dem Bildschirm auswählen und in Ihren Projekten verwenden.
Plugins zum Extrahieren von Farben helfen Ihnen, Zeit zu sparen und den Prozess der Arbeit mit Farben in Figma zu vereinfachen. Sie ermöglichen es Ihnen, schnell und einfach die gewünschten Farben zu erhalten und sie zu Ihren Designs hinzuzufügen. Wenn Sie häufig mit Farben arbeiten, wird empfohlen, ein oder mehrere Plug-Ins zum Extrahieren von Farben zu installieren und sie in Ihrer Arbeit zu verwenden.
Importieren eines Bilds in einen Grafikeditor
Um die Farbe eines Bildes in Figma zu erkennen, müssen Sie dieses Bild zuerst in einen Grafikeditor importieren. Dies kann auf verschiedene Arten geschehen:
- Bild in den Figma-Arbeitsbereich ziehen;
- Klicken Sie in der Symbolleiste auf die Schaltfläche "Importieren" und wählen Sie das gewünschte Bild aus;
- Verwenden Sie die Tastenkombination Strg+O (für Windows) oder Cmd+O (für Mac) und wählen Sie im Dialogfeld eine Bilddatei aus;
- Klicken Sie mit der rechten Maustaste auf die Bühne und wählen Sie im Kontextmenü die Option Importieren aus, und wählen Sie dann ein Bild aus.
Nachdem das Bild erfolgreich importiert wurde, wird es auf der Bühne von Figma angezeigt. Jetzt können Sie mit der Arbeit beginnen und die Farben darauf mit verschiedenen zusätzlichen Werkzeugen erkennen.
