Daftar Isi
- Pendahuluan
- Persiapan
- Langkah-Langkah Mudah Ekspor Gambar di Figma
- Optimasi Gambar di HTML
- Penutup
Pendahuluan
Saat melakukan slicing desain Figma ke HTML, salah satu elemen penting yang perlu diperhatikan adalah penggunaan tag <img>. Meskipun terlihat sederhana, penggunaan tag <img> yang kurang tepat dapat menyebabkan berbagai masalah seperti gambar pecah, tidak responsif, hingga tampilan layout yang berantakan saat gambar diganti.
Pada artikel ini, kita akan membahas cara menggunakan tag <img> yang benar saat slicing desain dari Figma ke HTML, agar gambar tetap tampil optimal di berbagai perangkat dan tidak rusak saat diganti. Dengan mengikuti praktik terbaik ini, proses pengembangan antarmuka akan lebih stabil dan efisien.
Sebagai studi kasus, kita akan menggunakan desain dari shaynakit.com, yaitu Pastilaris SaaS Website Design, untuk menunjukkan implementasi tag <img> yang baik dan benar.
Persiapan
- Figma file
- Code Editor (VSCode direkomendasikan)
Langkah-Langkah Mudah Ekspor Gambar di Figma
- Pilih gambar yang akan di ekspor, pada sidebar kanan bagian Export klik ikon +. Pilih PNG kemudian atur resolusi ke 3x atau lebih tinggi agar gambar tidak pecah, defaultnya adalah 1x. Jika sudah sesuai klik Export.
- Lakukan hal yang sama untuk aset lainnya, tapi pada kasus ini sebelum mengekspor gambar kita perlu sembunyikan dulu efek Drop Shadow caranya klik ikon mata pada bagian Effects. Nantinya kita akan membuat kostum Drop Shadow menggunakan TailwindCSS.
Optimasi Gambar di HTML
Kurang lebih kodenya akan seperti berikut:
<div class="relative shrink-0 w-[456px] h-[510px]">
<img
src="./assets/images/thumbnails/testimonial.png"
alt="image"
class="absolute w-[350px] h-[470px] left-10 bottom-0 rounded-[26px] object-cover"
/>
<img
src="./assets/images/thumbnails/growth.png"
alt="image"
class="absolute w-[174px] h-[94px] top-0 left-0 rounded-2xl drop-shadow-custom object-cover"
/>
<img
src="./assets/images/thumbnails/funding.png"
alt="image"
class="absolute w-[136px] h-[160px] bottom-[50px] right-0 rounded-2xl drop-shadow-custom object-cover"
/>
</div>
Jika diperhatikan, pada setiap tag <img> terdapat class object-cover. Class ini berfungsi untuk menjaga proporsi gambar agar tidak terlihat gepeng atau terdistorsi saat dimuat dalam ukuran tertentu. Dengan object-cover, gambar akan mengisi seluruh area yang disediakan tanpa mengubah aspek rasio aslinya.
Maka hasilnya akan seperti berikut ini:
Sekarang, coba kita hapus class object-cover dan ganti gambar dengan URL berikut:
<https://plus.unsplash.com/premium_photo-1661772836015-317b6968401b?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D>
Maka kodenya akan menjadi seperti ini:
<div class="relative shrink-0 w-[456px] h-[510px]">
<img
src="<https://plus.unsplash.com/premium_photo-1661772836015-317b6968401b?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D>"
alt="image"
class="absolute w-[350px] h-[470px] left-10 bottom-0 rounded-[26px] "
/>
<img
src="<https://plus.unsplash.com/premium_photo-1661772836015-317b6968401b?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D>"
alt="image"
class="absolute w-[174px] h-[94px] top-0 left-0 rounded-2xl drop-shadow-custom"
/>
<img
src="<https://plus.unsplash.com/premium_photo-1661772836015-317b6968401b?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D>"
alt="image"
class="absolute w-[136px] h-[160px] bottom-[50px] right-0 rounded-2xl drop-shadow-custom"
/>
</div>
Maka hasilnya akan seperti ini:
Sekarang tambahkan class object-cover di setiap tag img
<div class="relative shrink-0 w-[456px] h-[510px]">
<img
src="<https://plus.unsplash.com/premium_photo-1661772836015-317b6968401b?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D>"
alt="image"
class="absolute w-[350px] h-[470px] left-10 bottom-0 rounded-[26px] object-cover"
/>
<img
src="<https://plus.unsplash.com/premium_photo-1661772836015-317b6968401b?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D>"
alt="image"
class="absolute w-[174px] h-[94px] top-0 left-0 rounded-2xl drop-shadow-custom object-cover"
/>
<img
src="<https://plus.unsplash.com/premium_photo-1661772836015-317b6968401b?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D>"
alt="image"
class="absolute w-[136px] h-[160px] bottom-[50px] right-0 rounded-2xl drop-shadow-custom object-cover"
/>
</div>
Makan hasilnya akan seperti ini
Penutup
Itulah pembahasan lengkap tentang cara menggunakan tag <img> yang benar saat slicing desain dari Figma ke HTML. Dengan memahami penggunaan class seperti object-cover, memilih format gambar yang tepat, serta menjaga aspek rasio, kamu bisa memastikan tampilan gambar tetap rapi, responsif, dan tidak rusak saat diganti.
Semoga tutorial ini membantu kamu dalam proses konversi desain Figma ke kode yang lebih stabil dan profesional. Jangan ragu untuk terus bereksperimen dan menerapkan best practice lainnya dalam pengembangan front-end.
