Workflow Slicing

Analisis Desain di Figma

Pelajari desain secara menyeluruh sebelum menyentuh Webflow. Identifikasi:

• Berapa banyak section yang ada
• Elemen mana yang berulang (kandidat component)
• Pola layout yang digunakan (Flex atau Grid)
• Ukuran teks dan warna yang perlu dibuat sebagai variable

Tentukan Struktur

Rencanakan hierarki elemen untuk setiap section:

Section
└── Container
    └── Wrapper
        └── Isi Konten

Jangan langsung mulai build — pastikan strukturnya sudah jelas di kepala terlebih dahulu.

Naming Class Berdasarkan Fungsi

Tentukan nama class sebelum styling. Gunakan nama yang menggambarkan fungsi, bukan kondisi visual.

Contoh: Feature Card, Testimonial Grid, Hero Wrapper

Buat Class Baru Hanya Jika Diperlukan

Sebelum membuat class baru, selalu tanyakan:

• Apakah base class yang sama sudah ada?
• Apakah perbedaannya cukup signifikan untuk class baru, atau bisa ditangani dengan combo class?

Rapikan Struktur Navigator

Sebelum menyerahkan pekerjaan, pastikan:

• Semua section telah di-rename dengan nama yang jelas
• Tidak ada class default seperti Div Block 123
• Struktur navigator mudah dibaca oleh orang lain