Farbstile in Figma aus einer importierten Webseite extrahieren

Warum importierte Farben als einfache Füllungen ankommen

Um in Figma Farbstile aus einer importierten Seite zu extrahieren, legst du sie nach dem Import selbst an: Wähle eine Ebene mit einer Farbe, die du behalten willst, klicke in ihrem Bereich Fill auf Apply styles or variables und wähle New style or variable. Der Import liefert die Farben. Namen liefert er nicht dazu.

Das solltest du vor dem Start wissen. Auf der Produktseite von UnHTML steht, dass Textabschnitte Schriftfamilie, Schriftschnitt, Größe und Farbe behalten und dass Verläufe übernommen werden. Dort steht auch, dass wiederkehrende Typografie in Pro zu gemeinsamen Figma-Text-Styles wird. Nicht steht dort, dass Füllungen zu Farbstilen oder Variablen werden. Behandle Farbstile deshalb als manuellen Schritt. Die Textseite behandeln wir in Komponenten und Text Styles aus einem Import.

Benutzerdefinierte Eigenschaften erklären den Rest. Eine Seite kann ein Braun in einer benutzerdefinierten Eigenschaft auf :root ablegen und es an zwanzig Stellen mit var() referenzieren. Der Browser löst var() in einen endgültigen Wert auf, bevor irgendetwas gezeichnet wird. Die Seite von UnHTML erwähnt benutzerdefinierte Eigenschaften nicht. Rechne also mit einfachen Füllungen auf deinen Ebenen statt mit Token-Namen und prüfe eine Ebene in deinem eigenen Import.

Dieses Tutorial setzt voraus, dass die Seite bereits in Figma liegt und du can edit-Zugriff auf die Datei hast. Laut Figma-Hilfecenter kann jeder mit can edit-Zugriff Stile erstellen und bearbeiten.

Die Farben auswählen, die sich lohnen

Lege nicht für jede Füllung einen Stil an. Eine typische Seite wiederholt eine Handvoll Farben: einen Seitenhintergrund, eine Flächenfarbe, den Fließtext, die Überschriftenfarbe, eine Markenfarbe, eine Rahmenfarbe und ein paar Statusfarben. Nimm zuerst diese und lass einmalige Füllungen in Ruhe. Ein Stil für eine Farbe, die nur an einer Stelle vorkommt, macht die Liste in der Auswahl länger, ohne dir später Arbeit zu sparen. Die Palette bleibt übersichtlich, wenn jeder Stil eine klare Aufgabe hat.

Ein schneller Test: Klicke ein paar Ebenen derselben Art an (alle Buttons, alle Fließtextabsätze) und prüfe, ob sie eine Farbe teilen. Wenn ja, verdient sie einen Stil. Wenn jede Instanz anders ist, wähle den Wert, den du vereinheitlichen willst.

Einen Farbstil aus einer Auswahl erstellen

Diesen Weg nimmst du, wenn du eine Ebene schon vor dir hast.

1. Wähle die Ebene, deren Farbe du behalten willst.
2. Klicke in der rechten Seitenleiste neben dem Bereich Fill auf Apply styles or variables.
3. Klicke in der Auswahl auf New style or variable.
4. Gib einen Namen und eine Beschreibung ein. Beschreibungen erscheinen, wenn du in der Auswahl mit der Maus über den Stil fährst.
5. Ordne die Stile bei Bedarf in Ordnern.

Die Figma-Seite zum Erstellen und Bearbeiten von Stilen listet auf, was ein Farbstil enthalten kann: Füllung, Kontur, Bild, Verlauf, Muster und Shader-Füllung. Im selben Dialog kannst du auf das Minus neben einer Eigenschaft klicken, um sie aus dem Stil zu entfernen.

Wähle ein Namensschema, das du in einem Monat noch verstehst. Üblich ist zuerst die Rolle, dann die Abstufung, etwa surface/default, text/primary und brand/500. Die Hilfeseite bestätigt, dass sich Stile in Ordnern organisieren lassen, beschreibt aber die Benennung mit Schrägstrichen nicht. Prüfe also nach dem ersten gespeicherten Stil, wie deine Datei ihn gruppiert.

Über das Panel Local styles

Du kannst auch ohne Auswahl beginnen. Klicke in der rechten Seitenleiste auf das Plus neben Local styles, wähle im Dropdown einen Stiltyp, gib Namen und Beschreibung ein, stelle die Eigenschaften ein und klicke auf Create style. Bei einem Import ist das langsamer, weil du den Farbwert eintippen musst. Es hilft aber, wenn du die Hex-Werte schon aus dem Stylesheet der Seite hast.

Die Pipette als Abkürzung

Bei einer langen Seite ist die Pipette schneller als der Menüweg. Schalte sie mit Control+C oder I auf dem Mac beziehungsweise mit I unter Windows ein. Dann:

1. Halte Command+Shift auf dem Mac oder Control+Shift unter Windows gedrückt.
2. Drücke Enter oder klicke auf die gewünschte Farbe.
3. Wähle im Dialog Style oder Variable, fülle die Felder aus und drücke Create.

Laut der Pipetten-Seite von Figma wird das neue Element auf die ausgewählte Ebene angewendet. Mit Tab wechselst du beim Aufnehmen der Farbe die Anzeige zwischen Hex, RGB, HSL und HSB. Das hilft, wenn du einen Wert aus dem Quell-CSS treffen willst.

Zwei Einschränkungen gelten Stand 2026. Das Aufnehmen einer Farbe außerhalb der Arbeitsfläche erfordert Figma Desktop 126.2.10 oder neuer unter macOS 14 oder neuer und ist weder in der Windows-Desktop-App noch im Browser verfügbar. Das Aufnehmen von Ebenen innerhalb der Datei funktioniert überall, wo du Bearbeitungsrechte hast.

Sobald die Stile existieren, geht das Anwenden auf den Rest der Seite schnell. Fahre mit der Maus über ein Pixel mit einem Stil, halte Shift gedrückt und klicke auf die Ebene, die du umstellen willst.

Stil oder Variable für Farbe

Derselbe Dialog verlangt eine Wahl zwischen Style und Variable. Entscheide also, bevor du fünfzig davon anlegst. Die Variablen-Dokumentation von Figma nennt die praktischen Unterschiede:

Variablen gelten für einfarbige Füllungen, Verlaufspunkte, Konturfarben und Farbstile. Ein Stil kann auf eine Variable verweisen. Du kannst also für jede Kernfarbe eine Variable anlegen und einen Stil, der darauf zeigt. So bekommst du beides: Der Stil deckt Verläufe und mehrere Eigenschaften ab, die Variable liefert den Wert.

Ist die Seite eine einmalige Analyse, genügen einfache Stile. Willst du den Import zu einem echten Designsystem ausbauen, richte zuerst die Variablen ein und baue die Stile darauf auf. Unser Beitrag zum Aufbau eines Designsystems aus einer importierten Seite behandelt diesen Weg.

Verläufe, Alpha und Farben, die Aufmerksamkeit brauchen

Die meisten Farben einer Seite sind einfache sRGB-Werte. Die Referenz zu Farbwerten von MDN führt Hex, rgb(), hsl(), hwb() und benannte Farben als sRGB auf. Sie lassen sich sauber in eine Figma-Füllung umsetzen.

Drei Fälle verdienen einen zweiten Blick:

• Farben mit großem Farbraum. oklch(), lab(), lch() und color() können Farben außerhalb von sRGB beschreiben. MDN weist darauf hin, dass color(display-p3 0 0 1) dem außerhalb des Farbraums liegenden color(srgb 0 0 1.042) entspricht. Bei der Umrechnung nach sRGB kann der Wert also beschnitten werden. Wirkt eine Markenfarbe in Figma etwas flacher, nutzt das Quell-Stylesheet womöglich eines dieser Formate.
• currentColor und Systemfarben. Sie haben keinen festen Wert. currentColor wird über die Eigenschaft color des Elements aufgelöst, und Systemfarben hängen von den Einstellungen der Nutzerin, des Nutzers oder des Betriebssystems ab. Was du auf der importierten Ebene siehst, ist der Wert zum Zeitpunkt der Aufnahme.
• Verläufe. Eine Variable kann keinen ganzen Verlauf enthalten, nur die Farbe jedes Verlaufspunkts. Ist der Verlauf ein Markenelement, lege dafür einen Farbstil an. Wie CSS-Verläufe überhaupt auf der Arbeitsfläche landen, steht in so werden CSS-Verläufe in Figma abgebildet.

Ein kurzer Durchgang für jeden Import

Es braucht keine Zeremonie. Geh in dieser Reihenfolge vor:

1. Wähle fünf bis acht Farben, die sich auf der Seite wiederholen.
2. Lege für jede mit der Pipette einen Stil oder eine Variable an, mit einem Namen, der mit der Rolle beginnt.
3. Gruppiere sie nach Rolle in Ordnern.
4. Stelle mit Shift und Klick die losen Ebenen um, die eine fast gleiche Farbe tragen.
5. Lösche Stile, die du am Ende nicht gebraucht hast.

Da der Import kein pixelgenauer Klon ist, weichen einige Füllungen um kleine Beträge vom Original ab. Korrigiere die, die du siehst, und mach weiter. Wenn du eine Abweichung nicht einordnen kannst, vergleiche den Wert der Ebene mit dem Wert im Stylesheet der Quellseite und entscheide dann, welcher gelten soll.

Fazit

Farbstile sind nach einem Import ein manueller Schritt, aber ein kleiner. Wähle die Farben, die sich wiederholen, erstelle Stile aus einer Auswahl oder mit der Pipetten-Abkürzung Command+Shift beziehungsweise Control+Shift und entscheide früh, ob Variablen darunterliegen sollen. Sobald die Palette Namen hat, geht der Rest der Seite schnell. Wenn du die Seite noch nicht importiert hast, bringt UnHTML sie als bearbeitbare Ebenen nach Figma.