Cara menggunakan Figma CSS ke Webflow
- Di Figma, pilih layer lalu buka Dev Mode → Code → CSS (atau klik kanan → Copy as → Copy as code → CSS). Kamu bisa menyalin beberapa layer sekaligus.
- Tempel CSS di sini. Setiap komentar
/* Layer name */akan menjadi blok tersendiri. - Pilih apakah ingin mengonversi px ke rem dan apakah ingin mempertahankan ukuran tetap (biasanya tidak perlu).
- Salin nilai satu per satu dari tabel Style panel, atau salin CSS bersih untuk kode kustom.
Mengapa CSS dari Figma perlu dibersihkan sebelum ke Webflow
Figma menghasilkan CSS yang menggambarkan layer persis seperti yang digambar di kanvas, termasuk position: absolute dengan koordinat left/top, lebar dan tinggi piksel tetap, serta sisa auto-layout seperti flex: none; order: 0; flex-grow: 0;. Jika disalin langsung ke Webflow, hasilnya layout yang kaku dan mudah rusak di layar kecil. Yang sebenarnya kamu butuhkan dari serah terima desain adalah keputusan desain: ukuran font, ketebalan, line height, warna, spasi, radius, dan bayangan.
Apa saja yang dikonversi
| Output Figma | Menjadi | Alasan |
|---|---|---|
font-size: 32px | 2rem | rem mengikuti ukuran font browser pengguna dan skalanya konsisten. |
line-height: 120% atau 38.4px | 1.2 | Line-height tanpa satuan ikut menyesuaikan dengan ukuran font di mana pun ia diwariskan. |
letter-spacing: -0.64px | -0.02em | Tracking dalam em tetap proporsional saat ukuran font berubah (tipografi fluid). |
var(--Text-Primary, #141827) | #141827 + daftar variabel | Menunjukkan variabel Figma mana yang perlu dibuat ulang di panel Variables Webflow. |
position: absolute; left; top, flex: none | dihapus | Posisi kanvas, bukan maksud layout. |
Pemetaan ke Style panel Webflow
Nilai dikelompokkan berdasarkan bagian Style panel tempat kamu memasukkannya: Layout (display, direction, gap, alignment), Spacing (padding, margin), Size, Typography, Backgrounds, Borders, dan Effects (shadows, opacity). Di Webflow kamu bisa langsung mengetik satuan di kolom isian, jadi 2rem atau 1.2 bisa dipakai apa adanya.
Lebih lanjut
Untuk spasi dan tipografi yang menyesuaikan antara mobile dan desktop, ubah pasangan nilai Figma menjadi clamp() fluid dengan Clamp Calculator. Untuk konversi tunggal gunakan PX to REM, dan untuk ikon gunakan SVG to Webflow.
Juga dicari sebagai: figma ke webflow, figma dev mode css, webflow style panel, konversi px ke rem, line height, letter spacing, handoff desain.
Tool yang cocok dipakai bersama Figma CSS ke Webflow
- Konverter Warna — Tempel warna CSS apa pun — HEX, rgb(), hsl(), hwb(), oklch(), atau nama seperti tomato — dan langsung dapatkan format lainnya, plus palet siap pakai 50–950.
- Generator Box Shadow — Tumpuk beberapa lapis bayangan, atur offset, blur, spread dan opacity langsung di kartu pratinjau, lalu salin CSS box-shadow atau text-shadow.
- Redirect WordPress ke Webflow — Memindahkan situs dari WordPress ke Webflow hampir pasti mengubah setiap URL: path blog berbasis tanggal, arsip /category/, trailing slash, dan slug halaman.
- HTML & CSS ke Webflow — Tempel HTML dan CSS-nya, klik Copy to Webflow, lalu tempel di Designer.
Pertanyaan yang sering diajukan
Di mana saya menemukan CSS di Figma?
Kenapa width dan height dihapus?
Bisakah saya menempel beberapa layer sekaligus?
/* Layer name */ memulai blok baru, dan setiap blok mendapat tabel Style panel sendiri.