So nutzt du: Figma CSS zu Webflow
- Wähle in Figma eine Ebene und öffne Dev Mode → Code → CSS (oder Rechtsklick → Copy as → Copy as code → CSS). Du kannst auch mehrere Ebenen auf einmal kopieren.
- Füge das CSS hier ein. Jeder
/* Layer name */-Kommentar wird zu einem eigenen Block. - Lege fest, ob px in rem umgewandelt werden und ob feste Größen erhalten bleiben sollen (meist willst du das nicht).
- Kopiere einzelne Werte aus der Tabelle im Style-Panel oder das bereinigte CSS für eigenen Code.
Warum Figmas CSS vor Webflow bereinigt werden sollte
Figma erzeugt CSS, das die Ebene exakt so beschreibt, wie sie auf der Arbeitsfläche gezeichnet wurde. Dazu gehören position: absolute mit left/top-Koordinaten, feste Pixelbreiten und -höhen sowie Auto-Layout-Reste wie flex: none; order: 0; flex-grow: 0;. Wenn du das in Webflow kopierst, entstehen starre Layouts, die auf kleineren Bildschirmen brechen. Wichtig bei der Design-Übergabe sind eigentlich die Designentscheidungen: Schriftgrößen, Gewichte, Zeilenhöhen, Farben, Abstände, Radien und Schatten.
Was umgewandelt wird
| Figma-Ausgabe | Wird zu | Warum |
|---|---|---|
font-size: 32px | 2rem | rem berücksichtigt die Schriftgröße des Browsers der Nutzer und skaliert konsistent. |
line-height: 120% oder 38.4px | 1.2 | line-height ohne Einheit skaliert überall mit der Schriftgröße mit, wo sie vererbt wird. |
letter-spacing: -0.64px | -0.02em | em-Laufweite bleibt proportional, wenn sich die Schriftgröße ändert (fluide Typografie). |
var(--Text-Primary, #141827) | #141827 + Variablenliste | Zeigt, welche Figma-Variablen du im Variables-Panel von Webflow nachbauen solltest. |
position: absolute; left; top, flex: none | entfernt | Positionierung auf der Arbeitsfläche, keine Layout-Absicht. |
Zuordnung zum Webflow-Style-Panel
Die Werte sind nach dem Bereich des Style-Panels gruppiert, in dem du sie eingibst: Layout (display, direction, gap, alignment), Spacing (padding, margin), Size, Typography, Backgrounds, Borders und Effects (Schatten, Opacity). In Webflow kannst du Einheiten direkt in die Felder schreiben, daher funktionieren 2rem oder 1.2 sofort.
Weiterführend
Für Abstände und Typografie, die sich zwischen Mobil- und Desktop-Ansicht anpassen, wandelst du Wertepaare aus Figma mit dem Clamp Calculator in fluide clamp()-Werte um. Für einzelne Umrechnungen nutzt du PX to REM, für Icons SVG to Webflow.
Auch gesucht als: figma dev mode css, webflow style panel, px zu rem umrechnen, line height webflow, letter spacing em, design handoff, figma code export.
Passende Tools zu: Figma CSS zu Webflow
- Farbkonverter — Füge eine beliebige CSS-Farbe ein — HEX, rgb(), hsl(), hwb(), oklch() oder einen Namen wie tomato — und erhalte sofort alle anderen Formate sowie eine fertige 50–950-Palette.
- Box-Shadow-Generator — Stapel mehrere Schatten-Ebenen, passe Versatz, Weichzeichnung, Ausbreitung und Deckkraft auf einer Live-Karte an und kopiere das CSS für box-shadow oder text-shadow.
- WordPress zu Webflow Weiterleitungen — Beim Umzug einer Seite von WordPress zu Webflow ändert sich fast jede URL: datierte Blog-Pfade, /category/-Archive, Schrägstriche am Ende und Seiten-Slugs.
- HTML & CSS zu Webflow — Füge HTML und das passende CSS ein, klicke auf Copy to Webflow und füge im Designer ein.
Häufige Fragen
Wo finde ich das CSS in Figma?
Warum werden Breite und Höhe entfernt?
Kann ich mehrere Ebenen auf einmal einfügen?
/* Layer name */-Kommentar beginnt einen neuen Block, und jeder Block bekommt seine eigene Tabelle für das Style-Panel.