Von CSS box-shadow zu einem Figma-Effekt: die Eigenschaft-für-Eigenschaft-Zuordnung

Direkte Antwort auf die Frage

Ein CSS-box-shadow und ein Figma-Effekt Drop Shadow oder Inner Shadow beschreiben denselben Schatten. Dieselben fünf Werte: ein X-Versatz, ein Y-Versatz, ein Unschärfewert, ein Spread-Wert und eine Farbe, nur unter anderen Feldnamen. Ein CSS-Schlüsselwort bekommt in Figma gar kein eigenes Feld: inset. Stattdessen wird es zur Wahl eines anderen Effekttyps.

Dies ist ein Referenzartikel. Überfliege die Eigenschaftszuordnung weiter unten und komm dann zu den zwei Stellen zurück, an denen die Zuordnung tatsächlich bricht: die Spread-Einschränkung in Figma und was mit einem Schatten auf einer Textebene passiert. Für die meisten Karten-, Button- und Eingabefeld-Schatten reicht die einfache Eins-zu-eins-Zuordnung völlig aus, die Ausnahmen betreffen vor allem ungewöhnliche Layer-Typen und Text.

Die box-shadow-Syntax, Feld für Feld

CSS definiert box-shadow als eine durch Kommas getrennte Liste von Schatten, jeder aus bis zu sechs Teilen aufgebaut: offset-x, offset-y, ein optionaler blur-radius, ein optionaler spread-radius, eine optionale color und ein optionales inset-Schlüsselwort. Die box-shadow-Referenz von MDN stellt die erforderlichen und optionalen Teile genau so dar, und die W3C-Spezifikation für CSS Backgrounds and Borders ist die formale Quelle für dasselbe sechsteilige Modell.

Nur offset-x und offset-y sind erforderlich. Lässt man blur-radius weg, ist der Standardwert 0: ein hart begrenzter Schatten ohne Weichzeichnung. Lässt man spread-radius weg, ist auch dessen Standardwert 0, sodass die Schattenbox genau der Box des Elements entspricht. Lässt man color weg, erbt der Schatten den color-Wert des Elements selbst, was selten das Gewünschte ist, also sollte man ihn explizit setzen.

Ein typischer Kartenschatten sieht so aus:

box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);

Das ist offset-x: 0, offset-y: 4px, blur-radius: 12px, spread-radius: 0 und eine schwarze Füllung bei 15% Deckkraft. Ein vertieftes Eingabefeld fügt dagegen das Schlüsselwort inset hinzu:

box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.2);

Dieselben fünf Werte, aber jetzt wird der Schatten innerhalb der Box statt außerhalb davon gezeichnet.

box-shadow akzeptiert eine durch Kommas getrennte Liste, sodass eine einzige Eigenschaft mehrere übereinandergestapelte Schatten enthalten kann. Ein gängiges Muster kombiniert einen engen, dunklen Schatten für Kontur mit einem weichen, blassen Schatten für Tiefenwirkung:

box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 8px 24px 0 rgba(0, 0, 0, 0.1);

Der zuerst aufgeführte Schatten wird oben gerendert, der letzte ganz hinten, und jeder Schatten in der Liste ist ansonsten völlig unabhängig: eigene Versätze, eigene Unschärfe, eigener Spread, eigene Farbe. Das ist der Grund, warum mehrschichtige Schatten in CSS so verbreitet sind: Man kombiniert einen kleinen, scharfen Kontaktschatten mit einem größeren, weichen Umgebungsschatten, statt beides in einem einzigen Wert zu erzwingen.

Was ein Figma-Schatteneffekt tatsächlich enthält

Das Effektpanel von Figma gibt einem Drop-Shadow- oder Inner-Shadow-Effekt fünf einstellbare Felder: X, Y, Blur, Spread und Fill. Figmas eigener Hilfe-Artikel zum Anwenden von Effekten beschreibt X und Y zusammen als Festlegung der Richtung der Lichtquelle, Blur als Steuerung, wie weich oder scharf die Kante des Schattens ist, Spread als Anpassung, wie groß der Schatten im Verhältnis zur Ebene wirkt, und Fill als die auf den Schatten selbst angewendete Farbe und Deckkraft.

Derselbe Artikel stellt klar fest, dass sich beide Schatteneffekte in CSS in die Eigenschaft box-shadow übersetzen. Eine Ausnahme ist es wert, sich gemerkt zu werden: Ein Schatteneffekt auf einer Textebene übersetzt sich stattdessen in text-shadow, nicht in box-shadow, obwohl das Effektpanel, mit dem man ihn einstellt, in beiden Fällen identisch aussieht.

Inner Shadow verhält sich in jedem Feld wie Drop Shadow, zeichnet aber innerhalb der Ebenengrenze statt außerhalb davon. Designer greifen dazu bei einem vertieften Panel oder einem gedrückten Button-Zustand.

Nimm den Kartenschatten aus dem vorherigen Abschnitt, 0 4px 12px 0 rgba(0, 0, 0, 0.15). Auf einer Figma-Ebene wird daraus ein Drop-Shadow-Effekt mit X auf 0, Y auf 4, Blur auf 12, Spread auf 0 und Fill auf Schwarz bei 15% Deckkraft. Jede Zahl wird direkt übernommen; nur die Feldnamen ändern sich.

Die Eigenschaftszuordnung, nebeneinander

Vergleicht man beide miteinander, stimmen die Felder fast eins zu eins überein:

Die letzte Zeile wird am häufigsten übersehen. Es gibt keine inset-Checkbox neben Blur und Spread. Die Wahl erfolgt einmalig, oben im Effekt, durch die Entscheidung, welchen der beiden Effekttypen man der Ebene hinzufügt.

Wo die Zuordnung bricht

Spread hat in Figma eine Formeinschränkung, die CSS nicht kennt

CSS-spread-radius funktioniert bei jeder Box: einem div, einem button, einem a-Tag, allem mit Boxmodell. Das Spread-Feld von Figma ist enger gefasst. Es wirkt sich nur auf Rechtecke, Ellipsen, Frames und Components aus, und selbst dort ist erforderlich, dass Clip Content aktiviert ist und die Füllungsdeckkraft der Ebene bei 1% oder höher liegt. Ein Schatten, der im Browser korrekt aussieht, kann in Figma flacher wirken, wenn die Quellebene diese Bedingung nicht erfüllt, daher lohnt es sich, Spread-Werte bei allem zu prüfen, was aus einem ungewöhnlichen Elementtyp importiert wurde.

In der Praxis bedeutet das: Ein Schatten mit echtem Spread, etwa box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5), ein gängiges Focus-Ring-Muster, braucht eine Zielebene, die bereits ein Rechteck, eine Ellipse, ein Frame oder eine Component mit aktiviertem Clip Content ist, bevor das Spread-Feld überhaupt etwas bewirkt. Bei einem Ebenentyp außerhalb dieser Liste hat der Spread-Wert nichts, worauf er wirken kann, und der Ring schrumpft effektiv auf reines Blur zusammen. Der pragmatische Weg ist, den Fokusring testweise auf einem einfachen Rechteck nachzubauen und ihn danach auf die eigentliche Komponente zu übertragen.

Mehrere Schatten behalten ihre Reihenfolge, aber prüfe sie

Eine durch Kommas getrennte box-shadow-Liste wird zu einer gestapelten Effektliste auf derselben Figma-Ebene, in derselben Reihenfolge: zuerst aufgeführt, oben platziert. Eine saubere Zuordnung, aber leicht optisch misszuverstehen, wenn ein Schatten mit kleinem Versatz unter einem mit großem Versatz liegt. Im Zweifel vergleiche die Effektliste von oben nach unten mit der CSS-Deklaration von links nach rechts.

Textschatten sind eine völlig andere Eigenschaft

Es lohnt sich, das noch einmal gesondert festzuhalten: Ein Schatten auf einem Textknoten wird in CSS zu text-shadow, niemals zu box-shadow, unabhängig davon, wie er im Effektpanel von Figma aussieht. Wenn du ein Stylesheet mit einer Figma-Datei abgleichst und die Zahlen bei einer Textebene nicht übereinstimmen, liegt es meist daran. Behandle Textschatten als eigene Zuordnung, nicht als Variante dieser hier. Ein schneller Test: Wechsle das Zielelement in der Vorschau von einem Container zu reinem Text und prüfe, welche CSS-Eigenschaft im generierten Code tatsächlich auftaucht.

Wo das in die CSS-zu-Figma-Eigenschaftszuordnung passt

Das reiht sich ein neben ein paar weiteren Eigenschaft-für-Eigenschaft-Referenzen, die sich gemeinsam zu merken lohnen: wie CSS-Flexbox sich auf Figma-Auto-Layout abbildet, was beim Umwandeln von CSS-Grid in Figma-Ebenen erhalten bleibt, und wie sich jeder CSS-position-Wert in Figma zeigt.

UnHTML importiert das tatsächliche CSS einer Seite, statt von einem Screenshot auszugehen, sodass diese Schattenzuordnung genau das ist, was beim Import in einer Figma-Datei landet, Feld für Feld, keine Annäherung.

Fazit

Fünf CSS-Werte, fünf Figma-Felder und ein Schlüsselwort, inset, das zur Wahl eines Effekttyps wird statt zu einem eigenen Feld. Die zwei Stellen, an denen das bricht, sind die Formeinschränkung von Spread und Textebenen, die text-shadow statt box-shadow verwenden, egal wie das Effektpanel aussieht. Merke dir die Eigenschaftszuordnungstabelle oben. Das ist der Teil, zu dem es sich lohnt zurückzukommen.