Slicing Desain “Empty State Airplane” dari Figma ke HTML, Tailwind CSS dan JavaScript di VSCode
Daftar Isi
Latar BelakangTujuan ArtikelTarget PembacaSetelah MembacaDownload DesainMembuat Akun FigmaImport ke FigmaMembaca DesainDi Bagian ini Kamu Akan Bisa :Shortcut KeyboardMembaca IconMembaca GambarMembaca LayoutMemulai SlicingDi Bagian ini Kamu Akan Bisa :Buka Folder SebelumnyaStarterSlicing 1Slicing 2Slicing 3Slicing 4Slicing 5Slicing 6Slicing 7Slicing 8Slicing 9Slicing 10Slicing 11Slicing 12Penutup
Latar Belakang
Dalam era pengembangan mobile-first, desain antarmuka harus dioptimalkan untuk layar kecil (maksimal 640px) dengan presisi pixel-perfect. Figma memungkinkan desainer membuat mockup mobile yang akurat, sementara Tailwind CSS menawarkan fleksibilitas untuk menerjemahkan desain tersebut ke kode yang responsif. Namun, tantangan utama muncul ketika:
Akurasi Visual: Menyamakan setiap elemen desain (spasi, ukuran, posisi) di Figma dengan implementasi kode hingga ke level piksel, termasuk penyesuaian konfigurasi Tailwind untuk hardcoded values (misal: w-[320px], gap-3.5).Responsivitas Terkontrol: Mempertahankan batas lebar 640px sebagai breakpoint utama sambil memastikan komponen tetap konsisten di semua perangkat mobile (misal: menggunakan max-w-[640px] mx-auto).Optimasi untuk Mobile: Menghindari over-engineering dengan memanfaatkan utility class Tailwind yang sesuai untuk viewport kecil (misal: padding, font-size, grid layout).Interaktivitas Mobile-First: Implementasi JavaScript untuk interaksi touch-friendly (seperti klik, swipe) yang tetap presisi sesuai desain Figma.
Artikel ini menyajikan pendekatan sistematis untuk slicing desain Figma mobile-first ke kode HTML, Tailwind CSS, dan JavaScript di VSCode, dengan fokus pada ketelitian pixel-perfect dan optimasi performa mobile.
Tujuan Artikel
Artikel ini bertujuan untuk:
Memberikan Panduan Praktis: Menunjukkan langkah demi langkah cara menerjemahkan desain Empty State Airplane dari Figma ke struktur HTML + Tailwind CSS dengan akurasi pixel-perfect.Mengoptimalkan untuk Mobile: Menyusun komponen dengan pendekatan mobile-first, menjaga konsistensi lebar, padding, margin, dan skala font sesuai dengan batas maksimal 640px.Menerapkan Tailwind CSS secara Efisien: Menggunakan utility classes Tailwind, termasuk pendekatan hardcoded values (seperti w-[320px], gap-3.5), untuk mencapai kesetiaan desain maksimal tanpa over-engineering.Meningkatkan Presisi Visual: Menggunakan teknik inspeksi dan pengukuran langsung di Figma untuk memastikan setiap elemen (ikon, ilustrasi, teks, spasi) direplikasi secara akurat.Mengintegrasikan Interaktivitas Ringan: Menambahkan fungsionalitas sederhana menggunakan JavaScript berbasis sentuhan (touch-friendly interaction), tanpa mengorbankan performa untuk perangkat mobile.
Dengan mengikuti panduan ini, pembaca dapat memahami bagaimana mengubah desain Figma mobile menjadi kode nyata yang responsif, presisi, dan optimal untuk mobile device.
Target Pembaca
Artikel ini ditujukan bagi:
Frontend Developer yang sering bekerja dengan desain Figma dan ingin meningkatkan presisi implementasi desain mobile.UI Engineer yang fokus pada pixel-perfect implementation dan ingin memahami praktik terbaik konversi desain ke Tailwind CSS.Desainer yang Belajar Coding dan ingin tahu bagaimana desain mereka diimplementasikan dalam kode dengan konsistensi visual di perangkat kecil.Mahasiswa / Pembelajar Web Development yang ingin menambah portofolio dengan praktik langsung slicing desain Figma mobile-first menggunakan Tailwind CSS di lingkungan kerja nyata (VSCode).Tim Pengembang Mobile Web yang ingin menyusun guideline konversi desain ke HTML+CSS yang efisien dan terstandarisasi.
Dengan gaya penulisan yang teknis namun aplikatif, artikel ini cocok bagi mereka yang ingin meningkatkan workflow antara desain dan kode, terutama dalam konteks proyek berbasis Tailwind CSS dan pendekatan mobile-first.
Setelah Membaca
Setelah membaca artikel ini, pembaca diharapkan mampu:
Melakukan Slicing Desain Mobile: Mengubah desain Figma untuk layar kecil (≤640px) menjadi struktur HTML + Tailwind CSS yang pixel-perfect.Menggunakan Tailwind dengan Presisi: Memanfaatkan utility class bawaan dan custom value (seperti w-[320px], gap-3.5) untuk meniru ukuran dan spasi desain secara akurat.Membangun Layout Mobile-First yang Konsisten: Membuat layout yang responsive namun tetap mempertahankan batas maksimal 640px, menggunakan prinsip mobile-first development.Mengoptimalkan Performa Mobile: Menulis kode HTML, CSS, dan JavaScript yang ringan, cepat dimuat, dan responsif terhadap interaksi berbasis sentuhan.Mengembangkan Keterampilan Inspeksi Desain: Membaca, mengukur, dan memahami elemen-elemen di Figma dengan lebih teliti untuk memastikan hasil implementasi visual 1:1.
Dengan keterampilan ini, pembaca akan lebih percaya diri dalam mengerjakan proyek-proyek berbasis mobile dan dapat mempercepat alur kerja antara desain dan pengembangan.
Download Desain
Homepage Shaynakit
Untuk mulai melakukan slicing desain Empty State Airplane, Kamu perlu mengunduh file desain Figma-nya terlebih dahulu. Desain ini tersedia secara gratis dalam mode Free Trial melalui situs ShaynaKit. Berikut adalah langkah-langkah lengkapnya:
Buka situs utama ShaynaKit di https://shaynakit.com/landing.Klik menu atau tombol Register atau langsung buka https://shaynakit.com/register untuk membuat akun terlebih dahulu.Setelah berhasil mendaftar dan login, buka halaman desain yang akan digunakan di https://shaynakit.com/details/empty-state-airplane.Klik tombol Download, lalu pada opsi yang tersedia, pilih Free Trial.Klik tombol Start Today untuk memulai akses gratis.Setelah itu, kembali ke halaman yang sama: https://shaynakit.com/details/empty-state-airplane, dan klik tombol Download sekali lagi.File desain akan terunduh dalam format .fig, yaitu format asli file Figma.Simpan file .fig tersebut ke dalam folder lokal proyek Anda, misalnya ./figma/EmptyStateAirplane.fig.
Membuat Akun Figma
Homepage Figma
Kunjungi Situs Figma : Buka browser lalu akses https://www.figma.com.Pilih “Sign up” atau “Get started for free” : Tombol ini biasanya ada di pojok kanan atas halaman utama.Masukkan Data RegistrasiEmail: Gunakan email aktif yang kamu miliki.Nama Lengkap: Nama ini akan tampil di kolaborasi.Password: Buat minimal 8 karakter, disarankan mencampur huruf dan angka.Verifikasi Email : Cek inbox email yang kamu daftarkan, klik link verifikasi dari Figma untuk mengaktifkan akun.Pilih Plan : Setelah verifikasi, Figma akan menawarkan beberapa plan (Free, Professional, Organization). Untuk memulai, cukup pilih Free.Selesai & Masuk ke Dashboards : Kamu akan diarahkan ke dashboard Figma, di mana kamu bisa membuat file baru, mengimpor file .fig, dan mengundang tim.
Import ke Figma
Working Folder
Kunjungi Situs Figma. Buka browser lalu akses https://www.figma.com.Setelah masuk, kamu akan berada di tampilan utama Figma. Di sini kamu bisa melihat daftar file dan proyek sebelumnya.Klik tombol "Import File" (ikon ⬆️ di pojok kanan atas, atau menu File > Import).Arahkan ke lokasi file .fig yang telah kamu simpan sebelumnya (misalnya ./figma/EmptyStateAirplane.fig).Pilih file tersebut, lalu klik Open atau Import.Figma akan memproses file, dan setelah selesai, desain akan muncul sebagai proyek baru di dashboard Anda.Klik file tersebut untuk membukanya.
Membaca Desain
Di Bagian ini Kamu Akan Bisa :
✅ Figma Lebih Detail
✅ Sortcut Keyboard untuk Figma
✅ Membaca Icon
✅ Membaca Gambar
✅ Membaca Layout
Shortcut Keyboard
Copy Paste
Berfungsi menggandakan desain.
Bonus Saldo - Copy Paste
Cara melakukannya :
Pilih frame, grup, atau objek yang ingin digandakan.
Bonus Saldo - Klik
Tekan Ctrl + D (Windows) atau Cmd + D (Mac).
Figma akan langsung membuat salinan tepat di bawah/kanan aslinya. Jika ingin membuat lebih dari satu, cukup tekan lagi Ctrl + D.
Ctrl + Z
Berfungsi untuk kembali 1 langkah sebelumnya.
Bonus Saldo - Ctrl Z
Cara melakukannya :
Klik sekali di area canvas atau jendela file Figma supaya aplikasi menerima input keyboard.Windows/Linux: Tekan Ctrl + Z sekali untuk membatalkan (undo) satu perubahan terakhir.Mac: Tekan ⌘ Cmd + Z sekali untuk membatalkan satu perubahan terakhir.
Ctrl + Shift + Z
Berfungsi membatalkan “kembali 1 langkah sebelumnya”. Cara melakukannya :
Klik sekali di area canvas atau jendela file Figma supaya aplikasi menerima input keyboard.Windows/Linux: Tekan Ctrl + Shift + Z untuk redo (maju kembali setelah undo).Mac: Tekan ⌘ Cmd + Shift + Z untuk redo (maju kembali setelah undo)
Klik 2X
Berfungsi untuk melihat size group yang kamu mau. Contoh ketika di “Deskripsi Judulnya” :
Arahkan kursor ke group ( Title & Description ), hingga muncul garis biru seperti ini.
Bonus Saldo - Teks
Klik 2X pada “Deskripsinya”
Bonus Saldo - Paragraf
Perhatikan pada bilah kanan Figma terdapat konfigurasi teksnya.
Bonus Saldo - Paragraf Sidebar
Ulangi hal tersebut pada group desain apapun yang ingin kamu mau tau.
Klik Beberapa Kali+ Hover + Alt
Berfungsi melihat jarak antar konten desain, contohnya antar “Title dengan Paragraf” seperti :
Bonus Saldo - Gap Teks
Cara melakukannya :
Arahkan kursor di atas “Paragrafnya”.
Klik pada Deskripsi “We give you early credit so that you can buy a flight ticket” Beberapa Kali sampai seperti ini :
Bonus Saldo - Paragraf
Pindahkan cursor ke Title “Big Bonus”.
Klik Alt.
Maka akan muncul celah di antara keduanya yaitu ( 10 ) artinya 10px, hal ini berfungsi untuk development nanti.
Bonus Saldo - Gap Teks
Import Icon Menjadi SVG
Berfungsi mengambil Icon lalu di letakkan di folder Icon VSCode lalu di tampilkan di browser. Cara Melakukannya :
Klik beberapa kali di atas icon Figma hingga seperti ini ( 24 x 24 ) :
Bonus Saldo - Airplane Icon
Klik kanan.
Bonus Saldo - Right of Click
Kursor di atas “Copy/Paste as” dan klik “Copy as SVG”.
Bonus Saldo - Import SVG
Import Image menjadi PNG
Klik di atas image Figma hingga seperti ini ( 299.96 x 150 ) :
Success Checkout - Background Image
Scroll ke bawah sampai seperti pada bilah kanan.
Success Checkout - Import Background Image
Klik dropdown “Export” nya bertulis “1x” :
maka muncul :
Pilih “3x” dan klik tombol “Export Basic Interview”
Membaca Icon
Icon Yang Mana?
Bonus Saldo - Airplane
Di atas adalah icon. Di dalam desain Figma, icon adalah elemen grafis kecil yang biasanya digunakan untuk mewakili aksi, fitur, atau objek tertentu dengan cara yang visual dan mudah dikenali.
Di dalam desain Figma icon adalah :
Gambar vektor kecil (SVG) atau bentuk (shapes) yang menggambarkan sesuatu, seperti 🔍 (search), ✏️ (edit), 🗑 (delete), dll.Sering digunakan dalam UI/UX design seperti di tombol, menu navigasi, tab, atau status indicator.
Fungsi Icon adalah :
Hemat ruang : Ikon menggantikan teks panjang agar antarmuka tetap ringkas.Estetika visual : Ikon bikin desain lebih menarik dan terasa hidup.Bahasa universal : Ikon mudah dipahami lintas bahasa misalnya ikon globe untuk "global".Representasi aksi : Misal ikon gerigi = pengaturan, amplop = pesan, dll.
Cara Import?
Berfungsi mengambil Icon lalu di letakkan di folder Icon VSCode lalu di tampilkan di browser. Cara Melakukannya :
Klik beberapa kali di atas icon Figma hingga seperti ini ( 24 x 24 ) :
Bonus Saldo - Airplane
Klik kanan.
Bonus Saldo - Airplane Click
Kursor di atas “Copy/Paste as” dan klik “Copy as SVG”.
Bonus Saldo - Airplane Click Import
Buat folder proyek yaitu “Empty-State-Airplane”
Folder Proyek
Open folder tersebut di VSCode
VS Code Proyek
Buka VSCode.Klik File > Open Folder...Pilih folder project kamu, yaitu : Empty-State-Airplane.Setelah folder terbuka di sidebar kiri (Explorer), kamu bisa mulai membuat folder baru.
Buat Folder src
Src Folder
Klik kanan pada folder utama Empty-State-Airplane di sidebar kiri.Pilih New Folder.Ketik nama folder: src, lalu tekan Enter.
Buat Folder images di dalam src
Images Folder
Klik ikon > di samping src untuk membukanya.Klik kanan pada folder src > New Folder.Ketik nama folder: images, lalu tekan Enter.
Buat Folder Tambahan di Dalam images
Any Folder
Klik ikon > di samping images untuk membukanya.Klik kanan pada folder images > New Folder.Buat folder berikut satu per satu:backgroundsicons
Buat File airplane.svg di dalam folder icons untuk meletakkan iconnya
Klik ikon > di samping icons untuk membukanya.
Klik kanan pada folder icons > New File.
Buat file bernama airplane.svg
Klik link “Open file using VS Code’s standard text/binary editor?”
Icon VSCode
Ctrl + V disini
Icon VSCode For Paste
Hasil akhirnya akan seperti ini :
Icon VSCode After Paste
Membaca Gambar
Gambar Yang Mana?
Success Checkout - Background Image
Image ini berfungsi :
Menyampaikan Konten Nyata : Gambar background memberi gambaran visual “in‑context” tentang halaman yang hendak ditampilkan ke user.Membuat Prototipe Lebih Hidup : Daripada tanpa background image, menggunakan background image bikin stakeholder atau user test lebih paham feel UI.
Cara Import?
Berfungsi mengambil Icon lalu di letakkan di folder Icon VSCode lalu di tampilkan di browser. Cara Melakukannya :
Klik di atas image Figma hingga seperti ini ( 299.96 x 150 ) :
Success Checkout - Background Image
Scroll ke bawah sampai seperti pada bilah kanan.
Success Checkout - Sidebar Background Image
Klik dropdown “Export” nya bertulis “1x” :
maka muncul :
Pilih “3x” dan klik tombol “Export Basic Interview”
Letakkan ditempat yang kamu mau.
Masuk ke proyek Empty-State-Airplane lalu masuk ke folder src/images/backgrounds.
Drag image tersebut sampai begini.
Success Checkout - After Import Background Image
Membaca Layout
Identifikasi Konten Desain
Link Berpindah Halaman
LInk berpindah halaman adalah bagian ketika user klik, user akan berpindah halaman satu ke halaman yang lain.
Button
Urutan
A → B → C → dst
Terbesar → besar → kecil → makin kecil → makin kecil -> dst
Structure Basic
Memulai Slicing
Di Bagian ini Kamu Akan Bisa :
✅ Slicing dari Figma ke VSCode✅ Mahir Tailwind CSS✅ Pixel Perfect✅ Responsive max 640px
Buka Folder Sebelumnya
Folder Proyek
Starter
Jalankan perintah di terminal.
npm install tailwindcss @tailwindcss/cli
Penjelasan:
PaketFungsitailwindcssMenginstal Tailwind CSS versi terbaru (saat ini versi 4), yaitu framework utility-first CSS.@tailwindcss/cliMenginstal CLI resmi dari Tailwind untuk membangun file CSS langsung dari terminal (tanpa perlu setup tambahan seperti PostCSS atau Webpack).
Pada side bar VSCode di dalam folder src bikin file bernama input.css .
Letakkan ini
/* src/input.css */
@import "tailwindcss";
Lalu pada
// package.json
{
"dependencies": {
"@tailwindcss/cli": "^4.1.4",
"tailwindcss": "^4.1.4"
}
}
Beri kode seperti ini:
// package.json
{
"scripts": {
"dev": "npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch"
},
"dependencies": {
"@tailwindcss/cli": "^4.1.4",
"tailwindcss": "^4.1.4"
}
}
Penjelasan:
BagianPenjelasan"scripts"Merupakan bagian dari package.json yang berisi perintah-perintah (alias) yang bisa kamu jalankan dengan npm run atau yarn."dev"Nama alias dari script ini. Kamu bisa menjalankannya dengan perintah npm run dev."npx @tailwindcss/cli"Menjalankan CLI Tailwind secara langsung tanpa perlu instal global.-i ./src/input.cssMengatur file input CSS. File ini harus berisi direktif seperti @tailwind base;, @tailwind components;, dan @tailwind utilities; tetapi tailwind 4 telah menuliskannya secara implisit.-o ./src/output.cssMengatur file output CSS yang akan dihasilkan oleh Tailwind (berisi semua utility class Tailwind yang digunakan di project).--watchMengaktifkan mode pemantauan. Tailwind akan terus memantau perubahan pada file HTML/JS/CSS yang kamu atur dan memperbarui output.css setiap kali ada perubahan.
Buat file index.html di src/ .
Letakkan html dasar di dalamnya.
<!-- src/index.html -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-2xl font-semibold">
Hello world!
</h1>
</body>
</html>
Penjelasan:
Baris HTMLPenjelasan<!doctype html>Mendeklarasikan bahwa dokumen ini adalah dokumen HTML5. Wajib di bagian paling atas.<html>Elemen root dari seluruh dokumen HTML. Semua elemen HTML berada di dalam tag ini.<head>Bagian yang berisi informasi meta (bukan tampilan), seperti encoding, viewport, stylesheet, dll.<meta charset="UTF-8">Menentukan karakter encoding sebagai UTF-8, sehingga bisa menampilkan karakter dari berbagai bahasa dengan benar.<meta name="viewport" content="width=device-width, initial-scale=1.0">Mengatur agar layout responsive di perangkat mobile dengan menyesuaikan lebar viewport.<link href="./output.css" rel="stylesheet">Menyertakan file CSS (output.css) yang dihasilkan oleh Tailwind agar dapat digunakan di HTML.<body>Bagian utama halaman yang berisi konten yang ditampilkan di browser.<h1 class="text-2xl font-semibold">Heading tingkat 1. Class text-2xl dan font-semibold dari Tailwind digunakan untuk mengatur ukuran dan ketebalan font.Hello world!Isi teks yang ditampilkan di halaman.</body> dan </html>Menutup elemen body dan html.
Tambahkan font Poppins pada tag head html nya
<!-- src/index.html -->
<link href="<https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap>" rel="stylesheet" />
Lalu tambahkan konfigurasi body seperti ini
/* src/input.css */
body {
font-family: "Poppins";
background-color: #DAE1E9;
}
Penjelasan:
Utility CSSNilaiPenjelasanfont-family"Poppins"Mengatur jenis huruf utama pada elemen <body> menjadi Poppins.background-color#DAE1E9Memberikan warna latar belakang pada elemen <body> dengan warna abu kebiruan terang (kode hex #DAE1E9).
Definisikan warna yang di pakai dalam desain seperti berikut di dalam input.css.
/* src/input.css */
@theme {
--color-empty-bg: #FAFAFA;
--color-empty-black: #1F1449;
--color-empty-grey: #9698A9;
--color-empty-blue-card: #5445E5;
--color-empty-shadow-card: #3F32B2;
--color-empty-shadow-rounded: #998EFD;
--color-empty-blue: #5C40CC;
}
Penjelasan:
Variabel CSSNilai WarnaPenjelasan--color-empty-bg#FAFAFAWarna latar belakang yang sangat terang, hampir putih.--color-empty-black#1F1449Warna hitam keunguan gelap, biasanya untuk teks utama atau judul.--color-empty-grey#9698A9Warna abu-abu netral, cocok untuk teks sekunder atau placeholder.--color-empty-blue-card#5445E5Warna biru keunguan terang untuk elemen kartu utama.--color-empty-shadow-card#3F32B2Warna lebih gelap dari blue-card, kemungkinan untuk bayangan kartu.--color-empty-shadow-rounded#998EFDWarna ungu muda, bisa digunakan untuk efek shadow dengan radius membulat.--color-empty-blue#5C40CCWarna biru keunguan, cocok untuk elemen primer seperti tombol atau ikon.
Slicing 1
Bonus Saldo - Container Mobile
Tujuan
Mendesain elemen dengan pendekatan mobile-first agar responsif, dengan lebar maksimum 640px dan posisi terpusat di layar.
Code
<body>
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen py-[151px] px-[37.5px] bg-empty-bg"></main>
</body>
Penjelasan
Atribut/Utility CSSFungsirelativeMengatur posisi elemen relatif terhadap dirinya sendiri (untuk posisi absolut anaknya).mx-autoMembuat margin kiri dan kanan otomatis → memusatkan secara horizontal.w-fullMengatur lebar elemen 100% dari kontainer induknya.max-w-[640px]Membatasi lebar maksimum ke 640px.overflow-hiddenMenyembunyikan isi yang meluap di luar kontainer.min-h-screenMenetapkan tinggi minimum sama dengan tinggi layar (100vh).py-[151px]Padding vertikal (atas dan bawah) sebesar 151px.px-[37.5px]Padding horizontal (kiri dan kanan) sebesar 37.5px.bg-empty-bgMenggunakan warna latar belakang dari variabel tema --color-empty-bg.
Slicing 2
Bonus Saldo - Child Container Mobile
Tujuan
Tag <form> ini digunakan untuk mengirim data dari pengguna ke halaman lain, yaitu success-checkout.html, ketika form dikirim (biasanya saat tombol submit ditekan).
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen py-[151px] px-[37.5px] bg-empty-bg">
<!-- dari sini -->
<form action="success-checkout.html"></form>
<!-- sampai sini -->
</main>
Penjelasan
AtributNilaiPenjelasan<form>-Elemen HTML yang digunakan untuk membungkus input dan tombol agar bisa dikirim.action"success-checkout.html"Menentukan URL tujuan saat form disubmit. Dalam hal ini, browser akan membuka halaman success-checkout.html setelah submit.
Slicing 3
Bonus Saldo - Container Bank
Tujuan
Elemen <section> ini digunakan untuk menampilkan sebuah kartu konten yang terstruktur secara vertikal, dengan jarak antar elemen, padding yang cukup, pojok membulat, warna latar belakang khusus, dan teks berwarna putih, serta siap menampung konten tambahan di dalamnya.
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen py-[151px] px-[37.5px] bg-empty-bg">
<form action="success-checkout.html">
<!-- dari sini -->
<section id="Card" class="flex flex-col gap-[41px] p-6 rounded-[34px] relative bg-empty-blue-card text-white overflow-hidden"></section>
<!-- sampai sini -->
</form>
</main>
Penjelasan
Atribut/Utility CSSPenjelasan<section>Elemen semantik untuk membungkus bagian tertentu dari konten.id="Card"Memberikan identitas unik agar bisa diakses lewat JavaScript atau anchor.flexMenjadikan kontainer sebagai flexbox (untuk tata letak fleksibel).flex-colMengatur arah tata letak flex ke kolom (vertikal).gap-[41px]Jarak antar anak elemen sebesar 41px.p-6Padding ke seluruh sisi sebesar 1.5rem (24px).rounded-[34px]Membuat sudut elemen melengkung sebesar 34px.relativePosisi relatif untuk pengaturan posisi anak dengan absolute.bg-empty-blue-cardMemberi warna latar belakang dari variabel --color-empty-blue-card.text-whiteWarna teks diatur menjadi putih.overflow-hiddenMenyembunyikan konten yang meluap dari batas elemen.
Slicing 4
Bonus Saldo - Child 1 Container Bank
Tujuan
Untuk menampilkan informasi identitas pengguna (nama) di sebelah kiri dan indikator status atau tombol aksi pembayaran ("Pay") dengan ikon pesawat di sebelah kanan, dalam satu baris yang rapi dan sejajar.
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen py-[151px] px-[37.5px] bg-empty-bg">
<form action="success-checkout.html">
<section id="Card" class="flex flex-col gap-[41px] p-6 rounded-[34px] relative bg-empty-blue-card text-white overflow-hidden">
<!-- dari sini -->
<div class="flex items-center justify-between relative z-20">
<div>
<h2 class="font-light text-sm leading-[21px]">Name</h2>
<p><strong class="font-medium text-xl leading-[30px]">Kezia Rifqi</strong></p>
</div>
<div class="flex items-center gap-[6px] shrink-0">
<img src="assets/images/icons/airplane.svg" alt="" class="size-6 shrink-0" />
<p class="font-medium">Pay</p>
</div>
</div>
<!-- sampai sini -->
</section>
</form>
</main>
Penjelasan
Atribut/Utility CSSPenjelasanflex items-center justify-betweenMenyusun elemen secara horizontal, sejajar secara vertikal, dan diberi ruang di antara (kiri-kanan).relative z-20Elemen diberi posisi relatif (untuk layering), dan z-index 20 agar muncul di atas elemen lain.h2.font-light text-sm leading-[21px]Teks "Name" berukuran kecil, tipis, dan tinggi baris 21px.strong.font-medium text-xl leading-[30px]Nama "Kezia Rifqi" tampil menonjol dengan font medium dan ukuran 30px.div.flex.items-center.gap-[6px]Menyusun ikon dan teks "Pay" secara horizontal dengan jarak 6px di antaranya.img.size-6Ikon pesawat dengan ukuran 1.5rem (24px × 24px).shrink-0Mencegah elemen (ikon dan kontainer kanan) mengecil saat ruang terbatas.
Slicing 5
Bonus Saldo - Child 2 Container Bank
Tujuan
Bagian ini bertujuan untuk menampilkan saldo (balance) pengguna, dengan label "Balance" di atas dan nominal saldo yang ditampilkan secara mencolok dan mudah dibaca.
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen py-[151px] px-[37.5px] bg-empty-bg">
<form action="success-checkout.html">
<section id="Card" class="flex flex-col gap-[41px] p-6 rounded-[34px] relative bg-empty-blue-card text-white overflow-hidden">
<div class="flex items-center justify-between relative z-20">
<div>
<h2 class="font-light text-sm leading-[21px]">Name</h2>
<p><strong class="font-medium text-xl leading-[30px]">Kezia Rifqi</strong></p>
</div>
<div class="flex items-center gap-[6px] shrink-0">
<img src="assets/images/icons/airplane.svg" alt="" class="size-6 shrink-0" />
<p class="font-medium">Pay</p>
</div>
</div>
<!-- dari sini -->
<div class="relative z-20">
<h2 class="font-light text-sm leading-[21px]">Balance</h2>
<p>
<strong class="font-medium text-[26px] leading-[39px] break-words">IDR <span id="formatted-price">280000000</span></strong>
</p>
</div>
<!-- sampai sini -->
</section>
</form>
</main>
<!-- dari sini -->
<script src="./js/format-idr.js"></script>
<!-- sampai sini -->
JavaScript
// ./js/format-idr.js
let priceElement = document.getElementById("formatted-price");
let priceValue = parseInt(priceElement.textContent, 10);
priceElement.textContent = new Intl.NumberFormat("id-ID", {currency: "IDR", minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(priceValue);
Penjelasan
Elemen/Utility CSSPenjelasandiv.relative z-20Posisi relatif dan z-index: 20, memastikan elemen ini berada di atas lapisan lainnya.h2.font-light text-sm leading-[21px]Menampilkan label "Balance" dengan ukuran kecil dan font tipis.strong.font-medium text-[26px] leading-[39px]Menonjolkan jumlah saldo dengan ukuran font 26px dan tinggi baris 39px.break-wordsMemastikan teks akan dipatahkan (wrap) jika terlalu panjang untuk satu baris.<span id="formatted-price">280000000</span>Elemen dinamis yang bisa diisi atau diformat menggunakan JavaScript, biasanya untuk menampilkan angka yang sudah diberi pemisah (misal: 280,000,000).
JavaScript
Baris KodePenjelasanlet priceElement = document.getElementById("formatted-price");Mengambil elemen dengan ID formatted-price dari DOM.let priceValue = parseInt(priceElement.textContent, 10);Mengambil teks dari elemen tersebut (misal: "280000000") dan mengubahnya menjadi angka (280000000).priceElement.textContent = ...Mengganti isi teks elemen dengan hasil format angka.new Intl.NumberFormat("id-ID", {...}).format(priceValue);Menggunakan Internationalization API untuk memformat angka sesuai dengan lokal Indonesia.
Slicing 6
Bonus Saldo - Decoration Container Bank
Tujuan
Ketiga elemen <span> ini tidak berisi konten dan hanya digunakan sebagai elemen latar visual (dekoratif)
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen py-[151px] px-[37.5px] bg-empty-bg">
<form action="success-checkout.html">
<section id="Card" class="flex flex-col gap-[41px] p-6 rounded-[34px] relative bg-empty-blue-card text-white overflow-hidden">
<div class="flex items-center justify-between relative z-20">
<div>
<h2 class="font-light text-sm leading-[21px]">Name</h2>
<p><strong class="font-medium text-xl leading-[30px]">Kezia Rifqi</strong></p>
</div>
<div class="flex items-center gap-[6px] shrink-0">
<img src="assets/images/icons/airplane.svg" alt="" class="size-6 shrink-0" />
<p class="font-medium">Pay</p>
</div>
</div>
<div class="relative z-20">
<h2 class="font-light text-sm leading-[21px]">Balance</h2>
<p>
<strong class="font-medium text-[26px] leading-[39px] break-words">IDR <span id="formatted-price">280000000</span></strong>
</p>
</div>
<!-- dari sini -->
<span class="absolute right-[-38px] top-[-45px] size-[107px] rounded-full bg-empty-shadow-rounded blur-[50px]"></span>
<span class="absolute left-[-29px] bottom-[-30px] size-[107px] rounded-full bg-empty-shadow-rounded blur-[50px]"></span>
<span class="absolute left-[35px] bottom-[-45px] bg-empty-shadow-card/50 rounded-[25px] right-[35px] h-[45px] blur-2xl"></span>
<!-- sampai sini -->
</section>
</form>
</main>
Penjelasan
ElemenKeterangan1right-[-38px] top-[-45px] → Bulatan blur muncul di pojok kanan atas. Ukuran 107px, full circle, blur 50px.2left-[-29px] bottom-[-30px] → Bulatan blur muncul di pojok kiri bawah. Sama ukuran dan blur seperti elemen pertama.3left-[35px] right-[35px] bottom-[-45px] → Persegi panjang blur horizontal di bagian bawah kontainer, dengan transparansi (/50) dan radius 25px.
Slicing 7
Bonus Saldo - Teks
Tujuan
Bagian <header> ini adalah judul dan penjelasan singkat promosi yang dirancang untuk tampil di tengah layar secara estetis, konsisten dengan desain mobile-first dan tema UI yang modern.
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen py-[151px] px-[37.5px] bg-empty-bg">
<form action="success-checkout.html">
<section id="Card" class="flex flex-col gap-[41px] p-6 rounded-[34px] relative bg-empty-blue-card text-white overflow-hidden">
<div class="flex items-center justify-between relative z-20">
<div>
<h2 class="font-light text-sm leading-[21px]">Name</h2>
<p><strong class="font-medium text-xl leading-[30px]">Kezia Rifqi</strong></p>
</div>
<div class="flex items-center gap-[6px] shrink-0">
<img src="assets/images/icons/airplane.svg" alt="" class="size-6 shrink-0" />
<p class="font-medium">Pay</p>
</div>
</div>
<div class="relative z-20">
<h2 class="font-light text-sm leading-[21px]">Balance</h2>
<p>
<strong class="font-medium text-[26px] leading-[39px] break-words">IDR <span id="formatted-price">280000000</span></strong>
</p>
</div>
<span class="absolute right-[-38px] top-[-45px] size-[107px] rounded-full bg-empty-shadow-rounded blur-[50px]"></span>
<span class="absolute left-[-29px] bottom-[-30px] size-[107px] rounded-full bg-empty-shadow-rounded blur-[50px]"></span>
<span class="absolute left-[35px] bottom-[-45px] bg-empty-shadow-card/50 rounded-[25px] right-[35px] h-[45px] blur-2xl"></span>
</section>
<!-- dari sini -->
<header class="mt-[91px] flex flex-col gap-[10px] w-[250px] mx-auto">
<h1 class="text-center font-semibold text-[32px] leading-[48px] text-empty-black">Big Bonus🎉</h1>
<p class="text-center font-light leading-[28px] text-empty-grey">We give you early credit so that you can buy a flight ticket</p>
</header>
<!-- sampai sini -->
</form>
</main>
Penjelasan
Elemen/Utility CSSPenjelasan<header>Elemen header berfungsi sebagai bagian pembuka konten (heading + deskripsi).mt-[91px]Memberikan margin atas sejauh 91px untuk memberi ruang dari elemen sebelumnya.flex flex-col gap-[10px]Menyusun konten header secara vertikal dengan jarak 10px antar elemen.w-[250px] mx-autoLebar maksimum 250px dan posisi di tengah secara horizontal.<h1>Judul utama: "Big Bonus🎉", dengan ukuran besar (32px), tinggi baris 48px, font tebal.text-center text-empty-blackTeks di tengah dan warna teks menggunakan variabel tema hitam.<p>Paragraf deskripsi singkat, dengan font ringan dan warna abu-abu dari tema.leading-[28px]Menentukan tinggi baris agar teks paragraf nyaman dibaca.
Slicing 8
Bonus Saldo - Button
Tujuan
Tombol ini berfungsi sebagai pemicu pengiriman form yang akan membawa pengguna ke halaman tujuan success-checkout.html .
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen py-[151px] px-[37.5px] bg-empty-bg">
<form action="success-checkout.html">
<section id="Card" class="flex flex-col gap-[41px] p-6 rounded-[34px] relative bg-empty-blue-card text-white overflow-hidden">
<div class="flex items-center justify-between relative z-20">
<div>
<h2 class="font-light text-sm leading-[21px]">Name</h2>
<p><strong class="font-medium text-xl leading-[30px]">Kezia Rifqi</strong></p>
</div>
<div class="flex items-center gap-[6px] shrink-0">
<img src="assets/images/icons/airplane.svg" alt="" class="size-6 shrink-0" />
<p class="font-medium">Pay</p>
</div>
</div>
<div class="relative z-20">
<h2 class="font-light text-sm leading-[21px]">Balance</h2>
<p>
<strong class="font-medium text-[26px] leading-[39px] break-words">IDR <span id="formatted-price">280000000</span></strong>
</p>
</div>
<span class="absolute right-[-38px] top-[-45px] size-[107px] rounded-full bg-empty-shadow-rounded blur-[50px]"></span>
<span class="absolute left-[-29px] bottom-[-30px] size-[107px] rounded-full bg-empty-shadow-rounded blur-[50px]"></span>
<span class="absolute left-[35px] bottom-[-45px] bg-empty-shadow-card/50 rounded-[25px] right-[35px] h-[45px] blur-2xl"></span>
</section>
<header class="mt-[91px] flex flex-col gap-[10px] w-[250px] mx-auto">
<h1 class="text-center font-semibold text-[32px] leading-[48px] text-empty-black">Big Bonus🎉</h1>
<p class="text-center font-light leading-[28px] text-empty-grey">We give you early credit so that you can buy a flight ticket</p>
</header>
<!-- dari sini -->
<button type="submit" class="mt-[50px] font-medium text-lg leading-[27px] text-white bg-empty-blue py-3.5 px-[50px] mx-auto rounded-[17px] flex hover:shadow-lg shadow-empty-blue/40 transition-all duration-300">Start Fly Now</button>
<!-- sampai sini -->
</form>
</main>
Penjelasan
Elemen/Utility CSSPenjelasantype="submit"Tombol ini akan mengirimkan data dari form jika ditekan.mt-[50px]Memberi jarak 50px dari elemen di atasnya.font-medium text-lg leading-[27px]Teks sedang (medium), ukuran besar (lg = sekitar 18px), dan tinggi baris 27px.text-whiteWarna teks putih agar kontras dengan latar belakang.bg-empty-blueWarna latar belakang tombol sesuai variabel tema biru.py-3.5 px-[50px]Padding vertikal (atas-bawah) 3.5 unit (~14px), horizontal (kanan-kiri) 50px.mx-autoTombol diposisikan secara horizontal di tengah layar.rounded-[17px]Sudut tombol dibuat membulat (border-radius 17px) untuk nuansa modern.flexMengaktifkan flexbox untuk menyusun konten tombol (berguna jika ada ikon + teks).hover:shadow-lgSaat tombol disentuh/mouse hover, muncul efek bayangan besar.shadow-empty-blue/40Bayangan dasar dengan warna biru (dari tema) dan transparansi 40%.transition-all duration-300Efek transisi halus selama 300ms saat hover terjadi.
Slicing 9
Success Checkout - Container
Tujuan
Elemen <main> ini adalah kerangka layout untuk halaman "success-checkout.html", didesain agar tampil rapi, modern, dan optimal di perangkat mobile.
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen pt-[212px] pb-[151px] px-[37.5px] bg-empty-bg"></main>
Penjelasan
Elemen/Utility CSSPenjelasanrelativeElemen menjadi konteks posisi untuk elemen absolute di dalamnya.mx-autoMenjadikan elemen ini berada di tengah horizontal.w-fullLebar elemen dibuat penuh dari parent-nya.max-w-[640px]Membatasi lebar maksimum hanya 640px (mobile-first design).overflow-hiddenMenyembunyikan elemen yang meluap dari batas area.min-h-screenTinggi minimum 100% dari tinggi layar perangkat.pt-[212px] pb-[151px]Padding atas 212px dan bawah 151px, memberi ruang konten di dalamnya.px-[37.5px]Padding kiri dan kanan sebesar 37.5px.bg-empty-bgBackground menggunakan warna tema dari variabel CSS.
Slicing 10
Success Checkout - Background Image
Tujuan
Gambar ini adalah ikon sukses berformat .png yang ditampilkan di tengah halaman untuk memperkuat pesan keberhasilan pada halaman seperti success-checkout.html
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen pt-[212px] pb-[151px] px-[37.5px] bg-empty-bg">
<!-- dari sini -->
<img src="assets/images/backgrounds/success-co.png" alt="image" class="h-[150px] shrink-0 mx-auto" />
<!-- sampai sini -->
</main>
Penjelasan
Elemen/Utility CSSPenjelasansrc="assets/images/backgrounds/success-co.png"Menunjukkan sumber gambar berupa file .png, ilustrasi keberhasilan.alt="image"Deskripsi alternatif untuk pembaca layar atau jika gambar gagal dimuat.class="h-[150px]"Mengatur tinggi gambar tetap 150px.shrink-0Mencegah gambar mengecil jika berada dalam kontainer fleksibel (flex).mx-autoMembuat gambar berada di tengah secara horizontal.
Slicing 11
Success Checkout - Teks
Tujuan
Elemen <header> ini adalah bagian dari tampilan halaman sukses yang memberikan ucapan selamat dengan desain ramah pengguna dan mengajak pengguna untuk bersemangat melanjutkan perjalanan mereka.
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen pt-[212px] pb-[151px] px-[37.5px] bg-empty-bg">
<img src="assets/images/backgrounds/success-co.png" alt="image" class="h-[150px] shrink-0 mx-auto" />
<!-- dari sini -->
<header class="mt-[80px] flex flex-col gap-[10px] w-[261px] mx-auto">
<h1 class="text-center font-semibold text-[32px] leading-[48px] text-empty-black">Well Booked 😍</h1>
<p class="text-center font-light leading-[28px] text-empty-grey">Are you ready to explore the new world of experiences?</p>
</header>
<!-- sampai sini -->
</main>
Penjelasan
<header>:
Elemen/Utility CSSPenjelasanmt-[80px]Memberi margin atas sebesar 80px dari elemen sebelumnya.flex flex-colMenyusun elemen di dalamnya secara kolom (vertikal).gap-[10px]Memberi jarak antar elemen sebesar 10px.w-[261px]Lebar maksimum header dibatasi 261px.mx-autoMembuat elemen terpusat secara horizontal.
<h1>:
Elemen/Utility CSSPenjelasantext-centerTeks diratakan ke tengah.font-semiboldMengatur ketebalan teks menjadi semi-bold.text-[32px]Ukuran huruf 32px.leading-[48px]Jarak antar baris 48px.text-empty-blackWarna teks menggunakan variabel tema --color-empty-black.
<p>:
Elemen/Utility CSSPenjelasantext-centerTeks diratakan ke tengah.font-lightMengatur ketebalan teks menjadi tipis.leading-[28px]Jarak antar baris 28px.text-empty-greyWarna teks menggunakan variabel tema --color-empty-grey.
Slicing 12
Success Checkout - Button
Tujuan
Elemen ini berfungsi sebagai tombol ajakan yang dirancang responsif dan menarik untuk pengguna mengakses data pemesanan mereka dengan nyaman.
Code
<main class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen pt-[212px] pb-[151px] px-[37.5px] bg-empty-bg">
<img src="assets/images/backgrounds/success-co.png" alt="image" class="h-[150px] shrink-0 mx-auto" />
<header class="mt-[80px] flex flex-col gap-[10px] w-[261px] mx-auto">
<h1 class="text-center font-semibold text-[32px] leading-[48px] text-empty-black">Well Booked 😍</h1>
<p class="text-center font-light leading-[28px] text-empty-grey">Are you ready to explore the new world of experiences?</p>
</header>
<!-- dari sini -->
<a href="#" class="mt-[50px] font-medium w-fit text-lg leading-[27px] text-white text-center bg-empty-blue py-3.5 px-[50px] mx-auto rounded-[17px] flex hover:shadow-lg shadow-empty-blue/40 transition-all duration-300">My Bookings</a>
<!-- sampai sini -->
</main>
Penjelasan
Elemen/Utility CSSPenjelasanhref="#"Tautan dummy, biasanya nanti diisi ke halaman seperti bookings.html.mt-[50px]Memberi jarak ke atas sebesar 50px.font-mediumMengatur ketebalan teks menjadi medium.w-fitLebar tombol menyesuaikan isi teks.text-lgUkuran teks besar (sekitar 18px).leading-[27px]Jarak antar baris teks 27px.text-whiteWarna teks putih.text-centerMeratakan teks ke tengah.bg-empty-blueWarna latar menggunakan variabel tema --color-empty-blue.py-3.5 / px-[50px]Padding vertikal dan horizontal untuk ukuran tombol yang nyaman.mx-autoMenempatkan tombol di tengah secara horizontal.rounded-[17px]Membuat sudut tombol melengkung 17px.flexMenjadikan elemen sebagai flex container (berguna jika diisi ikon juga).hover:shadow-lgMenambahkan bayangan besar saat kursor diarahkan.shadow-empty-blue/40Bayangan dengan warna biru transparan (40%).transition-all duration-300Efek transisi halus selama 300ms saat hover.
Penutup
Semoga hasil slicing ini dapat memberikan manfaat dan wawasan baru. Memahami struktur serta alur slicing dengan baik akan sangat berguna ke depannya baik untuk pengembangan proyek, sebagai referensi desain, aset komersial, maupun untuk diintegrasikan dengan berbagai bahasa pemrograman secara lebih efisien.
Jangan lupa kunjungi website resmi shaynakit.com untuk mendapatkan berbagai desain dan file HTML gratis yang dapat langsung digunakan dalam proyek Anda.
Terima kasih!
Akses kelas selamanya
Masuk /
Daftar
.png)
