Skip to main content

Lightning Design System

Lightning Design System (LDS) adalah kerangka desain dan sistem komponen yang dikembangkan oleh Salesforce untuk menciptakan antarmuka pengguna yang konsisten dan modern di seluruh ekosistem Salesforce. LDS menyediakan panduan desain, komponen UI, ikon, dan utilitas CSS yang dapat digunakan oleh pengembang dan desainer untuk membangun aplikasi yang selaras dengan estetika dan fungsionalitas Salesforce Lightning Experience.

Fitur LDS​

Beberapa aspek kunci dari Lightning Design System:

  1. Design Tokens: Variabel desain yang dapat dikonfigurasi untuk warna, font, spacing, dan elemen desain lainnya.
  2. Layout dan Grid System: Sistem grid responsif untuk mengatur elemen di halaman.
  3. Komponen UI: Kumpulan komponen siap pakai seperti button, form, modal, dll.
  4. Ikon: Set ikon yang konsisten dan dapat disesuaikan.
  5. Aksesibilitas: Panduan dan praktik terbaik untuk membuat aplikasi yang aksesibel.
  6. Utilitas CSS: Kelas-kelas CSS untuk spacing, sizing, dan styling cepat.

Integrasi LDS dengan Lightning Base Components​

Berikut adalah contoh bagaimana LDS berintegrasi dengan Lightning Base Components:

<template>
    <lightning-card title="Form dengan LDS Styling">
        <div class="slds-m-around_medium">
            <div class="slds-form-element slds-m-bottom_small">
                <lightning-input label="Nama" type="text" class="slds-input"></lightning-input>
            </div>
            <div class="slds-form-element slds-m-bottom_small">
                <lightning-input label="Email" type="email" class="slds-input"></lightning-input>
            </div>
            <lightning-button label="Kirim" variant="brand" class="slds-m-top_small slds-button slds-button_brand"></lightning-button>
        </div>
    </lightning-card>
</template>

Dalam contoh di atas, kita menggunakan kelas-kelas CSS dari Lightning Design System (seperti slds-m-around_medium, slds-form-element, slds-m-bottom_small) untuk memberikan styling dan spacing yang konsisten pada komponen-komponen Lightning.

Diagram Hubungan LDS dalam Ekosistem Salesforce​

Diagram ini menunjukkan bagaimana Lightning Design System menjadi fondasi untuk styling dan desain, yang kemudian diterapkan pada Lightning Base Components dan Custom Lightning Web Components. Semua ini berjalan di atas Salesforce Lightning Platform, yang menghasilkan aplikasi yang ditampilkan melalui Lightning Experience dan Salesforce Mobile App.

Keuntungan Menggunakan Lightning Design System​

  1. Konsistensi: Memastikan konsistensi visual di seluruh aplikasi Salesforce.
  2. Efisiensi: Mempercepat proses desain dan pengembangan dengan komponen dan utilitas yang sudah ada.
  3. Responsif: Dirancang untuk bekerja dengan baik di berbagai ukuran layar dan perangkat.
  4. Aksesibilitas: Membantu pengembang membuat aplikasi yang lebih aksesibel.
  5. Fleksibilitas: Dapat disesuaikan dan diperluas untuk kebutuhan spesifik.
  6. Dokumentasi Lengkap: Menyediakan panduan dan contoh penggunaan yang detail.

Dengan menggunakan Lightning Design System, pengembang dan desainer dapat menciptakan aplikasi Salesforce yang tidak hanya fungsional tetapi juga estetis dan konsisten dengan pengalaman pengguna Salesforce secara keseluruhan.